我使用react-testing-library设置了Jest,并且我编写了一个测试,如下所示:
describe("Some Functionality", () => {
it("Should add a given product to the cart state", async () => {
const state = getMockState();
const { result: { getByTestId }, store } = deepRender(
<ProductView />,
{ initialState: state });
act(() => {
fireEvent.click(getByTestId("add-to-cart-btn"));
})
const newState = store.getState() as RootState;
expect(someassertion);
});
});
我的测试运行并通过,但我继续收到行为警告,表明状态更新未包含在行为函数中。
我假设由于组件在加载时触发了 useEffect ,它正在改变渲染方法也需要包装在 act block 中的状态,但这样做:
act(() => {
const { result: { getByTestId }, store } = deepRender(
<ProductView />,
{ initialState: state });
fireEvent.click(getByTestId("add-to-cart-btn"));
})
不会消除警告,并且还会使结果存储对于行为 block 之外的断言不可用。有什么方法可以格式化它以减轻 act() 警告吗?
针对下面的问题,该组件的useEffect是:
useEffect(() => {
if (something) {
getDetails(something)
.then(getVariances)
.then(setProductVariances);
}
}, []);
这使用 useState 设置了productVariances 状态值
最佳答案
您不需要将 render
包装在 act
block 中。您收到行为警告是因为在 promise 解决后存在状态更新,因此状态更新发生在行为 block 之外。我通常通过 await
解决这个问题,并在我的测试中触发状态更新。
此外,您也不需要将 fireEvent
包装在 act block 中,因为它在内部使用 act。
关于javascript - 使用 useEffect 发出 Jest Act 警告,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65423182/