React Jest test button onClick

Question

I'm developing an app with React, and I'm new to its testing framework. I'm trying to develop a testing method to check if an onClick button is clicked. I've read that I need a "spy" function to get the information about whether or not it's been called.

My testing method:

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();
});

The Register.js component that I want to test:

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>
    );
}

With this configuration, I obtain the following error:

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)

My question is: is there any way to test the onClick function of a button with Jest or any other testing framework?

Answer 1

Okay, so after more research, I've found that the React Testing Library provides some tools to test the onClick event of some buttons (at least those that are like the ones I've shown in my example above). One of those tools is the fireEvent, which helps to accomplish what I wanted:

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

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