如何正确编写 Jest 测试以避免 act() 警告？

Question

useEffect usually use Promises for update state.

This updates cause long warning in jest: Warning: An update to null inside a test was not wrapped in act(...).

How correctly write Jest Test for such case?

live example, Reproducible Example:

https://codesandbox.io/s/jest-test-for-useeffect-with-promises-spieq?file=/index.test.js

index.test.js

import React from "react";
import Hello from "./Hello";
import { create, act } from "react-test-renderer";

it("works", () => {
  let root;
  act(() => {
    root = create(<Hello />);
  });

  // console.log("From test:", );
  let repr = JSON.stringify(root.toJSON());
  expect(repr).toBe('{"type":"span","props":{},"children":["Hello! "]}');
});

Hello.js

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

export default () => {
  const [count, setCount] = useState();

  useEffect(() => {
    Promise.resolve({}).then(() => setCount(4));
  }, []);

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

Upd 1:

the same result for one of propasal:

Answer 1

I would like to suggest you to use testing-library/react which could be use smoothly with jest and provide async methods

Your test would become something like:

import React from "react";
import Hello from "./Hello";
import { render } from '@testing-library/react';

it("works", () => {
   const { baseElement } = render(<Hello />);
   expect(baseElement).toBeTruthy();
});

Answer 2

Looks like this sample works correct

import React from "react";
import Hello from "./Hello";
import { render, screen, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom";

it("works", () => {
  render(<Hello />);
  return waitFor(() => screen.getByText("Hello! 4"));
  // expect(baseElement.toBeTruthy();
});