How To Test Navigation If The First Screen is An Animation.

[jdager-cb]

Hello in Advance.

I can't make the Navigation test works. My first Screen is an animation in the useeffect function. I have tried waitfor, faketimer, customtimers, but the render function never wait for the animation to ends and then load the next Screen.

Can you help me?.

There is my code.

Navigation

<NavigationContainer>
            <Stack.Navigator initialRouteName="Splash" screenOptions={{headerShown: false}}>
                <Stack.Screen name="Splash" component={SplashScreen} />
                <Stack.Screen name="Home" component={Home}/>
                <Stack.Screen name="Register" component={Register}/>
            </Stack.Navigator>
        </NavigationContainer>

The Animation.

useEffect(()=>{
        Animated.sequence([
            Animated.parallel([
                Animated.timing(moveAnim, {
                    duration: 500,
                    toValue: -270,
                    delay: 500,
                    useNativeDriver: false,
                }),
                Animated.timing(fadeAnim, {
                    duration: 1200,
                    toValue: 1,
                    delay: 500,
                    useNativeDriver: false,
                })
            ]),
            Animated.timing(fillAnim, {
                duration: 1000,
                toValue: 40,
                delay: 0,
                useNativeDriver: false,
            }),
            Animated.parallel([
                Animated.timing(fadeAnim, {
                    duration: 500,
                    toValue: 0,
                    delay: 0,
                    useNativeDriver: false,
                }),
                Animated.timing(fadeOutAnim, {
                    duration: 500,
                    toValue: 0,
                    delay: 0,
                    useNativeDriver: false,
                })
            ])
        ]).start(({ finished }) => {
            navigation.navigate("Home");    
        });
    }, [moveAnim, fadeAnim, fadeOutAnim, fillAnim]);

And for test.

test('navigate to register screen', async () =>{
    const View = render(<Routes />).toJSON();
    const { queryByText, findByText } = render(<Routes />);
    const oldScreen = queryByText("Welcome to the");
    const button = await findByText('SIGN UP');

    expect(oldScreen).toBeTruthy();

    fireEvent(button, 'press');

    const newScreen = await findByText("REGISTER");
    const newScreenCancel = await findByText("CANCEL");

    expect(newScreen).toBeTruthy();
    expect(newScreenCancel).toBeTruthy();
});

[AugustinLF]

If you remove the animation, does it work? In general regarding animations, I feel the simplest solution is to mock them jest.mock(...) and return dummy function that won't do anything.

[mdjastrzebski]

Closing as stale. @jdager-cb if you think that the issue still persists and is worth investigating please create a minimal repro repo, it would be best if you could base it on our examples/basic app.