如何在 React 中使用 Enzyme 检测子组件？

React 是当今最受欢迎的前端框架之一，因其很好的组件化设计而备受青睐。Enzyme 是一种流行的 JavaScript 测试实用程序，它允许我们在 React 组件上测试各种交互行为和渲染输出。Enzyme 还提供了容易使用的 API，可以帮助我们快速找到 React 组件中的子组件。如何使用 Enzyme 检测 React 中的子组件？本篇文章将介绍一些提示和技巧，帮助您在 React 中更有效地使用 Enzyme。

安装和设置 Enzyme

在使用 Enzyme 前，需要先安装并设置。可以通过命令行安装 Enzyme：

npm install --save-dev enzyme enzyme-adapter-react-16

然后设置您的测试文件以使用 Enzyme：

// setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

找到子组件

Enzyme 有许多方法可以找到 React 组件中的子组件。以下是一些示例。

find

使用find方法查找组件。例如：

const wrapper = shallow(<MyComponent />);
const childComponent = wrapper.find('.my-child-component');

childAt

定位特定索引的子组件，使用childAt方法。例如：

const wrapper = shallow(<MyComponent />);
const secondChild = wrapper.childAt(1);

children

如果要将每个子组件作为单独的元素处理，请使用children方法。例如：

const wrapper = shallow(<MyComponent />);
const children = wrapper.children();

props 和 state

使用props和state属性获取子组件的属性和状态，例如：

const wrapper = shallow(<MyComponent />);
const props = wrapper.find('MyChildComponent').props();
const state = wrapper.find('MyChildComponent').state();

模拟子组件

当您想测试一个组件，但是组件内部存在其他子组件并且您不想也不需要测试真正的子组件时，您需要模拟这些子组件。Enzyme 有几种方法可以帮助您实现这一点。

shallow

使用shallow方法用虚拟的 DOM 实现子组件。例如：

const wrapper = shallow(
  <MyComponent>
    <MyChildComponent />
  </MyComponent>
);

stub

使用stub方法创建虚假子组件实例。例如：

const wrapper = shallow(<MyComponent />);
wrapper.instance().myChild = sinon.stub();

mock

使用mock方法使用虚假的子组件替换真正的子组件，并验证与父组件的互动。例如：

const wrapper = shallow(<MyComponent />);
const mock = jest.fn();
wrapper.find('MyChildComponent').simulate('click');
expect(mock).toHaveBeenCalled();

结论

在 React 中使用 Enzyme 可以帮助我们更好地测试我们的组件。本文提供了一些找到子组件并模拟子组件的技巧。您可以使用这些技巧，轻松地测试 React 组件的各种交互行为。祝您好运！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67077073d91dce0dc8688a6e