Javascript 无效的钩子调用错误：适用于本地主机，但不适用于Jest

首先，我认为我的React和React dom不在同一个版本中。但我检查过了，它们都是同一个版本。组件本身在localhost中呈现并正常工作，但是当我使用Jest测试它时，它失败了。下面是我得到的错误，错误的位置在.create方法中。而且，当我没有通过任何子组件时，测试就通过了。两个示例如下所示。这太令人困惑了，我不知道为什么会出现错误。有什么建议吗

编辑：更改了问题格式以更好地显示错误

要复制：

npm运行测试

错误

● Navbar component › Rendered navbar with 1 tab

    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 fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

      61 |   test('Rendered navbar with 1 tab', () => {
      62 |     const tree = renderer
    > 63 |       .create(
         |        ^
      64 |         <Navbar>
      65 |           <Navbar.Tab label="In Flight Orders" component={null} />
      66 |         </Navbar>

      at resolveDispatcher (../../../node_modules/react/cjs/react.development.js:1465:13)
      at Object.useState (../../../node_modules/react/cjs/react.development.js:1496:20)
      at useForceUpdate (../../../node_modules/framer-motion/dist/framer-motion.cjs.js:5707:33)
      at AnimatePresence (../../../node_modules/framer-motion/dist/framer-motion.cjs.js:5841:23)
      at renderWithHooks (../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5552:18)
      at mountIndeterminateComponent (../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7918:13)
      at beginWork (../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9019:16)
      at performUnitOfWork (../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12649:12)
      at workLoopSync (../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12622:22)
      at performSyncWorkOnRoot (../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12333:9)
      at ../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1825:24
      at unstable_runWithPriority (../../node_modules/scheduler/cjs/scheduler.development.js:653:12)
      at runWithPriority (../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1775:10)
      at flushSyncCallbackQueueImpl (../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1820:7)
      at flushSyncCallbackQueue (../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1808:3)
      at scheduleUpdateOnFiber (../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11776:9)
      at updateContainer (../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14747:3)
      at Object.create (../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15455:5)
      at Object.<anonymous> (src/lib/navbar.spec.js:63:8)

---

请提供重现问题的方法。看见您发布的任何内容都无法说明问题所在。基本上，要么是react/react dom版本不匹配，要么是dupe包不匹配，要么是错误指向另一个真正调用组件外部钩子的地方。您截断了错误，调用堆栈可能包含调试信息。

npm run test

无法重现问题，因为没有可重现的代码。代码被简化了，不知道“这个有效”和“这个无效”之间有什么区别。在不同的级别上有

。/../node\u模块

和

。/../node\u模块

，这表明存在嵌套项目，请参见上面关于dupe包的备注。

  test('Rendered navbar with many non tabs', () => {
    const tree = renderer
      .create(
        <Navbar>
          <h1>non tab 1</h1>
          <h1>non tab 2</h1>
        </Navbar>
      )
      .toJSON();
    expect(tree).toMatchSnapshot();
  });

  test('Rendered navbar with filter', () => {
    const tree = renderer
      .create(
        <Navbar filter>
          <Navbar.Tab label="In Flight Orders" component={null} />
          <Navbar.Tab label="Active Service" component={null} />
          <Navbar.Tab label="Active Service 1" component={null} />
        </Navbar>
      ).toJSON();
    expect(tree).toMatchSnapshot();
  });

import React, { useState, useEffect, useRef } from 'react';
import Tab from './tab';
import { motion, AnimatePresence } from 'framer-motion';
import { Arrow, ArrowGroup, Spacer, NavbarOutline, Content } from './styledNavbar';

const Navbar = ({children, filter}) => { ... }      

const Tabs = () => {                                
  return 'tabs';
};

Navbar.Tab = Tabs;

export default Navbar;