Getting error "Unable to find node on an unmounted component" - React testing library

Question

I am using react testing library to unit test the component. But as soon as I am rendering the component I get this error:

Unable to find a node on an unmounted component

Code:

import React from 'react';
import {render, fireEvent, waitFor, screen} from '@testing-library/react';
import '@testing-library/jest-dom';
import {server} from '../__mocks__/server.mock';
import Deprovision from '../Deprovision';


beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('Deprovision renders correctly.', async () => {
    console.log(TEST_BASE_URL);
    render(<Deprovision
        onRef={() => {}}
        close={() => {}}
        updateDepID={() => {}}
    />);
});

The component does a lot of async calls on init and then updates the state on the component.

But it seems that the test is removing the component before the async calls have a chance to update the state.

This works for the basic component without async calls.

What am I missing?

Answer 1

After searching so many places, it turns out to be the problem with the React version.

I was using the version [email protected]. which was causing the above issue.

please use [email protected], this will work.