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')
}