Почему в моем тесте не обновляется реквизит моего дочернего компонента? - PullRequest
Новая
       23

Почему в моем тесте не обновляется реквизит моего дочернего компонента?

0 голосов
/ 27 ноября 2018

Ниже приведены соответствующие части моего компонента для теста.Я пытаюсь протестировать свой компонент, открыв Snackbar и затем нажав кнопку закрытия в компоненте SnackbarContentWrapper, который находится на 3-м уровне вложенности.

onSuccess() {
    this.setState({
        snackbarOpen: true,
        snackbarVariant: 'success',
        snackbarMsg: 'A super useful message'
    })
}

render() {
    return (
        <>
            ...some stuff...

            <MyForm
                beginAjaxCall={this.beginAjaxCall}
                endAjaxCall={this.endAjaxCall}
                onSuccess={this.onSuccess}
                onError={this.onError}
                onSave={save}
            />
            <Snackbar
                anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'left'
                }}
                open={this.state.snackbarOpen}
                autoHideDuration={6000}
                onClose={this.onSnackbarClose}
            >
                <SnackbarContentWrapper
                    onClose={this.onSnackbarClose}
                    variant={this.state.snackbarVariant}
                    message={this.state.snackbarMsg}
                />
            </Snackbar>
        </>
    )
}

Это мой тест: 

    it('state reflects closing the snackbar', () => {
        const page = mount(<MyPage/>),
            form = page.find(MyForm),
            snackbar = page.find(Snackbar),
            snackbarContent = snackbar.find(SnackbarContentWrapper)

        // test snackbar is closed at start (this passes)
        expect(page.state().snackBarOpen).toBeFalsy()

        // call the prop on form which calls the class method, onSuccess
        form.props().onSuccess()

        // (this passes)
        expect(page.state().snackbarOpen).toBeTruthy()

        page.update()
        snackbar.update()

        console.log(page.state().snackbarOpen) // true
        console.log(snackbar.props()) // false - should match state of page

        const button = snackbarContent.find('button')

        // crashes here
        button.simulate('click')

        expect(page.state().snackbarOpen).toBeFalsy()
    })

snackbar.props().open установлен в значение false, хотя page.state().snackbarOpen установлен в значение true.

Еще одна странность в том, что я получаю ошибку, Метод «имитация» предназначен только для запуска на одном узле.Вместо этого найдено 0. при попытке смоделировать нажатие кнопки.Однако, когда я регистрирую html snackbar, я вижу html, сгенерированный из дочернего элемента snackbarContent, включая кнопку.

Я работал над этим в течение нескольких часов, и я сделал что-то похожее на это, чтобы успешно имитировать нажатия кнопок, так что я в растерянности.

1 Ответ

0 голосов
/ 28 ноября 2018

Я понял это после того, как наткнулся на безобидный комментарий в сообщении на github.Проблема заключается в том, что дочерние компоненты, зависящие от повторного рендеринга, должны быть найдены (.find() ed?) после .update(), а не до.Они являются неизменяемыми начиная с v3, поэтому переменные не будут текущими, если они установлены в верхней части теста, как я сделал.Итак, фиксированный тест: 

it('state reflects closing the snackbar', () => {
    const page = mount(<MyPage/>),
        form = page.find(MyForm)

    // test snackbar is closed at start
    expect(page.state().snackBarOpen).toBeFalsy()

    // call the prop on form
    form.props().onSuccess()

    // on success, the snackbar should pop open
    expect(page.state().snackbarOpen).toBeTruthy()

    page.update()

    // **must grab components after** the update
    // to reflect their current state
    const snackbar = page.find(Snackbar),
        snackbarContent = snackbar.find(SnackbarContentWrapper),
        button = snackbarContent.find('button')

    // close the snackbar
    button.simulate('click')

    // state and prop are set back to closed
    expect(page.state().snackbarOpen).toBeFalsy()
})

После этого мои утверждения были хорошими для текущего состояния / реквизита.

...