2

As part of my course, I need to build a web app from scratch using React and Redux.

I've spent a few days now trying to set everything up, while trying to configure all the setting necessary to test the application with Jest and Enzyme.

However, everything I have tried has resulted in some form of error message that has prevented the tests from running.

I honestly have no idea what I've done wrong, but its seems like a complete mess.

Does anyone know why the error message for my test is flagging the React import? SyntaxError: Cannot use import statement outside a module

Here is my package.json file:

  {"type": "module",
  "name": "reddit-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.5.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "babel-jest": "^26.6.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.3",
    "react-scripts": "^1.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject",
    "test:watch": "npm test -- --watch"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "transform": {
    "\\.js$": "<rootDir>/node_modules/babel-jest"
  },
  "devDependencies": {
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.2",
    "enzyme": "^3.11.0",
    "jest": "^26.6.0",
    "jest-enzyme": "^7.1.2"
  }
}

Along with my .babelrc file:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "transformIgnorePatterns": [
  "node_modules/(?!(babel-jest)/)"
  ]
}

And the test itself, which doesn't have any code to it. But as far as I'm aware that shouldn't matter at this point?:

import React from 'react';
import Header from './Header.js';
import {shallow } from 'enzyme';

it('should render without errors', () => {

});

Any advice you can give me get this up and running would be massively appreciated!

Nathan_BrokenFaders
  • 21
  • 1
  • 2
  • 1
    Does [this](https://stackoverflow.com/questions/58384179/syntaxerror-cannot-use-import-statement-outside-a-module#59399717) answer your question? – Snirka Jun 24 '21 at 17:34
  • You can use [@babel/plugin-transform-modules-commonjs](https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs) to transform your modules to commonjs. – programmerRaj Jun 25 '21 at 00:31

2 Answers2

0

You can use @babel/plugin-transform-modules-commonjs to transform your modules to commonjs.

Here is your current .babelrc file but with the plugin:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-modules-commonjs"],
  "transformIgnorePatterns": [
  "node_modules/(?!(babel-jest)/)"
  ]
}

And remember to install @babel/plugin-transform-modules-commonjs.

I'm not sure if this will disappear your error because you didn't provide a minimal reproducable example, but I'm pretty sure it will work.

programmerRaj
  • 1,810
  • 2
  • 9
  • 19
0

did you define your adaptor ?

(imports).
import Enzyme from "enzyme";
import Adapter from "@wojtekmaj/enzyme-adapter-react-17";

(adaptor).
Enzyme.configure({ adapter: new Adapter() });

i believe, i was facing similar issues as well, until i added the adapter and, the testing was smooth then.

Muhammd Zohaib Malik
  • 46
  • 5
  • I didn't. But unfortunately after installing and defining the adapter, I still had the same issue! Eventually I just gave up and restarted the project from scratch, after trying to implement loads of random code to try and fix it. Thankfully I've got it all up and running now. Thank you for your help anyway! – Nathan_BrokenFaders Jun 25 '21 at 13:31