首页 > 资讯 > 前端开发 > JavaScript >前端Vue单元测试入门教程

337

分享到

前端Vue单元测试入门教程

2024-04-02 19:04:59 337人浏览安东尼

摘要

目录一、为什么需要单元测试二、如何写单元测试三、测试工具四、Jest入门安装简单示例 Jest Cli 使用配置文件使用 Babel Vue-cli 中使用 Jest 常

一、为什么需要单元测试

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

正确性：可以验证代码的正确性，为上线前做更详细的准备；
自动化：测试用例可以整合到代码版本管理中，自动执行单元测试，避免每次手工操作；
解释性：能够为其他开发人员提供被测模块的文档参考，阅读测试用例可能比文档更完善；
驱动开发、指导设计：提前写好的单元测试能够指导开发的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.js
const 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.js
module.exports = {
    setupFiles: ['<rootDir>/tests/unit/setup.js']
}

然后在 setup.js 使用：


// setup.js
import Vue from 'vue'

// 以下全局注册的插件在jest中不生效，必须使用localVue
import 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)
})