Jest mock "TypeError: Cannot read properties of undefined (reading 'top')"

[eppisapiafsl]

When upgrading from 4.13.0 to 4.13.1, start facing a TypeError due to a recent mock update #449

Following the guide, I included the react-native-safe-area-context to my transformIgnorePatterns

transformIgnorePatterns: [
    "node_modules/(?!react-|@react-native-community|react-native-safe-area-context|victory|rn-placeholder|redux-persist|@react-navigation|@sentry/react-native|@react-native|mixpanel-react-native|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|@notifee|stream-chat-expo|@rneui/base|@datadog/mobile-react-native/jest/mock).+\\.js$",
  ],

 TypeError: Cannot read properties of undefined (reading 'top')

      23 |   }
      24 |   const Ui = ui as ReactElement<unknown>;
    > 25 |   render(Ui, { wrapper });

[LucasGarcez]

@eppisapiafsl can you provide more details about the test you are trying to run?
Have you added jest.mock('react-native-safe-area-context', () => mockSafeAreaContext); to your jestSetup file as per the documentation?

[eppisapiafsl]

Hey @LucasGarcez

Yes, we do have jest.mock("react-native-safe-area-context", () => mockSafeAreaContext); in our jest.setup.tsx file

can you provide more details about the test you are trying to run?

I'm using the @testing-library/react-native to render the screens, I have a custom function that isolates my screen so no other Provider styles impact the tests

render(
              <SafeAreaProvider initialMetrics={initialWindowMetrics}>
                    <ComponentToTest />
              </SafeAreaProvider>)

I did a patch reverting #449 and the error got fixed

diff --git a/node_modules/react-native-safe-area-context/jest/mock.tsx b/node_modules/react-native-safe-area-context/jest/mock.tsx
index 81688c0..ed01019 100644
--- a/node_modules/react-native-safe-area-context/jest/mock.tsx
+++ b/node_modules/react-native-safe-area-context/jest/mock.tsx
@@ -30,18 +30,18 @@ const RNSafeAreaContext = jest.requireActual<{
 export default {
   ...RNSafeAreaContext,
   initialWindowMetrics: MOCK_INITIAL_METRICS,
-  useSafeAreaInsets: jest.fn(() => {
+  useSafeAreaInsets: () => {
     return (
       useContext(RNSafeAreaContext.SafeAreaInsetsContext) ??
       MOCK_INITIAL_METRICS.insets
     );
-  }),
-  useSafeAreaFrame: jest.fn(() => {
+  },
+  useSafeAreaFrame: () => {
     return (
       useContext(RNSafeAreaContext.SafeAreaFrameContext) ??
       MOCK_INITIAL_METRICS.frame
     );
-  }),
+  },
   // Provide a simpler implementation with default values.
   SafeAreaProvider: ({ children, initialMetrics }: SafeAreaProviderProps) => {
     return (

[LucasGarcez]

@eppisapiafsl I couldn't replicate your issue. Can you provide the real code? The component you are testing, the imports, and where the initialWindowMetrics is coming from.

[Ejdamm]

We had the same problem but an undefined width from useSafeAreaFrame(). The first test in a suite always pass but not the rest. It was this mock reset that caused it.

	afterEach(() => {
		jest.resetAllMocks();
	});

[eppisapiafsl]

Nice find, @Ejdamm ! Confirmed, it only happened when we reset the mocks in our test. Thank you so much

@LucasGarcez This might not be a bug in the library itself but a config issue; I haven't been able to reproduce it in a base react-native project 🤔

[Grohden]

so in theory, the solution is to change the calls to be clearAllMocks instead

[Ejdamm]

so in theory, the solution is to change the calls to be clearAllMocks instead

Yep that is what we did