Module not found in jest tests

[Clm-Roig]

Hi, 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!

[StK88]

I had the same issue, resolved via:

1. switch to autoAnimate with useRef instead of useAutoAnimate:

import {
  RefObject,
  useEffect,
} from "react"
import autoAnimate from "@formkit/auto-animate"

// https://github.com/formkit/auto-animate/issues/11
export const useAutoAnimate = (ref: RefObject<HTMLElement | null>) => {
  useEffect(() => {
    ref.current && autoAnimate(ref.current)
  }, [ref])
}

2. set/extend jest settings in package.json (source https://github.com/facebook/create-react-app/issues/11946#issuecomment-1126921306):

"jest": {
  "transformIgnorePatterns": [
    "[/\\\\]node_modules[/\\\\](?!(@formkit/auto-animate)).+\\.(js|jsx|mjs|cjs|ts|tsx)$"
  ]
},

Step 2 should fix the new error from step 1:

export { autoAnimate as default, getTransitionSizes, vAutoAnimate };
    ^^^^^^

SyntaxError: Unexpected token 'export'

[Clm-Roig]

Thanks for the hint @StK88 ! I tried what you suggested, with and without the "custom" useAutoAnimate hook but I got this error (in test environment only):

ReferenceError: ResizeObserver is not defined

[StK88]

@Clm-Roig, forgot about that, it also requires mock of global.ResizeObserver in src/setupTests.ts:

// src/setupTests.ts

global.ResizeObserver = jest.fn().mockImplementation(() => ({
  observe: jest.fn(),
  unobserve: jest.fn(),
  disconnect: jest.fn(),
}))

[Clm-Roig]

Oh yes I saw this solution when doing my research, but I hoped there will be something else more elegant... Anyway, thank you very much for your time, it works like a charm!

[alexandprivate]

Hi all, I tried all, the current solution is not working for me on TS, also not but using allowJs true, any idea?

[hjoelh]

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

const useAutoAnimate = () => [null];
export { useAutoAnimate };

[aaronkik]

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

const autoAnimate = jest.fn((el: Element) => ({
  parent: el,
  enable: jest.fn(),
  disable: jest.fn(),
  isEnabled: jest.fn(),
}));

export default autoAnimate;

[austin-bev]

I'm getting the same issue with Vue and Vitest. ReferenceError: ResizeObserver is not defined

Adding this to the test file creates different issues:

 window.ResizeObserver = vi.fn().mockImplementation(() => ({
   observe: vi.fn(),
   unobserve: vi.fn(),
   disconnect: vi.fn(),
 }))
import { useAutoAnimate } from "@formkit/auto-animate/vue";
describe("testsuite", () => {...