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?