{"id":144,"hash":"48477230b100ce94b04d9631bf12654426e22c8bcca3e6f7e0beb61bdc7ccd10","pattern":"How to resolve &quot;Cannot use import statement outside a module&quot; from Jest when running tests?","full_message":"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:\n\nI 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 not understanding 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.\n\nDependencies include...\n\n\"dependencies\": {\n  \"@babel/plugin-transform-runtime\": \"^7.6.2\",\n  \"@babel/polyfill\": \"^7.6.0\",\n  \"babel-jest\": \"^24.9.0\",\n  \"react\": \"^16.8.6\",\n  \"react-dom\": \"^16.8.6\",\n  \"react-test-renderer\": \"^16.11.0\",\n  \"source-map-loader\": \"^0.2.4\"\n},\n\"devDependencies\": {\n  \"@babel/core\": \"^7.6.0\",\n  \"@babel/preset-env\": \"^7.6.0\",\n  \"@babel/preset-react\": \"^7.0.0\",\n  \"@types/enzyme\": \"^3.9.2\",\n  \"@types/enzyme-adapter-react-16\": \"^1.0.5\",\n  \"@types/jest\": \"^24.0.13\",\n\nThe component's import lines...\n\nimport * as React from \"react\";\nimport { BrowserRouter as Router, Route, Switch } from \"react-router-dom\";\nimport HomePage from \"./components/pages\";\nimport {\n  Footer,\n  Header,\n  Navigation,\n} from \"./components/shared\";\n\nThe test file....\n\nimport * as React from \"react\";\nimport * as renderer from \"react-test-renderer\";\nimport App from \"../App\";\n\nit(\"Renders the Footer correctly\", () => {\n  const tree = renderer\n    .create(<App />)\n    .toJSON();\n  expect(tree).toMatchSnapshot();\n});\n\nI 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 throughout my solution, but I would prefer to not go that route.","ecosystem":"npm","package_name":"reactjs","package_version":null,"solution":"I was having the same failure (also using Babel, Typescript and Jest), it was driving me crazy for hours!\n\nEnded up creating a new babel.config.js file specifically for the tests. I had a large .babelrc that wasn't getting picked up by jest no matter what I did to it. The main app still uses the .babelrc as this overrides babel.config.js files.\n\nSteps I took:\n\nInstall jest, ts-jest, babel-jest, and @babel/preset-env:\n\nnpm i jest ts-jest babel-jest @babel/preset-env\n\nAdd babel.config.js (only used by jest)\n\nmodule.exports = {presets: ['@babel/preset-env']}\n\nIn jest.config.js update to:\n\nmodule.exports = {\n  preset: 'ts-jest',\n  transform: {\n    '^.+\\\\.(ts|tsx)?$': 'ts-jest',\n    '^.+\\\\.(js|jsx)$': 'babel-jest',\n  }\n};\n\npackage.json\n\n  \"scripts\": {\n    \"test\": \"jest\"","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/58613492/how-to-resolve-cannot-use-import-statement-outside-a-module-from-jest-when-run","votes":437,"created_at":"2026-04-19T04:41:23.145080+00:00","updated_at":"2026-04-19T04:51:27.255534+00:00"}