Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/typicode/react-fake-props
🔮 Magically generate fake props for your React tests
https://github.com/typicode/react-fake-props
enzyme flow props proptypes react test
Last synced: about 2 months ago
JSON representation
🔮 Magically generate fake props for your React tests
- Host: GitHub
- URL: https://github.com/typicode/react-fake-props
- Owner: typicode
- License: mit
- Created: 2017-05-30T19:11:46.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-02-14T10:26:22.000Z (7 months ago)
- Last Synced: 2024-07-19T02:48:14.697Z (about 2 months ago)
- Topics: enzyme, flow, props, proptypes, react, test
- Language: JavaScript
- Homepage:
- Size: 2.44 MB
- Stars: 628
- Watchers: 7
- Forks: 37
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - typicode/react-fake-props - 🔮 Magically generate fake props for your React tests (JavaScript)
README
# react-fake-props [](https://github.com/typicode/react-fake-props/actions/workflows/node.js.yml) [](https://www.npmjs.com/package/react-fake-props)
> Magically generate fake props for your React tests 🔮
`react-fake-props` parses your Component prop types using [react-docgen](https://github.com/reactjs/react-docgen) and generates fake props. Supports [TypeScript](https://www.typescriptlang.org/), [Flow](https://flow.org) and [PropTypes](https://github.com/facebook/prop-types). Works great with [Jest](https://facebook.github.io/jest/) snapshots and [Enzyme](https://github.com/airbnb/enzyme).
## Install
```sh
npm install react-fake-props --save-dev
```
```sh
yarn add react-fake-props --dev
```
## Example
Assuming the following Component with TypeScript:
```jsx
type Props = {
id: number
name: string
}
class Component extends React.Component {
// ...
}
```
Or Flow types:
```jsx
// @flow
type Props = {
id: number,
name: string
}
class Component extends React.Component {
// ...
}
```
Or PropTypes:
```jsx
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:
```jsx
const props = fakeProps(componentPath)
/*
{
id: 1,
name: 'name'
}
*/
```
## Usage
```js
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.
```js
// 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.
```jsx
const wrapper = shallow()
wrapper.text().to.contain('A') // bad
wrapper.text().to.contain(props.A) // good
```
## See also
* [react-lodash](https://github.com/typicode/react-lodash) - Lodash as React components
## License
MIT - [Typicode :cactus:](https://github.com/typicode)