pascual's avatar

Any working setup of mochapack + Laravel Mix + Vue Test Utils?

Hello wonderful people,

I am currently studying the "Testing Vue" course here at Laracasts (https://laracasts.com/series/testing-vue).

While the course is great as one can expect from anything at this site, the specific implementation details of setting up the testing environment given seems to be a bit outdated.

I have played around with the dependencies a lot, to no luck, and also read everything I could find on the subject. In the series Jeffrey suggests using mocha-webpack, but seeing that this tool is deprecated I have swapped this for mochapack.

When trying to run my tests using:

mochapack webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/JavaScript/setup.js tests/JavaScript/\*\*/\*.spec.js

I get this error message:

Module parse failed: Unexpected token (1:0)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

This seems like a really, really strange thing to happen, as Laravel Mix should apply the correct loader automagically.

For reference, my package.json looks like this:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "testjs": "mochapack webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/JavaScript/setup.js tests/JavaScript/\*\*/\*.spec.js"
    },
    "devDependencies": {
        "@vue/test-utils": "^1.0.0-beta.31",
        "axios": "^0.18.1",
        "bootstrap": "^4.4.1",
        "cross-env": "^5.2.1",
        "expect": "^25.1.0",
        "jquery": "^1.12.4",
        "jsdom": "^16.2.0",
        "jsdom-global": "^3.0.2",
        "laravel-mix": "^5.0",
        "lodash": "^4.17.15",
        "mocha": "^5.2.0",
        "mochapack": "^1.1.13",
        "popper.js": "^1.16.1",
        "sass": "^1.26.1",
        "sass-loader": "^8.0.2",
        "vue": "^2.6.11",
        "vue-loader": "^15.9.0",
        "vue-template-compiler": "^2.6.11",
        "webpack": "^4.0.0",
        "webpack-cli": "^3.3.11"
    },
    "dependencies": {
        "ajv": "^6.12.0",
        "animate.css": "^3.7.2",
        "bootstrap-vue": "^2.5.0",
        "imagemin": "^5.3.1",
        "interact.js": "^1.2.8",
        "tailwindcss": "^1.2.0",
        "vuedraggable": "^2.23.2",
        "vuex": "^3.1.2"
    }
}

For further reference, her is my setup.js (for Vue Test Utils):

require('jsdom-global')();

And here is the spec file:

import { Mount } from '@vue/test-utils';
import expect from 'expect';
import FlowDesigner from "../../resources/js/components/FlowDesigner.vue";

describe ('FlowDesigner', () => {
    it ('says that it is testing HTML canvas', () => {
        let wrapper = Mount(FlowDesigner);

        expect(wrapper.html()).toContain('Testing HTML Canvas');
    });
})

Does anyone have a currently working setup using Vue Test Utils with Mochapack hooked into Laravel Mix? If so, I would be super grateful if you would share your setup. Or maybe I have just screwed this totally up, and you may tell me what a dumb knob I am, and perhaps tell me what I got wrong?

0 likes
1 reply
pascual's avatar

Seems like I indeed was a dumb knob here.

The error was due to a syntax error in the NPM script

This was wrong:

mochapack webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/JavaScript/setup.js tests/JavaScript/\*\*/\*.spec.js

This is correct:

mochapack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/JavaScript/setup.js tests/JavaScript/**/*.spec.js

Also, If anyone needs to test HTML Canvas elements under this setup, install the canvas npm package:

npm install --save-dev canvas

Please or to participate in this conversation.