react-fake-props

? Magically generate fake props for your React tests

Github stars Tracking Chart

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 :cactus: - Patreon

Main metrics

Overview
Name With Ownertypicode/react-fake-props
Primary LanguageJavaScript
Program languageJavaScript (Language Count: 3)
Platform
License:MIT License
所有者活动
Created At2017-05-30 19:11:46
Pushed At2024-02-14 10:26:22
Last Commit At
Release Count13
Last Release Namev1.1.0 (Posted on 2024-02-13 22:46:22)
First Release Namev0.1.1 (Posted on 2017-09-06 13:32:01)
用户参与
Stargazers Count625
Watchers Count6
Fork Count23
Commits Count97
Has Issues Enabled
Issues Count13
Issue Open Count3
Pull Requests Count11
Pull Requests Open Count5
Pull Requests Close Count5
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private