Webpacker: Configuration necessary for Vue single file component testing?

[systemnate]

I apologize if this is not the correct place to post this, but I was hoping to at least get some direction. I have been struggling over the past several days to get any sort of JS testing framework set up with Vue in a brand new Rails 5.1.2 application. I am posting this here because I believe it has something to do with how vue-loader is used in the default configuration for webpack, but I am not 100% sure.

Here is the repo I generated followed by the steps I have taken to get here: https://github.com/systemnate/vuetesting

$ rails _5.1.2_ new vuetesting --webpack=vue
$ yarn add mocha chai --save-dev
$ mkdir test/javascript
$ touch app/javascript/App.spec.js

In App.spec.js:

const chai = require('chai')

const expect = chai.expect

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

package.json add:

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

Now yarn test passes.

$ yarn add avoriaz mocha-webpack --save-dev

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. This is where I have been running into problems no matter what I do. To start with, I added to the top of my test:

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)
  })
})

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

ERROR in ./app/javascript/packs/App.vue
Module parse failed: /Users/nate****/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.

It seems like there is definitely a problem with it not recognizing the single file component and the "You may need an appropriate loader to handle this file type" leads to me that vue-loader is not being used in some manner, however this is the default vue.js webpack config:

module.exports = {
  test: /.vue$/,
  loader: 'vue-loader',
  options: {
    extractCSS: true,
    loaders: {
      js: 'babel-loader',
      file: 'file-loader',
      scss: 'vue-style-loader!css-loader!postcss-loader!sass-loader',
      sass: 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax'
    }
  }
}

Does anyone have any advise on how I can get past this error message?

[systemnate]

It appears that the problem was that mocha-webpack was not looking at the webpack configuration.

I added an additional webpack configuration in my test/javascript directory (see below) and then added this to my packages.json:

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

webpack.test.config.js:

const path = require('path')

module.exports = {
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['env']
        },
        include: [
          path.resolve(__dirname, '../')
        ],
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.vue']
  }
}

[gauravtiwari]

@systemnate Is all working okay now for you now? You can reference the config supplied by webpacker that lives under config/webpack/test.js

[systemnate]

@gauravtiwari - All working now - what a relief. Thanks! I will close now.

[systemnate]

@gauravtiwari - Actually, I do not seem to be able to reference the config/webpack/test.js file. When I have this in my packages.json:

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

I get

$ mocha-webpack --webpack-config config/webpack/test.js spec/javascripts/components/*.spec.js --recursive
/Users/natedalo/Ruby/hubble/config/webpack/configuration.js:26
  path: resolve('public', settings.public_output_path),
                                  ^

TypeError: Cannot read property 'public_output_path' of undefined
    at Object.<anonymous> (/Users/natedalo/Ruby/hubble/config/webpack/configuration.js:26:35)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/natedalo/Ruby/hubble/config/webpack/shared.js:12:47)
    at Module._compile (module.js:571:32)
error Command failed with exit code 1.

Ideally, it would be nice to use the generated test.json, but for now I am using a custom one.

[gauravtiwari]

@systemnate You would need to add NODE_ENV

"test": "NODE_ENV=test mocha-webpack --webpack-config ./config/webpack/test.js spec/javascripts/components/*.spec.js --recursive"

[systemnate]

@gauravtiwari - Thanks for your help - that works!