MockedProvider causing test to complain about not using `act()`.

Intended outcome:

Actual outcome:

When running test using MockProvider I expect test to not error out with the following error:

 Warning: An update to ResearchCategoryList inside a test was not wrapped in act(...).
 When testing, code that causes React state updates should be wrapped into act(...):

How to reproduce the issue:

The following test will cause test to complain:

it('renders without error', async () => {
  let component
  act(() => {
    component = create(
      <MockedProvider mocks={mocks} addTypename={false}>
        <ResearchCategoryList category="Education" />
      </MockedProvider>
    )
  })
  await wait(0)
  const tree = component.toJSON()
  expect(tree).toMatchSnapshot()

Versions

"@apollo/react-testing": "^3.1.3",

[CosmaTrix]

@donedgardo I’ve beeing having the same issue, using Jest and @testing-library/react. Right now I’m suppressing those warnings, as described in the in the @testing-library/react documentation.

In my jest global setup file, I’ve added

const originalError = console.error;

beforeAll(() => {
  console.error = (...args: any[]) => {
    if (/Warning.*not wrapped in act/.test(args[0])) {
      return;
    }

    originalError.call(console, ...args);
  };
});

afterAll(() => {
  console.error = originalError;
});

I’m not completely sure about this approach (this might suppress warnings that need to be taken care of), but that does the trick! 😄

[CosmaTrix]

@donedgardo Thanks for pointing that issue out. I’ve been using the wait exported from @testing-library/react and that fixes the issue.

import { render, wait } from "@testing-library/react";

it ("renders without errors", () => {
  render(
    <MockedProvider mocks={mocks} addTypename={false}>
      <ResearchCategoryList category="Education" />
    </MockedProvider>
  );

  await wait()

  // run expectations
});

In your case, I think you can try and wrap the await wait() in act as suggested in this comment.

await act(wait);

Both solutions work for me! 🎉