前端Vue单元测试知识点有哪些

本篇内容介绍了“前端Vue单元测试知识点有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

一、为什么需要单元测试

单元测试是用来测试项目中的一个模块的功能，如函数、类、组件等。单元测试的作用有以下：

• 正确性：可以验证代码的正确性，为上线前做更详细的准备；

• 自动化：测试用例可以整合到代码版本管理中，自动执行单元测试，避免每次手工操作；

• 解释性：能够为其他开发人员提供被测模块的文档参考，阅读测试用例可能比文档更完善；

• 驱动开发、指导设计：提前写好的单元测试能够指导开发的API设计，也能够提前发现设计中的问题；

• 保证重构：测试用例可以多次验证，当需要回归测试时能够节省大量时间。

二、如何写单元测试

测试原则

• 测试代码时，只考虑测试，不考虑内部实现

• 数据尽量模拟现实，越靠近现实越好

• 充分考虑数据的边界条件

• 对重点、复杂、核心代码，重点测试

• 测试、功能开发相结合，有利于设计和代码重构

编写步骤

• 准备阶段：构造参数，创建 spy 等

• 执行阶段：用构造好的参数执行被测试代码

• 断言阶段：用实际得到的结果与期望的结果比较，以判断该测试是否正常

• 清理阶段：清理准备阶段对外部环境的影响，移除在准备阶段创建的 spy 等

三、测试工具

单元测试的工具可分为三类：

• 测试运行器（Test Runner）：可以模拟各种浏览器环境，自定义配置测试框架和断言库等，如Karma.

• 测试框架：提供单元测试的功能模块，常见的框架有Jest, mocha, Jasmine, QUnit.

• 工具库：assert, should.js, expect.js, chai.js等断言库，enzyme渲染库，Istanbul覆盖率计算。

这里，我们将使用 Jest 作为例子。Jest 功能全面，集成了各种工具，且配置简单，甚至零配置直接使用。

四、Jest入门

Jest 官网的描述是这样的：

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

安装

yarn add --dev jest# or# npm install -D jest

简单示例

从官网提供的示例开始，测试一个函数，这个函数完成两个数字的相加，创建一个 sum.js 文件︰

function sum(a, b) {  return a + b;}module.exports = sum;

然后，创建 sum.test.js 文件︰

const sum = require('./sum');test('adds 1 + 2 to equal 3', () => {  expect(sum(1, 2)).toBe(3);});package.json 里增加一个测试任务：{  "scripts": {    "test": "jest"  }}

最后，运行 yarn test 或 npm run test ，Jest将打印下面这个消息：

PASS  ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)

至此，完成了一个基本的单元测试。

注意：Jest 通过用 JSDOM 在 Node 虚拟浏览器环境模拟真实浏览器，由于是用 js 模拟 DOM, 所以 Jest 无法测试样式 。Jest 测试运行器自动设置了 JSDOM。

Jest Cli

你可以通过命令行直接运行Jest(前提是jest已经加到环境变量PATH中，例如通过 yarn global add jest 或 npm install jest --global 安装的 Jest) ，并为其指定各种有用的配置项。如：

jest my-test --notify --config=config.json

Jest 命令有以下常见参数：

• --coverage 表示输出单元测试覆盖率，覆盖率文件默认在 tests/unit/coverage/lcov-report/index.html；

• --watch 监听模式，与测试用例相关的文件更改时都会重新触发单元测试。

更多选项查看Jest CLI Options.

使用配置文件

使用 jest 命令可生成一个配置文件：

jest --init

过程中会有几个选项供你选择：

√ Would you like to use Typescript for the configuration file? ... no
√ Choose the test environment that will be used for testing » jsdom (browser-like)
√ Do you want Jest to add coverage reports? ... yes
√ Which provider should be used to instrument code for coverage? » babel
√ Automatically clear mock calls and instances between every test? ... yes

配置文件示例（不是基于上述选择）：

// jest.config.jsconst path = require('path')module.exports = {    preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',    rootDir: path.resolve(__dirname, './'),    coverageDirectory: '<rootDir>/tests/unit/coverage',    collectCoverageFrom: [        'src*.{js,ts,vue}',        'src/services*.spec.(js|jsx|ts|tsx)|**/__tests__

然后你可以基于这些数据来设置断言：

// 断言事件已经被触发expect(wrapper.emitted().foo).toBeTruthy()// 断言事件的数量expect(wrapper.emitted().foo.length).toBe(2)// 断言事件的有效数据expect(wrapper.emitted().foo[1]).toEqual([123])

还可以触发子组件的事件：

