javascript - 如何使用 Enzyme 浅包装器对作为 prop 传递给子组件的 React 函数进行单元测试

Question

我对前端开发非常陌生，并且在使用 Shallow 进行 Enzyme 单元测试时遇到了一些问题。基本上，我有类似的东西

class MyComponent extends React.Component {
    constructor(props, context) {
        super(props, context);
    }

    render() {
        const {
            handleClick,
            ...other
        } = this.props;

        return (
            <div className="someClass">
                // a bunch of stuff
                <div className="buttonArea">
                    <MyComponentChild onClick={handleClick} />
                </div>
            </div>
        );
    }

    MyComponent.propTypes = {
        handleClick: PropTypes.func.isRequired,
        ...other
    };

    export default MyComponent;
}

handleClick 是 MyComponent 所属容器(即 ComponentContainer)中定义的回调函数。我将它作为 prop 传递给 MyComponent，然后传递给 MyComponentChild(这是一个按钮组件)。我想测试当单击 MyComponentChild 时是否触发handleClick。

我当前的 enzyme 测试

it('handleClick should fire when clicked', () => {
    const mockCallbackFn = jest.fn();
    const wrapper = shallow(<MyComponent {handleClick = { mockCallbackFn }} />);
    wrapper.find('MyComponentChild').simulate('click');
    expect(mockCallbackFn).toHaveBeenCalled();
});

但是，此测试目前失败，因为 mockCallbackFn 显然从未被调用。但是，这也过去了

expect(wrapper.find('MyComponentChild').prop('handleClick')).toEqual(mockCallbackFn);

我做错了什么？非常感谢任何帮助!

Answer 1

simulate(someEventName) 做了非常简单的事情:它调用名称为 "on"+ someEventName 的 prop。因此 simulate('click') 运行 .props().onClick()。

但是您的组件使用 handleClick 属性，这就是为什么它不会被 simulate() 调用

wrapper.find('MyComponentChild').props().handleClick();

名称 simulate 太令人困惑了，团队将把它删除( https://github.com/airbnb/enzyme/issues/2173 )。

旁注:声明 props 时不需要额外的大括号。我的意思是 {handleClick = {mockCallbackFn }} 最好是 handleClick={mockCallbackFn} 因为它是 React 代码的典型并且看起来不那么困惑。