I got a counter (React hooks ponent) which renders a new number incrementally per second. How can I assert a certain number to be in the DOM while it's updated by the hook?

Here's a code sandbox link

import React, { useState, useEffect } from "react";

export default function Counter() {
  const [count, setCount] = useState(1);

  useEffect(() => {
    const intervalId = setInterval(function () {
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(intervalId);
  });

  return <span>{count}</span>;
}

Failing test

  test("should be able to find 3 directly", async () => {
    render(<Counter />);

    const three = await waitFor(() => screen.findByText(/3/i));
    expect(three).toBeInTheDocument();
  });

Passing test

  test("should render one and then two and then three", async () => {
    render(<Counter />);

    const one = await waitFor(() => screen.findByText(/1/i));
    expect(one).toBeInTheDocument();

    const two = await waitFor(() => screen.findByText(/2/i));
    expect(two).toBeInTheDocument();

    const three = await waitFor(() => screen.findByText(/3/i));
    expect(three).toBeInTheDocument();
  });

I got a counter (React hooks ponent) which renders a new number incrementally per second. How can I assert a certain number to be in the DOM while it's updated by the hook?

Here's a code sandbox link

import React, { useState, useEffect } from "react";

export default function Counter() {
  const [count, setCount] = useState(1);

  useEffect(() => {
    const intervalId = setInterval(function () {
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(intervalId);
  });

  return <span>{count}</span>;
}

Failing test

  test("should be able to find 3 directly", async () => {
    render(<Counter />);

    const three = await waitFor(() => screen.findByText(/3/i));
    expect(three).toBeInTheDocument();
  });

Passing test

  test("should render one and then two and then three", async () => {
    render(<Counter />);

    const one = await waitFor(() => screen.findByText(/1/i));
    expect(one).toBeInTheDocument();

    const two = await waitFor(() => screen.findByText(/2/i));
    expect(two).toBeInTheDocument();

    const three = await waitFor(() => screen.findByText(/3/i));
    expect(three).toBeInTheDocument();
  });

• javascript
• reactjs
• unit-testing
• setinterval
• react-testing-library

1 Answer 1

According to the documentation, the default timeout is 1000ms, so I think it's timed out before 3 is displayed.

What if you modify the test as follows?

test("should be able to find 3 directly", async () => {
  render(<Counter />);

  const three = await waitFor(() => screen.findByText(/3/i), {
    timeout: 3000
  });
  expect(three).toBeInTheDocument();
});