import { mount } from '@vue/test-utils'import ParentComponent from '@/components/ParentComponent'import ChildComponent from '@/components/ChildComponent'describe('ParentComponent', () => {  test("displays 'Emitted!' when custom event is emitted", () => {    const wrapper = mount(ParentComponent)    wrapper.find(ChildComponent).vm.$emit('custom')    expect(wrapper.html()).toContain('Emitted!')  })})

组件的data

可以使用 setData() 或 setProps 设置组件的状态数据：

it('manipulates state', async () => {  await wrapper.setData({ count: 10 })  await wrapper.setProps({ foo: 'bar' })})

模拟vue实例方法

由于Vue Test Utils 的 setMethods() 即将废弃，推荐使用 jest.spyOn() 方法来模拟Vue实例方法：

import MyComponent from '@/components/MyComponent.vue'describe('MyComponent', () => {  it('click does something', async () => {    const mockMethod = jest.spyOn(MyComponent.methods, 'doSomething')    await shallowMount(MyComponent).find('button').trigger('click')    expect(mockMethod).toHaveBeenCalled()  })})

全局插件

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

// jest.config.jsmodule.exports = {    setupFiles: ['<rootDir>/tests/unit/setup.js']}

然后在 setup.js 使用：

// setup.jsimport Vue from 'vue'// 以下全局注册的插件在jest中不生效，必须使用localVueimport ElementUI from 'element-ui'import VueClipboard from 'vue-clipboard2'Vue.use(ElementUI)Vue.use(VueClipboard)Vue.config.productionTip = false

当你只是想在某些 test 中安装全局插件时，可以使用 localVue，这会创建一个临时的Vue实例：

import { createLocalVue, mount } from '@vue/test-utils'// 创建一个扩展的 `Vue` 构造函数const localVue = createLocalVue()// 正常安装插件localVue.use(MyPlugin)// 在挂载选项中传入 `localVue`mount(Component, {  localVue})

测试watch

假如我们有一个这样的watcher:

watch: {  inputValue(newVal, oldVal) {    if (newVal.trim().length && newVal !== oldVal) {      console.log(newVal)    }  }}

由于watch的调用是异步的，并且在下一个tick才会调用，因此可以通过检测watcher里的方法是否被调用来检测watch是否生效，使用 jest.spyOn() 方法：

describe('Form.test.js', () => {  let cmp  ...  describe('Watchers - inputValue', () => {    let spy    beforeAll(() => {      spy = jest.spyOn(console, 'log')    })    afterEach(() => {      spy.mockClear()    })    it('is not called if value is empty (trimmed)', () => {    })    it('is not called if values are the same', () => {    })    it('is called with the new value in other cases', () => {    })  })})it("is called with the new value in other cases", done => {  cmp.vm.inputValue = "foo";  cmp.vm.$nextTick(() => {    expect(spy).toBeCalled();    done();  });});

第三方插件

当我们使用一些第三方插件的时候，一般不需要关心其内部的实现，不需要测试其组件，可以使用 shallowMount 代替 mount, 减少不必要的渲染：

import { shallowMount } from '@vue/test-utils'const wrapper = shallowMount(Component)wrapper.vm // 挂载的 Vue 实例还可以通过 findAllComponents 来查找第三方组件：import { Select } from 'element-ui'test('选中总部时不显示分部和网点', async () => {    await wrapper.setProps({        value: {            clusterType: 'head-quarter-sit',            branch: '',            site: ''        }    })    // 总部不显示分部和网点    expect(wrapper.findAllComponents(Select)).toHaveLength(1)})

六、总结

单元测试理论

• 单元测试能够持续验证代码的正确性、驱动开发，并起到一定的文档作用；

• 测试时数据尽量模拟现实，只考虑测试，不考虑内部代码；

• 测试时充分考虑数据的边界条件

• 对重点、复杂、核心代码，重点测试

• 编写单元测试有以下阶段：准备阶段、执行阶段、断言阶段、清理阶段；

• 单元测试的工具可分为三类：测试运行器（Test Runner）、测试框架、工具库。

Jest

• --watch 选项可以监听文件的编码，自动执行单元测试；

• 测试异步代码可以用 done 方法或 aync 函数；

• mock函数可以捕获这个函数的调用、this、返回值等，测试回调函数时非常有用。

Vue Test Utils

• 用 mount 方法挂载组件，并可自定义各种vue属性；

• shallowMount 方法不渲染子组件，从而加快测试速度；

• setupFiles 可以设置全局环境，如安装 element-ui；

• createLocalVue 可在创建单独的vue实例，与全局的隔离；
  

“前端Vue单元测试知识点有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！