如何在 Enzyme 中测试父组件向子组件传递的函数？
在 React 开发中，父组件向子组件传递函数是非常常见的需求。但是如何测试这些逻辑呢？本文将为你介绍如何使用 Enzyme 进行测试。首先简单介绍一下 Enzyme。
Enzyme 是 React 测试工具库之一，它提供了一系列的 API 可以协助 React 组件的测试。Enzyme 是由 Airbnb 开发，支持模拟浏览器环境，可以对 React 组件进行 render、mount、shallow 等多种渲染方式，更加贴近真实的生命周期和行为，支持链式调用等特性。
进行父组件向子组件传递函数的测试，我们可以采用 shallow() 方法。shallow() 只渲染父组件，并不渲染子组件，从而降低测试的难度。我们可以通过测试是否真正调用了传递进去的函数，来判断测试是否通过。下面结合代码给大家演示一下。
我们可以先写一个父组件，里面传递一个函数给子组件：
// javascriptcn.com 代码示例
import React from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends React.Component {
handleClick() {
console.log('clicked');
}
render() {
return (
<div>
<ChildComponent onClick={this.handleClick} />
</div>
);
}
}
export default ParentComponent;接着我们再写对应的子组件：
// javascriptcn.com 代码示例
import React from 'react';
class ChildComponent extends React.Component {
render() {
return <button onClick={this.props.onClick}>Click me</button>;
}
}
export default ChildComponent;有了父子组件之后，我们就可以进行测试了。我们可以编写一个单元测试文件：
// javascriptcn.com 代码示例
import React from 'react';
import { shallow } from 'enzyme';
import ChildComponent from '../ChildComponent';
import ParentComponent from '../ParentComponent';
describe('<ParentComponent />', () => {
it('should call handleClick when the button is clicked', () => {
const mockHandleClick = jest.fn();
const wrapper = shallow(<ParentComponent onClick={mockHandleClick} />);
wrapper.find(ChildComponent).simulate('click');
expect(mockHandleClick).toHaveBeenCalled();
});
});我们首先在测试文件中导入了 Enzyme 中提供的 shallow() 方法，然后导入了 ParentComponent 和 ChildComponent。接着我们编写了一个测试用例，测试是否点击子组件时能调用父组件传递的函数。在测试用例中我们使用了 jest.fn() 来模拟 handleClick 方法，用于判断是否真正调用了传递进去的函数。接着使用 shallow() 方法创建了包裹父组件的渲染器，通过 wrapper.find(ChildComponent).simulate('click') 模拟点击子组件的按钮，然后判断 mockHandleClick 是否被调用了。
总结：
这是我们用 Enzyme 进行测试父组件向子组件传递函数的方法。通过这种方式可以有效地测试组件之间的互动，使得我们的项目更加稳定可靠。Enzyme 还有许多高级 API 可以使用，感兴趣的同学可以深入学习。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654b4ff97d4982a6eb534763