Error message: Act must be used when rendering components with React Testing Library

Question

Error message: Act must be used when rendering components with React Testing Library

I am facing difficulty while using react-testing-library to test a toggle component.

Upon clicking an icon (which is wrapped in a button component), I expect the text to switch from 'verified' to 'unverified'. Additionally, a function is triggered which involves state updates.

However, the click event does not seem to trigger correctly, resulting in the following error:

> jest "MyFile.spec.tsx"

 FAIL  src/my/path/__tests__/MyFile.spec.tsx
  component MyFile
    ✓ renders when opened (94 ms)
    ✓ renders with items (33 ms)
    ✕ toggles verification status on click of icon button (100 ms)


  console.error
    Warning: An update to MyFile inside a test was not wrapped in act(...).
    
    When testing, code that causes React state updates should be wrapped into act(...):
    
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */
    
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
        at MyFile (/path/to/myfile.tsx:44:3)
        at ThemeProvider (/users/node_modules/@material-ui/styles/ThemeProvider/ThemeProvider.js:48:24)

      123 |       );
      124 |     } finally {
    > 125 |       setIsLoading(false);
          |       ^
      126 |     }
      127 |   };
      128 |

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:67:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:43:5)
      at warnIfNotCurrentlyActingUpdatesInDEV (node_modules/react-dom/cjs/react-dom.development.js:24064:9)
      at dispatchAction (node_modules/react-dom/cjs/react-dom.development.js:16135:9)
      at handleConfirm (src/modules/myfile.tsx:125:7)

In my codebase, there exists a function defined as follows:

const handleSubmit = async() => {
  if(isLoading) {
    return;
  }

  try {
    setIsLoading(true);
    await myFunctionCalls();
  } catch (error){
    console.log(error)
  } finally {
    setIsLoading(false)
  }
};

A snippet of my test script is as shown below:

test('toggles verification status on click of icon button', async () => {
    renderWithTheme(
    <MyComponent/>,
   );

  const updateVerificationMock = jest.fn();
  const callFunctionWithSerializedPayloadMock =
    callFunctionWithSerializedPayload as jest.Mock;
  callFunctionWithSerializedPayloadMock.mockImplementation(
    () => updateVerificationMock,
  );

    const button = screen.getByRole('button', {name: 'Remove approval'});
    fireEvent.click(button);

    await act(async() => {
      expect(myFunctionCalls).toHaveBeenCalledTimes(1);
    });
    expect(await screen.findByText('unverified')).toBeInTheDocument();
  });

The initial expectation passes as the function calls are executed once. However, I receive the act() error mentioned above and the text switching from verified to unverified does not occur, leading to test failure. I understand that the act error usually pertains to awaiting for asynchronous operations, but I assumed findByText handles this. It appears there might be another underlying issue that I need help pinpointing and rectifying. Any guidance on debugging/improving this test would be greatly appreciated.

javascript reactjs async-await jestjs react-testing-library

Answer 1

Answer №1

When the Remove Approval button is clicked, three asynchronous functions are triggered in succession.

Initially, the loading state is set to true, indicating that content is being loaded. Then, the async function (myFunctionCalls) is executed, followed by the disappearance of the loader once the loading state returns to false.

To address this sequence, it is essential to first acknowledge the presence of the loading state, proceed with the execution of myFunctionCalls, and eventually confirm the removal of the loading indicator.

test("toggles verification status on click of icon button", async () => {
  renderWithTheme(<MyComponent />);

  const updateVerificationMock = jest.fn();
  const callFunctionWithSerializedPayloadMock =
    callFunctionWithSerializedPayload as jest.Mock;
  callFunctionWithSerializedPayloadMock.mockImplementation(
    () => updateVerificationMock
  );

  const button = screen.getByRole("button", { name: "Remove approval" });
  fireEvent.click(button);

  expect(await screen.findByText(/loading/i)).toBeInTheDocument();

  await waitFor(() => {
    expect(myFunctionCalls).toHaveBeenCalledTimes(1);
  });

  await waitForTheElementToBeRemoved(() => {
    expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
  });


  expect(await screen.findByText("unverified")).toBeInTheDocument();
});

If there is no loading text present, utilize

act(() => jest.advanceTimersByTime(500));

to extend the duration to 500ms. This ensures adequate time for the async function resolution upon reaching the specified timeframe.

beforeEach(() => {
  jest.useFakeTimers();
})

afterEach(() => {
  jest.runAllPendingTimers();
  jest.useRealTimers()
})

