测试更复杂的组件

Author: mrcfps

package-lock.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^7.2.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.3",
+    "jest-enzyme": "^7.1.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.3"

package.json

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const ToDoList = (props) => {
+  return (
+    <ul>
+      {props.tasks.map((taskName, index) => (
+        <li key={index}>{taskName}</li>
+      ))}
+    </ul>
+  );
+};
+
+export default ToDoList;

src/TodoList.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import ToDoList from './ToDoList';
+
+describe('ToDoList component', () => {
+  describe('when provided with an empty array of tasks', () => {
+    it('contains an empty <ul> element', () => {
+      const toDoList = shallow(<ToDoList tasks={[]} />);
+      expect(toDoList).toContainReact(<ul />);
+    });
+
+    it('does not contain any <li> elements', () => {
+      const toDoList = shallow(<ToDoList tasks={[]} />);
+      expect(toDoList.find('li').length).toEqual(0);
+    });
+  });
+
+  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);
+    });
+  });
+});

src/TodoList.test.js

@@ -1,4 +1,5 @@
 import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
+import 'jest-enzyme';
 
 configure({ adapter: new Adapter() });