Bryan Lee

Testing For Rails + Webpacker + VueJS

· Ruby on Rails

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 <a href="" rel="nofollow">Vue</a>)
  • 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) {
        webpack: webpackConfig,
        // avoid walls of useless text
        webpackMiddleware: {
          noInfo: true
        files: [
        plugins: [
        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.


Testing for Webpacker