Package Exports

react-generate-props

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-generate-props) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-generate-props

Generate default props based on your React component's PropTypes

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

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