Question

我有功能组件，可以从该组件调用api（axios）并设置状态：

const [items, setItems] = useState<IItemInfo[]>([]);

async function getItems(): Promise<void> {
    const resp: IGetItemsResponse = await api.getItems(uid);
    setItems(resp);
}

useEffect(() => {
   if (load) {
     getItems();      
   }
}, [load]);

在玩笑中，我想模拟响应：

jest.mock('../../../api', () => {
  return {
    __esModule: true,
    default: {
      someModule: {
        getItems: () => {
          return [{id:0, name:'n0'}, {id:1, name:'n1'}];
        },
      },
    },
  };
});

笑话测试是：

const mountWrapper = mount(
    <Provider store={store}>
       <MyItemComponent load={isLoad} />
    </Provider>
);
expect(mountWrapper).toMatchSnapshot();

通过该组件中的console.log，可以检索该模拟，但还会收到此错误：

> console.error node_modules/react-dom/cjs/react-dom.development.js:88
>     Warning: An update to MyItemComponent 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 */
> 
>     This ensures that you're testing the behavior the user would see in the browser. Learn more at...
>         in MyItemComponent
>         in Provider (created by WrapperComponent)
>         in WrapperComponent

这是怎么了？我应该在模拟或测试上使用act（...）吗？

非常感谢您。

如何在Jest for React功能组件中模拟休息响应？

0 个答案: