关于前端:一篇超详细的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。

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

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");
  });
});

如果测试用户交互的话，须要用到官网举荐的 @vue/test-utils，执行 cnpm i @vue/test-utils –save，相干文档在 vue 官网

在 @vue/test-utils 中引入 mount 代替 vue 的 $mount 的是因为 $mount 的是虚构的，存在虚拟内存中，解决不了 dom，所以用 mount（对不对我不晓得，这句话仅供参考）

到这里为止的话，我这个 vue 组件的测试，应该是通过的才对，执行 npm run test:unit 验证一下：

jest ⾃自带覆盖率，如果⽤用的 mocha，须要使⽤用 istanbul 来统计覆盖率。（所以我举荐 jest）

npm run test:unit

这个显著是不通过的，须要将途中的 3 改为正确的‘12’。
改完后再次执行命令。

这么一来测试是通过了，然而如同无奈直观看到覆盖率，所以咱们来对 package.json 中的 jest 进行下批改，在下图的地位中：
改为：

"jest": {
    "collectCoverage": true,
    "collectCoverageFrom": ["src/**/*.{js,vue}"],
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    },
    "moduleNameMapper": {"^@/(.*)$": "<rootDir>/src/$1"
    },
    "snapshotSerializers": ["<rootDir>/node_modules/jest-serializer-vue"],
    "testURL": "http://localhost"
  }

假使有个 jest.config.js 那么就在 moduleFileExtensions 上一行退出，这个文件是对 jest 的配置（没有不用改）：

"collectCoverage": true,
"collectCoverageFrom": ["src/**/*.{js,vue}"]

改好后，咱们再来执行下 npm run test:unit 命令，

到此，咱们就能清晰看见测试的一个笼罩状况！这个覆盖率会生成一个报告，生成的报告文件在 coverage 目录下，关上能够看到这么个鬼货色：

这么一来，测试代码笼罩状况就一览无遗了。

这个测试报告能够很准确的看到咱们哪些没测试，哪些测试了。

我在 zhifeiji.vue 里加点货色不测试，来看看后果：

<template>
  <div>
    <span id="msg">{{msg}}</span>
    <span>{{msg1}}</span>
    <button class="btn" @click="changeMsg"> 点我 </button>
  </div>
</template>

<script>
export default {data() {
    return {
      msg: "vue test",
      msg1: "你好",
      msg2:'这个不测试'
    };
  },
  created() {
    this.msg = "aftermounted";
    this.msg2 = '不测试扣了我 100 块';
  },
  mounted() {this.msg1 = "测试下 vue 组件";},
  methods: {changeMsg() {if(this.msg === '1'){this.msg = "click false";}else{this.msg = "click over";}
      
    },
  },
};
</script>

下面代码中 msg2 无关的都是没测试的，执行下测试命令看报告：

红框局部可见着这次 zhifeiji.vue 覆盖率没有 100% 了，上 main 蓝色的咱们能够点击进去。

一步步点进来，会来到被测试的代码文件。

装置 husky：

cnpm i husky –save
# yarn、cnpm、npm 随便

配置 husky，在 package.json 配置：

"husky": {
    "hooks": {
      "pre-commit": "npm test",
      "pre-push": "npm test",
      "...": "..."
    }
}

当然这是文档上的案例，咱们改下：

"husky": {
    "hooks": {"pre-commit": "npm run test:unit"}
}

代表再提交（commit）前先执行 npm run test:unit。

验证
批改测试代码文件 zhifeiji.spec.js:
由：

it("测试新建结束后，create 生命周期后的数据", () => {
    //created
    let vm = new Vue(zhifeijiComp).$mount();
    expect(vm.msg).toBe("aftermounted");
});

改为：

it('测试新建结束后，create 生命周期后的数据',() => {
    //created
    let vm = new Vue(zhifeijiComp).$mount()
    expect(vm.msg).toBe('aftermounted1')
})

这样测试必定是不通过的。

这时，测试不通过，咱们再来提交代码，add 后再 commit：

可见 commit 是失败了，没有通过！

Tip：如果你们这么配置 husky 不失效，请升高 husky 版本或者应用新的 husky 的形式，husky 在 6.0.0 版本开始就应用了新的配置办法，具体看此文：https://blog.csdn.net/MrWeb/a…

这时咱们如果想让他通过的话就得改代码了，让其正确了能力提交，这样才是安全可靠的一份代码。

批改操作：
1. 正文掉 tests 目录下 e2e 中的 test.js，e2e 咱们前面讲
2.example.spec.js 中的 3 批改为 ’12’
3.zhifeiji.spec.js 的 aftermounted1 复原为 aftermounted

通过这三步操作，咱们就算是解决了测试的报错，而后 commit：

代码提交胜利！

e2e 针对利用，站在测试人员的角度，没有什么 mount 加载，只有按钮页面，输入框，文本等

借⽤浏览器器的能力，站在⽤户测试⼈员的角度，输⼊框，点击按钮等，齐全模仿用户，这个和具体的框架关系不大，齐全模仿浏览器行为

将 views 下的 Home 组件的：

<HelloWorld msg="Welcome to Your Vue.js App"></HelloWorld>

相干代码复原。
看看 tests 目录下 e2e 目录下的 spec 下的 test.js，有这么一段：

// https://docs.cypress.io/api/introduction/api.html

describe('My First Test', () => {it('Visits the app root url', () => {// cy.visit('/')
    // cy.contains('h1', 'Welcome to Your Vue.js App')
  })
})

将 cy 正文的那块复原。

describe('My First Test', () => {it('Visits the app root url', () => {cy.visit('/')
    cy.contains('h1', 'Welcome to Your Vue.js App')
  })
})

这是测试代码，如果咱们不做后面的复原操作的话，测试必定是不通过的

执行npm run test:e2e，进行测试

我的项目会启动，并且会弹出一个有 ok 的弹窗，咱们间接确定，还会有测试文件的 js，抉择对应的测试文件点进去：

这样代表测试通过了！

再来测试一个 about 页：

// https://docs.cypress.io/api/introduction/api.html

describe('My First Test', () => {it('Visits the app root url', () => {cy.visit('/')
    cy.contains('h1', 'Welcome to Your Vue.js App')
  })
  it('测试 about 页', () => {
    // 拜访 about
    cy.visit('about')
    cy.contains('h1', 'This is an about page')
  })
})

Tip：about 页面测试不通过的，请将路由模式改为 history 或者将测试文件 test.js 中的 cy.visit(‘about’)改为 cy.visit(‘#/about’)

后测的 about，就最初关上了 about 页，也停留在了 about 页面

这些都是页面某个元素的文本的测试，那么咱们再来个交互试试，在咱们的 zhifeiji 组件上有个点击事件，咱们来试试：

describe('My First Test', () => {it('Visits the app root url', () => {cy.visit('/')
    cy.contains('h1', 'Welcome to Your Vue.js App')
  })
  it('测试 about 页', () => {
    // 拜访 about
    cy.visit('#/about')
    cy.contains('h1', 'This is an about page')
  })
  it('zhifeiji 组件',() => {
    // 拜访根目录
    cy.visit('/')
    cy.contains('#msg','aftermounted')
    cy.get('button').click()// 点击 button 元素
    cy.contains('#msg','click over')
  })
})

右边那一条条能够点击，点击不同的项，也会进入不同的事件状态，例如我点了 CONTAINS，文本变成了 click over。

题外话：测试页面前后差别，或者两个页面的差别能够用 page-monitor；地址：https://github.com/fouber/pag…

好了，明天的前端自动化测试就讲到这里。

热门举荐：

全栈开发微信公众号

typescript 入门

vue 中应用 JSX

前端基本知识

关于前端:一篇超详细的vue项目前端自动化测试教学

为什么须要写前端自动化

测试介绍

黑盒测试和白盒测试

测试分类

新建我的项目

单元测试

测试某个函数

api 介绍

测试 vue 组件

测试覆盖率

如何测试不通过就阻止代码 git 提交

E2E 测试