无效的挂断呼叫错误：适用于localhost，但不适用于Jest

问题描述

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

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

要复制：npm run test

错误

● 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)

这有效

  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();
  });

Navbar.js

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;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）