Why Jest throws "Invalid hook call"?

Question

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

Marrs

@James It's hard to point to a specific code here. See the included repro please. – Marrs

The question should contain all necessary information to reproduce the problem. See stackoverflow.com/help/mcve . That you have a repo is good but it's not a substitute for MCVE. The error was truncated, it normally contains all necessary information to narrow down the problem, i.e. which test caused it. An alias isn't needed here. – Canzonet

@EstusFlask I added a bit more context to the question. – Marrs

The repo seems to be ok and is unable to reproduce the problem. Try to reinstall both node_modules. The problem could occur if websites/src tests were rendering React, in this case react and react-dom likely need to be mapped to root node_modules (not website/node_modules like you tried) - but they don't. – Canzonet

@EstusFlask It should fail. You can see the failure in CI here: github.com/moroshko/basis/runs/1018168495. Also, mapping react to <rootDir>/node_modules/react doesn't make any difference. – Marrs

There you can clearly see there that it's website/src/pages/playground/index.test.js that fails, you could narrow the problem down to this test at the time of posting. There's no playground/index.test.js in master. As I said, at least both react and react-dom should be mapped (probably other packages too), otherwise it's a proven way to get the error. The mapping should be something like "^react($|/.+)": "<rootDir>/node_modules/react$1", same for react-dom. – Canzonet

Thank you @EstusFlask, "^react($|/.+)": "<rootDir>/node_modules/react$1" solved the issue. I'm wondering why mapping react and react-dom isn't enough here. What else this regex catches beyond react and react-dom? I couldn't find any imports of the form react/* in the repo. By the way, the failing test is not in master. See the exact commit hash in the repro. – Marrs

Answer 1

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.

Straw

Had to do the same with react-router-dom to solve the error "invariant failed you should not use link outside a router" : "^react-router-dom($|/.+)": "<rootDir>/node_modules/react-router-dom$1" – Fecteau

I had to add same for react-dom to solve same error by react-router - '^react-dom($|/.+)': '<rootDir>/node_modules/react-dom$1', – Socialminded