reactjs - ReactJS Ant设计选择组件模拟更改事件

具有包含Select Ant component的MyComp组件，并愿意测试MyComp以确保处理程序正确并被调用

class MyComp extends Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(value) {
        this.props.doSomething();
    }

    render() {
        return (
            <Select onChange={this.props.handleChange}>
                <Option value={"Op0"} >Opt0</Option>
                <Option value={"Op1"} >Opt1</Option>
                <Option value={"Op2"} >Opt2</Option>
            </Select>
        )
    }
}

我希望能够如下进行测试:

it('calls the right callback', () => {
    const Option = Select.Option;
    const mockHandler = jest.fn();
    const wrapper = mount(<MyComp handleChange ={mockHandler}/>);
    let select = wrapper.find(Select);
    select.simulate("onChange"); // also tried 'change'
    expect(mockHandler).toHaveBeenCalled()
});

请记住，它的“安装”不是浅的，因此它实际上呈现子组件

最佳答案

作为一种方法，您可以使用

select.prop('onChange')()

而不是select.simulate。

另外，您可以打开antd选择菜单，检查值并继续进行测试(取决于所使用的antd版本)。
在antd V3中，您可以使用简单的fireEvent.click

// Opens the Drop down
fireEvent.click(getByText("Value 1"));

但是使用antd V4，您需要使用mouseDown调用

const elt = getByTestId('your-select-test-id').firstElementChild;
fireEvent.mouseDown(elt); // THIS WILL OPEN THE SELECT !
expect(getByText('Option from Select')).toBeInTheDocument(); // WORKS !

参见github issue。