test("toggles verification status on click of icon button", async () => {
  renderWithTheme(<MyComponent />);

  const updateVerificationMock = jest.fn();
  const callFunctionWithSerializedPayloadMock =
    callFunctionWithSerializedPayload as jest.Mock;
  callFunctionWithSerializedPayloadMock.mockImplementation(
    () => updateVerificationMock
  );

  const button = screen.getByRole("button", { name: "Remove approval" });
  fireEvent.click(button);

  act(() => jest.advanceTimersByTime(500));

  await waitFor(() => {
    expect(myFunctionCalls).toHaveBeenCalledTimes(1);
  });

  act(() => jest.advanceTimersByTime(500));

  expect(await screen.findByText("unverified")).toBeInTheDocument();
});

Answer 2

When the Remove Approval button is clicked, three asynchronous functions are triggered in succession.

Initially, the loading state is set to true, indicating that content is being loaded. Then, the async function (myFunctionCalls) is executed, followed by the disappearance of the loader once the loading state returns to false.

To address this sequence, it is essential to first acknowledge the presence of the loading state, proceed with the execution of myFunctionCalls, and eventually confirm the removal of the loading indicator.

test("toggles verification status on click of icon button", async () => {
  renderWithTheme(<MyComponent />);

  const updateVerificationMock = jest.fn();
  const callFunctionWithSerializedPayloadMock =
    callFunctionWithSerializedPayload as jest.Mock;
  callFunctionWithSerializedPayloadMock.mockImplementation(
    () => updateVerificationMock
  );

  const button = screen.getByRole("button", { name: "Remove approval" });
  fireEvent.click(button);

  expect(await screen.findByText(/loading/i)).toBeInTheDocument();

  await waitFor(() => {
    expect(myFunctionCalls).toHaveBeenCalledTimes(1);
  });

  await waitForTheElementToBeRemoved(() => {
    expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
  });


  expect(await screen.findByText("unverified")).toBeInTheDocument();
});

If there is no loading text present, utilize

act(() => jest.advanceTimersByTime(500));

to extend the duration to 500ms. This ensures adequate time for the async function resolution upon reaching the specified timeframe.

beforeEach(() => {
  jest.useFakeTimers();
})

afterEach(() => {
  jest.runAllPendingTimers();
  jest.useRealTimers()
})

test("toggles verification status on click of icon button", async () => {
  renderWithTheme(<MyComponent />);

  const updateVerificationMock = jest.fn();
  const callFunctionWithSerializedPayloadMock =
    callFunctionWithSerializedPayload as jest.Mock;
  callFunctionWithSerializedPayloadMock.mockImplementation(
    () => updateVerificationMock
  );

  const button = screen.getByRole("button", { name: "Remove approval" });
  fireEvent.click(button);

  act(() => jest.advanceTimersByTime(500));

  await waitFor(() => {
    expect(myFunctionCalls).toHaveBeenCalledTimes(1);
  });

  act(() => jest.advanceTimersByTime(500));

  expect(await screen.findByText("unverified")).toBeInTheDocument();
});

Answer 3

Answer №2

Give this a shot:

     // [...]

     fireEvent.press(button);

     await waitFor(() => {
          expect(myFunctionCalls).toHaveBeenCalledTimes(1),
          expect(screen.findByText('unverified')).toBeInTheDocument()
        });

     // End of test

Answer 4

Give this a shot:

     // [...]

     fireEvent.press(button);

     await waitFor(() => {
          expect(myFunctionCalls).toHaveBeenCalledTimes(1),
          expect(screen.findByText('unverified')).toBeInTheDocument()
        });

     // End of test

Error message: Act must be used when rendering components with React Testing Library

Answer №1

Answer №2

Similar questions

Creating HTML elements using Vue.js

Utilizing the default event object in ag-Grid's event methods with JavaScript

showing the values stored in local storage

Refresh the HTML content within a specified div element

Error encountered with TypeScript compiler when using a React Stateless Function component

Assign the private members of the class to the arguments of the constructor

Tips for transforming a scroll element into the viewport using Angular 2+

How to drop several pins on Google Maps with JavaScript

When the only source is available, the image undergoes a transformation

Validating numbers in React JS input fields component

Executing Basic Calculations Instantly with Live Data in Qualtrics

What are the best practices for implementing responsiveness in Material-UI with React?

Is there a way to achieve a transparent background while animating the second text?

Experiment with the Users.Get function available in vk-io

Tips for creating a typescript typeguard function for function types

Achieving JSON element sorting in the most effective way

After a period of 10 minutes with no activity, proceed to the next page

Eliminate the blank choice from X-editable Select

Testing Vuex getters with unit tests in Vue

When assigning JSON to a class object, the local functions within the class became damaged