callstack / react-native-testing-library

🦉 Simple and complete React Native testing utilities that encourage good testing practices.
https://callstack.github.io/react-native-testing-library/
MIT License
3.01k stars 264 forks source link

Error: cannot read properties of null useMemo #1630

Open softlore opened 2 weeks ago

softlore commented 2 weeks ago

Hi team,

Following is the libraries & versions I use in my project

library version
react-native 0.71.1
testing-library 12.0.1
jest 29.6.1

Below is the outline of components & test file I have used in my project

Component

const CustomList = () => {
    const [val, setVal] = useState(null);
    const { data, loading } = uiController()

    const handleRedirect = () => {

    }

    if(loading){
        return <Text testID='loaderPage'>Loading...</Text>
    }

    return <>
        <RedirectComponent 
            val={val} 
            onRequestComplete={handleRedirect}/>
        <FlatList
            data
            renderItem={({ item }) => {
                return <View>
                    <Pressable testID='listItem' onPress={() => setVal(item.id)}/>
                </View>
            }}

        />
    </>
}

Test File

describe('CustomList', () => {

    it('should render loader page', () => {
        jest.mock('~/ui-controller', () => ({
            data: [],
            loading: true  
        }))

        const { getByTestId } = render(<MockedProvider mocks={[...]}>
            <CustomList/>
        </MockedProvider>)

        expect(getByTestId('loaderPage')).toBeDefined()
    })

    it('should handle redirect', () => {
        jest.mock('~/ui-controller', () => ({
            data: [{ id: 1 }],
            loading: false  
        }))

        const { getByTestId, queryAllByTestId } = render(<MockedProvider mocks={[...]}>
            <CustomList/>
        </MockedProvider>)

        const listItems = queryAllByTestId('listItem')

        fireEvent.press(listItems[0])

        expect(queryByText('1')).toBeDefined()

        fireEvent.press(getByTestId('redirect-btn'))
    })

})

redirect component mock

const RedirectMock = ({ val, onRequestComplete }) => {
    return <View>
        <Text>{val}</Text>
        <Pressable testID='redirect-btn' onPress={onRequestComplete}/>
    </View>
}

Errors

Initially I was getting the following error

fireEvent.press(getByTestId('redirect-btn')) --> Found mulitple element with testID:  redirect-btn

But getByText('1') gives only one item.

So I added a cleanup & resetModules in the afterEach method:

afterEach(() => {
    cleanup();
    jest.resetModules();
})

Now, I am getting the following error:

TypeError: Cannot read properties of null (reading 'useMemo')

I am unable to share the full stacktrace, but error comes from the following file:

/react-native/Libraries/Lists/VirtualizedListContext.js

at line:

export function VirtualizedListContextProvider({
    children,
    value,
}: {
    children: React.Node,
    value: Context
}): React.Node {

    const context = useMemo(