vue-test-utils-mocha-example

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)
  • 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)

Additional Configuration

package.json

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

webpack.config.js

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

test/setup.js

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

.babelrc

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.