SyntaxError: Unexpected token '<' on shallow render with Enzyme and Jest in React

user_4379163 0
Viewed 1362

I am running tests with jest and enzyme in my React application, and while my simple sanity check test (2+2 expect 4) works, this error is thrown when I go to shallow render a component. It also throws when I try to replace shallow() with render()

Projects\MyProject\__tests__\app.test.js:17
        const wrapper = (0, _enzyme.shallow)(<_App.App />);
                                             ^

    SyntaxError: Unexpected token '<'

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.523 s
Ran all test suites.
error Command failed with exit code 1.

Here is the app.test.js file:

import React from "react";
import { expect } from "chai";
import { shallow } from "enzyme";

import { App } from "../src/App";
import Header from "../src/components/header/header.component";

describe("<App />", () => {
  it("renders one Header component", () => {
    const wrapper = shallow(<App />);
    expect(wrapper.find(Header)).to.have.lengthOf(1);
  });
});

babel.config.js:

module.exports = {
  presets: [["@babel/preset-react", { targets: { node: "current" } }]],
  plugins: ["@babel/plugin-syntax-jsx", "transform-export-extensions"],
  only: ["./**/*.jsx", "./**/*.js", "node_modules/jest-runtime"],
};

EDIT : I added babel-jest and now this is the error:

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from "react";

                       ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.344 s
Ran all test suites.
error Command failed with exit code 1.

The components are .jsx filetypes. Has anyone seen this error before? I don't think I need to change anything in my config, this seems to be a pr

babel-jest enzyme jestjs reactjs javascript
1 Answers

I found the solution. There are several places I needed to configure correctly. I'm listing them out below for anyone else that has this error and is not having any luck with other answers.

Setup your package.json to include these dependencies, and jest configuration:

"devDependencies": {
    "@babel/plugin-transform-runtime": "^7.12.10",
    "@babel/preset-env": "7.12.11",
    "@babel/preset-react": "7.12.10",
    "babel-jest": "26.6.3",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "chai": "^4.2.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.5",
    "enzyme-to-json": "^3.6.1",
    "jest": "26.6.3",
    "node-sass": "4.14.1",
    "react-test-renderer": "17.0.1",
    "redux-mock-store": "^1.5.4"
  },

...other stuff---

"jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }

Basic test:

// <rootdir>/__tests__/app.test.js
import React from "react";
import { assert } from "chai";
import { shallow, configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import configureMockStore from "redux-mock-store";
import { Provider } from "react-redux";

import App from "../src/App"; // Component to Test

configure({ adapter: new Adapter() });

const mockStore = configureMockStore();
const store = mockStore({});

describe("Test Component", () => {
  it("render correctly App component", () => {
    const AppComponent = shallow(
      <Provider store={store}>
        <App />
      </Provider>
    ).exists();
    assert(AppComponent === true);
  });
});

Add these styleMock and filemock modules to prevent errors on jsx components importing css/scss and/or files:

// <rootdir>/__mocks__/styleMock.js
module.exports = {};

// <rootdir>/__mocks__/fileMock.js
module.exports = "test-file-stub";

// <rootdir>/babel.config.js
module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime",
  ],
};

‍‍ ...and now you should be able to run your tests with jest + enzyme, and in my case, chai.

user_43791630
Related