在上一篇教程中,我们已经介绍了使用 Enzyme 测试 React 组件的基本知识。今天,我们将更深入地挖掘并学习如何测试组件的 Props,如何(以及为什么)使用 mount 函数,以及什么是 Jest 快照测试。
测试组件的 Props
在前一篇文章中,我们已经测试了传递 Props 给组件的情况。但实际上,我们可以直接测试 Props。让我们回到之前写的 ToDoList 组件,但是这次我们使用一个 Task 组件。
Task 组件的代码如下:
// src/Task.js
import React from 'react';
const Task = (props) => {
return <li>{props.name}</li>;
};
export default Task;
复制代码
修改后的 TodoList 组件代码如下:
// src/TodoList.js
import React from 'react';
import Task from './Task';
const ToDoList = (props) => {
return (
<ul>
{props.tasks.map((task) => (
<Task key={task.id} id={task.id} name={task.name} />
))}
</ul>
);
};
export default ToDoList;
复制代码
然后我们来测试 ToDoList 组件是否能够渲染 Task 组件并传递正确的 Props:
// src/TodoList.test.js
// ...
describe('ToDoList component', () => {
// ...
describe('when provided with an array of tasks', () => {
const tasks = [
{
id: 0,
name: 'Wash the dishes',
},
{
id: 1,
name: 'Make the bed',
},
];
it('passes them to the Task components', () &#