Нажми кнопку "Реагировать на Jest" - PullRequest
Новая
       9

Нажми кнопку "Реагировать на Jest"

1 голос
/ 16 апреля 2020

Я занимаюсь разработкой приложения с помощью 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();
});

Регистр . 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)

У меня вопрос : есть ли способ проверить функцию onClick кнопки с Jest или любой другой платформой тестирования?

1 Ответ

0 голосов
/ 17 апреля 2020

Хорошо, поэтому после дополнительных исследований я обнаружил, что React Testing Library предоставляет некоторые инструменты для тестирования события onClick некоторых кнопок (по крайней мере, те, которые я показывал в мой пример выше). Одним из таких инструментов является fireEvent, который помогает выполнить sh то, что я хотел: 

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

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