Generate default props based on your React component's PropTypes
npm install react-generate-props

``js`
generateProps({ name: PropTypes.string, number: PropTypes.number })
// => { name: 'name', number: 1 }
bash
$ npm install --save-dev react-generate-props
`Usage
Important:
Initialize the library before importing any components into your test suite.
`js
// test-helper.jsimport { init } from 'react-generate-props'
init()
`Define your component's propTypes.
`jsx
const Counter = ({ count }) => {count}
Counter.propTypes = { count: PropTypes.number.isRequired }
export default Counter
`Pass the component to this library. It will generate reasonable props based on the defined types.
`js
import generateProps from 'react-generate-props'
import Counter from './counter'
generateProps(Counter)
// => { count: 1 }
`Use these default props to reduce boilerplate and prop type validation errors in your tests! :tada:
Example
A more in-depth example.
`jsx
// component.jsxclass Component extends React.Component {
static propTypes = {
title: PropTypes.string.isRequired,
followers: PropTypes.number.isRequired,
user: PropTypes.shape({
loggedIn: PropTypes.bool.isRequired,
name: PropTypes.string.isRequired
}).isRequired
}
render() {
{this.props.title}
{this.props.followers}
{this.props.user.loggedIn && Hello, {this.props.user.name}.
}
}
}export default Component
``jsx
// component-test.jsimport generateProps from 'react-generate-props'
import Component from './component.jsx'
const props = generateProps(Component)
// => { title: 'title', followers: 1, user: { loggedIn: true, name: 'name' } }
render( )
/* =>
title
1
Hello, name.
*/`API
The library takes two arguments.
`js
generateProps(schema, opts)
`####
schema: An Object, Function, or Class containing a PropTypes definition, or a single PropType. All of the following are valid:Plain Object
`js
const Counter = { count: PropTypes.number.isRequired }
`Plain Object with a
propTypes key
`js
const Counter = { propTypes: { count: PropTypes.number.isRequired } }
`Functional Component
`js
const Counter = ({ counter }) => {/ ... /}
Counter.propTypes = { count: PropTypes.number.isRequired }
`React.Component Class
`js
class Counter extends React.Component {
static propTypes = { count: PropTypes.number.isRequired }
}
`Single PropType
`js
const Counter = PropTypes.shape({ count: PropTypes.number.isRequired }).isRequired
`In each of these cases, the effect would be the same
`js
generateProps(Counter)
// => { count: 1 }
`####
opts: An Object which may contain the following:`js
{
required: true,
// default: true. When true, props marked as .isRequired will be generated. optional: false,
// default: false. When true, props not marked as .isRequired will be generated.
generators: {
// Can be used to override this lib's default generators.
// Each key is a prop type, each value is a function.
// Each function receives the propName as its first argument,
// followed by that prop type's argument, if it takes one.
bool: (propName) => false,
function: (propName) => spy(),
number: (propName) => propName.length,
instanceOf: (propName, klass) => new klass(),
oneOf: (propName, values) => values[values.length - 1]
}
}
`One More Example
`js
const propTypes = {
name: PropTypes.string.isRequired,
loggedIn: PropTypes.bool,
userType: PropTypes.oneOf(['admin', 'user']).isRequired
}generateProps(propTypes)
// => { name: 'string', userType: 'admin' }
generateProps(propTypes, { optional: true })
// => { name: 'string', loggedIn: true, userType: 'admin' }
generateProps(propTypes, {
optional: true,
generators: {
string: (propName) => 'Alice',
bool: (propName) => propName === 'loggedIn',
oneOf: (propName, values) => values[values.length - 1]
}
})
// => { name: 'Alice', loggedIn: true, userType: 'user' }
``