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

问题描述

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

import React from 'react'

const TestAsync = () => {
  const [counter, setCounter] = React.useState(0)

  const delayCount = () => (
    setTimeout(() => {
      setCounter(counter + 1)
    }, 500)
  )
  
  return (
    <>
      
{ counter }
       Up
       setCounter(counter - 1)}>Down
    
  )
}
  
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(); 

  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();

  fireEvent.click(getByTestId('button-up'));
  
  await waitFor(() => {
    expect(getByText('1')).toBeInTheDocument();
  });
});

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

这篇关于Reaction测试库如何使用waitFor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持吉威生活！

[英文标题]React testing library how to use waitFor

声明：本媒体部分图片、文章来源于网络，版权归原作者所有，如有侵权，请联系QQ:330946442删除。