Awesome Open Source
Awesome Open Source

react-fake-props Build Status npm

Magically generate fake props for your React tests 🔮

react-fake-props parses your Component prop types using react-docgen and generates fake props. Supports Flow and PropTypes. Works great with Jest snapshots and Enzyme.

Install

npm install react-fake-props --save-dev
yarn add react-fake-props --dev

Example

Assuming the following Component with Flow types:

// @flow
type Props = {
  id: number,
  name: string
}

class Component extends React.Component<Props> {
  // ...
}

Or PropTypes:

class Component extends React.Component {
  // ...
}

Component.propTypes = {
  id: PropTypes.number.isRequired,
  name: PropTypes.string.isRequired
}

With react-fake-props, you can generate valid props based on your Component prop types:

const props = fakeProps(componentPath)
/*
{
  id: 1,
  name: 'name'
}
*/
<Component {...props} />

Usage

import path from 'path'
import fakeProps from 'react-fake-props'

const componentPath = path.join(__dirname, './Component.jsx')
const props = fakeProps(componentPath)

To include optional props, pass { optional: true }.

Please note:

  • custom validators and PropTypes.instanceOf aren't supported, you'll still need to set them manually.
  • react-fake-props requires the component path to be passed, instead of the component itself, to be able to support Flow and PropTypes.

For multiple components in single file

By passing { all: true }, fakeProps will return an array of all components found in componentPath with corresponding fake props. Works even for the ones that aren't exported.

// Pick the component you want to get fake props using displayName
const components = fakeProps(componentPath, { all: true })
const { props } = components.find({ displayName } => displayName === 'SomeComponent')

API

fakeProps(componentPath[, { optional: false, all: false } ])

Tip

When checking for a value, use props.A rather than 'A' as react-fake-props output may change.

const wrapper = shallow(<Component {...props} />)

wrapper.text().to.contain('A') // bad
wrapper.text().to.contain(props.A) // good

See also

License

MIT - Typicode 🌵 - Patreon


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (67,440
react (5,046
test (196
flow (142
enzyme (41
props (25

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