CODEWITHSUNDEEP
reactjsreduxreact-reduxjestjs
Gary Yavicoli
Gary Yavicoli

Reputation: 45

create-react-app SyntaxError: Unexpected identifier when running a test

I created my app with create-react-app and installed redux and everything is running as expected.

When creating the tests I ran into a few issues with one component that used open layers but corrected that issue with a command line when running the tests:

npm test -- --transformIgnorePatterns 'node_modules/(?!(ol)/)' --setupFiles 'jest-canvas-mock' jest --no-cache

The test that contains my reference to OpenLayers is now passing all is good there, but I have another component that uses Tab and Tabs from react-bootstrat/es/Tab and Tabs respectfully.

The simple test for that component is as follows: 

import React from 'react';
import ReactDOM from 'react-dom';
import SideMenu from '../../side-menu/side-menu';

it ('should render without crashing', () => {
    const div = document.createElement ('div');
    ReactDOM.render (<SideMenu/>, div);
    ReactDOM.unmountComponentAtNode(div);
});

When running the test command this is the only test that's failing in my project with the following error: 

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import _extends from "@babel/runtime-corejs2/helpers/esm/extends";
                                                                                                    ^^^^^^^^

    SyntaxError: Unexpected identifier

      1 | import React, { Component } from 'react';
    > 2 | import Tabs from "react-bootstrap/es/Tabs";
        | ^
      3 | import Tab from "react-bootstrap/es/Tab";
      4 | import AvailableLayersMenu from '../available-layers-window/available-layers-menu-tree';
      5 | 

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.<anonymous> (src/side-menu/side-menu.js:2:1)

My .babelrc file is as follows:

{
  "presets": [
    "env",
    "react",
    ["es2015", {"modules":  true}],
    "stage-1"
  ]
}

I'm not sure what's going on and have been at this for 2 full days with no progress on this last test. Any help would be much appreciated.

Upvotes: 1

Views: 1240

Answers (1)

Gary Yavicoli
Gary Yavicoli

Reputation: 45

Well, after countless wasted hours my co-worker found the solution:

npm test -- --transformIgnorePatterns 'node_modules/(?!(ol|react-bootstrap|@babel)/)' --setupFiles 'jest-canvas-mock' jest --no-cache

Upvotes: 3

Related Questions