Jest单元测试Vue项目实践

​
做单元测试的优点：

1.减少bug避免低级错误

2.提高代码运行质量

3.快速定位问题

4.减少调试时间，提高开发效率

5.便于重构

Jest安装：

npm install babel-jest jest jest-serializer-vue @vue/test-utils @vue/cli-plugin-unit-jest -D

配置

vueCli内置了一套jest配置预置文件，一般情况下直接引用即可，如有特殊配置可见下文配置释意。

// jest.config.js

module.exports = {
   

  preset: '@vue/cli-plugin-unit-jest'

}

配置项目释意

module.exports = {

  // 预设，项目中一版可直接使用vue/cli预设的库就行

  preset: '@vue/cli-plugin-unit-jest',

  // 多用于一个测试文件运行时展示每个测试用例测试通过情况

  verbose: true,

  // 参数指定只要有一个测试用例没有通过，就停止执行后面的测试用例

  bail: true,

  // 测试环境，jsdom 可以在 Node 虚拟浏览器环境运行测试

  testEnvironment: 'jsdom',

  // 需要检测的文件类型(不需要配置)

  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],

  // 预处理器配置，匹配的文件要经过转译才能被识别，否则会报错(不需要配置)

  transform: {
   

    // 用 `vue-jest` 处理 `*.vue` 文件

    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",

    // 用 `babel-jest` 处理 js

    "^.+\\.js$": "babel-jest"

  },

  // 转译时忽略 node_modules

  transformIgnorePatterns: ['/node_modules/'],

  // 从正则表达式到模块名称的映射，和webpack的alias类似(不需要配置)

  moduleNameMapper: {
   

    '^@/(.*)$': '<rootDir>/src/$1'

  },

  // Jest用于检测测试的文件，可以用正则去匹配

  testMatch: [

    '**/tests/unit/**/*.spec.[jt]s?(x)',

    '**/__tests__/*.[jt]s?(x)'

  ],

  // 是否显示覆盖率报告，开启后显示代码覆盖率详细信息，将测试用例结果输出到终端

  collectCoverage: true,

  // 告诉 jest 哪些文件需要经过单元测试测试

  collectCoverageFrom: ["src/**/*.{js,vue}", "!**/node_modules/**"],

  // 覆盖率报告输出的目录

  coverageDirectory: 'tests/unit/coverage',

  // 报告的格式

  coverageReporters: ["html", "text-summary"],

  // 需要跳过覆盖率信息收集的文件目录

  coveragePathIgnorePatterns: ['/node_modules/'],

  // 设置单元测试覆盖率阈值, 如果未达到阈值，Jest 将返回失败

  coverageThreshold: {
   

    global: {
   

      statements: 60, // 保证每个语句都执行了

      functions: 60, // 保证每个函数都调用了

      branches: 60, // 保证每个 if 等分支代码都执行了

      lines: 60

    },

  },

  // Jest在快照测试中使用的快照序列化程序模块的路径列表

  snapshotSerializers: ["<rootDir>/node_modules/jest-serializer-vue"]

}

相关API：

test(name, fn, timeout)

test 有个别名 it，两个方法是一样的。

name：描述测试用例名称。

fn：期望测试的函数，也是测试用例的核心。

timeout（可选）：超时时间，也就是超过多久将会取消测试（默认是5秒钟）

断言类api

toBeNull：只匹配 null ；

toBeNaN：只匹配 NaN ；

toBeUndefined：只匹配 undefined ；

toBeDefined：与 toBeUndefined 相反 ；

toBeTruthy：匹配任何 if 语句为真 ；

toBeFalsy：匹配任何 if 语句为假 ；

toBeGreaterThan ：匹配数字时使用，期望大于，即 result > x ；

toBeGreaterThanOrEqual ：匹配数字时使用，期望大于等于，即 result > = x ；

toBeLessThan ：匹配数字时使用，期望小于，即 result < x ；

toBeLessThanOrEqual ：匹配数字时使用，期望小于等于，即 result <= x ；

toBeCloseTo：小数点精度问题匹配，例如 0.1+0.2 != 0.3，但我们期望它等于，就需要使用toBeCloseTo

toEqual 对象、数组的深度匹配。递归检查对象或数组的每个字段。

和toBe的区别是，toBe 匹配对象对比的是内存地址，toEqual 对比的是属性值。即toBe是===，toEqual是==

not 不匹配

toMatch 匹配字符串时使用，期望字符串包含另一个字符串。

toContain 检查一个数组中是否包含一个值时使用。

toBeCalled 函数被调用了

toThrow()----支持字符串,浮点数,变量

toMatchSnapshot()----jest特有的快照测试

编写用例：

Jest的单元测试核心就是在 test 方法的第二个参数里面，expect 方法返回一个期望对象，

通过匹配器（例如toBe）进行断言，期望是否和你预期一致，和预期一致则单元测试通过，不一致则测试无法通过，需要排除问题然后继续进行单元测试。

// HelloWorld.vue

<template>

  <div>

    <h3>{
   {
    contextNum }}</h3>

    <button class="btn" @click="increment">+</button>

  </div>

