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.
$ npm install --save-dev check-prop-typesCall 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`.');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`.When testing PropTypes on components that feature multiple props, or required props, specifying a subset of the component's props in the test will maintain test isolation:
import PropTypes from 'prop-types'
import { checkPropTypes } from 'check-prop-types';
const HelloComponent = ({ firstName, lastName }) => (
<h1>Hi, {firstName} {lastName}</h2>
);
HelloComponent.propTypes = {
firstName: PropTypes.string.isRequired,
lastName: PropTypes.string
};
checkPropTypes(
{ firstName: HelloComponent.propTypes.firstName },
{},
'prop',
'HelloComponent'
);
// Returns: Failed prop type: The prop `firstName` is marked as required in HelloComponent
checkPropTypes(
{ lastName: HelloComponent.propTypes.lastName },
{ lastName: 123 },
'prop'
'HelloComponent'
);
// Returns: Failed prop type: Invalid prop `lastName` of type `number` supplied to HelloComponentSee test.js for more usage examples.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent