reactjs - enzyme 模拟子组件的onChange事件

Question

我正在使用 enzyme 和 Jest 来测试我的 React 应用程序，现在我尝试在子组件中触发“onChange”。

class MyComponent extends Component {
    
    state = {
        active: null
    };

    handleChange = panel => (event, active) => {
        this.setState({
            active: (active ? tabs : null)
        });
    };

    render() {
        const { colors, tabs } = this.props;
        const { active } = this.state;

        return (
            <div className={colors.black}>
                { panes.map( ( { left, right } , key ) => 
                    <ChildComponent key={key} expanded={active === key} onChange={this.handleChange(key)}>
                        <ChildComponentLeft />}>{left}</ChildComponentLeft>
                        <ChildComponentRight>{right}</ChildComponentRight>
                    </ChildComponent> 
) 
                }
            </div>
        );
    }
}
export default withStyles(styles)(MyComponent);

我如何测试这个“onChange”？

Answer 1

这应该可以解决问题:

wrapper.find('ChildComponent').simulate('change', {
  target: { /* whatever */ },
});

(如果您有多个 ChildComponent，请在 .find() 之后添加 .at() 调用)

确保通过 wrapper.update 强制重新绘制在 change 事件之后确保您的组件得到重新渲染。