Karma mocha not recognizing JSX code - reactjs

Question

I am attempting to add automated testing to a react application using karma and mocha. The application is written using ES6 and JSX so I am also using webpack. I have imported the webpack config into the karma configuration settings, but I am still getting an error whenever I try to render a JSX component for testing:
Uncaught Error: Module parse failed: C:\Users\blahblahblah\app\tests\components\Clock.test.jsx Unexpected token (18:47)
You may need an appropriate loader to handle this file type.
| let testTime = 100;
| let expected = '00:01:40';
| let clock = TestUtils.renderIntoDocument(<Clock />);
| let actual = clock.formatTime(testTime);
|
at app/tests/components/Clock.test.jsx:74
Here are the files in question:
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VENDOR_LIBS = [
'axios', 'react', 'react-dom',
'react-loading', 'react-router', 'moment'
];
module.exports = {
entry: {
bundle: [
'script-loader!jquery/dist/jquery.min.js',
'script-loader!foundation-sites/dist/js/foundation.min.js',
'./app/app.jsx',
], // compile app files to bundle.js
vendor: VENDOR_LIBS // compile vendor files to vendor.js
},
externals: {
jquery: 'jQuery'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].[chunkhash].js'
},
resolve: {
alias: {
appStyles: path.resolve(__dirname, 'app/styles/app.scss'),
Main: path.resolve(__dirname, 'app/components/Main.jsx'),
Nav: path.resolve(__dirname, 'app/components/Nav.jsx'),
Timer: path.resolve(__dirname, 'app/components/Timer.jsx'),
Countdown: path.resolve(__dirname, 'app/components/Countdown.jsx'),
Clock: path.resolve(__dirname, 'app/components/Clock.jsx'),
Controls: path.resolve(__dirname, 'app/components/Controls.jsx')
},
extensions: [".js", ".jsx"]
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.jsx?$/,
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader', 'sass-loader'],
test: /\.scss$/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),
new HtmlWebpackPlugin({
template: './app/index.html'
}),
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery'
})
],
devtool: 'cheap-module-eval-source-map'
}
karma.conf.js
const webpackConfig = require('./webpack.config.js');
module.exports = (config) => {
config.set({
browsers: ['Chrome'],
singleRun: true,
frameworks: ['mocha'],
files: ['app/tests/**/*.test.jsx'],
preprocessors: {
'app/tests/**/*.test.jsx': ['webpack', 'sourcemap']
},
reporters: ['mocha'],
client: {
mocha: { // after 5 seconds, if a test hasnt finished, cancel it
timeout: '5000'
},
webpack: webpackConfig, // use our established webpack config
webpackServer: {
noInfo: true
}
}
})
}
package.json
{
"name": "boilerplate",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "karma start",
"clean": "rimraf dist",
"build": "SET NODE_ENV=production npm run clean & webpack -p",
"serve": "webpack-dev-server"
},
"author": "",
"license": "MIT",
"dependencies": {
"axios": "^0.16.1",
"express": "^4.15.2",
"moment": "^2.18.1",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-loading": "0.0.9",
"react-router": "^3.0.0"
},
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-env": "^1.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-0": "^6.24.1",
"colors": "^1.1.2",
"css-loader": "^0.28.1",
"expect": "^1.20.2",
"foundation-sites": "^6.3.1",
"html-webpack-plugin": "^2.28.0",
"jquery": "^3.2.1",
"karma": "^1.7.0",
"karma-chrome-launcher": "^2.1.1",
"karma-mocha": "^1.3.0",
"karma-mocha-reporter": "^2.2.3",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.3",
"mocha": "^3.4.1",
"node-sass": "^4.5.3",
"react-addons-test-utils": "^15.5.1",
"rimraf": "^2.6.1",
"sass-loader": "^6.0.5",
"script-loader": "^0.7.0",
"style-loader": "^0.17.0",
"webpack": "^2.3.3",
"webpack-dev-middleware": "^1.10.2",
"webpack-dev-server": "^2.4.5"
}
}
.babelrc
{
"presets": ["react", "es2015", "stage-0"]
}
The test that keeps failing:
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-dom/test-utils';
import expect from 'expect';
import $ from 'jQuery';
// Karma not recognizing webpack aliases
import Clock from 'babel-loader!./../../components/Clock.jsx';
describe('Clock Component', () => {
it('should exist', () => {
expect(Clock).toExist();
});
// THIS TEST KEEPS FAILING
describe('formatSeconds()', () => {
it('should format seconds to hh:mm:ss', () => {
let testTime = 100;
let expected = '00:01:40';
let clock = TestUtils.renderIntoDocument(<Clock />); // JSX = problem
let actual = clock.formatTime(testTime);
expect(actual).toBe(expected);
});
});
});