我将如何使用 Jest 和 React 测试库对此进行测试？答案

【问题标题】：How would I test this using Jest & React Testing library?我将如何使用 Jest 和 React 测试库对此进行测试？
【发布时间】：2021-07-21 19:28:54
【问题描述】：

我想使用 Jest 和 React 测试库 测试一个组件。当我说测试时，我基本上是在说我想检查内容是否显示在屏幕上。但是，我遇到了一个严重的问题，因为我正在处理更新状态的异步操作，因此内容不会立即出现。我将如何解决这个问题？非常感谢您提供代码 sn-p。

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

const Home = () => {
  const [tv, setTv] = useState([]);
  const [tvLoading, setTvLoading] = useState(true);

  // Go and fetch popular TV shows
  const getPopularTv = async () => {
    axios.get( ... )
    setTv(data);
    setTvLoading(false);
  };

  // This will run once. As soon as the component gets rendered for the 1st time
  useEffect(() => {
    getPopularTv();
  }, []);

  let TvData, loading;
  const img_path = 'https://image.tmdb.org/t/p/w500/';

  // If we have TV shows, set the 'TvData' variable to a pre-defined block of JSX using it.
  if (tv && tv.total_results > 0) {
    TvData = (
      <div className="row animated fadeIn ">
        {tv.results.slice(0, 10).map((show) => {
          return (
            // I WANT TO TEST IF THIS DIV APPEARS ON THE SCREEN
            // SO, ON THIS DIV I'M SETTING UP THE 'data-testid'
            // HOWEVER THIS IS A ASYNC OPERATION AND THE CONTENT
            // WON'T SHOW UP IMMEDIATELY. HOW WOULD I TEST THIS???
            <div
              data-testid="home-shows" // HERE'S THE ID THAT I WANT TO USE IN MY TEST
              className="col s6 m6 l6"
              key={show.id}
            >
              <Link to={'/tvs/' + show.id}>
                <img
                  className="responsive-img z-depth-3 poster tooltipped"
                  data-tooltip={show.name}
                  data-position="top"
                  src={img_path + show.poster_path}
                  alt={show.name}
                />
              </Link>
            </div>
          );
        })}
      </div>
    );
  }

   // Set up the 'loading' screen
   loading = (
    <div className="progress">
      <div className="indeterminate"></div>
    </div>
  );

  return (
      <div className="container">
            {tvLoading ? loading : TvData}
      </div>
  );
};

export default Home;

我尝试了act、findByTestId、waitFor 等的组合。但我无法让它正常工作。

例如，我尝试过这样的事情：

it('should display TV shows', async () => {
  const { getByText, findByTestId } = 
    render(
      <BrowserRouter>
        <Home />
      </BrowserRouter>
    )
  await findByTestId('home-shows')
  expect(getByText('More Info')).toBeInTheDocument();
});

我的想法是，如果内容出现，那么它应该包含“更多信息”的文本。如果不是这种情况，则内容不可见，因此测试应该失败。但是，测试失败与内容是否出现有关，并且我收到一个错误，我应该将我的测试包装在 act() 回调中。

【问题讨论】：

什么样的问题？你没有展示你的测试。 waitFor 就是这种情况。
@EstusFlask 我有点不好意思展示我的测试。你能告诉我如何为它写一个测试吗？我只想测试屏幕上是否出现任何内容。
@EstusFlask 我添加了我尝试的最后一种方法。
@EstusFlask 这是正确的方法吗？ => await waitFor(() => screen.findByTestId('home-movies')); expect(screen.findByTestId('home-movies')).toBeTruthy();
这就是waitFor 的用途，IIRC 将解决act 导致的await findByTestId 问题。是的，应该是这样的。除了您发布的代码中没有home-movies。

标签： reactjs jestjs react-testing-library

【解决方案1】：

感谢@EstusFlask，我取得了突破。解决方案是使用waitFor。这就是我解决问题的方法：

it('should display movies', async () => {
  render(
    <BrowserRouter>
      <Home />
    </BrowserRouter>
  );
  

  const data = await waitFor(() => screen.findByTestId('home-shows'));
  expect(data).toBeTruthy();
});

【讨论】：