React Snapshot testing with jest - Failed prop type: Invalid prop `children` of type `string` supplied

Umang Gupta

I am trying to test a pure react component.

Component

import React, {Component} from 'react';

class App extends Component {
    constructor (props){
        super(props);
        props.init();
    }

    render() {
        return (
            <div className="container-wrapper">
                {this.props.children}
            </div>
        );
    }
}

App.propTypes = {
    init : React.PropTypes.func,
    children : React.PropTypes.element,
};
export default App;

Jest Snapshot Test

import React from 'react';
import App from 'app/main/components/App';
import renderer from 'react-test-renderer';

jest.mock('react-dom');
const blank = jest.fn();
describe('App', () => {
    it('Renders App', () => {
        const component = renderer.create(<App init={blank}> </App>);
        const tree = component.toJSON();
        expect(tree).toMatchSnapshot();
    });
});

When I execute the test I get below error.

 console.error node_modules/fbjs/lib/warning.js:36
      Warning: Failed prop type: Invalid prop `children` of type `string` supplied to `App`, expected a single ReactElement.
          in App

I can understand that is says Props.children is invalid. How can I mock props.children? Or is there some other way test such components

riscarrott

You can simply pass a child to your <App /> component:

it('Renders App', () => {
    const component = renderer.create(
        <App init={blank}>
            Hello App.
        </App>
    );
    const tree = component.toJSON();
    expect(tree).toMatchSnapshot();
});

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Failed prop type: Invalid prop `children` of type `array` supplied to `GlobalState`

React Native error Failed prop type: Invalid prop `children` of type `array` supplied to `Overlay`,

Failed prop type: Invalid prop `children` of type `string` supplied to `DetailField`, expected `object`

React Warning: Failed prop type: Invalid prop of type `Object` supplied

React router error (Failed prop type: Invalid prop `children` supplied to `Switch`, expected a ReactNode.)

Failed prop type: Invalid prop `to` supplied to `Redirect`

Invalid prop type supplied

Failed prop type: Invalid prop `opacity` of type `object` supplied to `RCTView`

GETTING ERROR : Warning: Failed prop type: Invalid prop `children` supplied to `Form`, expected a ReactNode

Failed prop type: Invalid prop `children` supplied to `ForwardRef(Select)`, expected a ReactNode

Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Select)`, expected a ReactNode

Failed prop type: Invalid prop 'value' of type 'object' supplied to 'TextInput' React Native

Failed prop type: Invalid prop `match.params` of type `object` supplied to `Page`, expected `string`

Warning: Failed prop type: Invalid prop `value` of type `number` supplied to `TextInput`, expected `string`

Warning: Failed prop type: Invalid prop `defaultValue` of type `string` supplied to `AutoCompleteSearch`, expected `function`

GraphQL: Warning: Failed prop type: Invalid prop `query` of type `object` supplied to `StaticQuery`, expected `string`

Failed prop type: Invalid prop `responsive` of type `string` supplied to `Image`, expected `boolean`

Warning: Failed prop type: Invalid prop `items[0]` of type `string` supplied to `ImageGallery`, expected `object`

Failed prop type: Invalid prop `answer` of type `string` supplied to `AnswerItem`, expected `object`

Failed prop type: Invalid prop `lg` supplied to `ForwardRef(Grid)`

Warning: Failed prop type: Invalid prop `tag` supplied to `NavLink`

Warning: Failed prop type: Invalid prop 'source' supplied to 'Image'

warning: failed prop type: invalid prop 'backgroundcolor' supplied to view:

Invalid prop of type `string` in react

React Apollo Client Query throwing error "Invalid prop `children` of type `array` supplied to `Query`, expected `function`"

Invalid prop 'children' of type 'array' supplied to overlay. Expected a single react element

Invalid prop `children` of type `string` supplied to `ForwardRef(ListItemIcon)` when using .map to create MUI list items

react-router-dom Failed prop type: Invalid prop `exact` of type `string`

React Native + Icons: Warning: Failed prop type: Invalid props.style key tintColor supplied to ForwardRef(Text)