Example project using TypeScript, Jest + vue-test-utils together
This is based on the vue-cli 3 basic template. Test-specific changes include:
vue-test-utilsjestts-jest(for TypeScript compilation in tests)vue-jest(for handling*.vuefiles in tests)jest-serializer-vue(for snapshot tests)
The following configurations are recommended for Jest:
{
"jest": {
"globals": {
"vue-jest": {
"babelConfig": {
"presets": [
["@babel/preset-env", { "useBuiltIns": "entry" }],
"@vue/babel-preset-jsx"
]
}
}
},
"moduleFileExtensions": [
"js",
"json",
"ts",
// tell Jest to handle *.vue files
"vue"
],
"transform": {
// process TypeScript files
"^.+\\.ts$": "ts-jest",
// process *.vue files with vue-jest
".*\\.(vue)$": "vue-jest"
},
// support the same @ -> src alias mapping in source code
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1"
},
// serializer for snapshots
"snapshotSerializers": [
"jest-serializer-vue"
]
}
}# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run serve
# build for production with minification
npm run build
# run tests
npm test
# see coverage
open coverage/lcov-report/index.html