配置 jest.config.js
module.exports = {
// tell Jest to handle `*.vue` files
moduleFileExtensions: ["js", "json", "vue"],
watchman: false,
moduleNameMapper: {
"^~/(.*)$": "<rootDir>/$1",
"^~~/(.*)$": "<rootDir>/$1",
"^@/(.*)$": "<rootDir>/$1"
},
transform: {
// process js with `babel-jest`
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
// process `*.vue` files with `vue-jest`
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
},
snapshotSerializers: ["<rootDir>/node_modules/jest-serializer-vue"],
collectCoverage: true,
collectCoverageFrom: [
"<rootDir>/components/**/*.vue",
"<rootDir>/pages/*.vue"
]
};
配置 Babel config
function isBabelLoader(caller) {
return caller && caller.name === "babel-loader";
}
module.exports = function(api) {
if (api.env("test") && !api.caller(isBabelLoader)) {
return {
presets: [
[
"@babel/preset-env",
{
targets: {
node: "current"
}
}
]
]
};
}
return {};
};
添加测试脚本到 package.json
"test": "jest --colors --verbose"
因为Jest 的测试文件中的方法是全局的,所以一般编辑器不会给提示,如果想要编辑器有提示的话可以安装 @types/jest
参考文章
https://medium.com/@gogl.alex/nuxt-jest-setup-from-scratch-8905d3880daa https://medium.com/@brandonaaskov/how-to-test-nuxt-stores-with-jest-9a5d55d54b28