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

编程艺术家 29559 0

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

$vue create vue-test

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

vue-test 1.png

勾选 BabelTypeScriptRouterUnit 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.jstestMatch配置的条件进行运行。当前匹配的是所有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.tsimport { 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.data、wrapper.vm.nextTick()。

  • trigger 方法可以用来触发一个 DOM 事件,这里触发的事件都是同步的,所以不必将断言放到 $nextTick() 里去执行;同时支持传入一个对象,当捕获到事件的时候,可以获取到传入对象的属性。可以这样写:wrapper.trigger('click', {name: "bubuzou.com"})

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

参考原文



作者:joeal
链接:https://www.jianshu.com/p/a83bd4a6419f
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


标签: #vue

  • 评论列表

留言评论