-
-
Notifications
You must be signed in to change notification settings - Fork 5.1k
Closed
Description
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 |
dcalhoun