typicode / React Fake Props
Programming Languages
Projects that are alternatives of or similar to React Fake Props
react-fake-props
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 andPropTypes.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
- react-lodash - Lodash as React components
License
MIT - Typicode 🌵 - Patreon