如何测试在内部呈现子元素的组件？

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

});

但我有一个错误

预期模拟函数已被调用一次，但被调用了零次。