react-generate-props

Generate default props based on your React component's PropTypes


``js
generateProps({ name: PropTypes.string, number: PropTypes.number })
// => { name: 'name', number: 1 }
`

Installation


`bash
$ npm install --save-dev react-generate-props
`

Usage

Important:
Initialize the library before importing any components into your test suite.

`js
// test-helper.js

import { init } from 'react-generate-props'
init()
`

Define your component's propTypes.

`jsx
const Counter = ({ 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.jsx

class 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() {


}
}

export default Component
`

`jsx
// component-test.js

import generateProps from 'react-generate-props'
import Component from './component.jsx'

const props = generateProps(Component)
// => { title: 'title', followers: 1, user: { loggedIn: true, name: 'name' } }

render()
/* =>


*/

`

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' }
``