SyntaxError when running Jest with next/jest and SWC

[behnamazimi]

Summary

Hey!
I am encountering a SyntaxError when attempting to run Jest tests in my Next.js project. I have utilized SWC for bundling and next/jest to generate Jest configs. The error message is as follows:

node_modules/@emotion/react/dist/emotion-react.browser.esm.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { h as hasOwnProperty, E as Emotion, c as createEmotionProps, w as withEmotionCache, T as ThemeContext, i as isBrowser$1 } from './emotion-element-c39617d8.browser.esm.js';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      10 | );
      11 |
    > 12 | export default Dummy;
         |                                                      ^
      13 |

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1496:14)
      at Object.<anonymous> (node_modules/@company/design-system/lib/web/components/Icon/Icon.jsx:20:16)
      at Object.<anonymous> (node_modules/@company/design-system/lib/web/components/Icon/index.js:11:54)
      at Object.<anonymous> (src/components/Dummy/Dummy.tsx:12:54)
      at Object.<anonymous> (src/components/Dummy/Dummy.test.tsx:7:55)

And here is what @company/design-system/lib/web/components/Icon/Icon.jsx looks like:

import { jsx } from "@emotion/react";  
import { isValidElement } from "react";  
import { sizes } from "./Icon.styled";  
export const sizeValues = ["s", "m", "l"];  
const Icon = ({ children, fill = "currentColor", size = "m", ...props }) => isValidElement(children)  
    ? jsx(children.type, {  
        key: children.key,  
        fill,  
        ...children.props,  
        ...props,  
        css: sizes[size],  
    })  
    : null;  
Icon.displayName = "Icon";  
export default Icon;  
//# sourceMappingURL=Icon.jsx.map

The local package also uses @emotion, and everything works fine when I stop importing @emotion in the design system component, Icon in this example.

The @company/design-system local package is added to the transpilePackage option in next.config.js, so next/jest adds it to the transformIgnorePatterns in jest.config.js.

here is the jest.config.js:

const nextJest = require("next/jest");

const createJestConfig = nextJest({ dir: "./" });

const customJestConfig = {  
  moduleNameMapper: {  
    // This forces Jest/jest-environment-jsdom to use a Node+CommonJS version of uuid, not a Browser+ESM one  
    // See https://github.com/uuidjs/uuid/pull/616    
    "^uuid$": require.resolve("uuid"),  
    "@/(.*)$": "<rootDir>/src/$1",  
    "^shared/(.*)$": "<rootDir>/shared/$1", 
  },  
  setupFiles: ["<rootDir>/jest-setup.tsx"],  
  setupFilesAfterEnv: ["<rootDir>/setupFilesAfterEnv.ts"],  
  testEnvironment: "jest-environment-jsdom",  
  moduleDirectories: [  
    "node_modules",  
    "src",  
    "src/components",  
    "src/test-utils",  
    "mocks",  
    "eslint/rules",  
  ],  
  
  // Custom config  
  transformIgnorePatterns: ["^.+\\.module\\.(css|sass|scss)$"],  
  transform: {  
    "\\.(gql|graphql)$": "jest-transform-graphql",  
  },  
  globals: { NODE_ENV: "test" },  
  modulePaths: ["/src/components"],  
  testRegex: ".*\\.test\\.(js|jsx|ts|tsx)$",  
  testEnvironmentOptions: { url: "http://localhost/" },  
  moduleFileExtensions: ["js", "json", "jsx", "ts", "tsx", "node", "graphql"],  
};

module.exports = createJestConfig(customConfig);

Expected Behavior

Jest should run the tests without encountering any SyntaxError related to import statements.

Any insights or help to resolve this issue would be highly appreciated!

Additional information

Everything is functioning smoothly on the Next side. I am able to successfully build the project with SWC without facing any issues.

"next": "13.4.12",
"jest": "^29.6.1",
"@emotion/cache": "^11.11.0",  
"@emotion/react": "^11.11.1",  
"@emotion/styled": "^11.11.0",

Example

No response

[mehran-m]

I had this issue and fixed it by importing React to test files:

import React from 'react';

This must be done in all test files, therefore you can globally import into the setup file instead:

// your setup file e.g. jest-setup.tsx
import React from 'react';
global.React = React;

[vpanichkin]

Hey guys, an old thread, but I faced a similar issue with a next-intl package that is built for ESM module.

Problem

    Details:

    /project/node_modules/next-intl/dist/esm/production/index.react-client.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export{useFormatter,useTranslations}from"./react-client/index.js";export{default as NextIntlClientProvider}from"./shared/NextIntlClientProvider.js";export*from"use-intl";
                                                                                      ^^^^^^
    SyntaxError: Unexpected token 'export'

The root cause

Next.js's SWC-based transformer somehow doesn't support transpiling ESM packages in node_modules — even with transformIgnorePatterns is set. It silently skipped next-intl.

The solution:

1. Move away from next/jest: just provide the configuration for jest in jest.config.js as below.
2. Specify correct regex transformIgnorePatterns: for me it was 2 packages next-intl and use-intl
3. You need to use babel.config.js and not .babelrc to transpile the node_modules. Details are in stackoverflow or in the related issue

Appendix

// jest.config.js
module.exports = {
  testEnvironment: 'jest-environment-jsdom',
  setupFilesAfterEnv: ['<rootDir>/setupJest.ts'],
  modulePathIgnorePatterns: [
    '<rootDir>/.next/',
    '<rootDir>/dist/',
    '<rootDir>/deploy/',
  ],
  testPathIgnorePatterns: ['/node_modules/'],
  moduleNameMapper: {
    '^@src/(.*)$': '<rootDir>/src/$1',
  },
  transformIgnorePatterns: ['/node_modules/(?!(next-intl|use-intl)/)'],
}

// babel.config.js
module.exports = {
  plugins: ['@emotion/babel-plugin'],
  presets: ['next/babel'],
}

[FedorT22]

the same, but working with @swc/jest instead of babel
#40183 (comment)