Reaction测试库如何使用waitFor

本文介绍了Reaction测试库如何使用waitFor的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在跟踪a tutorial的反应测试。本教程有一个如下所示的简单组件，用于展示如何测试异步操作：

import React from 'react' const TestAsync = () => { const [counter, setCounter] = React.useState(0) const delayCount = () => ( setTimeout(() => { setCounter(counter + 1) }, 500) ) return ( <> <h1 data-testid="counter">{ counter }</h1> <button data-testid="button-up" onClick={delayCount}> Up</button> <button data-testid="button-down" onClick={() => setCounter(counter - 1)}>Down</button> </> ) } export default TestAsync

测试文件如下：

import React from 'react'; import { render, cleanup, fireEvent, waitForElement } from '@testing-library/react'; import TestAsync from './TestAsync' afterEach(cleanup); it('increments counter after 0.5s', async () => { const { getByTestId, getByText } = render(<TestAsync />); fireEvent.click(getByTestId('button-up')) const counter = await waitForElement(() => getByText('1')) expect(counter).toHaveTextContent('1') });

终端显示waitForElement已弃用，请改用waitFor。

如何在此测试文件中使用waitFor？

推荐答案

如果您是waiting for appearance，可以这样使用：

it('increments counter after 0.5s', async() => { const { getByTestId, getByText } = render(<TestAsync />); fireEvent.click(getByTestId('button-up')); await waitFor(() => { expect(getByText('1')).toBeInTheDocument(); }); });

使用getByText('1')获取该元素时，检查.toHaveTextContent('1')有点奇怪，因此我将其替换为.toBeInTheDocument()。