Trigger Topbar buttons in test

user_2265812 0
Viewed 86

I'm trying to test navigation events on a screen using react-native-testing-library.

I'm listening to the events globally using Navigation.events().registerNavigationButtonPressedListener with the following hook inside my Functional component:

const useTopBarBtnPress = function (
    componentId: string,
    onTopBtnPressed: OnTopBtnPressed) {
    useEffect(() => {
        const topBtnListener = Navigation.events().registerNavigationButtonPressedListener((event) => {
            if (event.componentId === componentId)
                onTopBtnPressed(event, BtnIds)
        })
        return () => topBtnListener.remove()
    }, [onTopBtnPressed])
}

Is it possible to simulate a topBar button for the test ? I guess using the testID but I can't find it in the doc.
Or do I need to mock registerNavigationButtonPressedListener ? Or use Detox ?

Also, is there a way to test the layout ? (eg. Icon color)

react-native-navigation react-native
1 Answers

There's no need to actually mock TopBar buttons to test navigationButtonPressed. Simply invoke navigationButtonPressed yourself with the correct NavigationButtonPressedEvent parameter simulating a button press.

user_22497740
Related