Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings
This repository was archived by the owner on Dec 26, 2018. It is now read-only.

vuejs/vue-test-utils-mocha-webpack-example

Open more actions menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

Example project using mocha-webpack and vue-test-utils

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 7

Morty Proxy This is a proxified and sanitized view of the page, visit original site.