跳至主要內容

单元测试

星星大约 7 分钟

单元测试

  • 单元测试是用来测试项目中的一个模块的功能，如函数、类、组件等
  • 可以验证代码的正确性，为上线前做更详细的准备，测试用例可以整合到代码版本管理中，自动执行单元测试，避免每次手工操作，测试用例可以多次验证，当需要回归测试时能够节省大量时间

测试工具调研

使用

1.测试 js 文件

  • 安装
yarn add --dev jest
# or
npm install -D jest
  • 新建 ./index.js 文件
function sum(a, b) {
    return a + b
}
module.exports = sum
  • 新建 index.test.js 文件（jest 会自动识别 _ .test._ 和 _ .spec. _ 的文件） 注意： jest 不支持 es6 语法， 需要安装 babel
const sum = require('../sum')

describe('sum function test', () => {
    it('sum(1, 2) === 3', () => {
        expect(sum(1, 2)).toBe(3)
    })

    test('sum(1, 2) === 3', () => {
        expect(sum(1, 2)).toBe(3)
    })
})
  • 将 test 命令添加到 package.json 里面
{
  "scripts": {
    "test": "jest"
  },
}
  • npm run test

2.新建 Vue 项目(使用 vue-cli 脚手架)

3.在老项目中新增 jest 工具

vue add unit-jest //需要安装Vue-Cli

此条命令执行以后，会自动帮助我们安装@vue/cli-plugin-unit-jest，同时会帮助我们进行jest测试相关的配置，并且它也会帮我们在根目录下新建tests文件夹，包含测试用例example.spec.js 之后可以使用npm run test:unit来运行测试用例。

  • vscode 插件: Jest Jest Runner

配置

  • 默认生成的 jest.config.js 文件 preset: '@vue/cli-plugin-unit-jest',需要根据需要手动添加
  • 参考配置

  preset: '@vue/cli-plugin-unit-jest',
  // 生成覆盖率文件夹
  collectCoverage: true,
  // 测试报告存放位置(默认是根目录)
  coverageDirectory:  '<rootDir>/tests/unit/coverage',
  // 测试哪些文件和不测试哪些文件
  collectCoverageFrom: ["**/*.{js,vue}", "!**/node_modules/**"],
  // 指定setup的位置
  setupFiles: ['<rootDir>/tests/setup.js'],
  // Jest 需要匹配的文件后缀
  moduleFileExtensions: [
     'js',
     'vue'
  ],
  // 匹配到 .vue 文件的时候用 vue-jest 处理，
  // 匹配到 .js 文件的时候用 babel-jest 处理
  transform: {
     ".*\\.(vue)$": "vue-jest",
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    '^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'identity-obj-proxy',
  },
  // 处理 webpack 的别名，比如：将 @ 表示 /src 目录
  moduleNameMapper: {
      '^@/(.*)$': '<rootDir>/src/components/$1'
  },
  // 将保存的快照测试结果进行序列化，使得其更美观
  snapshotSerializers: [
      'jest-serializer-vue'
  ],
  // 匹配哪些文件进行测试(测试脚本)
  testMatch: ['**/tests/**/*.spec.js'],
  // 不进行匹配的目录
  transformIgnorePatterns: ['<rootDir>/node_modules/'],
  • setup.js (类似于 main.js),可以挂载全局方法，全局变量比如 window,使用 elementUI
import { shallowMount, mount, config, createLocalVue } from '@vue/test-utils'
window.globalConfig = {
    env: '{{ .env }}',
    region: '{{ .region }}',
    baseUrl: '{{ .base_url }}',
    baseTitle: 'BytePower',
    apiUrl: '/api/',
}
import * as utils from '../src/components/utils'
import ElementUI from 'element-ui'
Vue.use(ElementUI)

jest 常用语法（断言）

  1. toBe 判断两个预期值与实际值是否相同，用的是 JS 中的 Object.is()，不能检测对象，如果要检测对象的值的话，需要用到 toEqual。

  2. 区分 undefined、null 和 false

  • toBeNull 只匹配 null
  • toBeUndefined 只匹配 undefined
  • toBeDefine 与 toBeUndefined 相反
  • toBeTruthy 匹配任何 if 语句为真
  • toBeFalsy 匹配任何 if 语句为假 3.数字匹配器
  • 大于。toBeGreaterThan()
  • 大于或者等于。toBeGreaterThanOrEqual()
  • 小于。toBeLessThan()
  • 小于或等于。toBeLessThanOrEqual()
  • toBe 和 toEqual 同样适用于数字 注意：对比两个浮点数是否相等的时候，使用 toBeCloseTo（类似于越约等于）而不是 toEqual 比如 0.1+0.2 约等于 0.3 4.字符串
  • 使用 toMatch()测试字符串，传递的参数是正则表达式。 5.数组
  • 如何检测数组中是否包含特定某一项？可以使用 toContain() 6.对象
  • 是否包含某个 key，可以用 toHaveProperty eg:expect(wrapper.vm.currentDashboard).toHaveProperty('id') 7.组件相关(模拟用户操作)
  • setChecked 设置checkbox或者radio元素的checked的值并更新v-model。
  • setSelected 设置一个option元素并更新v-model。
  • setValue 设置一个input或select元素的值并更新v-model。
  • setProps 设置包裹器的vm实例中propss并更新。
  • setData 设置包裹器中vm实例中的data并更新。
  • 注意 操作 dom 的一些异步事件，要使用 async await 或 $nextTick
  • 使用选择器查找标签 find findAll （使用的是 querySelector）
  • 判断标签是否存在 exists()
  • 使用 findComponent，findAllComponents 来查找第三方组件或子组件
