Click Handle on Jest

Question

I am writing a test case using jest, but I am not able to get how to test click simulation if it is not button. If it is button we write find('button), but what if we click on div and there are nested div

class Section extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            open: props.open,
            className: 'accordion-content accordion-close',
            headingClassName: 'accordion-heading'
        };

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState({
            open: !this.state.open
        });
    }

    render() {
        const { title, children } = this.props;
        const { open } = this.state;
        const sectionStateClassname = open
            ? styles.accordionSectionContentOpened
            : styles.accordionSectionContentClosed;

        return (
            <div className={styles.accordionSection}>
                <div
                    className={styles.accordionSectionHeading}
                    onClick={this.handleClick}
                    id="123"
                >
                    {title}
                </div>
                <div
                    className={`${
                        styles.accordionSectionContent
                    } ${sectionStateClassname}`}
                >
                    {children}
                </div>
            </div>
        );
    }
}

here is my jest test case

 test('Section', () => {
        const handleClick = jest.fn();
        const wrapper = mount(<Section  onClick={ handleClick} title="show more"/>)
        wrapper.text('show more').simulate('click')
        expect(handleClick).toBeCalled()
    });

score 1 · Answer 1 · answered Oct 08 '18 at 09:00

1

You can find element by class:

wrapper.find('.' + styles.accordionSectionHeading).first().simulate('click')

Also, your component seems to not call prop handleClick. Instead, instance method is called, so something like this:

wrapper.instance().handleClick = jest.fn();
expect(wrapper.instance().handleClick).toBeCalled();

seems to be more correct.

Or, better, you can just check if state is changed

expect(wrapper.state('open')).toBeTruthy();

Hope it helps.

answered Oct 08 '18 at 09:00

Alejandro

5,834
1
19
36

1

Hi Alex, Thanks for the reply, first solution gives error "Expected mock function to have been called, but it was not called". – Shyam Kumar Oct 08 '18 at 09:17
Yeah, click simulate should be before expect – Alejandro Oct 08 '18 at 09:46
1

I have done this but it is giving error? test('Section', () => { const handleClick = jest.fn(); const wrapper = mount(
); wrapper.find('.' + styles.accordionSectionHeading).first().simulate('click'); expect(handleClick).toBeCalled() }); – Shyam Kumar Oct 08 '18 at 09:51
yeah, your codebase doesn't call `props.handleClick`, `this.handleClick` is called instead. – Alejandro Oct 08 '18 at 10:06
1

@ShyamKumar why don't you check state instead? – Alejandro Oct 08 '18 at 10:09
Actually that's what I want to test that if we click , then it's state value is getting changes or not. – Shyam Kumar Oct 08 '18 at 10:12
so you mean , I should test like this " test('Section', () => { const wrapper = mount(
) expect(wrapper.state('open')).toBeTruthy(); });" – Shyam Kumar Oct 08 '18 at 10:13
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/181468/discussion-between-shyam-kumar-and-alex). – Shyam Kumar Oct 08 '18 at 10:14

Click Handle on Jest

1 Answers1