Я пишу тестовый пример, используя шутку, но я не могу понять, как проверить симуляцию щелчков, если это не кнопка.Если это кнопка, мы пишем find ('button), но что, если мы нажмем на div и там есть вложенные 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>
);
}
}
, вот мой тестовый шутник
test('Section', () => {
const handleClick = jest.fn();
const wrapper = mount(<Section onClick={ handleClick} title="show more"/>)
wrapper.text('show more').simulate('click')
expect(handleClick).toBeCalled()
});