Skip to content
Upgrade to webpack 4 and babel 7
Branch: master
Clone or download
Pull request Compare This branch is 1 commit ahead of vuejs:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.babelrc
.gitignore
README.md
index.html
package-lock.json
package.json
webpack.config.js

README.md

THIS REPOSITORY IS DEPRECATED

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.

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

You can’t perform that action at this time.