Angular-cli test for React component

I have an application in which there are reagent components, I have achieved that the components are compiled together with the entire application. Now I would like to configure the karma for testing the React components.

karma

React

Angular 6+

But I get that error for React components

React

Uncaught Error: Module parse failed: Unexpected token (32:3)
You may need an appropriate loader to handle this file type.
| expect(props instanceof Object).toBeTruthy();
| const component = ReactTestUtils.renderIntoDocument(
| <Slider
| currentItem={props.currentItem}
| items={props.items}


karma.conf.js

module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../coverage'),
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
module: {
loaders: [
{ test: /.js$/, loader: 'babel-loader' }
]
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};


test.ts added for spec.js

// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

declare const require: any;

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./app/modules/visualization/social-sites/', true, /.spec.(j|t)s$/);
// And load the modules.
context.keys().map(context);


.babelrc

{
"presets": [
["env", {
"targets": {
"chrome": 53,
"browsers": ["last 2 versions", "safari 7"]
},
"modules": false,
"loose": true
}],
"react"
],
"plugins": ["transform-decorators-legacy", "transform-class-properties", "transform-object-rest-spread"],
"env": {
"production": {
"presets": [
"babili"
]
},
"test": {
// bacause of earlier we disable transformation of es2015 modules (needed for jest)
"presets": ["env", "react"],
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}


1 Answer
1

Seems you should configure babel with babel-preset-react or add jsx-loader next to babel-loader in the module loaders section.

babel

babel-preset-react

jsx-loader

babel-loader

.babelrc

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.