I am using MSW to mock server requests. I recently updated to v2, after which began seeing a module not found
error when trying to import setupServer
from the msw/node
import path. I can see the file in my node modules folder, I know it is there. What would cause this issue? How can I fix it?
Node version: 20.9.0 (current lts)
Pnpm version: 8.10.0
package.json
{
"dependencies": {
"@emotion/cache": "^11.11.0",
"@emotion/react": "^11.11.1",
"@emotion/server": "^11.11.0",
"@emotion/styled": "^11.11.0",
"@hookform/resolvers": "^3.3.2",
"@mui/material": "^5.14.15",
"@mui/icons-material": "^5.14.15",
"awilix": "^9.0.0",
"axios": "^1.6.0",
"cookies": "^0.8.0",
"joi": "^17.11.0",
"joi-password": "^4.1.1",
"jotai": "^2.5.0",
"js-cookie": "^3.0.5",
"lodash": "^4.17.21",
"next": "^14.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.47.0",
"zxcvbn": "^4.4.2"
},
"devDependencies": {
"@babel/core": "^7.23.2",
"@playwright/test": "^1.39.0",
"@testing-library/dom": "^9.3.3",
"@testing-library/jest-dom": "^6.1.4",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.5.1",
"@types/cookies": "^0.7.9",
"@types/jest": "^29.5.7",
"@types/js-cookie": "^3.0.5",
"@types/jsdom": "^21.1.4",
"@types/lodash": "^4.14.200",
"@types/node": "^20.8.10",
"@types/react": "^18.2.33",
"@types/zxcvbn": "^4.4.3",
"@typescript-eslint/eslint-plugin": "^6.9.1",
"@typescript-eslint/parser": "^6.9.1",
"eslint": "^8.52.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.1.0",
"eslint-config-next": "^14.0.1",
"eslint-config-standard": "^17.1.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-jest": "^27.6.0",
"ignore-loader": "^0.1.2",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"msw": "^2.0.1",
"node-fetch": "^3.3.2",
"react-test-renderer": "^18.2.0",
"ts-node": "^10.9.1",
"typescript": "^5.2.2",
"whatwg-fetch": "^3.6.19"
}
}
ts config
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"types": ["node", "jest", "@testing-library/jest-dom"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "./jest.setup.ts"],
"exclude": ["node_modules"]
}
jest config
import nextJest from 'next/jest';
import { Config } from 'jest';
module.exports = nextJest({ dir: '.' })({
roots: ['<rootDir>/src'],
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
moduleDirectories: ['node_modules', '<rootDir>/'],
testEnvironment: 'jsdom',
collectCoverageFrom: ['./src/**/*.{ts,tsx}'],
} as Config);
jest setup file
import '@testing-library/jest-dom';
import 'whatwg-fetch';
file where error occurs
import { setupServer } from 'msw/node';
import { handlers } from './handlers';
export const server = setupServer(...handlers);
export default server;
error
Test suite failed to run
Cannot find module 'msw/node' from 'path/to/file.ts'
Your issue is probably related with msw
migration from v1 to v2. In the documentation you can find your issue described here
From the docs:
This error is thrown by your test runner because JSDOM uses the browser export condition by default. This means that when you import any third-party packages, like MSW, JSDOM forces its browser export to be used as the entrypoint. This is incorrect and dangerous because JSDOM still runs in Node.js and cannot guarantee full browser compatibility by design.
To fix this, set the
testEnvironmentOptions.customExportConditions
option in yourjest.config.js
to['']
:
// jest.config.js
module.exports = {
testEnvironmentOptions: {
customExportConditions: [''],
},
}
This will force JSDOM to use the default export condition when importing msw/node
, resulting in correct imports.