Module not found in jest tests
See original GitHub issueHi, I’m using auto-animate on a typescript React app and I’m testing it with Jest. When I’m running the app, everything is fine. But when I’m running the tests, I get this error:
Cannot find module ‘@formkit/auto-animate/react’ from ‘src/…/a_path_to_my_component’
Complete error:
I don’t understand why Jest can’t find the module… I’m using node v16.15.0, npm v8.5.5 and react-scripts v5.
Here is my package.json :
Click to see
{
"name": "suivie",
"homepage": "https://clm-roig.github.io/suivie",
"version": "0.2.4",
"private": true,
"dependencies": {
"@emotion/react": "^11.8.2",
"@emotion/styled": "^11.8.1",
"@formkit/auto-animate": "^1.0.0-beta.1",
"@mui/icons-material": "^5.8.2",
"@mui/lab": "^5.0.0-alpha.84",
"@mui/material": "^5.8.2",
"@mui/x-date-pickers": "^5.0.0-alpha.4",
"@reduxjs/toolkit": "^1.8.2",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.5",
"@testing-library/user-event": "^14.2.0",
"@types/jest": "^27.5.1",
"@types/node": "^17.0.36",
"@types/react": "^18.0.1",
"@types/uuid": "^8.3.4",
"date-fns": "^2.28.0",
"notistack": "^2.0.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hook-form": "^7.31.3",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"recharts": "^2.1.10",
"redux-persist": "^6.0.0",
"typescript": "~4.7.2",
"uuid": "^8.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"coverage": "react-scripts test --coverage --watchAll",
"eject": "react-scripts eject",
"release": "standard-version",
"lint": "eslint \"**/*.{js,ts,tsx}\"",
"lint:fix": "eslint --fix \"**/*.{js,ts,tsx}\"",
"format": "prettier --write \"**/*.{js,ts,tsx,css,json}\" --config ./.prettierrc"
},
"eslintConfig": {},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@commitlint/cli": "^17.0.1",
"@commitlint/config-conventional": "^17.0.2",
"@trivago/prettier-plugin-sort-imports": "^3.2.0",
"@typescript-eslint/eslint-plugin": "^5.27.0",
"@typescript-eslint/parser": "^5.27.0",
"eslint": "^8.16.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.5.0",
"eslint-import-resolver-typescript": "^2.7.1",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.30.0",
"eslint-plugin-react-hooks": "^4.5.0",
"husky": "^8.0.1",
"jest-watch-typeahead": "^1.1.0",
"prettier": "^2.6.2",
"standard-version": "^9.5.0"
}
}
My TS config :
Click to see
{
"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": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"]
}
I understand that maybe this is not related to this library in particular: feel free to tell me to ask this question elsewhere.
Thank you for this module, it’s awesome!
Issue Analytics
- State:
- Created a year ago
- Reactions:3
- Comments:8
Top Results From Across the Web
Jest gives `Cannot find module` when importing components ...
My tests that run files that only contain relative paths in the tree run correctly. To Clarify, I'm looking for how to configure...
Read more >Configuring Jest
This option tells Jest that all imported modules in your tests should ... If the file specified by path is not found, an...
Read more >Configuring package.json · Jest
Combining the test environments is currently not possible but the jsdom environment can be seen as a superset of the node one. You...
Read more >Configuring Module Resolution On Typescript and Jest
Run git checkout step-2 . Setting the baseUrl and paths specifies to the Typescript transpiler how to resolve modules. baseUrl: Specifies where to...
Read more >Jest + RTL testing 'module not found' error : r/reactjs - Reddit
Has anyone here experienced "Crypto module not found" error when working with jest and rtl testing library? Seems like it's not able to ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I fixed this via https://jestjs.io/docs/manual-mocks#mocking-node-modules *Note my jest config includes
roots: ["<rootDir>/jest"]
jest/__mocks__/@formkit/auto-animate/react.js
If you’re not using the hook this fixed it for me after looking at https://github.com/formkit/auto-animate/blob/3dea1af04c6688e1ff2d516345055f2e200cb02e/src/index.ts#L644-L654
Insert the following under the file
__mocks__/@formkit/auto-animate/index.ts