Props not validated when stateless component is called as a function

[presence1]

If I have a stateless functional component such as this:

const SlideView = ({text}) => {   
...
 return (
        <div className="example-slide-view">
             {text}            
        </div>
    );
};

SlideView.propTypes = {
    text: PropTypes.string.isRequired
};
...

If I test it like this:

context('SlideView...', () => {
            context('when called without a "text" prop', () => {
                shallow(<SlideView text={undefined} />);
                it('should throw a missing prop error', () => {
                    testUtils.expectMissingPropError('text', 'SlideView');
                });
            });
        });

The test passes.

However, if instead I test the SlideView like this:

context('SlideView...', () => {
            context('when called without a "text" prop', () => {
               SlideView({text: undefined});
               it('should throw a missing prop error', () => {
                    testUtils.expectMissingPropError('text', 'SlideView');
                });
            });
        });

No prop-types error is logged to the console, so the test fails.

I didn't expect this behaviour. I think it would be useful if the props were validated in this case.

[ljharb]

That's not possible due to the nature of JavaScript. Calling functions doesn't care about the nature of static properties.

Calling an SFC as a function is just incorrect.

[presence1]

OK, so I will call checkPropTypes instead:
PropTypes.checkPropTypes(SlideView.propTypes, slideViewProps, 'prop', 'SlideView');

Thanks.

[uniphil]

Hey @ONE-BIG-MOB1, if you're running checkPropTypes in tests, be aware that you can get false negatives, since prop-types won't log any error it has already seen.

Here is a bit of discussion, an open PR with one solution, and a hopefully helpful package (I'm the author) made specifically for testing with prop-types.

Happy testing!

[presence1]

@uniphil this is a very helpful comment. I was indeed stubbing console.error to check for prop-types errors. I will definitely give your package a try instead. Cheers!