Testing For Rails + Webpacker + VueJS

There doesn't seem to be too much discussion about a workflow for testing VueJS in a Rails + Webpacker stack. I've been exploring how to implement a decent unit testing workflow instead of relying too much on feature testing. Don't get me wrong, feature testing is important, but they are usually slower than unit testing. I believe at least for certain use cases, unit testing could come in very handy in providing a wide net of test coverage, and then use feature testing to cover the very crucial process flows, speeding up overall efficiency.

Chosen Tools

  • Karma, as the test runner (officially recommended by Vue)
  • karma-cli (optional, but makes life easier)

Test Environment Set Up

# In your Rails root directory,
npm install karma karma-webpack jasmine-core --dev

# karma-cli lets us run Karma with the simple karma command from anywhere
npm install -g karma-cli

# Setup karma
karma init

Update karma.conf.js to read the same config/test.js:

// Add to top of file
const webpackConfig = require('./config/webpack/test.js')

// Add in these
module.exports = function(config) {
config.set({
webpack: webpackConfig,
// avoid walls of useless text
webpackMiddleware: {
noInfo: true
},
files: [
'app/javascript/js/*.js',
'app/javascript/test/**/*Spec.js'
],
plugins: [
"karma-jasmine",
"karma-webpack",
"karma-chrome-launcher",
],
preprocessors: {
'app/javascript/js/*.js': ['webpack'],
'app/javascript/test/**/*Spec.js': ['webpack']
},
singleRun: true
})
}

In your config/shared.js, you need to set writeToFileEmit to false in test environments to fix a bug

plugins: [
new ManifestPlugin({
publicpermalink: output.publicPath,
writeToFileEmit: env.NODE_ENV !== 'test'
})
],

Karma should successfully run

NODE_ENV=test karma start

There you go, start writing your spec files and you should be successfully testing.

References

Testing for Webpacker