使用带有 mockResolvedValue 的异步函数测试 React 组件 - 承诺未解决

Question

我有一个获取异步函数并运行它的组件。

代码示例：

const Foo = ({func}) => {
  const [val, setVal] = useState(null);
  useEffect(()=> {
        async function myAsyncFunf() {
          const newVar = await func();
          setVal(newVar)
        };
        myAsyncFunf();
      },[]);
  return <div>{val}</div>
}
it('test',async()=>{
  const asyncMock = jest.fn().mockResolvedValue(43);
  const props = {func: asyncMock}
  const {getByText} = render(<Foo {...props}/>);
  await wait(() => expect(asyncMock).toHaveBeenCalledTimes(1));
  getByText('43');

});

测试失败并显示此消息：

控制台错误 警告：测试中对 Foo 的更新未包含在 act(...) 中。

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at 

Answer 1

在你的组件中，func其实和props有关，你只是把它命名为“func”

您需要对其进行解构才能访问 func，或显式访问对象的属性。

选项 1 - 解构。注意花括号“{func}”

const Foo = ({func}) => {
  const [val, setVal] = useState(null);
  useEffect(()=> {
        async function myAsyncFunf() {
          const newVar = await func();
          setVal(newVar)
        };
        myAsyncFunf();
      },[]);
  return <div>{val}</div>
}

选项2 - 访问“props”的属性“func”

const Foo = (props) => {
  const [val, setVal] = useState(null);
  useEffect(()=> {
        async function myAsyncFunf() {
          const newVar = await props.func();
          setVal(newVar)
        };
        myAsyncFunf();
      },[]);
  return <div>{val}</div>
}