Jest Snapshot Testing Wait till Component Renders

user_4595141 0
Viewed 152

I feel like I am missing something when it comes to testing React components with async fetch operations.

I have a following component like this...

export default function Page() {
    const [result, setResult] = useState();

    async function initialize() {
       const response = api.fetchData();
       setResult(response);
    }

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

    return (isLoading ? (
        <div>Fetching Data...</div>
    ) : (
        <div className="page-result-name">{result.name}</div>
    )
}

I want to create the following test.

test('Page rendering test.', async () => {
    jest.spyOn(api, 'fetchData').mockResolvedValue({ name: 'User 1'});

    const pageRendering = renderer.create(<Page />);

    // Wait?  How to wait?
    // I have tried the following... as well as other method.
    // await waitFor(() => {
    //     const element = document.getElementByClassName('page-result-name')[0] as 
    //     HTMLElement;
    //     expect(element.innerHTML.includes('User 1')).toBeTruthy();
    // });

    expect(pageRendering.toJSON()).toMatchSnapshot();
});

The issue I am running into is that the data has not been returned by the time the snapshot is taken.

Regardless of the approach I run into issues with warnings like the following

Warning: It looks like you're using the wrong act() around your test interactions

Or it always displays Fetching Data...

I have used render from @testing-library/react and the waitFor and things work well. I don't know how to generate a snapshot for that.

Any help here would be appreciated!!

Cheers!!

react-test-renderer ts-jest react-testing-library jestjs
1 Answers

For async operations the tricky is waiting for loading component to be removed from the screen, this way you assure that the your component is completed loaded and then you can expect the snapshot:

test('Page rendering test.', async () => {
    jest.spyOn(api, 'fetchData').mockResolvedValue({ name: 'User 1'});

    const pageRendering = renderer.create(<Page />);

    // Wait?  How to wait?
    //  wait for your data to be loaded before you make your assertion.
    await waitForElementToBeRemoved(screen.getByText('Fetching Data...'));

    expect(pageRendering.toJSON()).toMatchSnapshot();
});
user_95001190
Related