Состояние компонента реакции, переданное как опора, не определено в тесте Jest - PullRequest
Новая
       3

Состояние компонента реакции, переданное как опора, не определено в тесте Jest

0 голосов
/ 01 марта 2020

Я новичок в React и Jest, и сейчас я пытаюсь написать тесты для моего приложения Todo, но не могу найти способ протестировать компоненты, для которых требуется рендеринг / состояние.

Приложение. js: 

import React, { useState } from "react";
import AddItemBar from "./components/AddItemBar";
import TodoItemList from "./components/TodoItemList";
import "./App.css";
import { v4 as uuidv4 } from "uuid";

const App = () => {
  // Initial state for todos
  const [todos, setTodos] = useState([
    { id: uuidv4(), name: "Learn React", complete: false },
    { id: uuidv4(), name: "Graduate from school", complete: false },
    { id: uuidv4(), name: "Get a cool web development job", complete: false },
    { id: uuidv4(), name: "Learn more new technologies", complete: false },
    { id: uuidv4(), name: "Enjoy working life", complete: false }
  ]);

  return (
    <div className="container appbox">
      <TodoItemList todos={todos} setTodos={setTodos} />
      <AddItemBar todos={todos} setTodos={setTodos} />
    </div>
  );
};

export default App;

TodoItemList. js: 

import React from "react";
import TodoItem from "./TodoItem";

const TodoItemList = ({ todos, setTodos }) => {
  var items = [];

  // Create todo item list
  todos.forEach(todo => {
    items.push(
      <TodoItem key={todo.id} todo={todo} todos={todos} setTodos={setTodos} />
    );
  });

  return items;
};

export default TodoItemList;

TodoItemList.test. js: 

import React from "react";
import ReactDOM from "react-dom";
import TodoItemList from "./TodoItemList";

test("should render without problems", () => {
  const div = document.createElement("div");
  ReactDOM.render(<TodoItemList />, div);
});

Я хочу протестировать TodoItemList, но я получаю сообщение об ошибке:

Невозможно прочитать свойство 'forEach' из неопределенного

Что означает, что массив todos недоступен для тест.

Чего мне не хватает? Как мне довести состояние / реквизиты задач до этого теста?

Как я понял, тест распространяется вниз до компонентов ниже тестируемого, но не вверх по дереву компонентов?

Ответы [ 2 ]

2 голосов
/ 01 марта 2020

TodoItemList ожидает todos свойство массива

Но вы не передаете его в ReactDOM.render(<TodoItemList />, div);

Просто определите его начальное значение 

import React from "react";
import TodoItem from "./TodoItem";

const TodoItemList = ({ todos = [], setTodos }) => { // change here
  var items = [];

  // Create todo item list
  todos.forEach(todo => {
    items.push(
      <TodoItem key={todo.id} todo={todo} todos={todos} setTodos={setTodos} />
    );
  });

  return items;
};

export default TodoItemList;
0 голосов
/ 01 марта 2020

Вы рендерите <TodoItemList /> без реквизита. Ваш App компонент имеет состояние по умолчанию, но ваш тест не отображает <App />, он напрямую отображает TodoItemList.

...