Vue-Test-Utils + Jest 单元测试入门与实践

Vue-Test-Utils + Jest 单元测试入门与实践

创建Vue项目

在终端用vue-cli创建一个项目

$vue create vue-test

选择Manually select features进行手动选择功能配置：

vue-test 1.png

勾选 Babel、TypeScript、Router、Unit Testing：

vue-test 2.png

选择Jest:

vue-test 3.png

选择In dedicated config files将各配置信息配置在对应的 config文件里：

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json

输入n，不保存预设：

? Save this as a preset for future projects? (y/N) n

创建成功

vue-test 4.png

查看部分配置文件

jest.config.js

默认如下:

module.exports = {
  preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
};

我们可以按实际需求添加其它配置项：

module.exports = {
  preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
  testMatch: ["**/tests/unit/**/*.spec.[jt]s?(x)"],
  transformIgnorePatterns: ["<rootDir>/node_modules/"],
  moduleFileExtensions: [
        'js',
        'vue'
    ],
    transform: {
        '^.+\\.vue$': '<rootDir>/node_modules/vue-jest',
        '^.+\\.js$': '<rootDir>/node_modules/babel-jest'
    },
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/src/$1'
    },
    snapshotSerializers: [
        'jest-serializer-vue'
    ]
};

• testMatch 匹配哪些文件进行测试
• transformIgnorePatterns 不进行匹配的目录
• moduleFileExtensions告诉Jest需要匹配的文件后缀
• transform匹配到 .vue 文件的时候用 vue-jest处理， 匹配到.js文件的时候用 babel-jest 处理
• moduleNameMapper 处理webpack的别名，比如：将@表示 /src目录
• snapshotSerializers将保存的快照测试结果进行序列化，使得其更美观

测试用例

vs code打开项目你会发现根目录下有一目录test/unit，里面就有一个已经生成的测试用例。

vue-test 5.png

新建终端：运行单元测试。这里会根据jest.config.js的testMatch配置的条件进行运行。当前匹配的是所有tests/unit下的测试文件

$yarn test:unit

vue test 6.png

指定运行某个测试文件

新建一个couter.vue文件简单的界面，点击按钮数目加1。在tests/unit目录下新建一个测试文件couter.spec.ts

//couter.vue
<template>
  <div>
    <span class="count">{{ count }}</span>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

//couter.spec.ts
import { mount } from "@vue/test-utils";
import Couter from "@/views/Couter.vue";

describe("Couter.vue", () => {
  const wrapper = mount(Couter);
  it("测试累加", () => {
    wrapper.setData({ count: 13 });
    const button = wrapper.find("button");
    button.trigger("click");
    expect((wrapper.vm as any).count).toBe(14);
  });
});

所有目前tests/unit目录下有两个测试文件，如果还用yarn test:unit命令的话就会跑所有测试文件。那么我们怎么指定运行一个文件呢，看下面命令：

$yarn  jest  -- **/tests/unit/**/couter.spec.ts

vue test 7.png

测试用例一些API介绍

• shallowMount 将会创建一个包含被挂载和渲染的 Vue 组件的 Wrapper，只存根当前组件，不包含子组件。
• describe(name, fn) 这边是定义一个测试套件，test ToDoList 是测试套件的名字，fn 是具体的可执行的函数
• it(name, fn) 是一个测试用例，输入框初始值为空字符串 是测试用例的名字，fn 是具体的可执行函数；一个测试套件里可以保护多个测试用例。
• expect 是 Jest 内置的断言风格，业界还存在别的断言风格比如 Should、Assert 等。
• toBe 是 Jest 提供的断言方法， 更多的可以到Jest Expect 查看具体用法。
• setValue 可以设置一个文本控件的值并更新 v-model 绑定的数据。
• .to-do-text 是一个 CSS 选择器；Vue-Test-Utils 提供了 find 方法来通过查找选择器，来返回一个 Wrapper；选择器可以是 CSS 选择器、可以是 Vue 组件也可以是一个对象，这个对象包含了组件的 name 或 ref 属性，比如可以这样用：wrapper.find({ name: 'my-button' })
• wrapper.vm 是一个 Vue 实例，只有 Vue 组件的包裹器才有 vm 这个属性；通过 wrapper.vm 可以访问所有 Vue 实例的属性和方法。比如：wrapper.vm.nextTick()。
• trigger 方法可以用来触发一个 DOM 事件，这里触发的事件都是同步的，所以不必将断言放到 $nextTick() 里去执行；同时支持传入一个对象，当捕获到事件的时候，可以获取到传入对象的属性。可以这样写：wrapper.trigger('click', {name: "bubuzou.com"})

更多用法vue-test-utils官方文档

参考原文