1 year ago
#367060
Luiz Rodrigues
I can't render @react-navigation's NavigationContainer in tests using react native testing library
When I try to test my entire application, I'm receiving this error (full log at the end):
Screen(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
The test that is failing:
import React from "react";
import { render, waitFor } from "@testing-library/react-native";
import Routes from "./index";
describe("Routes", () => {
describe("Header Routes", () => {
it("test", async () => {
const { getByText } = render(<Routes />);
await waitFor(() => expect(getByText("Test")).toBeTruthy());
});
});
});
routes:
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import DrawerNavigators from "./drawer.routes";
const Routes = () => (
<NavigationContainer>
<DrawerNavigators /> // (routes)
</NavigationContainer>
);
export default Routes;
DrawerNavigators (routes)
import React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";
const Drawer = createDrawerNavigator();
import Test from "@pages/TestShouldNotGoToGit";
function NestingNavigators() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Test" component={Test} />
</Drawer.Navigator>
);
}
export default NestingNavigators;
and finally, the only page of the router:
import React from "react";
import { View, Text } from "react-native";
function Test() {
return (
<View>
<Text>Test</Text>
</View>
);
}
export default Test;
What should I do to render it properly?
entire log:
FAIL src/routes/Routes.func.test.tsx
Routes
Header Routes
✕ test (43 ms)
● Routes › Header Routes › test
Screen(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
at reconcileChildFibers (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5097:23)
at reconcileChildren (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7234:28)
at mountIndeterminateComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7968:5)
at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9019:16)
at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12649:12)
at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12622:22)
at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12333:9)
at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1825:24
at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:653:12)
at runWithPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1775:10)
console.error
The above error occurred in the <Screen> component:
in Screen (created by NestingNavigators)
in Navigator (created by NestingNavigators)
in NestingNavigators (created by Routes)
in EnsureSingleNavigator (created by ForwardRef(BaseNavigationContainer))
in ForwardRef(BaseNavigationContainer) (created by ForwardRef(NavigationContainer))
in ThemeProvider (created by ForwardRef(NavigationContainer))
in ForwardRef(NavigationContainer) (created by Routes)
in Routes
Consider adding an error boundary to your tree to customize error handling behavior.
Visit fb.me/react-error-boundaries to learn more about error boundaries.
at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10141:21)
at logError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10178:5)
at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11288:5)
at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3259:12)
at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3280:9)
at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10497:11)
at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13295:7)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 2.71 s, estimated 3 s
Ran all test suites related to changed files.
Watch Usage: Press w to show m
Done in 819.28s.
First I tried without the waitFor but got the same error
react-native
jestjs
expo
react-navigation
react-native-testing-library
0 Answers
Your Answer