Как проверить компонент, который отображает дочерние элементы внутри?

Question

У меня есть следующий компонент:

export default function Button({ className, children, ...otherProps }) {
  return (
    <button className={'button} {...otherProps}>
      {children}
    </button>
  );
}

и в родительском компоненте я пропустил такие реквизиты и тег внутри:

<Button className={test-button} onClick={this.removeItems} >
    <i className="fa fa-trash-alt" /> Remove all items
</Button>

Я не могу понять, как правильно выполнить модульное тестирование таких компонентов.Например, я хочу проверить функцию onClick, которая вызывается при нажатии на компонент.

Я написал такой тест:

const buttonFunc = jest.fn();
    const props = {
        children: {
        className: "test",
        onClick: buttonFunc,
    }
};

let wrapper;

beforeEach(() => {
    wrapper = shallow(<Button {...props} />);
});

test('click on switch button', () => {
    wrapper.simulate('click');
    expect(buttonFunc).toHaveBeenCalledTimes(1);
    console.log(wrapper.debug())
});

, но у меня есть ошибка

Ожидается, что фиктивная функция была вызвана один раз, но она была вызвана ноль раз.

Answer 1

Вы пропускаете реквизит неправильно. Вам не нужно передавать детей как именованное свойство. Вы можете добавить это в своем мелком методе. onClick и className - реквизиты, не должны быть внутри дочерних элементов.

const props = {
    className: "test",
    onClick: buttonFunc,
};

wrapper = shallow(<Button {...props}> Button Text </Button>);