Bryan Lee
Bryan Lee

Musings about growth, software engineering, and tech.

Ruby on Rails

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({
    publicslug: 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

    comments powered by Disqus