Warum ist die Stütze nicht auf meinem Kind Komponente in meinem Test aktualisiert werden?

stimmen
0

Im Folgenden sind die relevanten Teile meiner Komponente auf den Prüfstand. Ich versuche , meine Komponente zu testen , indem das Öffnen Snackbarund dann in der die Schließen - Schaltfläche klicken SnackbarContentWrapperKomponente, die in der 3. Ebene der Verschachtelung ist.

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

Dies ist mein Test:

    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().opengesetzt wird , obwohl auf false, auch page.state().snackbarOpenauf true gesetzt.

Eine weitere Kuriosität ist , dass ich einen Fehler bin immer, Method „simulieren“ wird nur auf einem einzigen Knoten ausgeführt werden soll. 0 gefunden statt. bei dem Versuch , auf die Schaltfläche klicken zu simulieren. Allerdings, wenn ich den HTML - Code einloggen snackbar, kann ich die html vom Kind erzeugten sehen snackbarContent, einschließlich der Taste.

Ich habe mehrere Stunden auf dieser gearbeitet und ich habe Dinge getan, ähnlich wie es Mausklicks erfolgreich zu simulieren, so dass ich bin an einem Verlust hier.

Veröffentlicht am 27/11/2018 um 17:59
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
0

Ich dachte , dies, nachdem über eine harmlose Bemerkung in einem Github Post stolpern. Das Problem ist , dass die untergeordneten Komponenten auf dem Re-render verlassen hat festgestellt werden ( .find()ed?) Nach .update() , nicht vor. Sie sind unveränderlich wie von v3, so dass die Variablen nicht mehr aktuell sein , wenn an der Spitze des Tests eingestellt , wie ich es getan habe. So ist der feste Test:

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

Danach waren meine Behauptungen gut mit den aktuellen Zustand / Requisiten zu gehen.

Beantwortet am 28/11/2018 um 13:44
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more