如何正確編寫 Jest 測試以避免 act() 警告？

Question

useEffect 通常使用 Promises 來更新 state。

此更新會開玩笑地發出長時間警告： Warning: An update to null inside a test was not wrapped in act(...).

對於這種情況如何正確編寫 Jest Test？

活生生的例子，可重現的例子：

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! "]}');
});

你好.js

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

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

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

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

更新1：

其中一個propasal的結果相同：

Answer 1

我想建議您使用測試庫/反應，它可以與 jest 一起順利使用並提供異步方法

你的測試會變成這樣：

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

看起來這個示例工作正常

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();
});