前端自动化测试教程

前端自动化测试

很多公司为了追求产品的迭代速率，所以不会强制要求前端去做一些自动化测试的措施。而一般比较大型的公司都会要求开发做好自动化测试的工作，进而保证产品的质量。

如果不给前端增加自动化测试的话，会导致：

修改代码后容易造成 BUG 而不被查出
不方便后续开发接手之后的维护
代码质量差，进而影响产品质量

但是如果给前端增加自动化测试，好处很多：

公用功能增加测试，保证整个项目稳定性
组件增加测试，保证项目交互的正确性
方便后续对于项目的维护和迭代

但是前端自动化测试是需要成本的，时间成本、学习成本。

但是为了代码的可靠性、可维护性、质量，这都是值得的，而前端做自动化测试也可以提高你的眼界，并在简历中为你添彩。

前端自动化测试的分类

测试主要分成下面几类：

单元测试：对函数、组件、模块进行测试
集成测试：可以理解为批量对单元进行测试
端测试：也就是模拟一些页面行为，进行测试

作为一个前端，单元测试、端测试是一定要做好的~

前端自动化测试的实践

我们利用一个 Vue2 的项目，来对前端自动化测试进行一下实践。

新建 Vue2 项目

我们可以使用 Vue-cli 来创建 Vue2 项目。

在新建的时候，需要选择以下的选项：

并且选择 test-config。

到了单元测试这一步，我们要选择 Jest 这个库。

端测试我们选择 Cypress。

现在一个全新的 Vue2 项目就新建好了。

单元测试

我们可以用单元测试来测一个函数、组件、模块。

如果我们想测一个函数的话，可以先建一个文件 index.js 并编写函数。

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

接着我们开始测一下这个函数，了解一下测试语法：

describe：定义一个测试域，传入描述标题和测试函数
it：定义一个测试用例
expect：将函数执行返回的结果，包装成一个断言对象
toBe：断言对象身上的方法，功能是判断相等

我们需要在 test/unit/example.spec.js 中编写代码。

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

可以看到几个测试用例的报告。

组件测试

我们需要先创建一个 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>

新建完组件之后，我们需要在 Home 组件中去引入：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <hh_comp></hh_comp>
  </div>
</template>

<script>import hh_comp from "@/components/h.vue";

export default {
  name: "home",
  components: {
    h_comp,
  },
};
</script>

接着我们需要在 test/unit/hh.spec.js 中编写测试代码：

import Vue from "vue";
import hhComp from "@/components/hh.vue";
import { mount } from "@vue/test-utils";

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

想要测试交互的话，需要用到一些测试库，我们可以使用 @vue/test-units

我们可以运行：