用Jest & Enzyme模拟按钮点击

Question

我正在尝试用jest和酶来模拟一次点击，而且我对react的测试库还是个新手。

我的组件正在使用Material UI。

下面是我想要测试的代码部分：

                    <div>
                        <Typography className={classes.instructions}>
                            All steps completed - you're finished
                        </Typography>
                        <Button onClick={handleNext} className={classes.button}>
                            Next
                        </Button>
                    </div>

在这一部分中，我想测试一下按钮点击

以下是我到目前为止所做的工作：

 let wrapper;
    const handleNext = jest.fn();
    beforeEach(() => {
        wrapper = mount(<ModelStepper handleNext={handleNext}/>)
    })
  it("handleNext increment", () => {
        const btn = wrapper.find(Button).at(1)
        expect(handleNext).toBeCalledTimes(0);
        btn.simulate("click");
        expect(handleNext).toBeCalledTimes(1);
    })

由于某种原因，我没有让它被点击，我已经在控制台上记录了按钮的文本，这是我想要点击的正确按钮。

谢谢！！

Answer 1

只需将这一行：const btn = wrapper.find(Button).at(1)更改为const btn = wrapper.find(Button).at(0)。

索引始终从0开始。

Answer 2

我也遇到过类似的情况，但我的按钮在表单中。对于这种情况，有效的方法是：

wrapper.find('button').simulate('submit');

它将触发事件并评估更改。