【问题标题】:Warning: Failed prop type: The prop open is marked as required in Snackbar, but its value is undefined警告:失败的道具类型:在Snackbar中将道具打开标记为必填,但其值未定义
【发布时间】:2018-03-23 01:44:50
【问题描述】:

我正在尝试将jest 快照测试引入我的应用程序。

登录表单组件

render() {
    return (
    ...
    <DynamicSnack
        dialogOpen={this.props.dialogOpen}
        snackOpen={this.props.snackOpen}
        snackTimer={this.props.snackTimer}
        snackMessage={this.props.snackMessage}
    />
    )
}

DynamicSnack组件

import Snackbar from 'material-ui/Snackbar';

render() {
    let { snackOpen, snackTimer, snackMessage } = this.props

    return (
        <Snackbar
            open={snackOpen}
            message={snackMessage}
            autoHideDuration={snackTimer}
            onRequestClose={this.closeSnack}
        />
    )
}

LoginForm.spec.js

import React from 'react'
import renderer from 'react-test-renderer'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import LoginForm from '../../app/components/loginComponents/loginForm'

describe('LoginForm', () => {
    it('should render snapshot', () => {
        const component = renderer.create(
            <MuiThemeProvider>
                <LoginForm />
            </MuiThemeProvider>
        )
        const tree = component.toJSON()
        expect(tree).toMatchSnapshot()
    })
})

警告

警告:失败的道具类型:道具messageSnackbar中标记为必填,但其值为undefined
警告:失败的道具类型:道具openSnackbar中标记为必填,但其值为undefined

我尝试直接导入 DynamicSnack 组件甚至 Snackbar 并手动添加属性 open={false} message={'w00f'} 但没有任何变化。

我是单元测试新手,并尝试从学习jest 开始。

我怎样才能摆脱这些警告?

【问题讨论】:

    标签: javascript reactjs unit-testing material-ui jestjs


    【解决方案1】:

    解决方案非常简单,在测试LoginForm 时,您没有传递Snackbar 所需的道具。将它们传递为

     const component = renderer.create(
            <MuiThemeProvider>
                <LoginForm snackOpen={true}
        snackMessage={'Wrong info'}/>
            </MuiThemeProvider>
        )
    

    【讨论】:

    • 我发誓我之前至少尝试过一次,但也许其他的东西有所不同。现在可以了 :-) 谢谢!
    • 也许你添加了openmessage而不是snackOpensnackMessage
    • 我确定我都试过了,但当时可能没有包裹在 MuiThemeProvider 中。在未来,我会尝试以一种不那么混乱的方式使用绝望的尝试:-D
    • 我们如何测试没有通过任何 prop 时会抛出警告?
    猜你喜欢
    • 2019-06-25
    • 2018-11-23
    • 1970-01-01
    • 2018-09-22
    • 2020-12-24
    • 1970-01-01
    • 2022-07-20
    • 2018-09-17
    • 2017-12-11
    相关资源
    最近更新 更多