// shallowMount只会挂载当前组件不挂载子组件，mount会挂载子组件
import { mount, shallowMount } from '@vue/test-utils'
import ParentComponent from '@/components/ParentComponent'
import ChildComponent from '@/components/ChildComponent'

describe('套件', () => {
    test('一条测试用例', () => {
        const wrapper = mount(ParentComponent)
        // 触发子组件的emit
        wrapper.findComponent(ChildComponent).vm.$emit('custom')
        expect(wrapper.html()).toContain('Emitted!')
    })
})
  • beforeEach  和  afterEach 对每个 test 都操作一次，类似 vue-router 的路由钩子
  • 类似的还有  beforeAll  和  afterAll，在当前 spec 测试文件开始前和结束后的单次执行。
  • 执行顺序
beforeAll(() => console.log('1 - beforeAll'))
afterAll(() => console.log('1 - afterAll'))
beforeEach(() => console.log('1 - beforeEach'))
afterEach(() => console.log('1 - afterEach'))
test('', () => console.log('1 - test'))
describe('Scoped / Nested block', () => {
    beforeAll(() => console.log('2 - beforeAll'))
    afterAll(() => console.log('2 - afterAll'))
    beforeEach(() => console.log('2 - beforeEach'))
    afterEach(() => console.log('2 - afterEach'))
    test('', () => console.log('2 - test'))
})

// 1 - beforeAll
// 1 - beforeEach
// 1 - test
// 1 - afterEach
// 2 - beforeAll
// 1 - beforeEach
// 2 - beforeEach
// 2 - test
// 2 - afterEach
// 1 - afterEach
// 2 - afterAll
// 1 - afterAll

mock 数据

  1. const mockFun = jest.fn() 创建一个 mock 函数 常用于回调函数
  2. mockFun() 会返回 undefined，可以传入参数 jest.fn(v => v)
  3. mock 函数的其他操作
// 此 mock 函数被调用了两次
expect(mockCallback.mock.calls.length).toBe(2)
// 第一次调用函数时的第一个参数是 0
expect(mockCallback.mock.calls[0][0]).toBe(0)
// 第二次调用函数时的第一个参数是 1
expect(mockCallback.mock.calls[1][0]).toBe(1)
// 第一次函数调用的返回值是 42
expect(mockCallback.mock.results[0].value).toBe(42)
  1. eg:
// 当前组件的方法 提交表单
// submit按钮在父组件，所以saveData这个方法由父组件调用
saveData(callback) {
    this.$refs['domainForm'].validate(valid => {
        if (valid) {
            if (callback) {
                callback(domains);
            }
        } else {
            if (callback) {
                callback(null);
            }
        }
    });
}
// 使用mock函数作为回调函数测试 add-domain
addDomainWrapper.vm.saveData(jest.fn(v=>{
    expect(v).toEqual(domains)
}))

踩坑

  • setup.js 中 config.stubs.transition = false，可以解决 vm.$el # TypeError: Cannot read property '$el' of undefined 这个报错
  • 引入 elementUI 之后样式报错，因为没有引入处理样式的插件 官方说明 https://github.com/facebook/jest/blob/main/docs/Webpack.md

elementUI issue https://github.com/ElementUI/babel-plugin-component/issues/59

npm install --save-dev identity-obj-proxy
  • elementui+jest+unit-jest 使用 setValue 给 select 控件赋值，但是 elementUI 中的 el-select 组件不是对 select 的封装，而是使用 input 封装，因此不能使用 setValue
<input type="text" readonly="readonly" autocomplete="off" placeholder="Select" class="el-input__inner" />
//option
<ul class="el-select-dropdown__list">
    <li class="el-select-dropdown__item selected hover">
        <span>Android</span>
    </li>
    <li class="el-select-dropdown__item">
        <span>iOS</span>
    </li>
</ul>

解决方法：

const ul = FormWrapper.find('.el-select-dropdown__list')
const li = ul.findAll('.el-select-dropdown__item')
await li.at(1).trigger('click')

test-utils setSelected 文档open in new window

参考文章open in new window

  • 使用 shallowMount 挂载的组件，内部使用 element 的组件，无法通过 find 找到节点，需要使用 mount 挂载（之前以为只有自定义组件才需要使用 mount）
  • 对 upload 组件进行测试需要验证文件上传的过程，nodejs 环境可以模拟此操作https://github.com/jsdom/jsdom/issues/1272#issuecomment-361106435

目前没涉及的部分

  • Style 测试
  • TS 测试

参考文章

上次编辑于:
贡献者: wanghongjie
本站已运行
Copyright © 2024 星星