现在系统功能趋于稳定，想着接入单元测试使用一下。尝试着为公共组件和公共方法编写覆盖全面的单元测试。

Jest

vue-cli 自带Jest,开箱即用。在根目录中创建一个名为 jest.config.js 的配置文件。配置文档

module.exports = {
  // 文件后缀
  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
  // 文件如何转换
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
      'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest'
  },
  // 忽略的文件
  transformIgnorePatterns: ['/node_modules/'],
  // 生成快照需要的插件
  snapshotSerializers: ['jest-serializer-vue'],
  // 需要执行哪些目录下的测试用例
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  // 在执行用例前的配置文件
  setupFiles: ['./tests/setup.js'],
  // 测试覆盖率配置
  collectCoverage: true,
  coverageReporters: ['html', 'lcov', 'text-summary'],
  coverageDirectory: './test/coverage',
  collectCoverageFrom: ['components/**/*.vue']
}

安装

1	vue add unit-jest

语法

断言、异步代码测试、Mock 函数、快照参考文档

异步获取数据肯定是一个常见场景了。异步代码通常会有两种写法，分别为：

回调函数
函数返回 promise

在测试异步代码的时候，通常返回的数据是不确定的，因此我们只需要测试异步代码是否正常返回数据即可。

// 回调函数的写法，通过 done 来让测试代码一直等待
test('fetch success', done => {
  fetch(data => {
    expect(data.success).toBe(true)
    done()
  })
})
// 函数返回 promise 的写法，注意要加上 return
// 当然对于返回 promise 的函数我们也可以直接使用 await
test('fetch success', () => {
  return fetch().then(data => {
    expect(data.success).toBe(true)
  })
})

实践

单元测试case部署在tests/unit文件夹中，使用Jest编写。可以测试引入的公共方法，也可以测试一个单文件组件。建议按照代码组织结构来编写对应的单元测试case。

使用npm run unit来运行单元测试，测试结果会在命令行中显示。在构建测试环境的时候会自动运行单元测试，如果单元测试存在未通过的case，则构建会失败并终止。构建beta环境和生产环境暂时不会运行单元测试。

一个简单的关于为数字加入千位分隔符的方法的单元测试：

describe('Utils suits', function () {
  it('should add commas for numbers', function () {
    let fn = Utils.addNumberCommas
    expect(fn(123)).toBe('123')
    expect(fn(12345)).toBe('12,345')
    expect(fn(1234567.89)).toBe('1,234,567.89')
    expect(fn(-1234567.89)).toBe('-1,234,567.89')
  })
})

输出示例：

参考链接：

Cholesterol

学习单元测试 - Jest

Jest

语法

实践