Skip to content

React Native Testing Library console.error #9701

@henrymoulton

Description

@henrymoulton

Current Behavior

  • What code are you running and what is happening?

Rendering a Navigator

it("...", async () => {
    const { Screen, Navigator } = createStackNavigator();

    const AppNavigator = () => {
      return (
        <Navigator>
          <Screen name="Screen" component={Screen} />
        </Navigator>
      );
    };

    const component = (
      <NavigationContainer>
        <AppNavigator />
      </NavigationContainer>
    );

    const { getByTestId, findByText } = render(component, { wrapper: AllTheProviders });

   ....

by default gives the console.error:

console.error
    Warning: An update to CardContainer inside a test was not wrapped in act(...).
    
    When testing, code that causes React state updates should be wrapped into act(...):
    
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */
    
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
        at CardContainer
        at RNSScreen
        at construct (/Users/henrymoulton/app/node_modules/react-native/jest/setup.js:332:22)
        at construct (/Users/henrymoulton/app/node_modules/react-native/Libraries/Animated/createAnimatedComponent.js:42:43)
        at AnimatedComponentWrapper
        at construct (/Users/henrymoulton/app/node_modules/react-native-screens/lib/commonjs/index.native.tsx:101:51)
        at MaybeScreen
        at RNSScreenContainer
        at construct (/Users/henrymoulton/app/node_modules/react-native/jest/setup.js:332:22)
        at construct (/Users/henrymoulton/app/node_modules/react-native-screens/lib/commonjs/index.native.js:213:34)
        at MaybeScreenContainer
        at construct (/Users/henrymoulton/app/node_modules/@react-navigation/stack/lib/commonjs/views/Stack/CardStack.tsx:288:29)
        at construct (/Users/henrymoulton/app/node_modules/@react-navigation/stack/lib/commonjs/views/KeyboardManager.tsx:15:69)
        at SafeAreaConsumer
        at SafeAreaConsumer
        at SafeAreaProviderCompat
        at View
        at construct (/Users/henrymoulton/app/node_modules/react-native/jest/mockComponent.js:28:18)
        at construct (/Users/henrymoulton/app/node_modules/@react-navigation/stack/lib/commonjs/views/Stack/StackView.tsx:59:70)
        at StackNavigator
        at AppNavigator
        at EnsureSingleNavigator
        at BaseNavigationContainer
        at ThemeProvider
        at NavigationContainer
        at ToastProvider
        at SafeAreaProvider
        at Provider
        at AllTheProviders

      at printWarning (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:68:30)
      at error (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:44:5)
      at warnIfNotCurrentlyActingUpdatesInDev (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15034:9)
      at setPointerEvents (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7129:9)
      at Object.<anonymous> (node_modules/@react-navigation/stack/lib/commonjs/views/Stack/CardContainer.tsx:190:9)
      at AnimatedInterpolation.__callListeners (node_modules/react-native/Libraries/Animated/nodes/AnimatedNode.js:139:7)
      at AnimatedInterpolation.__callListeners (node_modules/react-native/Libraries/Animated/nodes/AnimatedWithChildren.js:76:5)

This can be fixed by mocking react-native-screens with the mock:

import { View } from "react-native";

export const enableScreens = jest.fn();
export const screensEnabled = jest.fn().mockReturnValue(false);
export const ScreenContainer = View;

It might be a good idea to add this to the https://reactnavigation.org/docs/testing/ doc?

Expected Behavior

  • What do you expect should be happening?

No console.error

How to reproduce

Issue is outlined here:

callstack/react-native-testing-library#750

Your Environment

software version
iOS or Android test environment
@react-navigation/native ^5.9.4
@react-navigation/stack ^5.14.5
react-native-gesture-handler ^1.10.3
react-native-safe-area-context ^3.2.0
react-native-screens ^3.2.0
react-native 0.64.1

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions