Jasmine test spec failing to pickup React import statement - reactjs

Question

I am trying to write unit tests for my reactjs code using Jasmine with the Karma test runner - automated with gulp. I am having an issue where my test spec includes import statements which are then not being picked up by the test body.
Here is my test spec:
import React from 'react';
import Utils from 'react-dom/test-utils';
import {MyClass} from "../Path/MyCodeFile.jsx";
describe('MyClass', function () {
it('can render without error', function () {
var component;
var element = React.createElement(
MyClass,
{}
);
expect(function () {
component = Utils.renderIntoDocument(element);
}).not.toThrow();
});
})
My Karma config file:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
'spec/*[Ss]pec.js',
'wwwroot/js/site.js'
],
exclude: [
],
preprocessors: {
'spec/*[Ss]pec.js': ['babel']
},
babelPreprocessor: {
options: {
presets: ['es2015', 'env'],
plugins: ["transform-es2015-modules-umd"]
}
},
reporters: ['progress', 'junit'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['Chrome'],
plugins: [
'karma-jasmine',
'karma-junit-reporter',
'karma-chrome-launcher',
'karma-babel-preprocessor'
],
singleRun: true,
concurrency: Infinity
});
}
My gulp task:
var gulp = require('gulp');
var Server = require('karma').Server;
gulp.task('unittest', function (done) {
new Server({
configFile: __dirname + '/karma.conf.js',
singleRun: true
}, function () {
done();
}).start();
});
And this is the message I get when running the task:
[21:17:11] Starting 'unittest'...
02 08 2018 21:17:13.030:INFO [karma]: Karma v2.0.5 server started at http://0.0.0.0:9876/
02 08 2018 21:17:13.030:INFO [launcher]: Launching browser Chrome with unlimited concurrency
02 08 2018 21:17:13.046:INFO [launcher]: Starting browser Chrome
02 08 2018 21:17:14.969:INFO [Chrome 67.0.3396 (Windows 10 0.0.0)]: Connected on socket peUBczU20NB36DSvAAAA with id 73989234
Chrome 67.0.3396 (Windows 10 0.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
Chrome 67.0.3396 (Windows 10 0.0.0) MyClass can render without error FAILED
TypeError: Cannot read property 'createElement' of undefined
at <Jasmine>
at UserContext.<anonymous> (spec/applicationSpec.js:31:43)
at <Jasmine>
Chrome 67.0.3396 (Windows 10 0.0.0): Executed 1 of 1 (1 FAILED) (0 secs / 0.003 secs)
Chrome 67.0.3396 (Windows 10 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.02 secs / 0.003 secs)
[21:17:15] Finished 'unittest' after 3.6 s
It's as if the import statement isn't there.

Answer 1

After some pain, I have found an alternative approach which successfully runs the tests. My new test spec:
describe('MyClass', function () {
var React;
var Utils;
var MyClasses;
beforeAll(() => {
React = require("react");
Utils = require("react-dom/test-utils");
MyClasses = require("../Path/MyClass.jsx");
});
it('can render without error', function () {
var component;
var element = React.createElement(
MyClasses.MyClass,
{}
);
expect(function () {
component = Utils.renderIntoDocument(element);
}).not.toThrow();
});
})
and my updated Karma config:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'browserify'],
files: [
'spec/*[Ss]pec.js',
'wwwroot/js/site.js'
],
exclude: [
],
preprocessors: {
'spec/*[Ss]pec.js': ['browserify']
},
browserify: {
debug: true,
transform: [
['babelify', {
presets: [
"#babel/preset-env",
"#babel/preset-react"
]
}]
],
extensions: ['.jsx']
},
reporters: ['progress', 'junit'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['Chrome'],
plugins: [
'karma-jasmine',
'karma-junit-reporter',
'karma-chrome-launcher',
'karma-babel-preprocessor',
'karma-browserify'
],
singleRun: true,
concurrency: Infinity
});
}