一篇超详细的vue项目前端自动化测试教学！（一）-阿里云开发者社区

一篇超详细的vue项目前端自动化测试教学！（一）

2022-12-28 360

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 一篇超详细的vue项目前端自动化测试教学！

为什么需要写前端自动化

大部分企业为了追求开发效率，所以并没有去强制要求员工写前端自动化测试的代码。另一部分企业则会要求前端开发额外写前端自动化测试。那么写和不写到底有哪些区别呢？

不写前端自动化测试代码：

修改某个模块功能时，其它模块也受影响，很难快速定位bug
多人开发代码越来越难以维护
不方便迭代，代码重构困难
代码质量差，参差不齐

增加自动化测试后：

我们为核心功能编写测试后可以保障项目的可靠性

强迫开发者编写更容易被测试的代码，提高代码质量

编写的测试有文档的作用，方便维护

开发速度有所变慢，因为要多写一份测试代码（手动滑稽）

实际上仅仅就为了可靠性、码质量、可维护性是完全值得你去写前端自动化的。作为一名前端开发人员掌握自动化测试技术是必不可少的，就算你工作中不用，也可以放在你的简历中，它是一道靓丽的风景线。

测试介绍

测试在工作中分为以下两个大块：

黑盒测试和白盒测试

黑盒测试一般也被称为功能测试，黑盒测试要求测试人员将程序看作一个整体，不考虑其内部结构和特性，只是按照期望验证程序是否能正常工作。（薪资12k见顶）
白盒测试是基于代码本身的测试，一般指对代码逻辑结构的测试。(薪资10k起)

测试分类

单元测试(Unit Testing)

单元测试是指对程序中最小可测试单元进行的测试，例如测试一个函数、一个模块、一个组件…

集成测试(Integration Testing)

将已测试过的单元测试函数进行组合集成暴露出的高层函数或类的封装，对这些函数或类进行的测试。

端到端测试(E2E Testing)

打开应用程序模拟输入，检查功能以及界面是否正确。

不过作为一名前端，我们需要写哪些测试呢？答案是：

单元测试
端到端测试(E2E)

接下来就带你们来实践一下。

新建项目

我们新建个vue2的项目，选择下面这些

注意我们到了选择单元测试框架这一步的时候，选择jest：

然后端对端我们选择：

这样继续安装就好了，直到项目建好。

单元测试

单元测试（unit testing），是指对软件中的最⼩小可测试单元进⾏行行检查和验证。例如一个函数。

单测针对组件或者函数或者模块（开发人员知道具体逻辑）

前面建项目的时候提到了jest，实际上在vue中，推荐⽤ Mocha+chai 或者jest来做单元测试，但咱们这边使⽤用 jest 来演示，两者语法基本⼀致。

测试某个函数

在src目录下建立utils目录，再在utils下建立index.js，并写个add函数导出：

export function add(x,y) {
    return x + y
}

在tests下的unit下的example.spec.js中修改（当然也可以新建一个*.spec.js,固定格式的文件）

// import { shallowMount } from '@vue/test-utils'
// import HelloWorld from '@/components/HelloWorld.vue'
// describe('HelloWorld.vue', () => {
//   it('renders props.msg when passed', () => {
//     const msg = 'new message'
//     const wrapper = shallowMount(HelloWorld, {
//       propsData: { msg }
//     })
//     expect(wrapper.text()).toMatch(msg)
//   })
// })
import { add } from "@/utils/index.js";
describe("测试加法函数", () => {
  //测试代码可读性最好
  //分组
  it("一个具体的功能测试，测测试数字相加", () => {
    expect(add(1, 2)).toBe(3);
  });
  it("一个具体的功能测试，测测试数字和字符串相加", () => {
    expect(add("a", 2)).toBe("a2");
  });
  it("一个具体的功能测试，测测试数字字符串相加", () => {
    expect(add("1", 2)).toBe(3);
  });
});

执行：

npm run test:unit

显然"1" + 2 不是3，所以测试是报了错的。

这个案例我们就用到了4个api。

api介绍

describe ：定义⼀一个测试套件
it ：定义⼀一个测试⽤用例例
expect ：断⾔言的判断条件
toBe ：断⾔言的⽐比较结果

测试vue组件

components下新建 zhifeiji.vue 文件：

<template>
  <div>
    <span>{{ msg }}</span>
    <span>{{ msg1 }}</span>
    <button class="btn" @click="changeMsg">点我</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "vue test",
      msg1: "你好",
    };
  },
  created() {
    this.msg = "aftermounted";
  },
  mounted() {
    this.msg1 = "测试下vue组件";
  },
  methods: {
    changeMsg() {
      this.msg = "click over";
    },
  },
};
</script>

views目录下的home组件中引入：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <zhifeiji_comp></zhifeiji_comp>
  </div>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
import zhifeiji_comp from "@/components/zhifeiji.vue";
export default {
  name: "home",
  components: {
    // HelloWorld,
    zhifeiji_comp,
  },
};
</script>

在tests目录下的unit目录下建立 zhifeiji.spec.js：

import Vue from "vue";
import zhifeijiComp from "@/components/zhifeiji.vue";
import { mount } from "@vue/test-utils";
describe("测试zhifeiji组件", () => {
  it("测试初始化的data", () => {
    expect(zhifeijiComp.data().msg).toBe("vue test");
  });
  //created和mounted里数据测试都是一样的
  it("测试新建完毕后，create生命周期后的数据", () => {
    //created
    let vm = new Vue(zhifeijiComp).$mount();
    expect(vm.msg).toBe("aftermounted");
  });
  it("测试新建完毕后，create生命周期后的数据", () => {
    //mounted
    let vm = new Vue(zhifeijiComp).$mount();
    expect(vm.msg1).toBe("测试下vue组件");
  });
  //点击事件测试
  it("测试点击后，msg的改变", () => {
    // $mount处理不了用户交互，所以我们要用到vue官方推荐的@vue/test-utils
    let wrapper = mount(zhifeijiComp);
    expect(wrapper.vm.msg).toBe("aftermounted");
    //点击一下
    wrapper.find(".btn").trigger("click");
    expect(wrapper.vm.msg).toBe("click over");
  });
});