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

Question

拥有一个包含Select Ant 组件的组件 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()
});

请记住它是“mount”而不是浅的，所以它实际上渲染了子组件

Answer 1

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

select.prop('onChange')()

代替select.simulate。

另外，您可以打开 antd 选择菜单，检查值并继续测试（取决于所使用的 antd 版本）。

在 antd V3 中你可以使用一个简单的fireEvent.click

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

但是使用antd V4你需要使用mouseDowncall

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

请参阅具体的github 问题。