How to Fix the "Cannot Use Import Statement Outside A Module Jest" Error in React

Fixing the “cannot use import statement outside a module jest” error requires proper Jest and Babel or ts-jest setup. This guide walks through configurations, file handling, and module alignment so your tests run without syntax errors.

"cannot use import statement outside a module jest" — if this error pops up during testing, it can stop everything in its tracks. It’s usually not your syntax at fault, but a mismatch between ES modules in your code and how Jest processes them. This guide explains why it happens and how to fix it in JavaScript, TypeScript, and popular frameworks.

What Causes the “cannot use import statement outside a module jest” Error?

This error reflects a mismatch between your code’s use of import statements and how Jest interprets modules. Jest defaults to CommonJS. You have valid JS modules using ES modules, but Jest sees them as plain JavaScript. That mismatch triggers “syntaxerror: cannot use import” or “unexpected token”. You use create-react-app or plain js setups that rely on import statements, yet the jest config doesn’t allow them in JS files outside a module.

Details:

• JS source uses ECMAScript modules (import, export default) in JS files.
• Jest, by default, treats code as CommonJS, not recognizing import statements.
• So, you run a test suite, but you encounter an unexpected token, Jest fails, or you get a syntax error: "Cannot use import statement outside a module."
• That same error appears repeatedly until you adjust the Babel configuration or set "type": "module" in package.json.

This error usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript. By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules". — Check out the full discussion on GitHub

Here’s a Mermaid chart showing the potential reasons for the "cannot use import statement outside a module" error in Jest:

Aligning Modules, Babel, and Jest

You need module alignment to ensure the import works correctly. That means telling Jest how to handle import statements, ECMAScript modules, custom transformations, file extensions, binary assets, non-JS modules, and TS files if used.

First, introduce proper babel config or ts-jest.

Setting Up Babel Config for ES Modules

This part requires you to allow use import statement outside modules. Use a babel configuration:

1. Create babel.config.js or .babelrc.
2. Add babel preset env with "modules": "auto", or "commonjs" for Node.
3. For ts files, include @babel/preset-typescript.
4. box jest supports babel out of the box if config exists.

Example babel.config.js:

Copy
1module.exports = {
2  presets: [
3    ["@babel/preset-env", { targets: { node: "current" }, modules: "auto" }],
4    "@babel/preset-typescript"
5  ],
6};
7

This ensures Jest sees valid JS and transpiles ECMAScript modules. Without this, tests fail with a syntax error because they cannot use import outside a module.

Modify Jest Config to Use Babel

Then set up jest.config.js:

Copy
1module.exports = {
2  transform: {
3    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
4  },
5  moduleFileExtensions: ["js", "jsx", "ts", "tsx", "json", "node"],
6};
7

That box Jest supports babel kicks in. Now import statements work fine. Without this transform, you’ll run jest encounter the same error, unable to parse import statements. The babel jest transform compiles modules to CommonJS before Jest loads them.

Using ts-jest for TypeScript Projects

If you use TypeScript, ts-jest offers custom transformations tailored for ts files.

ts-jest Setup with Jest

Install dependencies:

Copy
1npm install --save-dev ts-jest @types/jest typescript
2

Create jest.config.js:

Copy
1module.exports = {
2  preset: "ts-jest",
3  testEnvironment: "node",
4  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
5  transform: {
6    "^.+\\.(ts|tsx)$": "ts-jest"
7  },
8};
9

This setup handles import statements inside ts files, transforms code to valid js, and ensures the test suite works. Without ts-jest or proper babel config, import statements in ts files will trigger “cannot use import statement outside a module jest” error message—the same error repeats until you add ts-jest.

Why “cannot use import statement outside a module jest” Still Happens

Even with ts-jest, you may face the error. Causes include:

• Using .js extension for ES modules in TypeScript code.
• Not marking files as modules in tsconfig.json (use "module": "ESNext").
• Not configuring babel or ts-jest to transform non js modules (e.g. JSON or binary assets).
• Using react router dom or React DOM mismatches in transform pipelines without proper mapping.

Handling File Extensions and Non-JS Modules

Jest needs to know how to handle js files, ts files, and other resources like CSS, images, or binary assets. Without config, you get “unexpected token jest failed” when importing such files. That’s because your code uses import statements for non-JS modules, which Jest doesn’t process.

Configuring moduleNameMapper and transformIgnorePatterns

In jest.config.js, extend:

Copy
1module.exports = {
2  // existing config...
3  moduleNameMapper: {
4    "\\.(css|less|scss)$": "identity-obj-proxy",
5    "\\.(png|jpg|svg)$": "<rootDir>/__mocks__/fileMock.js"
6  },
7  transform: {
8    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
9  },
10};
11

Here, identity-obj-proxy helps Jest mock styles. A fileMock.js returns a placeholder for images or binary assets. Without this, tests blow up due to import statements in non-JS modules.

Bringing It Together: A Full Example

