React Jest 测试按钮 onClick答案

【问题标题】：React Jest test button onClickReact Jest 测试按钮 onClick
【发布时间】：2020-07-30 05:16:00
【问题描述】：

我正在使用 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();
});

我要测试的 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>
    );
}

使用此配置，我得到以下错误：

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)

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

【问题讨论】：

您好，我认为您的问题与 Github 上报告的问题类似。请看一看。 github.com/enzymejs/enzyme/issues/2082
@japeshsinghal 感谢您的回答！所以我看到问题可能是我没有使用基于类的组件。有没有其他方法可以在不将其更改为类的情况下测试该组件的按钮？
没问题@pablo

标签： javascript reactjs jestjs sinon

【解决方案1】：

好的，经过更多研究，我发现React Testing Library 提供了一些工具来测试某些按钮的 onClick 事件（至少是我在上面的示例中展示的那些）。其中一个工具是fireEvent，它有助于实现我想要的：

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

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

【讨论】：