Example project using mocha-webpack and vue-test-utils
Switch branches/tags
Nothing to show
Clone or download


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:

Additional Dependencies

  • vue-test-utils
  • mocha & mocha-webpack
  • jsdom & jsdom-global (for setting up DOM environment in tests)
  • webpack-node-externals (for excluding NPM deps from test bundle)
  • expect (for assertions)
  • nyc & babel-plugin-istanbul (for coverage)

Additional Configuration


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": [
    "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

// make expect available globally
global.expect = require('expect')


Added "plugins": ["istanbul"]:

  "env": {
    // ...
    "test": {
      "plugins": ["istanbul"]

Build Setup

# 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 test

For detailed explanation on how things work, consult the docs for vue-test-utils.