Mocking data returned by useQuery using MockedProvider - reactjs

Question

I have a simple component. All it does is fetch data using useQuery and pass it to another component. The component works fine, but I am unable to test it without adding hacks as described here:
Testing Final Stage
I have had a look at MockedProvider requires timeout, and this was asked 2.5 years back. Is there any other way available? I can't believe the library team advocates putting wait/setTimeout in units!
Component:
export const PROFILE_QUERY = gql`
query {
profile {
roles
}
}
`;
export const Connected = () => {
const { loading, data, error } = useQuery(PROFILE_QUERY);
const setCurrentProfile = (role: string) => {
cachedSettings(getSettings(role));
};
const roles = data?.profile?.roles;
return <Profile {...{ roles, loading, error, setCurrentProfile }} />;
};
Test Case:
import React from 'react';
import { render } from '#testing-library/react';
import { MemoryRouter } from 'react-router';
import Profile from '../Profile';
import ConnectedProfile from '..';
import { MockedProvider, MockedResponse } from '#apollo/client/testing';
import { PROFILE_QUERY } from '../Profile.connected';
jest.mock('../Profile', () => {
return jest.fn(() => null);
});
describe('Connected <Profile />', () => {
const renderComponent = (roles: string[] | undefined) => {
const mock: MockedResponse = {
request: {
query: PROFILE_QUERY
},
result: {
data: {
profile: {
roles
}
}
}
};
return render(
<MockedProvider mocks={[mock]} addTypename={false}>
<MemoryRouter>
<ConnectedProfile />
</MemoryRouter>
</MockedProvider>
);
};
it('multiple roles must have been passed', async () => {
renderComponent(['foo', 'bar']);
**//DOCUMENTATION says do following? - will have to wrap rendering in act as well
//await new Promise(resolve => setTimeout(resolve, 0));**
const args = (Profile as jest.Mock).mock.calls[0][0];
expect(args.roles).toEqual(['agent', 'administrator']);
});
it('no roles passed', async () => {
renderComponent(undefined);
//DOCUMENTATION says do following?
//await new Promise(resolve => setTimeout(resolve, 0));
const args = (Profile as jest.Mock).mock.calls[0][0];
expect(args.roles).toEqual(undefined);
});
afterEach(() => (Profile as jest.Mock).mockClear());
});

Answer 1

If MockedProvider is asynchronous and contains one-tick delay, a requirement to delay at least for the same amount of time is reasonable. This is a common issue for asynchronous tests and this is what popular flush-promises utility does.
React Testing Library is focused on blackbox testing and encourages the use of waitFor helper to not rely on the implementation. It may result in accumulated test time due to polling intervals:
renderComponent(undefined);
await waitFor(() => {
expect(Profile).toBeCalledTimes(1);
expect(Profile).toBeCalledWith(expect.objectContaining({ roles: undefined }));
});
Since this MockedProvider behaviour is known and documented, it can be safely implemented in renderComponent helper itself:
const renderComponent = async (roles: string[] | undefined) => {
...
const result = render(
<MockedProvider mocks={[mock]} addTypename={false}>...</MockedProvider>
);
await new Promise(resolve => setTimeout(resolve));
return result;
};
...
await renderComponent(undefined);
expect(Profile).toBeCalledTimes(1);
expect(Profile).toBeCalledWith(expect.objectContaining({ roles: undefined }));