Laravel-mix: Integration with test runners

[AP-Hunt]

Hi Jeffrey,

I hope this isn't a daft question, but does Laravel Mix integrate with any test runners yet? I'd be wanting to do things like run my tests as part of a production build, or use Mix's webpack config to transpile my source files before Karma runs the tests.

I can't find any reference to how best to do it at the moment, but perhaps I'm just being blind? If not, is test runner integration a planned feature?

In the meantime, I want to do the above anyhow, and I'll happily contribute my findings to the docs..

Regards,
Andy

[JeffreyWay]

It has no test runner integration at all.

[etiennellipse]

@AndyBursh Were you able to integrate your Mix build with Karma test runner? We need to do exactly the same thing.

[AP-Hunt]

No, I ended up ditching Mix and writing all my own Webpack configs, sorry.

[etiennellipse]

I did the same thing :)

[thomhickey]

How is anyone writing and maintaining test suites of their Vue/Vuex components/apps inside Laravel? Creating an entirely separate webpack.config.js that essentially replicates what the webpack.mix.js file does? I can see why - if this is what you were facing - you would just ditch mix altogether. I was hoping to not have to learn webpack just yet as there is so much going on in the front end these days that I was hoping to use the 'set-it-and-forget-it' approach that mix provides. But I can't go on without putting my Vuex store under test, it's just not wise.

[thomhickey]

FWIW, I got it working without ditching mix, if anyone is interested. But this is hack-ish, so be warned. I copied the webpack.config.js from the laravel-mix node module and placed it at project root. I then pointed Karma at it for basic webpack configuration. I modified one line of webpack.config.js to set up source maps:

module.exports.devtool = 'inline-source-map'; // requires karma-sourcemap-loader npm

My karma config is basic:

var webpackConfig = require('./webpack.config.js');

module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
'tests/js//Spec.js',
],
preprocessors: {
'tests/js//Spec.js': ['webpack', 'sourcemap'],
},
webpack: webpackConfig,
reporters: ['mocha'], // i prefer mocha reporting (karma-mocha-reporter npm)
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity
})
}

then at the top of every jasmine spec file I require a 'test_setup.js':

window.Laravel = {}
window.Laravel.csrfToken = '' // yeah, i know but i'm not testing laravel here, only js and vue
require('../../resources/assets/js/bootstrap')
require('../../resources/assets/js/site')

With this I can write unit tests, have karma auto-watching and even step debug the tests inside PhpStorm using the source maps (slightly buggy but works). I'm now putting my Vuex store under test, which was the whole idea in the first place. Yay hacks!

[adiachenko]

I have written an article explaining how to integrate Laravel Mix with Jest.

https://medium.com/@adiach3nko/how-to-configure-jest-testing-framework-for-laravel-mix-775a03b1c71

[ghost]

To save you on googling, I used this and it's quite useful.
https://medium.com/@dammyammy/running-tests-on-your-laravel-elixir-projects-with-karma-jasmine-webpack-4c47dd34f44f

[isometriq]

You may want to see this:
https://laracasts.com/series/testing-vue/episodes/6
(Testing Vue: Hooking Into Laravel Mix)

[isometriq]

@JeffreyWay
Testing did not work with mix.extract() ..had to tweak a bit

package.json

...
"scripts": {
    ...
    "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"
  },
...

webpack.mix.js

if (process.env.NODE_ENV !== 'testing') {
    mix.extract([
        // ...
    ]);
}

[bolechen]

I use mocha+nyc code coverage, is losts me 2 days, here is the result
https://github.com/bolechen/laravel-vue-test-use-mocha-nyc

[bolechen]

This is the last laravel6 version + jest example repo.

https://github.com/bolechen/laravel-vue-test-use-jest