Copy
1// jest.config.js
2module.exports = {
3  transform: {
4    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
5  },
6  moduleFileExtensions: ["js", "jsx", "ts", "tsx", "json", "node"],
7  moduleNameMapper: {
8    "\\.(css|scss)$": "identity-obj-proxy",
9    "\\.(png|jpg|svg)$": "<rootDir>/__mocks__/fileMock.js"
10  },
11  testEnvironment: "jsdom",
12};
13

Copy
1// babel.config.js
2module.exports = {
3  presets: [
4    ["@babel/preset-env", { targets: { node: "current" }, modules: "auto" }],
5    "@babel/preset-typescript",
6    "@babel/preset-react"
7  ],
8};
9

This setup allows import statement usage across js modules, ts files, React DOM imports, and even assets. No more error: “cannot use import statement outside a module jest”.

Why You Might Still See the Same Error

Even with configuration, the same error may appear due to:

• Missing "type": "module" in package.json when using ESM without Babel.
• Not naming files with a .mjs extension when using ES modules without transforms.
• Not updating jest config after migrating from CommonJS, requiring require statements.
• A missing babel preset env or an incomplete babel configuration.
• Misconfigured transform patterns are preventing js files from being handled.

If Jest sees an import statement outside a module—with no transformation—it throws that error.

How to Use Import Statement in TypeScript with Jest

Import statements work properly when:

1. ts-jest or Babel transforms your ts files to valid js.
2. tsconfig.json sets "module": "ESNext", "target": "ES2018", and includes "allowJs": true.
3. Your Jest config uses transform with babel-jest or ts-jest for both .ts and .js.

That alignment ensures import statement outside a module jest errors disappear.

Mixing import and require in Node.js

It’s possible to mix import and require in the same project—but only where supported.

• In js modules inside .js files, import works if your runtime or transform supports it.
• You can use require in CommonJS parts.
• Jest transform allows import statements to work even if your codebase mixes usage.
• But avoid mixing in the same file; that triggers parse errors.

This hybrid style may cause unexpected token jest failed errors if config doesn’t unify syntax.

How to Import a CommonJS Module in an ES Module

If you want to import require-based modules using import:

Copy
1import pkg from 'some-cjs';
2const { foo } = pkg;
3

Transformed by Babel or ts-jest, this works fine. Jest sees valid js. Without transform, Jest throws “cannot use import statement outside a module jest error”.

Handling Create React App Projects

Create React App (CRA) already supports ES modules with Babel. But Jest inside CRA sometimes encounters files outside the src.

• If you import a module from outside, Jest may encounter import statements it can’t transform because of missing babel config.
• You need to customize your CRA jest config using react-scripts overrides or by ejecting.
• Without adjusting, your test suite failed with the same error.

When box jest supports babel inside CRA, you still need to adjust file extensions, moduleNameMapper, and transform for assets.

Common Patterns That Lead to the Error

By addressing each scenario, you avoid “cannot use import statement outside a module jest” pain points.

How to Resolve "unexpected token jest failed" and "syntaxerror cannot use import"

1. Add babel config with babel preset env, babel-jest, ts-jest as needed.
2. Include files transformed by babel or ts-jest—update transform patterns.
3. Handle assets via moduleNameMapper (identity obj proxy and file mocks).
4. Use appropriate file extensions: .js, .jsx, .ts, .tsx, .mjs when needed.
5. Set "type": "module" if working directly with ES modules without transforms.
6. Ensure the same error isn’t masked by other config option mistakes.

Example Folder and Files

project/
├── babel.config.js
├── jest.config.js
├── package.json
├── src/
│   ├── add.ts
│   └── add.test.ts
└── __mocks__/
    └── fileMock.js

• add.ts uses import and export default.
• add.test.ts imports add using import statements.
• babel.config.js has presets including babel preset env.
• jest.config.js uses ts-jest or babel-jest.
• fileMock.js returns a placeholder default export for imported assets.

When you run npm test, Jest transforms ts files, handles imports, and runs tests without “cannot use import statement outside a module jest” or “unexpected token jest failed”.

What I Learned (or Next Steps to Try)

You now see how mismatched module formats lead to the “cannot use import statement outside a module jest” error. You understand how babel config, ts-jest, and proper transform patterns resolve it. You learned about file extensions, moduleNameMapper, and mixing import with require.

Final Thoughts on “cannot use import statement outside a module jest”

This error highlights how module systems and test runners misunderstand each other without proper configuration. You worked through aligning import statements, configuring Babel or ts-jest, and handling assets. That insight gives you a stronger foundation for maintaining test suites in modern JavaScript environments. Feel free to revisit steps if tests fail, and know that once transforms properly align, your tests will run without breaking on import statements.

You can now:

• Confirm your Jest config properly transforms js and ts modules.
• Add babel.config.js with babel preset env, including ESM and ts support.
• Include moduleNameMapper to handle non-js modules like CSS or binary assets using identity obj proxy.
• Understand the importance of file extensions and "type": "module" in package.json.

Try running your test suite after applying these steps. You should no longer hit “statement outside a module”, “unexpected token jest failed”, or “syntaxerror cannot use import’. Fixes revolve around consistent module handling, config options, and ensuring that all files are transformed.