check-prop-types

Check PropTypes, returning errors instead of logging them

Usage no npm install needed!

<script type="module">
  import checkPropTypes from 'https://cdn.skypack.dev/check-prop-types';
</script>

README

checkPropTypes

Build Status View on npm

Manually check PropTypes-compatible proptypes, returning any errors instead of logging them to console.error.

This function is more suitable for checking propTypes in unit tests than mocking console.error, avoiding some serious problems with that approach.

Install

$ npm install --save-dev check-prop-types

Usage

Call it just like PropTypes.checkPropTypes, but it returns any problems as an error message string.

import PropTypes from 'prop-types';
import checkPropTypes from 'check-prop-types';

const HelloComponent = ({ name }) => (
  <h1>Hi, {name}</h1>
);

HelloComponent.propTypes = {
  name: PropTypes.string.isRequired,
};

let result = checkPropTypes(HelloComponent.propTypes, { name: 'Julia' }, 'prop', HelloComponent.name);
assert(result === undefined);

result = checkPropTypes(HelloComponent.propTypes, { name: 123 }, 'prop', HelloComponent.name);
assert(result === 'Failed prop type: Invalid prop `name` of type `number` supplied to `HelloComponent`, expected `string`.');

assertPropTypes

To throw errors instead of returning them, a helper called assertPropTypes is included:

import PropTypes from 'prop-types';
import { assertPropTypes } from 'check-prop-types';

const HelloComponent = ({ name }) => (
  <h1>Hi, {name}</h1>
);

HelloComponent.propTypes = {
  name: PropTypes.string.isRequired,
};

assertPropTypes(HelloComponent.propTypes, { name: 'Julia' }, 'prop', HelloComponent.name);
// fine...

assertPropTypes(HelloComponent.propTypes, { name: 123 }, 'prop', HelloComponent.name);
// throws Error: Failed prop type: Invalid prop `name` of type `number` supplied to `HelloComponent`, expected `string`.

See test.js for more usage examples.