</template>



<script>

export default {
   

  name: 'HelloWorld',

  data() {
   

    return {
   

      contextNum: 0

    }

  },

  methods: {
   

    increment() {
   

      this.contextNum ++

    }

  }

}

</script>

// @/tests/unit/HelloWorld.spec.js

import {
    mount } from "@vue/test-utils";

import Counter from '@/components/HelloWorld.vue'



describe('HelloWorld.vue', () => {
   

  const wrapper = mount(Counter)

  // 渲染

  it('renders', () => {
   

    expect(wrapper.html()).toContain('<h3>0</h3>')

  })

  // 是否有按钮

  it('has a button', () => {
   

    expect(wrapper.find('button').exists()).toBeTruthy()

  })

  // 模拟用户交互

  // 使用 nextTick 与 await

  it('button click', async () => {
   

    expect(wrapper.vm.count).toBe(0)

    const button = wrapper.find('button')

    await button.trigger('click')

    expect(wrapper.vm.count).toBe(1)

  })

}

测试报告：

–coverage 生成测试覆盖率

–watch 单文件监视测试

–watchAll 监视所有文件改动，测试相应的测试。

可以通过修改 package.json 命令行来生成

“test:unit”: “vue-cli-service test:unit --coverage”

效果：

具体参数含义:

Statements: 语句覆盖率,执行到每个语句；

Branches: 分支覆盖率,执行到每个if代码块；

Functions: 函数覆盖率,调用到程式中的每一个函数；

Lines: 行覆盖率, 执行到程序中的每一行

持续监听：

为了提高效率，可以通过加启动参数的方式让 jest 持续监听文件的修改，而不需要每次修改完再重新执行测试用例。修改 package.json

"test:unit": "vue-cli-service test:unit --watchAll",

异步测试：

1.done

将 it 函数的第二个参数由无参回调改为一个接收一个 done 参数的回调，Jest 会等 done 回调函数执行结束后，结束测试。

describe('fetchData', () => {
   

  it('done异步函数测试返回值是否一致', (done) => {
   

    const callback = data => {
   

      try {
   

        expect(data).toBe('hello')

        done()

      } catch (error) {
   

        done(error) // 用于捕获错误的原因否则控制台报错超时

      }

    }

    fetchData(callback)

  })

})

2.async await

test('success', async () => {
   

  const data = await fetchData(true)

  expect(data).toBe('success message')

})



test('error', async () => {
   

  expect.assertions(1)

  try {
   

    await fetchData(false)

  } catch (error) {
   

    expect(error).toBe('error message')

  }

})

钩子函数：（执行顺序为1->2->3->4）

①、beforeAll(fn, timeout)

文件内所有测试开始前执行的钩子函数。

使用 beforeAll 设置一些在测试用例之间共享的全局状态。

②、afterAll(fn, timeout)

文件内所有测试完成后执行的钩子函数。

使用 afterAll 清理一些在测试用例之间共享的全局状态。

③、beforeEach(fn, timeout)

文件内所有测试开始前执行的钩子函数。

使用 beforeAll 设置一些在测试用例之间共享的全局状态。

④、afterEach(fn, timeout)

文件内每个测试完成后执行的钩子函数。

使用 afterEach 清理一些在每个测试中创建的临时状态。

全局插件:

如果需要安装所有 test 都使用到的全局插件，例如antdDesignVue，可以使用 setupFiles，首先需要在 jest.config.js 文件中指定 setup 文件。

// jest.config.js

module.exports = {
   

  setupFiles: ['<rootDir>/tests/unit/specs/setup.js']

}

然后在 tests/unit/specs 目录下创建 setup.js 文件

import Vue from 'vue'

// 以下全局注册的插件在jest中不生效，必须使用localVue

import antDesignVue from 'ant-design-vue'

Vue.use(antDesignVue)

// 阻止启动生产消息，常用作指令。

Vue.config.productionTip = false

单独测试文件使用某些插件时，可以使用 localVue 来创建一个临时的 Vue 实例。

import {
    createLocalVue, mount } from '@vue/test-utils'

import antDesignVue from 'ant-design-vue'

// 引入组件

import HelloWorld from '@/components/HelloWorld.vue'

// createLocalVue 返回一个 Vue 的类供你添加组件、混入和安装插件而不会污染全局的 Vue 类。

const localVue = createLocalVue()

localVue.use(antDesignVue)



// describe 代表一个作用域

describe('HelloWorld.vue', () => {
   

  // 创建一个包含被挂载和渲染的 Vue 组件的 Wrapper

  // 在挂载选项中传入 localVue

  const wrapper = mount(HelloWorld, {
   

    localVue,

    propsData: {
   

    }

  })

  // input create 这里是一个自定义的描述性文字

  it('input create', async ()=> {
   

    expect(wrapper.find('input').exists()).toBeTruthy()

    // classes() 方法，返回 class 名称的数组。或在提供 class 名的时候返回一个布尔值

    // toBe 和toEqual 类似，区别在于toBe 更严格限于同一个对象，如果是基本类型则没什么区别

    expect(wrapper.classes('el-input'))