Awesome Open Source
Awesome Open Source

react-generate-props

Generate default props based on your React component's PropTypes

Build Status Coverage Status

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

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,711
react (5,295
jest (274
test (203
enzyme (43
props (26

Find Open Source By Browsing 7,000 Topics Across 59 Categories