本文介绍了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()。
更多推荐
Reaction测试库如何使用waitFor
发布评论