TA的每日心情 | 擦汗 3 天前 |
---|
签到天数: 1042 天 连续签到: 4 天 [LV.10]测试总司令
|
前言
在开始前,我们先来聊一下什么是自动化测试。通常,在需求确定以后,测试会编写测试用例,然后,根据测试用例中描述的规程一步步执行测试,得到实际结果与期望结果的比较。在此过程中,为了节省人力、时间或硬件资源,提高测试效率,便引入了自动化测试的概念。
那么知道了什么是自动化测试以后,我们来看看前端如何实现自动化测试。通常有两种方案可以实现前端自动化测试
unit-test(单元测试):对应测试中的白盒测试。在测试框架中执行代码,并且给出预期输出,然后对实际输出和预期输出进行比较。以此来判断是否通过测试。
e2e-test(端到端测试):对应测试中的黑盒测试。项目启动以后,测试框架会模拟用户的行为,例如点击,输入等操作。然后观察页面中的元素展现形式是否和预期一致。以此来判断是否通过测试。
今天,我要介绍的就是在 vue 项目,如何使用 jest 实现单元测试
集成 Jest
使用vue-cli新建的项目可以直接选择jest作为测试框架,如果是已创建的vue-cli项目,可以使用以下命令集成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数据,网络接口的测试等等。随着前端承载的任务越来越重,相信单元测试以后也会成为前端仔的必备技能。
作者:嘻哈工程师 来源:掘金
|
|