Javascript 单击“反应测试”按钮

我正在用React开发一个应用程序，我对它的测试框架还不熟悉。我正在尝试开发一种测试方法来检查是否单击了onClick按钮。我已经读到，我需要一个“间谍”函数来获取关于它是否被调用的信息

我的测试方法：

test("Btn1 click", () => {
    const wrapper = mount(<Register />);
    const spyOn = jest.spyOn(wrapper.instance(), "openWindow")
    const element = wrapper.find({id: "btn-how-to-choose-provider"}).first();
    element.simulate("click");
    expect(spyOn).toHaveBeenCalled();
});

test（“Btn1点击”，（）=>{
const wrapper=mount（）；
const spyOn=jest.spyOn（wrapper.instance（），“openWindow”）
const element=wrapper.find（{id:“btn如何选择提供程序”}）.first（）；
元素。模拟（“单击”）；
期望（间谍）。已被调用（）；
});

我要测试的Register.js组件：

export default function Register() {
    const classes = useStyles();

    function openWindow(url) {
        window.open(url);
    }

    return (
        <div>
            <NavBar />
            <Container component="main" maxWidth="sm">
                <Card className={classes.root} elevation={4}>
                    <CssBaseline />
                    <div className={classes.paper}>
                        <Avatar className={classes.avatar}>
                            <AccountCircleIcon />
                        </Avatar>
                        <Typography component="h1" variant="h5">Hi! Welcome to Solid.</Typography>
                        <div className={classes.form}>

                            <Button
                                id="btn-how-to-choose-provider"
                                fullWidth
                                color="primary"
                                className={classes.link}
                                startIcon={<EmojiPeopleIcon/>}
                                onClick={(e) => openWindow('https://solid.inrupt.com/how-it-works')}
                            >How to choose a Provider?</Button>

                            <Button
                                id="btn-inrupt-provider"
                                fullWidth
                                variant="outlined"
                                color="primary"
                                className={classes.submit}
                                startIcon={<ContactsOutlinedIcon/>}
                                onClick={(e) => window.open('https://inrupt.net/register')}
                            >Inrupt</Button>

                            <Button
                                id="btn-solid-community-provider"
                                fullWidth
                                variant="outlined"
                                color="primary"
                                className={classes.submit}
                                startIcon={<ContactsIcon/>}
                                onClick={() => window.open('https://solid.community/register')}
                            >Solid Community</Button>

                        </div>
                    </div>
                </Card>
            </Container>
            <Grid
                    item
                    xs={12}
                    sm={12}
                    md={12}
                style={{marginTop: '36rem'}}
                >
                    <Footer />
                </Grid>
        </div>
    );
}

导出默认函数寄存器（）{
const classes=useStyles（）；
函数openWindow（url）{
窗口打开（url）；
}
返回(
嗨！欢迎来到Solid。
openWindow（'https://solid.inrupt.com/how-it-works')}
>如何选择供应商？
打开窗户https://inrupt.net/register')}
>侵入
打开窗户https://solid.community/register')}
>坚实的社区
);
}

通过此配置，我获得以下错误：

TypeError: Cannot read property 'openWindow' of null

      34 | test("Btn1 click", () => {
      35 |     const wrapper = mount(<Register />);
    > 36 |     const spyOn = jest.spyOn(wrapper.instance(), "openWindow")
         |                        ^
      37 |     const element = wrapper.find({id: "btn-how-to-choose-provider"}).first();
      38 |     element.simulate("click");
      39 |     expect(spyOn).toHaveBeenCalled();

      at ModuleMockerClass.spyOn (node_modules/jest-mock/build/index.js:837:28)
      at Object.<anonymous> (src/components/containers/register/Register.test.js:36:24)

TypeError:无法读取null的属性“openWindow”
34 |测试（“Btn1点击”，（）=>{
35 | const wrapper=mount（）；
>36 | const spyOn=jest.spyOn（wrapper.instance（），“openWindow”）
|                        ^
37 | const element=wrapper.find（{id:“btn如何选择提供程序”}）.first（）；
38 |元素。模拟（“点击”）；
39 |期望（间谍）。被调用（）；
在ModuleMockerClass.spyOn（node_modules/jest mock/build/index.js:837:28）
at对象。（src/components/containers/register/register.test.js:36:24）

---

我的问题是：有没有办法用Jest或任何其他测试框架测试按钮的onClick功能？

好的，所以经过更多的研究，我发现提供了一些工具来测试某些按钮的onClick事件（至少是我在上面的示例中展示的那些按钮）。其中一个工具是

fireEvent

，它有助于实现我想要的：

test("Click", () => {
    const {container} = render(<Register />);

    const button = getByTestId(container, 'btn-how-to-choose-provider');
    fireEvent.click(button);
});

测试（“单击”，（）=>{
const{container}=render（）；
const button=getByTestId（容器“btn如何选择提供程序”）；
fireEvent。单击（按钮）；
});

您好，我想您的问题与Github上报道的问题类似。请看一看。@Japessinghal谢谢您的回答！所以我发现问题可能是我没有使用基于类的组件。有没有其他方法可以测试此组件的按钮而不将其更改为类？没有问题@pablo