Vue单测Jest搭建

Vue test:unit配置

一、插件配置

1.1 确保工程中已经存在vue-loader 和 babel插件

1.2 添加处理单文件组件

npm install –save vue-jest

1.3 配置jest babel

npm install –save babel-jest

1.4 安装vue test utils 和 jest

npm install --save jest @vue/test-utils

二、脚本添加

2.1 添加运行脚本

Package.json文件

{

‘script’:{

test:unit: ‘jest –clearCache && vue-cli-service test:unit --coverage’

}

}

三、添加环境等，为测试开启ES module语法等

3.1添加 .babelrc 文件内容

{

‘presets’: [[‘env’, {‘modules’:false}]],

‘env’: {

‘presets’: [[‘env’, {‘targets’:{‘node’: ’current’}}]]}

}

四、测试文件格式及命名规则

4.1 在test/unit/文件夹下创建文件并编写测试用例，文件以 .spec.js 结尾

语法请参照 jest 官方文档

五、 如果报错请看报错信息 是否缺少依赖

5.1 安装label-preset-env

npm install –save label-preset-env

5.2 安装regenerator-runtime

npm install –save regenerator-runtime

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'
    // "^.+\\.js$":"babel-jest"
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: ['jest-serializer-vue'],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'],
  coverageDirectory: '<rootDir>/tests/unit/coverage',
  // 'collectCoverage': true,
  'coverageReporters': [
    'lcov',
    'text-summary'
  ],
  verbose: true,
  testURL: 'http://localhost/',
  // 'vendor': path.resolve(__dirname, '../src/vendor')
}