محسن محمدخانی
4 سال پیش توسط محسن محمدخانی مطرح شد
0 پاسخ

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

سلام
من یک کامپونت 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


ثبت پرسش جدید

به همدیگه کمک کنیم

به محسن محمدخانی کمک کنید تا مشکل خودش را حل کند؛ این‌طور می‌توانیم با هم پیشرفت کنیم.

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام