title: Laravel + VueJs + Webpack + Karma = world of pain
body: <p>Is it possible to write unit tests for VueJs if you are using Laravel's Elixir for your webpack configuration?</p>
  <p>VueJs 2x has a very simple example for a component test: <a href="https://v2.vuejs.org/v2/guide/unit-testing.html" rel="nofollow noreferrer">Vue Guide Unit testing</a></p>
  <pre><code>&lt;template&gt;
    &lt;span&gt;{{ message }}&lt;/span&gt;
  &lt;/template&gt;
  &lt;script&gt;
    export default {
      data () {
        return {
          message: 'hello!'
        }
      },
      created () {
        this.message = 'bye!'
      }
    }
  &lt;/script&gt;
  </code></pre>
  <p>and then...</p>
  <pre><code>// Import Vue and the component being tested
  import Vue from 'vue'
  import MyComponent from 'path/to/MyComponent.vue'
  
  describe('MyComponent', () =&gt; {
    it('has a created hook', () =&gt; {
      expect(typeof MyComponent.created).toBe('function')
    })
    it ...etc
  })
  </code></pre>
  <p>and gives an example of a karma conf file here: <a href="https://github.com/vuejs-templates/webpack/blob/master/template/test/unit/karma.conf.js" rel="nofollow noreferrer">https://github.com/vuejs-templates</a></p>
  <p>But the Karma configuration file requires a webpack configuration file</p>
  <pre><code>webpack: webpackConfig,
  </code></pre>
  <p>The only problem is the Laravel's Elixir is creating the webpack configuration so it can't be included.</p>
  <p>I have tried creating another webpack configuration file based on the example from <a href="https://github.com/vuejs-templates/webpack" rel="nofollow noreferrer">https://github.com/vuejs-templates/webpack</a>.</p>
  <p>Something like this:</p>
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  
  module.exports = {
      entry: './src/main.js',
      output: {
          path: path.resolve(__dirname, './dist'),
          publicPath: '/dist/',
          filename: 'build.js'
      },
      module: {
          rules: [
              {
                  test: /\.vue$/,
                  loader: 'vue-loader',
                  options: {
                      loaders: {
                          // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                          // the &quot;scss&quot; and &quot;sass&quot; values for the lang attribute to the right configs here.
                          // other preprocessors should work out of the box, no loader config like this necessary.
                          'scss': 'vue-style-loader!css-loader!sass-loader',
                          'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
                      }
                      // other vue-loader options go here
                  }
              },
              {
                  test: /\.js$/,
                  loader: 'babel-loader',
                  exclude: /node_modules/
              },
              {
                  test: /\.(png|jpg|gif|svg)$/,
                  loader: 'file-loader',
                  options: {
                      name: '[name].[ext]?[hash]'
                  }
              }
          ]
      },
      resolve: {
          alias: {
              'vue$': 'vue/dist/vue.esm.js'
          }
      },
      devServer: {
          historyApiFallback: true,
          noInfo: true
      },
      performance: {
          hints: false
      },
      devtool: '#eval-source-map'
  }
  </code></pre>
  <p>and included it like...</p>
  <pre><code>// Karma configuration
  // Generated on Wed Mar 15 2017 09:47:48 GMT-0500 (CDT)
  var webpackConf = require('./karma.webpack.config.js');
  delete webpackConf.entry;
  
  module.exports = function(config) {
    config.set({
  
      webpack: webpackConf, // Pass your webpack.config.js file's content
  
      webpackMiddleware: {
        noInfo: true,
        stats: 'errors-only'
      },
  </code></pre>
  <p>But I am getting errors that seem to indicate that webpack isn't doing anything.</p>
  <pre><code>ERROR in ./resources/assets/js/components/test.vue
  Module parse failed: /var/www/test/resources/assets/js/components/test.vue Unexpected token (1:0)
  You may need an appropriate loader to handle this file type.
  | &lt;template&gt;
  |     &lt;span &gt;{{test}}&lt;/span&gt;
  | &lt;/template&gt;
  </code></pre>