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:

constComponentToRender=()=>(<Providerstore={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";importapiInstancefrom"../../api/myApi";importMyComponentToRenderfrom"../../view";jest.mock('react-i18next',()=>({useTranslation: ()=>{return{t: (str:string)=>str,i18n: {changeLanguage: ()=>newPromise(()=>{}),},};},}));jest.mock('react-native-reanimated',()=>{constReanimated=require('react-native-reanimated/mock');Reanimated.default.call=()=>{};returnReanimated;});// Reset RTK API state after each test caseafterEach(()=>{// following a recommendation from Redux team// the RTKQ state, must be reset visit: https://stackoverflow.com/a/69310703/10000150mockStore.dispatch(apiInstance.util.resetApiState())})// TODOdescribe('list screen tests',()=>{// scenario one : initialize screenit('list initialization',async()=>{constToRender=()=>(<Providerstore={mockStore}><NavigationContainer><MyComponentToRender/></NavigationContainer></Provider>)render(<ToRender/>);constscreenGlobalLoading=screen.getByText(/loading/,{exact: false});expect(screenGlobalLoading).toEqual("Loaading...");awaitwaitFor(()=>{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 />)
}
)
})