Looking for help to test screens with navigation & bottom-sheet views

[firasrg]

Hello! 👋

I'm new to testing in general 😬. I'm still learning the react-testing-library and adequate techniques from Jest .

So far, I feel that i'm able to make some good tests on some scenarios (integration tests).

I write to you this msg, as an entry point to test navigation and bottom-sheet behaviors .

I hope someone can help me to learn how to test some screens encapsulated inside bottom-tab navigator with access to bottom-sheet content.

Even, if someone has some open-source examples to share, it will be appreciated, a lot 😍.

Thanks in advance.

[AugustinLF]

There are some simple examples for react-navigation in the example folder, hopefully that should tell you how to write those types of tests :)

https://github.com/callstack/react-native-testing-library/blob/main/examples/reactnavigation/src/AppNavigator.test.js

[mdjastrzebski]

These examples are a bit old and need some refresh, so please take them with a grain of salt.

[firasrg]

I'm going to follow the example but will ask for help anytime I get stuck 😅. thanks

[mdjastrzebski]

@firas1220 If you want to test your navigation in tests you should render the same navigation container + navigators as you do in your App component or even your App component itself. That might require a bit of mocking of other deps (non-navigation) on your side, but in principle this is totally supported.

[firasrg]

Hi again guys! I have a weird annoying issue while I try to wrap my component (to render), inside redux provider + navigation container, following the examples such as the one in this Github repo, as for the other example from redux-toolkit repo.

👉 If I combine <NavigationContainer/> with <Provider/> as follows:

    const ComponentToRender = () => (
        <Provider store={mockStore}>
          <NavigationContainer>
             <MyScreenToRender />
          </NavigationContainer>
        </Provider>
    )

I get the following errors:

ERROR 1 🐞:

 console.error
    Warning: An update to MyScreenToRender 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

ERROR 2 🐞:

WARN - IDE integration: Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/getting-started for setup instructions.
Error: Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/getting-started for setup instructions.
    at Object.get getIsInitial [as getIsInitial] (...\node_modules\@react-navigation\core\lib\commonjs\NavigationStateContext.tsx:37:11)

This is my test file code :

import {
  screen,
  waitFor,
  render,
} from "@testing-library/react-native";
import { mockStore } from "@app/tests/mock-redux/mockStore";
import { NavigationContainer } from "@react-navigation/native";
import { Provider } from "react-redux";
import apiInstance from "../../api/myApi";
import MyComponentToRender from "../../view";

jest.mock('react-i18next', () => ({
  useTranslation: () => {
    return {
      t: (str:string) => str,
      i18n: {
        changeLanguage: () => new Promise(() => {}),
      },
    };
  },
}));

jest.mock('react-native-reanimated', () => {
  const Reanimated = require('react-native-reanimated/mock');

  Reanimated.default.call = () => {};

  return Reanimated;
});

// Reset RTK API state after each test case
afterEach(() => {
    // following a recommendation from Redux team
    // the RTKQ state, must be reset visit: https://stackoverflow.com/a/69310703/10000150
    mockStore.dispatch(apiInstance.util.resetApiState())
})

// TODO
describe('list screen tests', () => {

  // scenario one : initialize screen
  it('list initialization', async () => {
    
    const ToRender = () => (
        <Provider store={mockStore}>
          <NavigationContainer>
            <MyComponentToRender />
          </NavigationContainer>
        </Provider>
    )
    
    render(<ToRender />);
    
    const screenGlobalLoading = screen.getByText(/loading/, {exact: false});

    expect(screenGlobalLoading).toEqual("Loaading...");
    
    await waitFor(() => {
      expect(screenGlobalLoading).toBeFalsy();
    });
  });
});

I use the following techs:

Tech	Version
Expo	45.0.0
React Native	v0.68.2
Redux-Toolkit	v1.8.2
React Redux	v8.0.2
RN Testing Library	v10.1.1
react-navigation/native	6.0.2

I can give you further information if needed, please help 🙏

[Sid-Turner-Ellis]

Are you conditionally rendering your root component?

i.e

if(loading){ return <Loading />}

return <Routes />

If so you may need to wait:

      const { getByTestId, findByText, findByTestId } = await waitFor(
        async () => {
          return render(<App />)
        }
      )
    })