没有用vue-cli创建的项目引入单元测试(jest+vue/test-utils)

用vue-cli创建的项目可以选择集成单元测试,这样就会自动构建好test目录
那没有用vue-cli创建的项目该如何引入单元测试(jest+vue/test-utils)

npm install 安装包
注意安装版本
“@vue/test-utils”: “^1.1.3”,
“babel-helper-vue-jsx-merge-props”: “^2.0.3”,
“babel-jest”: “^21.0.2”,
“babel-plugin-dynamic-import-node”: “^1.2.0”,
“babel-plugin-syntax-jsx”: “^6.18.0”,
“babel-plugin-transform-es2015-modules-commonjs”: “^6.26.0”,
“babel-plugin-transform-vue-jsx”: “^3.5.0”,
“jest”: “^22.0.4”,
“jest-serializer-vue”: “^0.3.0”,
“vue-jest”: “^1.0.2”,

Package.json
“unit”: “jest --config test/unit/jest.conf.js --coverage”

在test/unit 里面新增两个文件
Jest.conf.js 这个文件我已做了修改可以直接运行,如果是新搭的测试框架,是不能正常运行的

Jest.conf.js

const path = require('path');
module.exports = {
  rootDir: path.resolve(__dirname, '../../'),
  moduleFileExtensions: [
    'js',
    'json',
    'vue',
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  transform: {
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
  },
  testPathIgnorePatterns: [
    '<rootDir>/test/e2e',
  ],
  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
  setupFiles: ['<rootDir>/test/unit/setup'],
  coverageDirectory: '<rootDir>/test/unit/coverage',
  collectCoverageFrom: [
    'src/components/common/**/*.{js,vue}',
    '!src/main.js',
    '!src/router/index.js',
    '!**/node_modules/**',
  ],
  verbose: true, // 新增
  testURL: 'http://localhost/', // 新增
};

Setup.js
import Vue from ‘vue’;

Vue.config.productionTip = false;

运行 npm run unit

注意:写单元测试的时候,组件名字最好不要index.vue,不然测试覆盖率会检测不到文件

猜你喜欢

转载自blog.csdn.net/wang15180138572/article/details/115393937