javascript - 无效的挂钩调用错误：适用于 localhost 但不适用于 Jest

Question

首先我认为我的 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();
  });

导航栏.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;

标签： javascriptreactjsunit-testingjestjsreact-hooks