users.length и users undefined Ошибка при тестировании асинхронного кода с использованием реагирующей-тестирующей библиотеки - PullRequest
Новая
       19

users.length и users undefined Ошибка при тестировании асинхронного кода с использованием реагирующей-тестирующей библиотеки

0 голосов
/ 28 июня 2019

У меня есть этот простой компонент, который извлекает данные и отображает список 

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 Я получил эту ошибку в своем тесте

enter image description here

Мой тест - убедиться, что загрузчик правильно рендерится до прихода списка пользователей. 

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

Я думаю, что не стоит менять код реализации ради тестового примера, верно? Я до сих пор удивляюсь, почему у пользователей нет пустого массива по умолчанию, когда я запускаю тест? Зачем мне дважды проверять объект users?

...