jest测试vue + To Do List

Vue Test Utils
jest官网

1 什么是 Jest?
jest是 Facebook 的一套开源的 JavaScript 测试框架， 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具，是一款几乎零配置的测试框架。

2 安装Jest

npm install jest

3 jest.config.js 配置文件

module.exports = {
  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
  transform: {
      '^.+\\.vue$': 'vue-jest', //使用vue-jest 转化vue语法 进行测试
      '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub', //将静态资源转字符串 不测试
      '^.+\\.jsx?$': 'babel-jest'
  },
  collectCoverageFrom: ['**/*.{vue}', '!**/node_modules/**'],
  transformIgnorePatterns: [ //不需要被转化文件
      '/node_modules/'
  ],
  moduleNameMapper: { //模块映射 处理vue语法简写
      '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [ //对vue组件做快照的时候 对快照做格式化
      'jest-serializer-vue'
  ],
  testMatch: [ //需要测试的文件
      '**/__tests__/**/*.(js|jsx|ts|tsx)'
  ],
  testPathIgnorePatterns: [ //不需要测试的文件
      '.eslintrc.js'
  ],
  testURL: 'http://localhost/', //执行测试的时候 模拟浏览器环境的地址
  watchPlugins: [
      'jest-watch-typeahead/filename',
      'jest-watch-typeahead/testname'
  ]
}

4 常用匹配器

• expect（完整列表）
• .toBe(4)是匹配器。 当 Jest 运行时，它会跟踪所有失败的匹配器。

test('two plus two is four', () => {
  expect(2 + 2).toBe(4);
});

匹配相反的测试值

expect(a + b).not.toBe(0);

.toEqual() 匹配器会递归的检查对象所有属性和属性值是否相等

test('对象分配属性',()=>{
    const data={one:1};
    data['two']=2;
    expect(data).toEqual({one:1,two:2});
});

.toMatch 传入一个正则表达式，它允许我们用来进行字符串类型的正则匹配

5 查看代码覆盖

    "test:cov": "vue-cli-service test:unit --coverage"