Unable to find an element with testID in react native testing library

Question

I am trying to findByTestId an IconButton (from React native Paper) but I get this error :

 Unable to find an element with testID: home-settings-button

      84 |   fireEvent.press(loginButton);
      85 |
    > 86 |   const settingsButton = await findByTestId("home-settings-button");
         |                                ^
      87 |
      88 |   fireEvent.press(settingsButton);
      89 |

      at findByTestId (node_modules/@testing-library/react-native/build/helpers/makeQueries.js:95:35)
      at _callee5$ (__tests__/navigator.test.js:86:32)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:63:40)
      at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:294:22)
      at Generator.next (node_modules/regenerator-runtime/runtime.js:119:21)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:63:40)
      at invoke (node_modules/regenerator-runtime/runtime.js:155:20)
      at node_modules/regenerator-runtime/runtime.js:165:13

I am not getting this error when I try to render the view and getByTestId the IconButton but when I try to render the AppNavigator and try to findByTestId the same IconButton, it doesn't work.

For example, this works:

it("renders the home screen", () => {
  const { getByTestId } = render(<HomeScreen />);

  getByTestId("home-settings-button");
});

But this doesn't :


it("test settings page's logic", async () => {
  const { findByTestId } = render(<AppNavigator />);

  //Login and go to settings page
  const userInput = await findByTestId("login-username-input");
  const passwordInput = await findByTestId("login-password-input");
  const loginButton = await findByTestId("login-login-button");

  fireEvent.changeText(userInput, "admin");
  fireEvent.changeText(passwordInput, "admin");
  fireEvent.press(loginButton);

  const settingsButton = await findByTestId("home-settings-button");

  fireEvent.press(settingsButton);
});

Here's the IconButton :

 <IconButton
        icon="cog"
        size={30}
        style={homeStyle.settings}
        onPress={() => {
          settings();
        }}
        testID={"home-settings-button"}
 />

I don't quite understand why this happens, is there any reasons why I can't findByTestId this IconButton ? I am just trying to test the navigation with the button.

score 0 · Answer 1 · answered Dec 03 '22 at 15:23

If you are using NativeBase, to fix the above issue, you can simply pass initialWindowMetrics to NativeBaseProvider in your tests.

const inset = {
  frame: { x: 0, y: 0, width: 0, height: 0 },
  insets: { top: 0, left: 0, right: 0, bottom: 0 },
};

<NativeBaseProvider initialWindowMetrics={inset}>
  {children}
</NativeBaseProvider>;

Unable to find an element with testID in react native testing library

1 Answers1