npmreactjs95% confidence\u2191 437

How to resolve "Cannot use import statement outside a module" from Jest when running tests?

Full error message

I have a React application (not using Create React App) built using TypeScript, Jest, Webpack, and Babel. When trying to run yarn jest, I get the following error:

I have tried removing all packages and re-adding them.  It does not resolve this.  I have looked at similar questions and documentation and I am still not understanding something. I went so far as to follow another guide for setting up this environment from scratch and still received this issue with my code.

Dependencies include...

"dependencies": {
  "@babel/plugin-transform-runtime": "^7.6.2",
  "@babel/polyfill": "^7.6.0",
  "babel-jest": "^24.9.0",
  "react": "^16.8.6",
  "react-dom": "^16.8.6",
  "react-test-renderer": "^16.11.0",
  "source-map-loader": "^0.2.4"
},
"devDependencies": {
  "@babel/core": "^7.6.0",
  "@babel/preset-env": "^7.6.0",
  "@babel/preset-react": "^7.0.0",
  "@types/enzyme": "^3.9.2",
  "@types/enzyme-adapter-react-16": "^1.0.5",
  "@types/jest": "^24.0.13",

The component's import lines...

import * as React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import HomePage from "./components/pages";
import {
  Footer,
  Header,
  Navigation,
} from "./components/shared";

The test file....

import * as React from "react";
import * as renderer from "react-test-renderer";
import App from "../App";

it("Renders the Footer correctly", () => {
  const tree = renderer
    .create(<App />)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

I expected to be able to use named imports in my components without my tests blowing up.  It appears to fix the issue if I only use default imports throughout my solution, but I would prefer to not go that route.

Solutionsource: stackoverflow \u2197

I was having the same failure (also using Babel, Typescript and Jest), it was driving me crazy for hours! Ended up creating a new babel.config.js file specifically for the tests. I had a large .babelrc that wasn't getting picked up by jest no matter what I did to it. The main app still uses the .babelrc as this overrides babel.config.js files. Steps I took: Install jest, ts-jest, babel-jest, and @babel/preset-env: npm i jest ts-jest babel-jest @babel/preset-env Add babel.config.js (only used by jest) module.exports = {presets: ['@babel/preset-env']} In jest.config.js update to: module.exports = { preset: 'ts-jest', transform: { '^.+\\.(ts|tsx)?$': 'ts-jest', '^.+\\.(js|jsx)$': 'babel-jest', } }; package.json "scripts": { "test": "jest"

API access

Get this solution programmatically \u2014 free, no authentication.

curl https://depscope.dev/api/error/48477230b100ce94b04d9631bf12654426e22c8bcca3e6f7e0beb61bdc7ccd10

hash \u00b7 48477230b100ce94b04d9631bf12654426e22c8bcca3e6f7e0beb61bdc7ccd10

How to resolve &quot;Cannot use import statement outside a module&quot; from Jest when running tests?

How to resolve "Cannot use import statement outside a module" from Jest when running tests?