Adding Vue.js To Rails 5.1 and Unit Tests in Mocha don't work

Question

Repo is available here: https://github.com/systemnate/vuetesting

I created a rails app by running the command rails _5.1.2_ new vuetesting --webpack=vue

And then added mocha and chai yarn add mocha chai --save-dev

And then created a test directory by running mkdir test/javascript

Then I created a spec file to run... touch app/javascript/App.spec.js

And pasted in the following code:

const chai = require('chai')

const expect = chai.expect

describe('first test', () => {
  it('is true', () => {
    expect(true).to.equal(true)
  })
})

And added the following to package.json

"scripts": {
  "test": "mocha test/**/*.spec.js --recursive"
}

Now previous yarn test passes. Let's try to implement a Vue specific test.

I run the command yarn add avoriaz mocha-webpack --save-dev

And then modified package.json to use mocha-webpack:

  "scripts": {
    "test": "mocha-webpack test/**/*.spec.js --recursive"
  }

yarn test still passes.

Now I want to test the single file component. To start with, I added to the top of my test so it looks like this:

import Vue from 'vue';
import App from '../../app/javascript/packs/App.vue';

const chai = require('chai')
const expect = chai.expect

describe('first test', () => {
  it('is true', () => {
    expect(true).to.equal(true)
  })
})

And then run yarn test and get the following output

yarn test v0.27.5
$ mocha-webpack test/**/*.spec.js --recursive

ERROR in ./app/javascript/packs/App.vue
Module parse failed: /Users/natedalo/Ruby/vuetesting/app/javascript/packs/App.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|   <div id="app">
|     <p>{{ message }}</p>
 @ ./test/javascript/App.spec.js 2:0-53
error Command failed with exit code 1.

Any thoughts on what could be going wrong?

Answer 1

Using Unit Test Vue Components for Beginners as a guide, and copying the webpack.config.js and .setup files from the link above and then changing the test run to read like this inside the package.json:

"test": "mocha-webpack --webpack-config test/javascript/webpack.test.config.js test/**/*.spec.js --recursive --require test/javascript/.setup"