Note: This example is outdated. It's now recommended to scaffold your project with Vue CLI 3 which provides out-of-the-box configurations for unit testing.
Example project using mocha-webpack and vue-test-utils
This is based on the vue-cli webpack-simple template. Test-specific changes include:
vue-test-utilsmocha&mocha-webpackjsdom&jsdom-global(for setting up DOM environment in tests)webpack-node-externals(for excluding NPM deps from test bundle)expect(for assertions)- This is the package used internally by Jest, so usage is the same. You can also use chai + sinon.
nyc&babel-plugin-istanbul(for coverage)
Added test script and setting for nyc:
{
// ...
"scripts": {
// ...
"test": "cross-env NODE_ENV=test nyc mocha-webpack --webpack-config webpack.config.js --require test/setup.js test/**/*.spec.js"
},
"nyc": {
"include": [
"src/**/*.(js|vue)"
],
"instrument": false,
"sourceMap": false
}
}Added test-specific configs:
if (process.env.NODE_ENV === 'test') {
// exclude NPM deps from test bundle
module.exports.externals = [require('webpack-node-externals')()]
// use inline source map so that it works with mocha-webpack
module.exports.devtool = 'inline-cheap-module-source-map'
}Global setup for tests. This is run first with mocha-webpack's --require flag.
// setup JSDOM
require('jsdom-global')()
// make expect available globally
global.expect = require('expect')Added "plugins": ["istanbul"]:
{
"env": {
// ...
"test": {
"plugins": ["istanbul"]
}
}
}# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# run unit tests
npm testFor detailed explanation on how things work, consult the docs for vue-test-utils.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent