1 year ago

#367060

test-img

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

Accepted video resources