Running Tests using React Test Utils and error - phantomjs

Question

I get error when using react test utils. Following this blog post: http://blog.sodhanalibrary.com/2016/11/reacttestutils-tutorial-with-examples.html#.WoVNkqhl8dU . Can you advise what's wrong?
My test class:
import AzSearch from '../components/AzSearch'
import { render } from 'enzyme';
//import ReactTestUtils from 'react-dom/test-utils';
import TestUtils from 'react-addons-test-utils';
describe('AzSearch', () => {
it('should render wihtout problems', () => {
//define component
//var root = TestUtils.renderIntoDocument(<AzSearch />);
//Check it exists
//expect(root).toExist();
var shallowRenderer = TestUtils.createRenderer();
shallowRenderer.render(<AzSearch/>);
expect(shallowRenderer.getRenderOutput()).toExist();
});
});
My package:
{
"name": "npmsharepoint",
"version": "0.0.1",
"private": true,
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"build": "browserify -t [ babelify --presets [ react ] ] src/app/scripts/main.js -o src/scripts/app.js",
"clean": "gulp clean",
"test": "mocha src/webparts/User Web Parts/src/webparts/azSearch/tests/AzSearch.test.js --require src/webparts/User Web Parts/src/webparts/azSearch/tests/testHelpers.js --require src/webparts/User Web Parts/src/webparts/azSearch/tests/dom.js --recursive"
},
"dependencies": {
"#microsoft/sp-core-library": "~1.1.0",
"#microsoft/sp-lodash-subset": "~1.1.0",
"#microsoft/sp-office-ui-fabric-core": "~1.4.0-0",
"#microsoft/sp-webpart-base": "~1.1.0",
"#types/jquery": "^2.0.48",
"#types/jqueryui": "https://registry.npmjs.org/#types/jqueryui/-/jqueryui-1.11.37.tgz",
"#types/react": "0.14.46",
"#types/react-addons-shallow-compare": "0.14.17",
"#types/react-addons-test-utils": "0.14.15",
"#types/react-addons-update": "0.14.14",
"#types/react-dom": "0.14.18",
"#types/webpack-env": ">=1.12.1 <1.14.0",
"babel-preset-react": "^6.24.1",
"babelify": "^8.0.0",
"bootstrap": "^4.0.0-beta.2",
"browser-router": "^0.2.0",
"jquery": "^2.2.4",
"jqueryui": "https://registry.npmjs.org/jqueryui/-/jqueryui-1.11.1.tgz",
"prop-types": "^15.6.0",
"react": "15.4.2",
"react-autosuggest": "^9.3.2",
"react-bootstrap": "^0.31.5",
"react-bootstrap-table": "^4.3.1",
"react-dom": "15.4.2",
"react-responsive-modal": "^2.0.0",
"react-select": "^1.1.0",
"reactstrap": "^5.0.0-alpha.4",
"sp-pnp-js": "^3.0.3"
},
"devDependencies": {
"#microsoft/sp-build-web": "~1.1.0",
"#microsoft/sp-module-interfaces": "~1.1.0",
"#microsoft/sp-webpart-workbench": "~1.1.0",
"#types/chai": ">=3.4.34 <3.6.0",
"#types/material-ui": "^0.20.0",
"#types/mocha": ">=2.2.33 <2.6.0",
"#types/react-tap-event-plugin": "0.0.30",
"ajv": "~5.2.2",
"gulp": "~3.9.1",
"chai": ">=3.4.34 <3.6.0",
"mocha": ">=2.2.33 <2.6.0"
}
}
Error:
Module parse failed: C:\Users/React Projects/Web Parts/b2\SPWPTest\src\webparts\User Web Parts\lib\webparts\azSearch\tests\AzSearch.test.js Unexpected token (33:25)
You may need an appropriate loader to handle this file type.
|
| var shallowRenderer = TestUtils.createRenderer();
| shallowRenderer.render(<AzSearch/>);
| expect(shallowRenderer.getRenderOutput()).toExist();
| });
at C:/Users/React Projects/Web Parts/b2/SPWPTest/src/webparts/User Web Parts/temp/tests.js:109
Finished in 0.249 secs / 0 secs
SUMMARY:
√ 0 tests completed
15 02 2018 09:39:27.572:DEBUG [karma]: Run complete, exiting.
15 02 2018 09:39:27.573:DEBUG [launcher]: Disconnecting all browsers
Finished in 0.249 secs / 0 secs
SUMMARY:
√ 0 tests completed
15 02 2018 09:39:27.589:DEBUG [karma]: Run complete, exiting.
15 02 2018 09:39:27.590:DEBUG [launcher]: Disconnecting all browsers
Am I missing some import or module or running incorrect version of something?

Answer 1

Your are missing compilers config at mocha.
The possible missing part is:
--compilers js:babel-core/register
See this link.