CODEWITHSUNDEEP
reactjswebpackjestjsreact-hooksreact-testing-library
Misha Moroshko
Misha Moroshko

Reputation: 171509

Why Jest throws "Invalid hook call"?

I have a Gatsby site alongside a components library. When running the Gatsby site, I was getting an "Invalid hook call" error, and adding a Webpack alias like suggested here solved the issue.

Now, I'm getting a similar "Invalid hook call" error when running tests using Jest and react-testing-library:

Error: Uncaught [Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
      1. You might have mismatching versions of React and the renderer (such as React DOM)
      2. You might be breaking the Rules of Hooks
      3. You might have more than one copy of React in the same app
      See ... for tips about how to debug and fix this problem.]
          at reportException (/Users/misha/temp/invalid-hook-repro/basis/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
          at innerInvokeEventListeners (/Users/misha/temp/invalid-hook-repro/basis/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:333:9)
          at invokeEventListeners (/Users/misha/temp/invalid-hook-repro/basis/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
          at HTMLUnknownElementImpl._dispatch (/Users/misha/temp/invalid-hook-repro/basis/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
          at HTMLUnknownElementImpl.dispatchEvent (/Users/misha/temp/invalid-hook-repro/basis/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
          at HTMLUnknownElement.dispatchEvent (/Users/misha/temp/invalid-hook-repro/basis/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
          at Object.invokeGuardedCallbackDev (/Users/misha/temp/invalid-hook-repro/basis/node_modules/react-dom/cjs/react-dom.development.js:237:16)
          at invokeGuardedCallback (/Users/misha/temp/invalid-hook-repro/basis/node_modules/react-dom/cjs/react-dom.development.js:292:31)
          at beginWork$1 (/Users/misha/temp/invalid-hook-repro/basis/node_modules/react-dom/cjs/react-dom.development.js:23203:7)
          at performUnitOfWork (/Users/misha/temp/invalid-hook-repro/basis/node_modules/react-dom/cjs/react-dom.development.js:22157:12)

I tried to check for multiple versions of React:

$ npm ls react

└── [email protected] 

$ npm ls react-dom

└── [email protected]

And, also tried to alias react in jest.config.js:

moduleNameMapper: {
    react: "<rootDir>/website/node_modules/react",
    ...
}

But, this results in:

TypeError: React.createContext is not a function

Any ideas?

To reproduce the issue:

1. git clone https://github.com/moroshko/basis.git
2. cd basis
3. git checkout 52f1dc7
4. npm install
5. ./node_modules/.bin/cross-env BABEL_ENV=cjs ./node_modules/.bin/jest -- -t Playground

Upvotes: 5

Views: 8369

Answers (1)

James Michaels
James Michaels

Reputation: 150

From the solution provided in the comments by @EstusFlask

Under the "jest" section of your package.json, or in your jest.config.js file, whichever way you're configuring jest, add a "moduleNameMapper" section with "^react($|/.+)": "<rootDir>/node_modules/react$1".

My jest.config.js looks like this:

module.exports = {
  moduleNameMapper: {
    "^.+\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js", // replaces .css imports with an empty object
    "\\.(jpg|png|gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js", // replaces file imports with a useless string
    "^react($|/.+)": "<rootDir>/node_modules/react$1", // makes sure all React imports are running off of the one in this package.
  },
  setupFiles: [
    "<rootDir>/jest/setEnvVars.js",
    "<rootDir>/jest/mockLocalStorage.js",
  ],
  verbose: true,
};

I was having the same error and this solved my problem.

Again, thanks and credit to @EstusFlask.

Upvotes: 15

Related Questions