CODEWITHSUNDEEP
reactjsjestjsenzymereact-testing-library
zozodev
zozodev

Reputation: 89

Enzyme simulate the onChange event of child component

I'm using enzyme and jest to test my React app and now I'm trying to trigger "onChange" in child component.

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

How can i test this "onChange" ?

Upvotes: 2

Views: 2168

Answers (1)

Dykotomee
Dykotomee

Reputation: 772

This should do the trick:

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

(if you have more than one ChildComponent, stick a .at() call just after the .find())

Make sure you force a repaint via wrapper.update after the change event to ensure your component gets re-rendered.

Upvotes: 2

Related Questions