Automatically generate fake props for your React tests

Downloads in past


62891.1.03 months ago7 years agoMinified + gzip package size for react-fake-props in KB


react-fake-props Node.js CI 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 TypeScript, Flow and PropTypes. Works great with Jest snapshots and Enzyme.


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

yarn add react-fake-props --dev


Assuming the following Component with TypeScript:
type Props = {
  id: number
  name: string

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

Or 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} />


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 TypeScript, 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')


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


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


MIT - Typicode :cactus: