Step 1: Add aaaaall the required packages
yarn add expect jsdom jsdom-global mocha mocha-webpack vue-test-utils moxios mwangaben-vthelpers --dev
or
npm install expect jsdom jsdom-global mocha mocha-webpack vue-test-utils moxios mwangaben-vthelpers --save-dev
Step 2: Create your setup.js file
mkdir tests/JavaScript && echo "require('jsdom-global')();" > tests/JavaScript/setup.js
Add this to the file:
// When using axios globally through window.axios, use the following to make it available in your tests:
let axios = require('axios');
window.axios = axios;
// When using a global event bus, like window.bus.$emit and window.bus.$on, uncomment this:
// let Vue = require('vue');
// window.bus = new Vue();
Step 3: Add the test scripts to your package.json file
"test": "cross-env NODE_ENV=testing mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/JavaScript/setup.js tests/JavaScript/**/*.spec.js",
"test-watch": "cross-env NODE_ENV=testing mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/JavaScript/setup.js --watch tests/JavaScript/**/*.spec.js"
Step 4: If you're extracting dependencies with mix.extract(), disable it when testing
if(process.env.NODE_ENV !== 'testing'){
mix.extract(['vue']);
}
You can now place your tests in the tests/JavaScript folder. Suffix them with .spec.js. Then run yarn test
or npm test
.
Refer to ExampleComponent.spec.js for an example test.