nx monorepo. Jest testing with msw. Error "Cannot use import statement outside a module" in setupServer import

Question

I use nx monorepo with react and try setup jest testing with msw (according to documentation https://redux.js.org/usage/writing-tests#example-app-code)

Run test nx test my-app and get error below. All other tests without msw work correct

Jest encountered an unexpected token

/frontend/node_modules/msw/lib/node/index.d.ts:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { PartialDeep } from 'type-fest';

SyntaxError: Cannot use import statement outside a module

Error

jest.config.ts

export default {
 displayName: 'my-app',
 preset: '../../jest.preset.js',
 transform: {
    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/react/babel'] }],
 },
 moduleNameMapper: {
    '\\.svg$': '<rootDir>/src/__mocks__/svg.js',
  },
 setupFiles: ["<rootDir>/jest.setup.ts"],
 moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
 coverageDirectory: '../../coverage/apps/my-app',
 setupFilesAfterEnv: ['@testing-library/jest-dom'],
};

.babelrc

{
  "presets": [
    [
      "@nrwl/react/babel",
      {
        "runtime": "automatic"
      }
    ]
  ],
  "plugins": [["styled-components", { "pure": true, "ssr": true }]],
  "env": {
    "test": {
      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  }
}

devdependencies in package.json

"devDependencies": {
    "@babel/plugin-transform-modules-commonjs": "^7.23.3",
    "@babel/preset-env": "^7.23.3",
    "@babel/preset-react": "^7.23.3",
    "@babel/preset-typescript": "^7.23.3",
    "@inrupt/jest-jsdom-polyfills": "^2.5.0",
    "@nrwl/cli": "14.4.2",
    "@nrwl/cypress": "14.4.2",
    "@nrwl/eslint-plugin-nx": "14.4.2",
    "@nrwl/jest": "14.4.2",
    "@nrwl/linter": "14.4.2",
    "@nrwl/nx-cloud": "latest",
    "@nrwl/react": "14.4.2",
    "@nrwl/web": "14.4.2",
    "@nrwl/workspace": "14.4.2",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^14.1.2",
    "@testing-library/user-event": "^14.4.3",
    "@types/jest": "^29.5.10",
    "babel-jest": "^29.7.0",
    "babel-plugin-styled-components": "1.10.7",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-watch-typeahead": "^1.1.0",
    "msw": "^2.0.8",
    "nx": "14.4.2",
    "ts-jest": "^29.1.1",
    "ts-node": "~10.8.0",

Sam Spade · Accepted Answer · 2023-11-24 11:08:45Z

0

In your package.json make sure you have the line "type": "module"

{
  "name": "Some Name",
  "version": "1.0.0",
  "type": "module",
  // ...
}

answered Nov 24, 2023 at 11:08

Sam Spade

1,51613 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AL Theri Over a year ago

in this case get error: Jest: Failed to parse the TypeScript config file apps/my-app/jest.config.ts Error: Must use import to load ES Module: /jest.config.ts require() of ES modules is not supported. require() of /jest.config.ts from /node_modules/@nrwl/jest/node_modules/jest-config/build/readConfigFileAndSetRootDir.js is an ES module file as it is a .ts file whose nearest parent package.json contains "type": "module" which defines all .ts files in that package scope as ES modules. Instead change the requiring code to use import(), or remove "type": "module" from /package.json

ansich · Accepted Answer · 2025-02-08 16:53:51Z

0

This issue might be caused if jsdom environment is used which prefers the browser export versions of the packages. Try adding

testEnvironmentOptions {
  customExportConditions: ['.'] ---> an empty string should work as well.
}

answered Feb 8 at 16:53

ansich

411 silver badge4 bronze badges

Collectives™ on Stack Overflow

nx monorepo. Jest testing with msw. Error "Cannot use import statement outside a module" in setupServer import

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related