React Jest测试按钮onClick

Question

我正在使用React开发一款应用程序，同时我也是该框架的测试工具的新手。我正在尝试开发一种测试方法来检查是否已经单击了一个onClick按钮。我读到需要使用"spy"函数来获取有关它是否被调用的信息。

我的测试方法：

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函数？

- Pablo Cañal Suárez

---

嗨，我觉得您的问题类似于在Github上报告的此问题。请看一下。 https://github.com/enzymejs/enzyme/issues/2082 - Japesh

@japeshsinghal 感谢您的回答！所以我看到问题可能是我没有使用基于类的组件。除了将其更改为类之外，是否有其他方法来测试此组件的按钮？ - Pablo Cañal Suárez

没问题 @pablo - Japesh

Answer 1

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

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

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

- Pablo Cañal Suárez