因此,我更新到React18,现在我得到了吨的行为警告以及失败的测试。
版本:
React:18.2.0
React域:18.2.0
笑话:29.3.1
jest-环境-jsdom:29.3.1
测试用例:29.0.3
typescript :4.9.4
错误警告:测试内ProductPrice的更新未 Package 在act(...)中。
测试时,应将导致React状态更新的代码 Package 到act(...)中:
我已经修复了大约80个测试,方法是将Assert或主呈现方法 Package 在await waitFor(() => {}
中。
是否有更好的方法来修复这些测试?下面是一个示例测试,它通过以下更改从失败变为通过......在我升级到React 18和相应的react-testing-library + jest版本之前,以下失败的测试通过了
- -----------未通过以下测试------------
async function findPlpHeaderText() {
return screen.findByTestId('plp__header-text');
}
test.only('Sold out products render as expected on store', async () => {
await renderPage({ route: '/boutique/21443255', siteName: 'anonymous-store' });
const headerText = await findPlpHeaderText();
await within(headerText).findByText('Childless boutique');
await screen.findByText('Sold Out');
await screen.findByText('Sold Out. Must Have It?');
});
- --------通过以下测试------------
注意:我把Assert Package 在waitFor(() =>
中,然后它们通过了,我测试了这也不是一个误报...这篇博客文章启发我在升级到react 18之后把Assert Package 在waitFor中--https://www. felixmokross. dev/blog/react-18-upgrade #:~:text = Fixing%20the%20tests,wrap%20assertions%20in
test.only('Sold out products render as expected on store', async () => {
await renderPage({ route: '/boutique/21443255', siteName: 'anonymouse-store' });
const headerText = await findPlpHeaderText();
await waitFor(async () => {
within(headerText).getByText('Childless boutique');
screen.getByText('Sold Out');
screen.getByText('Sold Out. Must Have It?');
});
});
有没有其他人在升级到React 18后经历过这种情况?如果有更好的解决方案,我很想知道!
另一个奇怪的方面是当我用一个:waitFor(async () => {})
回调,act()
警告消失--但是如果我只将它们 Package 在waitFor(() => {})
非异步回调中,'act()警告仍然存在,但是测试仍然通过...
1条答案
按热度按时间hs1ihplo1#
在升级到react 18之后,我还面临react测试库测试失败的问题。我可以通过在act函数中使用RTL fireEvent封装事件触发来修复大多数测试。其中一些已经被封装在waitFor中,但仍然会导致测试失败。因此,我用act替换waitFor,然后,它开始工作。
或者,如果您使用的是RTL,并且您要在fireEvent之后立即从渲染的dom中获取一些元素,那么不要使用getBy*,而是尝试使用await findBy*。