Quickly setup Mocha on an installation of Laravel with Vue and Laravel Mix

readme.md

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.

ExampleComponent.spec.js

// tests/JavaScript/ExampleComponent.spec.js

import { mount } from 'vue-test-utils';
import expect from 'expect';
import moxios from 'moxios';
import Helpers from  'mwangaben-vthelpers';
import ExampleComponent from '../../resources/assets/js/components/ExampleComponent.vue';

describe ('ExampleComponent', () => {

    let wrapper, b;

    beforeEach(() => {
        // Moxios is used for mocking axios. If you're not using axios or don't want to mock it with moxios, 
        // you can remove this. In that case, also remove the moxios.uninstall() call.
        moxios.install(window.axios);
        
        // This mocks the component and its dependencies.
        wrapper = mount(ExampleComponent);
        
        // This gives you a set of helpers to make it easier to make assertions, such as see(), inputValueIs(), type() etc.
        // For full documentation, see https://github.com/mwangaben/mwangaben-vthelpers.
        b = new Helpers(wrapper, expect);
    });

    afterEach(() => {
        moxios.uninstall(window.axios);
    });

    it ('displays the example text', () => {
        b.see('Example Component', '.card-header');
        b.see('I\'m an example component.');
    });

});