Enzyme shallow() 跳过某些子组件的方法
介绍
在前端开发中，测试是一个非常重要的环节。Enzyme 是一个强大的 React 测试库，能够帮助我们进行组件测试。在 Enzyme 中一个重要的函数是 shallow()，它能够快速渲染一个 React 组件，并返回一个浅层渲染器 ShallowWrapper 对象。但是，有时我们不希望测试到子组件的细节，我们只希望测试主要功能，这时 shallow() 函数跳过某些子组件就显得特别有用。
演示示例
在这个示例中，我们将创建一个 TodoList 组件和一个 TodoItem 组件。 TodoList 组件将渲染多个 TodoItem 组件。我们将使用 Enzyme 来测试 TodoList 组件，但是希望跳过渲染每个 TodoItem 组件。
首先，我们需要安装 Enzyme 和适当的测试框架，例如 Jest 或 Mocha。我们不会在这里讨论如何设置测试框架，我们假设你已经知道如何配置。
现在我们可以创建 TodoList 和 TodoItem 组件了：
// TodoItem.js import React, { Component } from 'react';
class TodoItem extends Component { render() { const { text } = this.props; return
export default TodoItem;
// TodoList.js import React, { Component } from 'react'; import TodoItem from './TodoItem';
class TodoList extends Component { render() { const { todos } = this.props; return (
-
{todos.map(todo => <todoitem>)}
export default TodoList;
现在我们可以为 TodoList 组件编写测试了。首先让我们使用 Enzyme 的 shallow() 函数来渲染 TodoList 组件：
// TodoList.test.js import React from 'react'; import { shallow } from 'enzyme'; import TodoList from './TodoList';
describe('TodoList', () => { it('should render a list of todos', () => { const todos = [ { id: 1, text: 'Buy milk' }, { id: 2, text: 'Buy eggs' }, { id: 3, text: 'Buy bread' }, ]; const wrapper = shallow(<todolist>); expect(wrapper.find('li')).toHaveLength(3); }); });
在这个测试中，我们期望 TodoList 组件能够渲染出 3 个 TodoItem 组件。请注意，我们不需要为 TodoItem 组件编写单独的测试，因为我们假设该组件单元测试已经成功。
现在我们将假设我们不想测试 TodoList 组件中的 TodoItem 细节。我们只关心基本功能是否正常工作。我们可以使用 Enzyme 的 dive() 函数来跳过 TodoItem 细节：
// TodoList.test.js import React from 'react'; import { shallow } from 'enzyme'; import TodoList from './TodoList';
describe('TodoList', () => { it('should render a list of todos', () => { const todos = [ { id: 1, text: 'Buy milk' }, { id: 2, text: 'Buy eggs' }, { id: 3, text: 'Buy bread' }, ]; const wrapper = shallow(<todolist>); expect(wrapper.dive().find('li')).toHaveLength(3); }); });
在这个测试中，我们使用了 Enzyme 的 dive() 函数来跳过 TodoItem 细节。现在我们的测试不再依赖于 TodoItem 组件的渲染结果。
总结
在本文中，我们介绍了 Enzyme 的 shallow() 函数，它能够帮助我们快速渲染一个 React 组件，并返回一个浅层渲染器 ShallowWrapper 对象。我们还介绍了如何使用 Enzyme 的 dive() 函数来跳过某些子组件的细节。这样，我们就可以测试组件的主要功能，而不必去关注所有子组件的实现细节。
我相信，当你熟练掌握了 Enzyme 的 shallow() 函数和 dive() 函数后，你将会在日后的 React 开发中受益匪浅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f2a09bf6b2d6eab3c4073d