Uncaught Syntax Error when running Vue.Js Unit Tests with Karma - unit-testing

Question

I'm trying to get unit testing set up for my Vue JS project with Karma and Mocha (with vue-cli, I originally used Jest but I'm switching to Karma). I try to run my test with karma start; karma run and I keep getting:
09 03 2018 17:02:49.778:INFO [karma]: Karma v2.0.0 server started at http://0.0.0.0:9876/
09 03 2018 17:02:49.786:INFO [launcher]: Launching browser Chrome with unlimited concurrency
09 03 2018 17:02:49.797:INFO [launcher]: Starting browser Chrome
09 03 2018 17:02:54.410:INFO [Chrome 64.0.3282 (Windows 10.0.0)]: Connected on socket mvbOII8qli3NiwBMAAAA with id 62867001
Chrome 64.0.3282 (Windows 10.0.0) ERROR
{
"message": "Uncaught SyntaxError: Unexpected identifier\nat specs/PdfView.spec.js:3:8\n\nSyntaxError: Unexpected identifier",
"str": "Uncaught SyntaxError: Unexpected identifier\nat specs/PdfView.spec.js:3:8\n\nSyntaxError: Unexpected identifier"
}
The test runner starts, but I'm guessing some config issue is preventing the test from running properly. Also, it's not this just one component that will give me those errors.
My karma.conf.js file:
var webpackConfig = require('../../build/webpack.test.conf')
module.exports = function karmaConfig (config) {
config.set({
browsers: ['Chrome'],
frameworks: ['mocha'],
reporters: ['spec', 'coverage'],
files: ['specs/**/*.spec.js'],
preprocessors: {
'test/unit/spec/**/*.spec.js': [ 'webpack', 'sourcemap' ]
},
plugins: [
// Launchers
'karma-chrome-launcher',
// Test Libraries
'karma-mocha',
// 'karma-sinon-chai',
// Preprocessors
'karma-webpack',
'karma-sourcemap-loader',
// Reporters
'karma-spec-reporter',
'karma-coverage'
],
webpack: webpackConfig,
webpackMiddleware: {
noInfo: true
},
singleRun: true,
coverageReporter: {
dir: './coverage',
reporters: [
{ type: 'lcov', subdir: '.' },
{ type: 'text-summary' }
]
}
})
}
My .babelrc file:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}
My webpack.test.conf.js:
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const webpackConfig = merge(baseWebpackConfig, {
// use inline sourcemap for karma-sourcemap-loader
module: {
rules: utils.styleLoaders(),
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
devtool: '#inline-source-map',
resolveLoader: {
alias: {
// necessary to to make lang="scss" work in test when using vue-loader's ?inject option
// see discussion at https://github.com/vuejs/vue-loader/issues/724
'scss-loader': 'sass-loader'
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/test.env')
})
]
})
delete webpackConfig.entry
module.exports = webpackConfig
PdfView.spec.js
import Vue from 'vue';
import Test from '#/components/Submission/PdfView';
describe('Test', () => {
it(`should render`, () => {
const Constructor = Vue.extend(Test);
const comp = new Constructor({}).$mount();
expect(comp.$el.textContent)
.to.equal('Test Text');
});
});
Webpack ^3.6.0,
Karma ^2.0.0,
Vue ^2.5.2

Answer 1

It looks to me like the # in import Test from '#/components/Submission/PdfView'; is not being resolved. Try adding this to your webpack.test.conf.js:
resolve: {
alias: {
'#': resolve('src')
}
}