Unit testing in React + Mocha + Enzyme i + Webpack - how to ignore imported files? - unit-testing

Question

I'm trying to Unit Test React on the Front End in Mocha & Enzyme. The testing stops when Mocha gets into the app file and parses over import statements:
import 'script!jquery';
import 'script!what-input';
import 'script!foundation-sites';
I was able to ignore .css and .scss files in the package.json test command:
"test": "mocha --compilers js:babel-register --require ./test/client/test_helper.js --require ignore-styles --recursive",
"test/client:watch": "npm test -- --watch"
I'm not clear on how to ignore these import files, and if I'm going about this the wrong way. (I found the solution for ignore-styles here in Stack Overflow but not something like this.
The error I get:
module.js:341
throw err;
^
Error: Cannot find module 'script!jquery'
New to Unit testing, any help appreciated.
update:
// babelrc
{
"presets": ["es2015", "stage-0", "react"],
"plugins": ["transform-runtime"],
"env": {
"development": {
"presets": ["react-hmre"]
},
"production": {
"presets": ["react-hmre"]
}
}
}
// webpack.config.js
var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/client/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'./client/index.js'
],
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new ExtractTextPlugin("bundle.css"),
HtmlWebpackPluginConfig
],
module: {
loaders: [
{
test: /\.js$/,
loaders: [ 'babel' ],
exclude: /node_modules/,
include: path.join(__dirname, 'client')
},
// fonts and svg
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
{
// images
test: /\.(ico|jpe?g|png|gif)$/,
loader: "file"
},
{
// for some modules like foundation
test: /\.scss$/,
exclude: [/node_modules/], // sassLoader will include node_modules explicitly
loader: ExtractTextPlugin.extract("style", "css!postcss!sass?outputStyle=expanded")
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style", "css!postcss")
}
]
},
postcss: function(webpack) {
return [
autoprefixer({browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']})
];
},
sassLoader: {
includePaths: [path.resolve(__dirname, "node_modules")]
}
};
script/run.sh points to a test-helper file:
/* jshint undef: false, unused: false */
process.env.NODE_ENV = 'test';
// The following allows you to require files independent of
// the location of your test file.
// Example:
// var User = require(__server + '/models/user.js')
//
global.__server = __dirname + '/../server';
global.__client = __dirname + '/../client';
//
// Assertions
//
var chai = require('chai');
// Option 1: Make the `expect` function available in every test file
global.expect = chai.expect;
// Option 2: Make everything should-able
// global.should = chai.should()
//
// Helper Functions
//
// This is the object you can attach any helper functions used across
// several test files.
global.TestHelper = {};
var db = require('../server/db.js');
TestHelper.setup = function(){
return db.deleteEverything();
};
//
// Mock apps for API testing
//
var express = require('express');
TestHelper.createApp = function (loader) {
var app = express();
app.use(require('body-parser').json());
app.testReady = function () {
// Log all errors
app.use(function (err, req, res, next) {
console.error('==Error==');
console.error(' ' + err.stack);
next(err);
});
};
return app;
};
//
// Mocha "helpers" to support coroutines tests
//
var Bluebird = require('bluebird');
global.before_ = function (f) { before ( Bluebird.coroutine(f) ); };
global.beforeEach_ = function (f) { beforeEach ( Bluebird.coroutine(f) ); };
global.it_ = function (description, f) { it ( description, Bluebird.coroutine(f) ); };
global.xit_ = function (description, f) { xit ( description, f ); };
global.it_.only = function (description, f) { it.only( description, Bluebird.coroutine(f) ); };
I'm not entirely sure how the helper file is well, helping, since the back end team member put it together for his unit tests - but it looks like it could be promising.
Thanks for your time.