Karma + Jasmine - Can't find variable require

Question

i'm trying to implement some tests in my VueJS project using karma and jasmine. I can launch basic test such as:

describe('canary', function () {

  // asserting JavaScript options
  it('should run', function () {
    expect(true).toBe(true)
  })

  it('should run 2', function () {
    expect(false).toBe(false)
  })
})

which return (I'm not allowed to display image on my post yet):

But when it comes to testing my components (So when i require them) it says to me:

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR ReferenceError: Can't find variable: require at history.spec.js:1

Here is my karma.conf.js:

module.exports = function(config) {
  var tests = './**/*.js';

  config.set({

    frameworks: ['jasmine'],

    files: [tests],

    reporters: ['dots'],

    singleRun: true,
    autoWatch: false,

    browsers: ['PhantomJS'],

    preprocessors: {
      tests: ['webpack'],
      '../src/main.js': ['webpack']
    },
     webpack: {
      module: {
        loaders: [
          { test: /\.js/, exclude: /node_modules/, loader: 'babel-loader' }
        ]
      },
      watch: true
    },
    webpackServer: {
      noInfo: true
    }
  });
};

Here's my test file:

var Vue = require('vue')
var ComponentA = require('../src/Log.vue')

describe('Log.vue', function () {

  // asserting JavaScript options
  it('should have correct message', function () {
    expect(ComponentA.data().msg).toBe('Hello from Log!')
  })
})

EDIT - New karma.conf.js file

Answer 1

I managed to make it work, so i post my config files here, it might help.

webpack.test.config.js:

const path = require('path')

module.exports = {
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?.*$|$)/,
        loader: 'file-loader?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        },
        include: [
          path.resolve(__dirname, '../')
        ],
        exclude: /node_modules/
      },
    ],
    rules: [
        {
          // Maybe just use vue-loader on html template files in components directory only 
          // Like /components\/.*\.html$/
          test: /\.vue$/,
          loader: 'vue-loader'
        },
        {
          test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?.*$|$)/,
          loader: 'file-loader?name=assets/[name].[hash].[ext]'
        },
    ]
  },
  resolve: {
    extensions: ['.js', '.vue']
  }
}

karma.conf.js

module.exports = function(config) {
  var tests = '*.js';

  config.set({

    frameworks: ['jasmine'],

    files: [tests],

    reporters: ['dots'],

    singleRun: true,
    autoWatch: false,

    browsers: ['PhantomJS'],

    preprocessors: {
      tests: ['webpack'],
      '../src/main.js': ['webpack']
    },
     webpack: {
      module: {
        loaders: [
          { test: /\.js/, exclude: /node_modules/, loader: 'babel-loader' }
        ]
      },
      watch: true
    },
    webpackServer: {
      noInfo: true
    }
  });
};

Some basic test:

import { expect } from 'chai'

describe('canary', function () {

  // asserting JavaScript options
  it('should run', function () {
    expect(true).to.be.true
  })

  it('should run 2', function () {
    expect(false).to.be.false
  })
})