如何在useEffect中解析act()？

Question

在react测试库中，act()错误有一个小问题。在useEffect中，我尝试调用一个承诺函数。承诺返回一些数据并显示出来，但是即使测试通过，行为错误仍然会显示出来。构成部分：

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

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

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 */

Answer 1

而不是act，而是使用waitFor来解决呈现问题。

import { render, waitFor } from '@testing-library/react-native';
import { useEffect, useState } from 'react';
import { Text } from 'react-native';

describe('useState', () => {
  it('useState', () => {
    function MyComponent() {
      const [foo] = useState('foo');
      return <Text testID="asdf">{foo}</Text>;
    }
    const { getByTestId } = render(<MyComponent></MyComponent>)
    expect(getByTestId("asdf").props.children).toBe("foo");
  });
  it('useState called async', async () => {
    function MyComponent() {
      const [foo, setFoo] = useState('foo');
      useEffect(() => {
        (async () => {
          setFoo(await Promise.resolve('bar'))
        })()
      }, []);
      return <Text testID="asdf">{foo}</Text>;
    }
    const {getByTestId} = await waitFor(()=>render(<MyComponent></MyComponent>))
    expect(getByTestId("asdf").props.children).toBe("bar");
  });
});