为什么 Jest 会抛出“无效的挂钩调用”？

Question

我有一个 Gatsby 网站和一个组件库。运行 Gatsby 站点时，我收到“无效的挂钩调用”错误，并像此处建议的那样添加 Webpack 别名解决了该问题。

\n

现在，在使用 Jest 和 运行测试时，我遇到了类似的“无效挂钩调用”错误react-testing-library：

\n

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:\n      1. You might have mismatching versions of React and the renderer (such as React DOM)\n      2. You might be breaking the Rules of Hooks\n      3. You might have more than one copy of React in the same app\n      See ... for tips about how to debug and fix this problem.]\n          at reportException (/Users/misha/temp/invalid-hook-repro/basis/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)\n          at innerInvokeEventListeners (/Users/misha/temp/invalid-hook-repro/basis/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:333:9)\n          at invokeEventListeners (/Users/misha/temp/invalid-hook-repro/basis/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)\n          at HTMLUnknownElementImpl._dispatch (/Users/misha/temp/invalid-hook-repro/basis/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)\n          at HTMLUnknownElementImpl.dispatchEvent (/Users/misha/temp/invalid-hook-repro/basis/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)\n          at HTMLUnknownElement.dispatchEvent (/Users/misha/temp/invalid-hook-repro/basis/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)\n          at Object.invokeGuardedCallbackDev (/Users/misha/temp/invalid-hook-repro/basis/node_modules/react-dom/cjs/react-dom.development.js:237:16)\n          at invokeGuardedCallback (/Users/misha/temp/invalid-hook-repro/basis/node_modules/react-dom/cjs/react-dom.development.js:292:31)\n          at beginWork$1 (/Users/misha/temp/invalid-hook-repro/basis/node_modules/react-dom/cjs/react-dom.development.js:23203:7)\n          at performUnitOfWork (/Users/misha/temp/invalid-hook-repro/basis/node_modules/react-dom/cjs/react-dom.development.js:22157:12)\n

\n

我尝试检查 React 的多个版本：

\n

$ npm ls react\n\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react@16.13.1 \n\n$ npm ls react-dom\n\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react-dom@16.13.1 \n

\n

并且，还尝试react使用别名jest.config.js：

\n

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

\n

但是，这会导致：

\n

TypeError: React.createContext is not a function\n

\n

有任何想法吗？

\n

要重现该问题：

\n

1. git clone https://github.com/moroshko/basis.git\n2. cd basis\n3. git checkout 52f1dc7\n4. npm install\n5. ./node_modules/.bin/cross-env BABEL_ENV=cjs ./node_modules/.bin/jest -- -t Playground\n

\n

Answer 1

来自 @EstusFlask 评论中提供的解决方案

在 package.json 的“jest”部分下，或在 jest.config.js 文件中，无论您以哪种方式配置 jest，都添加一个带有"^react($|/.+)": "<rootDir>/node_modules/react$1".

我的 jest.config.js 看起来像这样：

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,
};

我遇到了同样的错误，这解决了我的问题。

再次感谢@EstusFlask。