mockModal is not a function

[eliw00d]

Description

After upgrading from 0.66.4 to 0.67.1, Jest tests that previously passed suddenly fail with the following error:

    TypeError: mockModal is not a function

      153 |       return (
    > 154 |         <Modal onRequestClose={handleRequestClose}>
          |          ^

      at ../../../node_modules/react-native/jest/setup.js:116:12
      at Object.get Modal [as Modal] (../../../node_modules/react-native/index.js:165:12)
      at VideoMedia.render (src/components/MyComponent.js:154:10)
      at finishClassComponent (../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8459:31)
      at updateClassComponent (../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8409:24)
      at beginWork (../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9990:16)
      at performUnitOfWork (../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13800:12)
      at workLoopSync (../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13728:5)
      at renderRootSync (../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13691:7)
      at performSyncWorkOnRoot (../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13404:18)
      at ../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2537:26
      at unstable_runWithPriority (../../../node_modules/scheduler/cjs/scheduler.development.js:468:12)
      at runWithPriority (../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2486:10)
      at flushSyncCallbackQueueImpl (../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2532:9)
      at flushSyncCallbackQueue (../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2519:3)
      at batchedUpdates (../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13459:7)
      at act (../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15280:14)
      at invokeEvent (../../../node_modules/@testing-library/react-native/build/fireEvent.js:93:20)
      at Function.press (../../../node_modules/@testing-library/react-native/build/fireEvent.js:101:33)

Version

0.67.1

Output of npx react-native info

System:
    OS: macOS 12.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 1.25 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - /private/var/folders/93/1k48nb2j093b_cfpbcf6cq1n4c68j2/T/xfs-df80a4e7/node
    Yarn: 3.0.2 - /private/var/folders/93/1k48nb2j093b_cfpbcf6cq1n4c68j2/T/xfs-df80a4e7/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
    Watchman: 2021.10.18.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /Users/z004bmc/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 15.0, DriverKit 20.4, macOS 11.3, tvOS 15.0, watchOS 8.0
    Android SDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7678000
    Xcode: 13.0/13A233 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: Not Found
    react-native: Not Found
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Use Modal in a component, write a Jest test for that component, get error for mockModal not being a function.

Snack, code example, screenshot, or link to a repository

No response

[idrissakhi]

Having the same issue

[omar-bizreh]

For anyone having this issue a temp work around would be patching jest setup in react native:

--- a/node_modules/react-native/jest/setup.js
+++ b/node_modules/react-native/jest/setup.js
@@ -110,11 +110,7 @@ jest
       getNativeRef: jest.fn(),
     }),
   )
-  .mock('../Libraries/Modal/Modal', () => {
-    const baseComponent = mockComponent('../Libraries/Modal/Modal');
-    const mockModal = jest.requireActual('./mockModal');
-    return mockModal(baseComponent);
-  })
+  .mock('../Libraries/Modal/Modal', () => mockComponent('../Libraries/Modal/Modal'))
   .mock('../Libraries/Components/View/View', () =>
     mockComponent('../Libraries/Components/View/View', MockNativeMethods),
   )

It seems like this change that is causing the issue

[eliw00d]

For anyone having this issue a temp work around would be patching jest setup in react native:

--- a/node_modules/react-native/jest/setup.js
+++ b/node_modules/react-native/jest/setup.js
@@ -110,11 +110,7 @@ jest
       getNativeRef: jest.fn(),
     }),
   )
-  .mock('../Libraries/Modal/Modal', () => {
-    const baseComponent = mockComponent('../Libraries/Modal/Modal');
-    const mockModal = jest.requireActual('./mockModal');
-    return mockModal(baseComponent);
-  })
+  .mock('../Libraries/Modal/Modal', () => mockComponent('../Libraries/Modal/Modal'))
   .mock('../Libraries/Components/View/View', () =>
     mockComponent('../Libraries/Components/View/View', MockNativeMethods),
   )

It seems like this change that is causing the issue

This worked! Thank you for the workaround. This was the only thing preventing us from upgrading, so hopefully it gets fixed in a future update.

[tmikeschu]

Awesome! Are any of y'all automating that patch somehow? Need the tests to pass in CI.

[joaocarmo]

@tmikeschu, just open the file node_modules/react-native/jest/setup.js and apply the changes suggested by @omar-bizreh, then you can commit and automate those changes with patch-package until an official fix is released.

[eliw00d]

@tmikeschu I used yarn patch to make the change and commit to source.

[kelset]

cc'ing @AntoineDoubovetzky who was the author of the commit

[christophemenager]

I have the same issue !

[AntoineDoubovetzky]

I'm looking into it

[AntoineDoubovetzky]

It seems to be a circular dependencies issue, I opened a PR with the fix.
I don't know why the test suite inside react-native repository didn't catch that and will investigate later.

I'm sorry for the inconvenience ...