多测师是一家拥有先进的教学理念,强大的师资团队,业内好评甚多的接口自动化测试培训机构!

17727591462

联系电话

您现在所在位置:接口自动化测试培训 > 新闻资讯

使用Jest实现Vue自动化测试

更新时间:2022-07-12 09:09:08 作者:多测师 浏览:31

  在开始前,我们先来聊一下什么是自动化测试。通常,在需求确定以后,测试会编写测试用例,然后,根据测试用例中描述的规程一步步执行测试,得到实际结果与期望结果的比较。在此过程中,为了节省人力、时间或硬件资源,提高测试效率,便引入了自动化测试的概念。

使用Jest实现Vue自动化测试

  那么知道了什么是自动化测试以后,我们来看看前端如何实现自动化测试。通常有两种方案可以实现前端自动化测试

  unit-test(单元测试):对应测试中的白盒测试。在测试框架中执行代码,并且给出预期输出,然后对实际输出和预期输出进行比较。以此来判断是否通过测试。

  e2e-test(端到端测试):对应测试中的黑盒测试。项目启动以后,测试框架会模拟用户的行为,例如点击,输入等操作。然后观察页面中的元素展现形式是否和预期一致。以此来判断是否通过测试。

  集成 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);

  });

  });

  ![](https://user-gold-cdn.xitu.io/2020/7/28/17394086692db12f?w=873&h=315&f=png&s=195213)

  还有很多其他的断言,可以查看 Jest 的官方文档

  总结

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

  以上内容为大家介绍了使用Jest实现Vue自动化测试,本文由多测师亲自撰写,希望对大家有所帮助。了解更多自动化测试相关知识:https://www.aichudan.com/xwzx/

联系电话

17727591462

返回顶部