تست یک کامپونت در کامپونت پدر

سلام

من یک کامپونت  TodoList  دارم که یک state  داره که لیستی از وظایف هستش و به عنوان  props به   کامپونت   TodoItem  ارسال میشه  و کامپونت  TodoItem  تمام لیست وظایف نمایش میده

وقتیکه روی تگ input.new-todo دکمه enter  فشرده میشه باید محتوا وارد  شده داخل تگ به state کامپونت  TodoList   اضافه بشه و کامپونت   TodoItem یک item بهش اضافه بشه

چطوری باید برای این تست بنویسم؟

خودم یک تست نوشتم اما ارور  زیر میده

TypeError: Cannot read property 'value' of undefined

import React, { useState } from "react";
import TodoItem from "./TodoItem";

function TodoList() {
  const [listTodo, setListTodo] = useState([
    {
      title: "wake up",
    },
    {
      title: "wash my face",
    },
    {
      title: "exercise",
    },
    {
      title: "breakfast",
    },
  ]);

  const addToDo = (event) => {
    if (event.key === "Enter") {
      const textTodo = event.target.value;
      if (textTodo == "") {
        alert("please enter text");
        return;
      }

      setListTodo((prevState) => {
        return [...prevState, { title: textTodo }];
      });
    }
  };

  return (
    <section className="todoapp">
      <header className="header">
        <h1>todos</h1>
        <input
          className="new-todo"
          autofocus
          autocomplete="off"
          placeholder="چه کاری میخواهی انجام بدهی ؟"
          required
          onKeyDown={addToDo}
        />
      </header>
      <section className="main">
        <input className="toggle-all" type="checkbox" />
        <TodoItem todos={listTodo} />
      </section>
      <footer className="footer">
        <span className="todo-count">
          <strong>12</strong> مورد
        </span>
        <ul className="filters">
          <li>
            <a href="#/all">همه</a>
          </li>
          <li>
            <a href="#/active">فعال</a>
          </li>
          <li>
            <a href="#/completed">انجام شده</a>
          </li>
        </ul>
        <button className="clear-completed">ئاک کردن انجام شده ها</button>
      </footer>
    </section>
  );
}

export default TodoList;

import React from "react";

function TodoItem({ todos }) {
  const todosTag = todos.map((todo, index) => {
    return (
      <li key={index} className="todo">
        <div className="view">
          <input className="toggle" type="checkbox" />
          <label className="todo-title">{todo.title}</label>
          <button className="destroy"></button>
        </div>
        <input className="edit" type="text" />
      </li>
    );
  });
  return <ul className="todo-list">{todosTag}</ul>;
}

export default TodoItem;

این هم تست کامپونت TodoList

import React from "react";
import { shallow } from "enzyme";
import TodoList from "../../components/TodoList";
import TodoItem from "../../components/TodoItem";
import TestRenderer from "react-test-renderer";

describe("Todo component", () => {
  test("it can render without error", () => {
    shallow(<TodoList />);
  });

  test("it can render TodoItem component with todos prop ", () => {
    const testRenderer = TestRenderer.create(<TodoList />);
    const testInstance = testRenderer.root;
    expect(testInstance.findByType(TodoItem).props.todos).toBe(
      testInstance.findByType(TodoItem).props.todos
    );
  });

  test("it can add todo to   ", () => {
    const wrapper = shallow(<TodoList />);

    wrapper.find(".new-todo").simulate("keydown", { key: "Enter" });
    const newTodo = wrapper.find(".new-todo").text("newTodo");
    expect(wrapper.find(".todo-title").first().text()).toBe(newTodo);
  });
});

این هم تست کامپونت TodoItem

import React from "react";
import { shallow } from "enzyme";
import TodoItem from "../../components/TodoItem";
describe("TodoItem component", () => {
  test("it can render without error", () => {
    shallow(<TodoItem todos={[]} />);
  });

  test("it can render with todos from props", () => {
    const todos = [
      {
        title: "wake up",
      },
      {
        title: "wash my face",
      },
      {
        title: "exercise",
      },
      {
        title: "breakfast",
      },
    ];

    const wrapper = shallow(<TodoItem todos={todos} />);
    expect(wrapper.find(".todo").length).toBe(4);
    expect(wrapper.find(".todo-title").first().text()).toBe(todos[0].title);
    expect(wrapper.find(".todo-title").last().text()).toBe(todos[3].title);
  });
});

بقیه فایل ها هم داخل github  گذاشتم. 

https://github.com/MohsenMohammadkhani/testing-reactjs-simple-project