How to test when text changes after user clicks

[do-kevin]

Hi, I am wondering if this is in the right path to testing my carousel. After the user clicks the next button, the text should change; however, I am having trouble testing that and being thrown errors. I've tried Promise with setTimeout, but I am getting

"Exceeded timeout of 30000 ms for a test. Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

I've already tried using jest fakeTimers and realTimers, even extended the testTimeout in jest.config.js, but I am still getting the error about exceeding time and I'm not sure if I'm testing how my carousel changes text content properly.

Here's what my test sort of looks like, for example:

  test("Should change to next and previous services after aviation", async () => {
    render(<Default />);

    const serviceHeading = screen.getByText(/service 1/i);

    const serviceDescription = screen.getByText(
      /lorem ipsum 1\./i
    );

    const prevAngleButton = screen.getByTestId("previous-service-button");

    const nextAngleButton = await screen.getByTestId("next-service-button");

    userEvent.click(nextAngleButton);

    await new Promise(() =>
      setTimeout(() => {
        expect(serviceHeading).toHaveTextContent("service 2");
        expect(serviceHeading).not.toHaveTextContent(
          /service 1/i
        );
        expect(serviceDescription).toHaveTextContent(
          /lorem ipsum 2\./i
        );
      }, 500)
    );
  });

[ph-fritsche]

You hit the test timeout because you await a Promise that is never settled.

await new Promise(() => setTimeout(() => undefined, 500)) // This Promise will never be resolved/rejected.

The test should probably look something like this:

// ...
await userEvent.click(nextAngleButton)

await waitFor(() => { // wait for this function to not throw an error
  expect(serviceHeading).toHaveTextContent('service 2')
})

https://testing-library.com/docs/dom-testing-library/api-async/#waitfor

[do-kevin]

Thank you!