سلام
من یک کامپونت 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
به محسن محمدخانی کمک کنید تا مشکل خودش را حل کند؛ اینطور میتوانیم با هم پیشرفت کنیم.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