使用Jest实现Vue自动化测试

lsekfe

       前言
　　在开始前，我们先来聊一下什么是自动化测试。通常，在需求确定以后，测试会编写测试用例，然后，根据测试用例中描述的规程一步步执行测试，得到实际结果与期望结果的比较。在此过程中，为了节省人力、时间或硬件资源，提高测试效率，便引入了自动化测试的概念。
　　那么知道了什么是自动化测试以后，我们来看看前端如何实现自动化测试。通常有两种方案可以实现前端自动化测试
　　unit-test（单元测试）：对应测试中的白盒测试。在测试框架中执行代码，并且给出预期输出，然后对实际输出和预期输出进行比较。以此来判断是否通过测试。
　　e2e-test（端到端测试）：对应测试中的黑盒测试。项目启动以后，测试框架会模拟用户的行为，例如点击，输入等操作。然后观察页面中的元素展现形式是否和预期一致。以此来判断是否通过测试。
　　今天，我要介绍的就是在 vue 项目，如何使用 jest 实现单元测试
　　集成 Jest
　　使用vue-cli新建的项目可以直接选择jest作为测试框架，如果是已创建的vue-cli项目，可以使用以下命令集成jest

1. vue add unit-jest

复制代码

Jest 配置文件
　　集成 Jest 后，会在根目录下生成一个jest.config.js文件。并配置了@vue/cli-plugin-unit-jest，这个预设。预设配置为如下内容。

1. module.exports = {
   
2. 　　moduleFileExtensions: [
   
3. 　　"js",
   
4. 　　"jsx",
   
5. 　　"json",
   
6. 　　// tell Jest to handle *.vue files
   
7. 　　"vue"
   
8. 　　],
   
9. 　　transform: {
   
10. 　　// process *.vue files with vue-jest
    
11. 　　"^.+\\.vue$": require.resolve("vue-jest"),
    
12. 　　".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": require.resolve(
    
13. 　　"jest-transform-stub"
    
14. 　　),
    
15. 　　"^.+\\.jsx?$": require.resolve("babel-jest")
    
16. 　　},
    
17. 　　transformIgnorePatterns: ["/node_modules/"],
    
18. 　　// support the same @ -> src alias mapping in source code
    
19. 　　moduleNameMapper: {
    
20. 　　"^@/(.*)$": "<rootDir>/src/$1"
    
21. 　　},
    
22. 　　testEnvironment: "jest-environment-jsdom-fifteen",
    
23. 　　// serializer for snapshots
    
24. 　　snapshotSerializers: ["jest-serializer-vue"],
    
25. 　　testMatch: ["**/tests/unit/**/*.spec.[jt]s?(x)", "**/__tests__/*.[jt]s?(x)"],
    
26. 　　// https://github.com/facebook/jest/issues/6766
    
27. 　　testURL: "http://localhost/",
    
28. 　　watchPlugins: [
    
29. 　　require.resolve("jest-watch-typeahead/filename"),
    
30. 　　require.resolve("jest-watch-typeahead/testname")
    
31. 　　]
    
32. 　　};

复制代码

但是这个预设可能不能满足你的需求，我们需要对他进行一些拓展。由于我们项目中使用了.js后缀的文件。并且使用了@以外的alias别名，所以需要将这两个配置加到jest.config.js中

1. module.exports = {
   
2. 　　preset: "@vue/cli-plugin-unit-jest",
   
3. 　　transform: {
   
4. 　　"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
   
5. 　　},
   
6. 　　moduleNameMapper: {
   
7. 　　"^@api/(.*)$": "<rootDir>/src/server/api/$1",
   
8. 　　"^@views/(.*)$": "<rootDir>/src/views/$1",
   
9. 　　"^@com/(.*)$": "<rootDir>/src/components/$1",
   
10. 　　"^@store/(.*)$": "<rootDir>/src/store/$1"
    
11. 　　}
    
12. 　　};

复制代码

     调试
　　基于vscode进行调试，在package.json中配置

1. "test:debugger": "node --inspect-brk ./node_modules/@vue/cli-service/bin/vue-cli-service.js test:unit --runInBand --watch"

复制代码

然后在.vscode\launch.json文件中配置

1. {
   
2. 　　"version": "0.2.0",
   
3. 　　"configurations": [
   
4. 　　{
   
5. 　　"type": "node",
   
6. 　　"request": "attach",
   
7. 　　"name": "Attach to ws",
   
8. 　　"address": "localhost",
   
9. 　　"port": 9229,
   
10. 　　"skipFiles": ["<node_internals>/**"]
    
11. 　　}
    
12. 　　]
    
13. 　　}

复制代码

      执行以上命令以后即可实现断点调试，并监听文件的变动自动刷新。
　　使用
　　简单的来说，今天我们主要介绍 Jest 的三个功能，快照（snapshots）、模拟事件（trigger）、断言（expect-to）。
　　下面来介绍一下这些功能的用法
　　快照
　　快照的作用是将，当前的组件的完整的dom结构保存下来。下次再执行时，会比较组件更新后的dom结构，如果结构发生变化，则测试用例就无法通过。
　　这里有一个注意点，我执行了await wrapper.vm.$nextTick();，才进行了快照保存，因为mount方法执行后，组件的渲染是一个异步的过程。所以需要执行await wrapper.vm.$nextTick();后，才可以获取到执行完渲染的组件的dom结构。

1. import { mount } from "@vue/test-utils";
   
2. 　　import TestSnapshots from "@/components/TestSnapshots.vue";
   
3. 　　describe("TestSnapshots.vue", () => {
   
4. 　　it("render TestSnapshots", async () => {
   
5. 　　const wrapper = mount(TestSnapshots);
   
6. 　　await wrapper.vm.$nextTick();
   
7. 　　expect(wrapper.html()).toMatchSnapshot();
   
8. 　　});
   
9. 　　});

复制代码

      模式事件
　　 通过find方法找到dom节点以后，就可以使用trigger方法触发这个dom节点上绑定的事件。这里要注意的是，trigger是异步的

1. import { mount } from "@vue/test-utils";
   
2. 　　import TestTrigger from "@/components/TestTrigger.vue";
   
3. 　　describe("TestTrigger.vue", async () => {
   
4. 　　it("render TestTrigger", async () => {
   
5. 　　const wrapper = mount(TestTrigger);
   
6. 　　const btn = wrapper.find("button");
   
7. 　　await closeBtn.trigger("click");
   
8. 　　});
   
9. 　　});

复制代码

      断言
　　 获取你要判断的对象，然后执行判断语句，测试结果是否符合预期。下面是一个最简单的断言判断。判断实例化后的 vue 实例中testData的值是否符合预期

1. import { mount } from "@vue/test-utils";
   
2. 　　import TestExpect from "@/components/TestExpect.vue";
   
3. 　　describe("TestExpect.vue", () => {
   
4. 　　it("render TestExpect", () => {
   
5. 　　const wrapper = mount(TestExpect);
   
6. 　　expect(wrapper.vm.testData).toBe(false);
   
7. 　　});
   
8. 　　});
   
9. 　　

复制代码

     还有很多其他的断言，可以查看 Jest 的官方文档
　　总结
　　编写单元测试，可以使我们的代码更加健壮。同时加强我们对更多业务场景的思考。以上jest的使用介绍只是一些最基本的用法，还有很多比如mock数据，网络接口的测试等等。随着前端承载的任务越来越重，相信单元测试以后也会成为前端仔的必备技能。

作者：嘻哈工程师   来源：掘金

Miss_love

学习