前言
在开始前，我们先来聊一下什么是自动化测试。通常，在需求确定以后，测试会编写测试用例，然后，根据测试用例中描述的规程一步步执行测试，得到实际结果与期望结果的比较。在此过程中，为了节省人力、时间或硬件资源，提高测试效率，便引入了自动化测试的概念。
那么知道了什么是自动化测试以后，我们来看看前端如何实现自动化测试。通常有两种方案可以实现前端自动化测试
e2e-test（端到端测试）：对应测试中的黑盒测试。项目启动以后，测试框架会模拟用户的行为，例如点击，输入等操作。然后观察页面中的元素展现形式是否和预期一致。以此来判断是否通过测试。
今天，我要介绍的就是在 vue 项目，如何使用 jest 实现单元测试
集成 Jest
使用vue-cli新建的项目可以直接选择jest作为测试框架，如果是已创建的vue-cli项目，可以使用以下命令集成jest
| vue add unit-jest |
Jest 配置文件
集成 Jest 后，会在根目录下生成一个jest.config.js文件。并配置了@vue/cli-plugin-unit-jest，这个预设。预设配置为如下内容。
module.exports = { moduleFileExtensions: [ "js", "jsx", "json", // tell Jest to handle *.vue files "vue" ], transform: { // process *.vue files with vue-jest "^.+\\.vue$": require.resolve("vue-jest"), ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": require.resolve( "jest-transform-stub" ), "^.+\\.jsx?$": require.resolve("babel-jest") }, transformIgnorePatterns: ["/node_modules/"], // support the same @ -> src alias mapping in source code moduleNameMapper: { "^@/(.*)$": "<rootDir>/src/$1" }, testEnvironment: "jest-environment-jsdom-fifteen", // serializer for snapshots snapshotSerializers: ["jest-serializer-vue"], testMatch: ["**/tests/unit/**/*.spec.[jt]s?(x)", "**/__tests__/*.[jt]s?(x)"], // https://github.com/facebook/jest/issues/6766 testURL: "http://localhost/", watchPlugins: [ require.resolve("jest-watch-typeahead/filename"), require.resolve("jest-watch-typeahead/testname") ] }; |
但是这个预设可能不能满足你的需求，我们需要对他进行一些拓展。由于我们项目中使用了.js后缀的文件。并且使用了@以外的alias别名，所以需要将这两个配置加到jest.config.js中
module.exports = { preset: "@vue/cli-plugin-unit-jest", transform: { "^.+\\.js$": "<rootDir>/node_modules/babel-jest" }, moduleNameMapper: { "^@api/(.*)$": "<rootDir>/src/server/api/$1", "^@views/(.*)$": "<rootDir>/src/views/$1", "^@com/(.*)$": "<rootDir>/src/components/$1", "^@store/(.*)$": "<rootDir>/src/store/$1" } }; |
调试
基于vscode进行调试，在package.json中配置
| "test:debugger": "node --inspect-brk ./node_modules/@vue/cli-service/bin/vue-cli-service.js test:unit --runInBand --watch" |
然后在.vscode\launch.json文件中配置
{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "attach", "name": "Attach to ws", "address": "localhost", "port": 9229, "skipFiles": ["<node_internals>/**"] } ] } |
执行以上命令以后即可实现断点调试，并监听文件的变动自动刷新。
使用
简单的来说，今天我们主要介绍 Jest 的三个功能，快照（snapshots）、模拟事件（trigger）、断言（expect-to）。
下面来介绍一下这些功能的用法
快照
快照的作用是将，当前的组件的完整的dom结构保存下来。下次再执行时，会比较组件更新后的dom结构，如果结构发生变化，则测试用例就无法通过。
这里有一个注意点，我执行了await wrapper.vm.$nextTick();，才进行了快照保存，因为mount方法执行后，组件的渲染是一个异步的过程。所以需要执行await wrapper.vm.$nextTick();后，才可以获取到执行完渲染的组件的dom结构。
import { mount } from "@vue/test-utils"; import TestSnapshots from "@/components/TestSnapshots.vue"; describe("TestSnapshots.vue", () => { it("render TestSnapshots", async () => { const wrapper = mount(TestSnapshots); await wrapper.vm.$nextTick(); expect(wrapper.html()).toMatchSnapshot(); }); }); |
模式事件
通过find方法找到dom节点以后，就可以使用trigger方法触发这个dom节点上绑定的事件。这里要注意的是，trigger是异步的
import { mount } from "@vue/test-utils"; import TestTrigger from "@/components/TestTrigger.vue"; describe("TestTrigger.vue", async () => { it("render TestTrigger", async () => { const wrapper = mount(TestTrigger); const btn = wrapper.find("button"); await closeBtn.trigger("click"); }); }); |
断言
获取你要判断的对象，然后执行判断语句，测试结果是否符合预期。下面是一个最简单的断言判断。判断实例化后的 vue 实例中testData的值是否符合预期
import { mount } from "@vue/test-utils"; import TestExpect from "@/components/TestExpect.vue"; describe("TestExpect.vue", () => { it("render TestExpect", () => { const wrapper = mount(TestExpect); expect(wrapper.vm.testData).toBe(false); }); });  |
还有很多其他的断言，可以查看 Jest 的官方文档
总结
编写单元测试，可以使我们的代码更加健壮。同时加强我们对更多业务场景的思考。以上jest的使用介绍只是一些最基本的用法，还有很多比如mock数据，网络接口的测试等等。随着前端承载的任务越来越重，相信单元测试以后也会成为前端仔的必备技能。
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
