How to resolve "Cannot use import statement outside a module" in jest

Question

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 misunderstanding 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 through my solution, but I would prefer to not go that route.

Answer 1

Also using Babel, Typescript and Jest. Had the same failure, driving me crazy for hours. Ended up creating a new babel.config.js file specifically for the tests. Had a large .babelrc that wasn't getting picked up by jest no matter what i did to it. Main app still uses the .babelrc as this overrides babel.config.js files.

Install jest, ts-jest and babel-jest:

npm i jest ts-jest babel-jest 

babel.config.js (only used by jest)

module.exports = {presets: ['@babel/preset-env']} 

jest.config.js

module.exports = {   preset: 'ts-jest',   transform: {     '^.+\\.(ts|tsx)?$': 'ts-jest',     "^.+\\.(js|jsx)$": "babel-jest",   } }; 

package.json

  "scripts": {     "test": "jest" 

Answer 2

Use Babel to transpile those JS Modules and you'll be able to write your tests with es6.

Install Babel/preset-env

npm i -D @babel/preset-env

Create a babel configuration file with the preset

//babel.config.js module.exports = {presets: ['@babel/preset-env']}