Question

以下是测试组件的相关部分。我正在尝试通过打开Snackbar并单击SnackbarContentWrapper组件中处于关闭状态的第三层中的关闭按钮来测试我的组件。

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。

另一个奇怪的是，我遇到一个错误，方法“ simulate”仅打算在单个节点上运行。而是找到0。尝试模拟按钮单击时。但是，当我登录snackbar的html时，可以看到从子snackbarContent生成的html，包括按钮。

我已经为此工作了几个小时，并且我已经做了类似的事情来成功模拟按钮的点击，所以我对此感到茫然。

Answer 1

我在github帖子中绊倒了一个无害的评论后才想到了这一点。问题在于，必须在{em> .find()之后而不是之前找到（.update() ed？）。从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() })

在那之后，我的断言很好地支持当前状态/道具。

为什么在测试中我的子组件上的道具未更新？

1 个答案: