React 测试库可以在状态更改后找到元素吗？答案

【问题标题】：Can React Testing Library find element after state change?React 测试库可以在状态更改后找到元素吗？
【发布时间】：2022-01-18 02:28:06
【问题描述】：

我是反应测试的新手，从 youtube 的播放列表中学习。

在this very moment of the tutorial 中，讲师测试了一个组件，该组件：

具有使用效果。
在一个useEffect里面，有一个axios.get
状态随 api 响应更新。
状态数据转换为元素（每个元素都有data-testid 属性等于follower-item-{someNumber}。

测试的目的是找到一个数据元素。 .尽管我几乎要应付他的代码，但他的测试通过了，但我的没有。似乎测试在数据获取之前运行。

组件：

export default function FollowersList() {
  const [followers, setFollowers] = useState([]);

  useEffect(() => {
    fetchFollowers();
  }, []);
  const fetchFollowers = async () => {
    const { data } = await axios.get("https://randomuser.me/api/?results=5");
    setFollowers(data.results);
  };

  return (
    <div className="followerslist-container">
      <div>
        {followers.map((follower, ind) => (
          <div className="follower-item" data-testid={`follower-item-${ind}`}>
            <img src={follower.picture.large} />
            <div className="followers-details">
              <div className="follower-item-name">
                <h4>{follower.name.first}</h4> <h4>{follower.name.last}</h4>
              </div>
              <p>{follower.login.username}</p>
            </div>
          </div>
        ))}
      </div>
      <div className="todo-footer">
        <Link to="/">Go Back</Link>
      </div>
    </div>
  );
}

测试：

const MockFollowersList = () => {
  return (
    <BrowserRouter>
      <FollowersList />
    </BrowserRouter>
  );
};

describe("followers list", () => {
  it("should render follower items", async () => {
    render(<MockFollowersList />);
    let el = await screen.findByTestId("follower-item-0");

    expect(el).toBeInTheDocument();
  });
});

结果：

 Unable to find an element by: [data-testid="follower-item-0"]

<body>
  <div>
    <div
      class="followerslist-container"
    >
      <div />
      <div
        class="todo-footer"
      >
        <a
          href="/"
        >
          Go Back
        </a>
      </div>
    </div>
  </div>
</body>

【问题讨论】：

`await waitFor(() => {(getByTestId('follower-item-0')).toBeInTheDocument()})` 对你有用吗？
不幸的是没有成功。似乎测试在数据获取之前运行。
我认为你可以在第一次运行时给它一个 id 为 0 的假数组，以便在第一次运行时找到它，我的意思是不要用 EMPTY 初始化数组，因为当它在第一次运行时搜索它找到的 ID undefined
但在这种情况下，您不会真正准确地测试需要的情况，我的意思是在填充数据之前测试正在运行????

标签： reactjs jestjs react-testing-library

【解决方案1】：

问题在于您不模拟数据。尝试使用https://www.npmjs.com/package/nock#debugging 或类似的东西。

我建议你安装和使用 eslint 规则来测试库：https://github.com/testing-library/eslint-plugin-testing-library。此规则可以帮助您避免常见错误。

【讨论】：