"Invalid hook call. Hooks can only be called inside of the body of a function component." error on Jest

[LasaleFamine]

Hi there, I'm trying to use the component for my Modal, but when I try to test it with Jest I'm getting the following error:

Summary of all failing tests
 FAIL  packages/modal/__tests__/Modal.spec.tsx (18.953s)
  ● Given a Modal component › should match the snapshot
    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 https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
       6 | describe('Given a Modal component', () => {
       7 |   it('should match the snapshot', () => {
    >  8 |     expect(render(
         |            ^
       9 |       <Modal
      10 |         visible
      11 |         title="Sample Title"

I can also see within the stack trace this:

The above error occurred in the <ForwardRef> component:
          in ForwardRef
          in ForwardRef
          in div (created by ForwardRef(MotionComponent))
          in ForwardRef(MotionComponent)
          in div
          in PresenceChild (created by AnimatePresence)
          in AnimatePresence
          in Unknown

What do you think? I can see here that maybe this useEffect inside the if statement makes this error popping up, but the strange thing is that when I run Storybook I can't see the warning on the console as it should be.

Maybe a false positive from Jest? Did someone get this problem before? I cannot test my component right now using the FocusLock.

[dwene]

Hey @LasaleFamine did you ever figure this out? I'm having similar issues.

[theKashey]

The question - what is ForwardRef inside ForwardRef inside a div of MotionComponent

[theKashey]

I've checked the code, and that ForwardRef is actually FocusLock Please check:

• ⛔ not this ~1. You might have mismatching versions of React and the renderer (such as React DOM)~
• ⛔ not this ~2. You might be breaking the Rules of Hooks~
• 👉 3. You might have more than one copy of React in the same app

[stale[bot]]

This issue has been marked as "stale" because there has been no activity for 2 months. If you have any new information or would like to continue the discussion, please feel free to do so. If this issue got buried among other tasks, maybe this message will reignite the conversation. Otherwise, this issue will be closed in 7 days. Thank you for your contributions so far.