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>

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

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

</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')).toBe(true)

})

}

用例规范

测试脚本都要放在 tests/unit/specs 目录下

脚本命名方式为[组件名].spec.js

测试脚本由多个 describe 组成，每个 describe 由多个 it 组成

测试脚本 describe 描述填写组件名，it 描述需要简洁清晰直观

Vue Test Utils相关:

它模拟了一部分类似 jQuery 的 API，非常直观并且易于使用和学习，提供了一些接口和几个方法来减少测试的样板代码，方便判断、操纵和遍历 Vue Component 的输出，并且减少了测试代码和实现代码之间的耦合。

一般使用其 mount() 或 shallowMount() 方法，将目标组件转化为一个 Wrapper 对象，并在测试中调用其各种方法，例如：

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

import Foo from './Foo.vue'

describe('Foo', () => {

it('renders a div', () => {

const wrapper = mount(Foo)

expect(wrapper.contains('div')).toBe(true)

})

})

wraper.html()可以获取这个dom

wraper.toMatchSnapshot（）第一次运行快照测试时会生成一个快照文件，之后每次执行测试的时候会生成一个快找然后对比最初生成的快照文件，如狗咩有发生变暖则通过测试。

Mock相关api:

Mock函数的作用

在单元测试中，我们可能并不需要关心内部调用的方法的执行过程和结果，只需要知道它是否被正确调用即可，甚至会指定该函数的返回值。此时，使用Mock函数是十分有必要。

Mock函数提供的以下三种特性：

捕获函数调用情况

设置函数返回值

改变函数的内部实现

jest.fn()

jest.fn()是创建Mock函数最简单的方式，如果没有定义函数内部的实现，jest.fn()会返回undefined作为返回值。

// functions.test.js

test('测试jest.fn()调用', () => {

let mockFn = jest.fn();

let result = mockFn(1, 2, 3);

// 断言mockFn的执行后返回undefined

expect(result).toBeUndefined();

// 断言mockFn被调用

expect(mockFn).toBeCalled();

// 断言mockFn被调用了一次

expect(mockFn).toBeCalledTimes(1);

// 断言mockFn传入的参数为1, 2, 3

expect(mockFn).toHaveBeenCalledWith(1, 2, 3);

})

test('测试jest.fn()内部实现', () => {

let mockFn = jest.fn((num1, num2) => {

return num1 * num2;

})

// 断言mockFn执行后返回100

expect(mockFn(10, 10)).toBe(100);

})

// api.js

import axios from 'axios';

export default {

async getProductList(callback) {

return axios.get('https://www.zhifu.api').then(res => {

  return callback(res.data);

})

}

}

import fetch from '../src/fetch.js'

test('getProductList中的回调函数应该能够被调用', async () => {

expect.assertions(1);

let mockFn = jest.fn();

await fetch.getProductList(mockFn);

// 断言mockFn被调用

expect(mockFn).toBeCalled();

})

jest.spyOn()

jest.spyOn()方法同样创建一个mock函数，但是该mock函数不仅能够捕获函数的调用情况，还可以正常的执行被spy的函数。实际上，jest.spyOn()是jest.fn()的语法糖，它创建了一个被spy的函数具有相同内部代码的mock函数。

// functions.test.js

import events from '../src/events';

import api from '../src/api';

test('使用jest.spyOn()api.getProductList被正常调用', async() => {

expect.assertions(2);

const spyFn = jest.spyOn(fetch, 'getProductList');

await events.getProductList();

expect(spyFn).toHaveBeenCalled();

expect(spyFn).toHaveBeenCalledTimes(1);

})

jest.mock()

etch.js文件夹中封装的请求方法可能我们在其他模块被调用的时候，并不需要进行实际的请求（请求方法已经通过单侧或需要该方法返回非真实数据）。此时，使用jest.mock(）去mock整个模块是十分有必要的。

// events.js

import fetch from './api';

export default {

async getProductList() {

return fetch.getProductList(data => {

  console.log('getProductList be called!');

  // do something

});

}

}

// functions.test.js

import events from '../src/events';

import fetch from '../src/api';

jest.mock('../src/api.js');

test('mock 整个 api.js模块', async () => {

expect.assertions(2);

await events.getList();

expect(fetch.getProductList).toHaveBeenCalled();

expect(fetch.getProductList).toHaveBeenCalledTimes(1);

});

遇到的问题：

因项目是使用 vue-cli 构建的，所以这里直接使用 cli-plugin-unit-jest 插件来运行 Jest 测试。

vue add @vue/cli-plugin-unit-jest

安装之后，启动项目报错：Vue packages version mismatch，这是因为 vue 与 vue-template-compiler 版本不一致，所以这里需要修改下 vue-template-compiler 的版本，

删除依赖，重新安装，或者使用下面命令。

npm install vue-template-compiler@2.6.14

对于 vue 中的路由变化如何写测试方法

methods: {

goProductList() {

  this.$router.push({

      name: 'productList'

  })

}

}

import VueRouter from 'vue-router';

import routes from '@/router/registry';

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

const router = new VueRouter({ routes });

const localVue = createLocalVue();

localVue.use(VueRouter);

it('跳转到 dashboard 页面', () => {

const options = {

  localVue,

  router

};

const wrapper = shallowMount(ProductForm, options);

router.push({

  name: 'productList'

});

wrapper.vm.goProductList();

expect(router.currentRoute.path).toMatch('/productList');

})