51Testing软件测试论坛

标题: 使用Jest实现Vue自动化测试 [打印本页]
作者: lsekfe    时间: 2020-8-17 15:26
标题: 使用Jest实现Vue自动化测试
       前言
　　在开始前，我们先来聊一下什么是自动化测试。通常，在需求确定以后，测试会编写测试用例，然后，根据测试用例中描述的规程一步步执行测试，得到实际结果与期望结果的比较。在此过程中，为了节省人力、时间或硬件资源，提高测试效率，便引入了自动化测试的概念。
　　那么知道了什么是自动化测试以后，我们来看看前端如何实现自动化测试。通常有两种方案可以实现前端自动化测试
　　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. 　　![](https://user-gold-cdn.xitu.io/2020/7/28/17394086692db12f?w=873&h=315&f=png&s=195213)
复制代码
     还有很多其他的断言，可以查看 Jest 的官方文档
　　总结
　　编写单元测试，可以使我们的代码更加健壮。同时加强我们对更多业务场景的思考。以上jest的使用介绍只是一些最基本的用法，还有很多比如mock数据，网络接口的测试等等。随着前端承载的任务越来越重，相信单元测试以后也会成为前端仔的必备技能。

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

作者: Miss_love    时间: 2020-8-18 10:56
学习



欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/) Powered by Discuz! X3.2