Skip to content

Commit

Permalink
[jest-expo] create __REACT_DEVTOOLS_GLOBAL_HOOK__ stub (expo#27434)
Browse files Browse the repository at this point in the history
# Why

Fix the React Navigation errors in 0.74

The issue is caused by this commit
facebook/react-native@a286f00

Here is the chain of code that causes the issue

1. React Native now checks for the existence of
`__REACT_DEVTOOLS_GLOBAL_HOOK__` on startup if the
`getInspectorDataForViewAtPoint` function is imported.
2. `getInspectorDataForViewAtPoint` is imported by `AppContainer` in its
`DevtoolsOverlay`
https://github.com/hoxyq/react-native/blob/fbbb4246707d85b692c006e0cb3b186a7c9068bc/packages/react-native/Libraries/ReactNative/AppContainer.js#L55
3. React Navigation `<DebugContainer />` creates a `<AppContainer />` in
non-production environments
https://github.com/react-navigation/react-navigation/blob/523fa4f3afb7c428a8370bfd83933c0163224e66/packages/native-stack/src/views/DebugContainer.native.tsx#L21-L35
4. `@react-navigation/native-stack` creates a `<DebugContainer />`

TLDR: Any project running `@react-navigation/native-stack` (the default
Stack for Expo Router) in a non-production test environment will fail in
0.74

@tsapeta This PR only fixes this issue. The router tests in 0.74 are
still failing due to `react-navigate-gesture-handler` errors in fabric

# How

Add a stub for `__REACT_DEVTOOLS_GLOBAL_HOOK__` in the `jest-expo`
environment setup

# Test Plan

<!--
Please describe how you tested this change and how a reviewer could
reproduce your test, especially if this PR does not include automated
tests! If possible, please also provide terminal output and/or
screenshots demonstrating your test/reproduction.
-->

# Checklist

<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->

- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [ ] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [ ] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
  • Loading branch information
marklawlor authored Mar 6, 2024
1 parent 6ffefb1 commit 640fd58
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 0 deletions.
1 change: 1 addition & 0 deletions packages/jest-expo/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
- Mock `EventEmitter` from `expo-modules-core`. ([#26945](https://github.com/expo/expo/pull/26945) by [@aleqsio](https://github.com/aleqsio))
- Remove most of Constants.appOwnership. ([#26313](https://github.com/expo/expo/pull/26313) by [@wschurman](https://github.com/wschurman))
- Simulate the mocked `expo-modules-core.EventEmitter` like a true EventEmitter. ([#27257](https://github.com/expo/expo/pull/27257) by [@kudo](https://github.com/kudo))
- Add mock for `window.__REACT_DEVTOOLS_GLOBAL_HOOK__` if undefined. ([#27434](https://github.com/expo/expo/pull/27434) by [@marklawlor](https://github.com/marklawlor))

## 50.0.2 - 2024-02-06

Expand Down
15 changes: 15 additions & 0 deletions packages/jest-expo/src/preset/setup.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,21 @@ if (typeof window !== 'object') {
globalThis.window.navigator = {};
}

if (typeof globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {
// RN 0.74 checks for the __REACT_DEVTOOLS_GLOBAL_HOOK__ on startup if getInspectorDataForViewAtPoint is used
// React Navigation uses getInspectorDataForViewAtPoint() for improved log box integration in non-production builds
globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
isDisabled: true, // Used by `react-test-renderer` https://github.com/facebook/react/blob/113ab9af08c46e8a548a397154f5c9dfeb96ab6a/packages/react-reconciler/src/ReactFiberDevToolsHook.js#L60
renderers: {
// https://github.com/facebook/react-native/blob/fbbb4246707d85b692c006e0cb3b186a7c9068bc/packages/react-native/Libraries/Inspector/getInspectorDataForViewAtPoint.js#L40
values: () => [],
},
on() {}, // https://github.com/facebook/react-native/blob/fbbb4246707d85b692c006e0cb3b186a7c9068bc/packages/react-native/Libraries/Inspector/getInspectorDataForViewAtPoint.js#L45
};
// React is inconsistent with how it checks for the global hook
globalThis.window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
}

const mockImageLoader = {
configurable: true,
enumerable: true,
Expand Down

0 comments on commit 640fd58

Please sign in to comment.