Test fails with Content.Provider in React-Testing-Library

Question

This is the react class that I want to test. I am using Content.Provider in order to keep a global state. In my testing file, I name it <Store>.

import { useEffect, useContext } from "react";
import { Context } from '../../config/Store';

const ProjectPage = () => {
    const [globalState, dispatch] = useContext(Context);

    useEffect(() => {
        getAllProjectData();
    }, []);

    const getAllProjectData = async () => {
        console.log('### getAllProjectData - ProjectPage.jsx')
        try {
            const data = await getProjectData();
            dispatch({ type: 'setIsLoaded', payload: true })
            dispatch({ type: 'setError', payload: false })
            dispatch({ type: 'setProjectDetails', payload: data })
        } catch (error) {
            console.log("### Error: ", error)
            dispatch({ type: 'setProjectDetails', payload: null })
            dispatch({ type: 'setIsLoaded', payload: true })
            dispatch({ type: 'setError', payload: true })
        }
    }

    if (globalState.error) {
        return <div><ErrorPage /></div>;
    } else if (!globalState.isLoaded) {
        return <div className="spinnerContainer" data-testid="spinnerContainer" 
                  <CircularProgress className="spinner" color="error" size="3rem" thickness={7} />
               </div>;
    } else {
        return <div id="projectToolbar" data-testid="projectTabBar" className="container-fluid"></div>;
    }
}

export default ProjectPage;

Then I have this test.js file in which the first test succeeds and the second fails.

import Store from '../../config/Store';
import ProjectPage from './ProjectPage';
import { render } from '@testing-library/react';

test('renders the spinner before the project page', () => {
    const { getByTestId } = render(<Store><ProjectPage /></Store>);
    const spinnerContainer = getByTestId("spinnerContainer");
    expect(spinnerContainer).toBeInTheDocument();
});

test.only('renders the project tab bar', async () => {
    render(<Store><ProjectPage /></Store>);
    const projectTabBar = await waitFor(async () => await screen.findByTestId("projectTabBar"))
    expect(projectTabBar).toBeInTheDocument();
});

In my logger the test shows the following:

As you can see the test fails because data-testid="projectTabBar" is not in the document and the spinner is there. I understand that this is happening because the component doesn't render the data but I don't understand why is this happening and how to resolve it. Any help would be appreciated.

Answer 1

Your first test and second test look identical in their setup, so it is expected that they will return the same result. The reason you are seeing the spinner is that at the point you are performing your assertion, your data is still loading. There are a few approaches you can take.

1. Test the real implementation of the Store, which involves waiting for your getAllProjectData function to complete and the component to rerender. This can lead to flakey and long running tests, but will test the component end-to-end. Look at the testing library async functions documentation on how to do this and pay particular attention to the timeouts.

2. Abstract the getAllProjectData function and useEffect into a custom hook and use that in the component instead. This allows you to mock the implementation of the custom hook in your tests and synchronously set the loading, error, or data states of your Store. Note that you will still have to wait for the projectTabBar to appear because on the initial render the Store won't have been initialised, but the wait should be short and consistent, which results in quicker and less flakey tests, but you will also need to write tests for the custom hook separately.