javascript - 如何解决 useEffect 中的 act()？

Question

我对 react-testing-library 中的 act() 错误有一个小问题。在 useEffect 中，我尝试调用一个承诺的函数。Promise 返回一些数据并显示出来，但是即使测试通过了，仍然会显示 act 错误。零件：

export function getUser() {
  return Promise.resolve({ name: "Json" });
}

const Foo = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const loadUser = async () => {
      const userData = await getUser();
      setUser(userData);
    };
    loadUser();
  }, []);

  return (
    <div>
      <p>foo</p>
      {user ? <p>User is: {user.name}</p> : <p>nothing</p>}
    </div>
  );
};

此外，我在 App Component 中有我的 Foo 组件，如下所示：

import Foo from "./components/Foo";

function App() {
  return (
    <div>
      some value
      <Foo />
    </div>
  );
}

export default App;

测试：

  test("should display userName", async () => {
    render(<Foo />);
    expect(screen.queryByText(/User is:/i)).toBeNull();
    expect(await screen.findByText(/User is: JSON/i)).toBeInTheDocument();
  });

你有什么想法来解决它吗？

编辑：这是一条错误消息

console.error
    Warning: An update to Foo 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 */