react-generate-props

Generate default props based on your React component's PropTypes

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

Installation

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

Usage

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

// test-helper.js

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

Define your component's propTypes.

const Counter = ({ count }) => <div>{count}</div>
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.

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! 🎉

Example

A more in-depth example.

// 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() {
    <div>
      <h1>{this.props.title}</h1>
      <small>{this.props.followers}</small>
      {this.props.user.loggedIn && <p>Hello, {this.props.user.name}.</p>}
    </div>
  }
}

export default Component

// 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(<Component {...props} />)
/* =>
<div>
  <h1>title</h1>
  <small>1</small>
  <p>Hello, name.</p>
</div>
*/

API

The library takes two arguments.

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

const Counter = { count: PropTypes.number.isRequired }

Plain Object with a propTypes key

const Counter = { propTypes: { count: PropTypes.number.isRequired } }

Functional Component

const Counter = ({ counter }) => {/* ... */}
Counter.propTypes = { count: PropTypes.number.isRequired }

React.Component Class

class Counter extends React.Component {
  static propTypes = { count: PropTypes.number.isRequired }
}

Single PropType

const Counter = PropTypes.shape({ count: PropTypes.number.isRequired }).isRequired

In each of these cases, the effect would be the same

generateProps(Counter)
// => { count: 1 }

opts: An Object which may contain the following:

{
  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

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