测试组件的 Props

Author: chenzhe

src/Task.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Task = (props) => {
+  return <li>{props.name}</li>;
+};
+
+export default Task;

src/TodoList.js

@@ -1,10 +1,11 @@
 import React from 'react';
+import Task from './Task';
 
 const ToDoList = (props) => {
   return (
     <ul>
-      {props.tasks.map((taskName, index) => (
-        <li key={index}>{taskName}</li>
+      {props.tasks.map((task) => (
+        <Task key={task.id} id={task.id} name={task.name} />
       ))}
     </ul>
   );

src/TodoList.test.js

@@ -17,10 +17,25 @@ describe('ToDoList component', () => {
   });
 
   describe('when provided with an array of tasks', () => {
-    it('contains a matching number of <li> elements', () => {
-      const tasks = ['Wash the dishes', 'Make the bed'];
-      const toDoList = shallow(<ToDoList tasks={tasks} />);
-      expect(toDoList.find('li').length).toEqual(tasks.length);
+    const tasks = [
+      {
+        id: 0,
+        name: 'Wash the dishes',
+      },
+      {
+        id: 1,
+        name: 'Make the bed',
+      },
+    ];
+
+    it('passes them to the Task components', () => {
+      const toDoListInstance = shallow(<ToDoList tasks={tasks} />);
+
+      toDoListInstance.find('Task').forEach((taskInstance) => {
+        const taskProps = taskInstance.props();
+        const matchingTask = tasks.find((task) => task.id === taskProps.id);
+        expect(taskProps.name).toBe(matchingTask.name);
+      });
     });
   });
 });