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

【问题标题】：How to unit test React functions passed in as prop to child component with Enzyme shallow wrapper如何使用 Enzyme 浅包装器对作为道具传递给子组件的 React 函数进行单元测试
【发布时间】：2019-07-12 06:46:31
【问题描述】：

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

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）中定义的回调函数。我将它作为道具传递给 MyComponent，然后传递给 MyComponentChild（这是一个按钮组件）。我想测试单击 MyComponentChild 时是否会触发 handleClick。

我目前的酶测试

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);

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

【问题讨论】：

标签： javascript reactjs jestjs enzyme

【解决方案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)。

旁注：声明道具时不需要额外的大括号。我的意思是 {handleClick = { mockCallbackFn }} 最好是 handleClick={mockCallbackFn}，因为它是 React 代码的典型特征，看起来不那么混乱。

【讨论】：

谢谢，这太完美了

【解决方案2】：

您需要使用mount 而不是shallow。 shallow 只挂载第一级组件，所以你的ComponentChild 没有被挂载，你的点击处理程序也没有被传入。

您可以通过在您的wrapper 和console.log 上调用debug() 来亲自查看它。

【讨论】：