I have a very simple react app (typescript) and I am trying to configure and run component tests using jest and @testing-library.
When I try to render() one of the components jest throws an error saying that it cannot use import statement outside a module.
The particular problem comes from this line
C:\github\DeviceCatalogue.UI\node_modules\axios\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import axios from './lib/axios.js';
Before posting here I've read multiple articles and stackoverflow posts, but none of the solutions work for me. Like for example this one: How to resolve "Cannot use import statement outside a module" in jest
Here are some of the important files. Please let me know if this is enough as information:
- jest.config.js
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
setupFilesAfterEnv: ['./src/setupTests.ts'],
moduleNameMapper: {
'\\.(css|less|scss)$': 'identity-obj-proxy',
},
transform: {
'^.+\\.(ts|tsx|js|jsx)?$': ['ts-jest']
},
transformIgnorePatterns: ['<rootDir>/node_modules/'],
};- package.json
{
"name": "device-catalogue",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/plugin-transform-modules-commonjs": "^7.19.6",
"@babel/preset-env": "^7.19.4",
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@fontsource/roboto": "^4.5.8",
"@mui/icons-material": "^5.10.9",
"@mui/material": "^5.10.9",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^29.2.0",
"@types/node": "^16.11.64",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"@types/styled-components": "^5.1.26",
"axios": "^1.1.2",
"babel-jest": "^29.2.2",
"react": "^18.2.0",
"react-data-table-component": "^7.5.3",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.1",
"react-toastify": "^9.0.8",
"styled-components": "^5.3.6",
"typescript": "^4.8.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"t": "jest",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"jest": "^29.2.2",
"jest-environment-jsdom": "^29.2.2",
"msw": "^0.47.4",
"ts-jest": "^29.0.3"
}
}- babel.config.js
module.exports = {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-modules-commonjs'],
};- tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": false,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}- setupTests.ts
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
import mswServer from './__mocks__/server';
beforeAll(() => mswServer.listen());
afterEach(() => mswServer.resetHandlers());
afterAll(() => mswServer.close());