警告：失敗的道具類型：在Snackbar中將道具打開標記為必填，但其值未定義

Question

我正在嘗試將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()
    })
})

警告：

警告：失敗的道具類型：道具message在Snackbar中標記為必需，但其值為undefined 。
警告：失敗的道具類型：道具open在Snackbar中標記為必需，但其值為undefined 。

我嘗試直接導入 DynamicSnack 組件甚至 Snackbar 並手動添加屬性open={false} message={'w00f'}但沒有任何變化。

我是單元測試的新手，並試圖從學習jest開始。

我怎樣才能擺脫這些警告？

Answer 1

解決方案非常簡單，在測試LoginForm時，您沒有傳遞Snackbar所需的道具。 將它們傳遞為

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

Answer 2

在組件中，如果我們拼錯了所需的道具，那么我們將收到此錯誤，在我的情況下，我遇到了同樣的問題

錯誤： <Dialog in={props.open}>

            <Dialog in={props.open}>
                <Alert
                    action={
                        <IconButton
                            aria-label='close'
                            color='inherit'
                            size='small'
                            onClick={useCallback(() => props.closeAlert({ msg: '', open: false }))}
                        >
                            <CloseIcon fontSize='inherit' />
                        </IconButton>
                    }
                >
                    {props.msg}
                </Alert>
            </Dialog>

解決方法： <Dialog open={props.open}>

        <Dialog open={props.open}>
                <Alert
                    action={
                        <IconButton
                            aria-label='close'
                            color='inherit'
                            size='small'
                            onClick={useCallback(() => props.closeAlert({ msg: '', open: false }))}
                        >
                            <CloseIcon fontSize='inherit' />
                        </IconButton>
                    }
                >
                    {props.msg}
                </Alert>
            </Dialog>