tests with waitFor or findBy only pass with concurrentRoot: false

[gfreeman-karmak]

We're having an odd issue since upgrading to v13. We had a lot of tests suddenly break, and they were all tests that depended on waitFor, whether using it directly or using a findBy query. For some reason when the waitFor loop advances jest timers, the screen is no longer updating, so expectations and queries never resolve.

What I found fixed the issue for now is to set concurrentRoot: false, but that can only be temporary until react v19.

Interestingly, I also tried editing the wait-for.js code directly to wrap jest.advanceTimersByTime(interval); in act and that also worked. However it appears IS_REACT_ACT_ENVIRONMENT is purposely set to false, so I have to assume the omission of act is intentional, so I don't understand why concurrentRoot: true would suddenly break the tests.

I wrote a small test to illustrate:

import { afterEach, expect, jest, test } from '@jest/globals';
import { fireEvent, render, screen } from '@testing-library/react-native';
import { useEffect, useState } from 'react';
import { Pressable, View } from 'react-native';

jest.useFakeTimers();

const onPress = jest.fn();

function MockView() {
    const [buttonVisible, setButtonVisible] = useState(false);

    useEffect(() => {
        setTimeout(() => setButtonVisible(true), 100);
    }, []);

    return (
        <View>
            {buttonVisible && <Pressable accessibilityRole='button' onPress={onPress}>Button</Pressable>}
        </View>
    );
}

afterEach(() => {
    jest.clearAllMocks();
});

test.each([true, false])('button press, concurrentRoot: %s', async (concurrentRoot) => {
    render(<MockView />, { concurrentRoot });
    fireEvent.press(await screen.findByRole('button'));
    expect(onPress).toHaveBeenCalled();
});

The test with concurrentRoot: false passes with no issue, but in the concurrentRoot: true test, findBy never finds the button: Unable to find an element with role: button.

Any ideas?

react: 18.3.1
react-native: 0.77.0
react-test-renderer: 18.3.1
@testing-library/react-native: 13.0.1
jest: 29.7.0

Thanks

[flaviomsb]

I'm experiencing the same issue after the recent upgrade to react-native 0.77.1 and @testing-library/react-native: 13.0.1. I am also on react 18.3.1 and jest 29.7.0.

[mdjastrzebski]

I've run your tests inside RNTL test suit and it passed fine for both React 0.77.1 and 0.78. The same when adding the test cases to examples/basic inside RNTL repo (RN 0.76).

So most probably this is some setup inside your app that is messing the test.

@gfreeman-karmak, @flaviomsb If you believe this is an issue with RNTL could you provide a minimal repro repository?

[gfreeman-karmak]

@mdjastrzebski Thanks for the reply. I've been looking into our setup this morning, and I've found the issue is that we call jest.useFakeTimers() in our setup file, so when the modules are imported at the beginning of the test file, the timing functions are mocked.

Specifically if fake timers are in play when the @testing-library/react-native module is imported, that is what throws off the concurrent rendering test. If the timers are fake when @testing-library/react-native is imported, then they are also fake when react-test-renderer imports, and react-test-renderer then sets its own variables to reference the (mocked) global timing functions. My suspicion is that impedes scheduling rendering updates in a way that does not affect legacy rendering.

I haven't found exactly why that's problematic, but in the end it wasn't good practice on our part to use fake timers that early in the process. We need to do that just before the tests run, so moving jest.useFakeTimers() into a beforeAll in a setup file did the trick and makes more sense anyway.