Визуализация компонента React в тесте Jest возвращает неопределенное значение - PullRequest
Новая
       3

Визуализация компонента React в тесте Jest возвращает неопределенное значение

0 голосов
/ 07 ноября 2019

Я пытался создать тест с React, с компонентом TodoItems. Это обычный Todolist с некоторыми базовыми функциями. При запуске теста выдается сообщение о том, что todos не определено. В результате сам код теста не работает.

Тест: 

it("Tasks length increased by one when task is added.", () => {
  const { todos } = render(<TodoItems />);
  const todoLen = getByTestId(todos, "tasks");

  console.log(todos);
  expect(todoLen.toBe(1));
});

Проверенный компонент: 

export default function Tasks() {
  let [tasks, setTasks] = useState([
    {
      content: "(Dette er en eksempelopppgave) "
    }
  ]);

  useEffect(() => {
    fetch("http://localhost:8080/all", {
      crossDomain: true,
      method: "GET",
      mode: "no-cors",
      credentials: "include"
    })
      .then(res => res.json())
      .then(function(response) {
        console.log("TodoItems is fetching.. ", response);
        if (response.status !== 200) {
          console.log("Fetching failed, response status: " + response.status);
          return;
        }
        response.json().then(function(data) {
          //was data instead of tasks, testing
          console.log(data, " is a response");
        });
      })
      .catch(function(err) {
        console.log("Fetch error: ", err);
      });
  }, []);

  // });

  let handleAddTask = task => {
    setTasks(tasks.concat(task));
    console.log("handleAddTask content: " + JSON.stringify(task));
  };

  let handleDeleteTask = id => {
    setTasks(tasks.filter(task => task.id !== id));
  };

  return (
    <div className="Tasks">
      <h2>Tasks</h2>
      <TaskList deleteTask={handleDeleteTask} tasks={tasks} />
      <TaskForm addTask={handleAddTask} />
      <Button onClick={reqListener}>Load</Button>
    </div>
  );
}

Редактировать (полный код теста):

import React from "react";
import renderer from "react-test-renderer";
import TodoItems from "../components/TodoItems.js";
import { render, fireEvent, getByTestId } from "@testing-library/react";
import App from "../App.js";

//Test for the tasks array.
it("Tasks length increased by one when task is added.", () => {
  const { container, getByTestId } = render(<TodoItems />);
  const todos = getByTestId("tasks");

  expect(container).toBeDefined();
  expect(todos).toHaveLength(1);
});

1 Ответ

0 голосов
/ 07 ноября 2019

Когда вы тестируете с @testing-library/react, метод render возвращает container с кучей полезных методов получения, поэтому вы можете сделать следующее: 

it("Tasks length increased by one when task is added.", () => {
  const { container, getByTestId } = render(<TodoItems />);
  const todos = getByTestId("tasks"); 

  expect(container).toBeDefined();
  expect(todos).toHaveLength(1);
});

Для строки *Чтобы 1007 * работал, вам нужно добавить атрибут data-testid к вашему компоненту: 

 <TaskList deleteTask={handleDeleteTask} tasks={tasks} data-testid="tasks"/>
...