警告:失败的道具类型:道具打开在 Snackbar 中被标记为必需,但其值未定义

Cri*_*alu 7 javascript unit-testing reactjs jestjs material-ui

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

登录表单组件

render() {
    return (
    ...
    <DynamicSnack
        dialogOpen={this.props.dialogOpen}
        snackOpen={this.props.snackOpen}
        snackTimer={this.props.snackTimer}
        snackMessage={this.props.snackMessage}
    />
    )
}
Run Code Online (Sandbox Code Playgroud)

动态Snack组件

import Snackbar from 'material-ui/Snackbar';

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

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

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()
    })
})
Run Code Online (Sandbox Code Playgroud)

警告

在此输入图像描述

警告:道具类型失败:该道具message在 中标记为必需Snackbar,但其值为undefined
警告:道具类型失败:该道具open在 中标记为必需Snackbar,但其值为undefined

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

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

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

Shu*_*tri 5

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

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