Warning: Failed prop type: The prop open is marked as required in Snackbar, but its value is undefined

Question

I'm trying to introduce jest snapshot tests to my app.

LoginForm component

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

DynamicSnack component

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

Warnings :

Warning: Failed prop type: The prop message is marked as required in Snackbar , but its value is undefined .
Warning: Failed prop type: The prop open is marked as required in Snackbar , but its value is undefined .

I have tried importing the DynamicSnack component and even the Snackbar directly and manually add the properties open={false} message={'w00f'} but nothing changes.

I'm new to unit testing and trying to start by learning jest .

How can i get rid of these warnings?

Answer 1

The solution is very simple, when testing the LoginForm you are not passing the props that the Snackbar requires. Pass them as

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

Answer 2

In a component the required props if we misspelled then we will get this error, In my case I had same problem

Error: <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>

Solution: <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>