Follow-up of #2030.

Current behavior

When a renderProp function renders null I see the following react warning being logged at stdout:

Warning: Failed prop type: The prop `children` is marked as required in `SimpleSFCWrapper`, but its value is `null`.
    in SimpleSFCWrapper

Expected behavior

I wouldn’t expect to see such a warning since everything works just fine when using null. Also see the react documentation which says null can be used to render nothing.

Your environment

I’ve created a minimal example to reproduce this issue:

• run npm i react@16.8.3 enzyme@3.9.0 enzyme-adapter-react-16@1.11.2 react-dom@16.8.3
• create a file test.js which the following content:

'use strict';

const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');
const React = require('react');

Enzyme.configure({ adapter: new Adapter() });

const { shallow } = Enzyme;

function MyComponent() {
    return React.createElement('div', {},
        React.createElement(ComponentWithRenderProp, {}, function () {
            return null;
        })
    );
}

function ComponentWithRenderProp(props) {
    return props.children();
}

const myComponent = shallow(React.createElement(MyComponent));

myComponent.find(ComponentWithRenderProp).renderProp('children')();

• run node test.js

API

• shallow
• mount
• render

Version

Adapter

• enzyme-adapter-react-16
• enzyme-adapter-react-16.3
• enzyme-adapter-react-16.2
• enzyme-adapter-react-16.1
• enzyme-adapter-react-15
• enzyme-adapter-react-15.4
• enzyme-adapter-react-14
• enzyme-adapter-react-13
• enzyme-adapter-react-helper
• others ( )

Real-World Use-Case

In our project we use the Query component from apollo-client to perform GraphQL queries, handle the loading state and showing the data when it is ready. The children prop of Query is a renderProp function which gets the query state as an argument. The query state contains information about the loading state or if the data has been loaded it contains the data.
In some cases we just want to render nothing while the data is still loading.

Example:

// ... within a component
render() {
    return (
        <Query query={anyGraphqlQuery}>
            {({ loading, data }) => {
                 if (loading) { return null; }
                 return <div>{data.foo}</div>;
            }}
        </Query>
    );
}
// ...