users.length和users undefined使用react-testing-library测试异步代码的错误

Question

我有这个简单的组件，可以提取数据并呈现列表

import React, { useState, useEffect } from "react";
import axios from "axios";
import styled from "styled-components";

const Loader = styled.div``;

const Row = styled.li`
  list-style: none;
  margin: 10px;
`;

export const url = "https://randomuser.me/api/?results=5";

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    async function getUsers() {
      try {
        const {
          data: { results }
        } = await axios.get(url);
        setUsers(results);
      } catch (error) {
        console.log(error);
      }
    }
    getUsers();
  }, []);

  return (
    <>
      {users && users.length === 0 ? (
        <Loader>Loading...</Loader>
      ) : (
        users &&
        users.map(user => <Row data-testid="row">{user.name.first}</Row>)
      )}
    </>
  );
}

export default Users;

如果您注意到我必须对用户状态进行仔细检查以通过测试。

例如，如果我不进行重复检查而不是对用户&& users.length进行检查，那么我会对users.length进行检查，

我的测试是在用户列表出现之前检查加载程序是否正确渲染。

test("loader component when it's fetching data", () => {
  const { getByText } = render(<Users />);
  expect(getByText(/loading.../i)).toBeInTheDocument();
});

我认为为了测试用例，我不应该更改实现代码吗？我仍然想知道为什么在运行测试时用户默认不是空数组？为什么我需要仔细检查用户对象？