Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/markalfred/react-generate-props
Generate default props based on your React component's PropTypes
https://github.com/markalfred/react-generate-props
enzyme jest props proptypes react test
Last synced: 3 days ago
JSON representation
Generate default props based on your React component's PropTypes
- Host: GitHub
- URL: https://github.com/markalfred/react-generate-props
- Owner: markalfred
- License: mit
- Created: 2016-07-12T17:02:12.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T04:30:45.000Z (almost 2 years ago)
- Last Synced: 2025-01-28T15:45:22.688Z (5 days ago)
- Topics: enzyme, jest, props, proptypes, react, test
- Language: JavaScript
- Size: 548 KB
- Stars: 23
- Watchers: 2
- Forks: 4
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-generate-props
Generate default props based on your React component's PropTypes
[](https://travis-ci.org/markalfred/react-generate-props)
[](https://coveralls.io/github/markalfred/react-generate-props?branch=master)
```js
generateProps({ name: PropTypes.string, number: PropTypes.number })
// => { name: 'name', number: 1 }
```
## Installation
```bash
$ npm install --save-dev react-generate-props
```
## Usage
**Important:**
Initialize the library *before* importing any components into your test suite.
```js
// test-helper.js
import { init } from 'react-generate-props'
init()
```
Define your component's propTypes.
```jsx
const Counter = ({ count }) =>
{count}
Counter.propTypes = { count: PropTypes.number.isRequired }
export default Counter
```
Pass the component to this library. It will generate reasonable props based on the defined types.
```js
import generateProps from 'react-generate-props'
import Counter from './counter'
generateProps(Counter)
// => { count: 1 }
```
Use these default props to reduce boilerplate and prop type validation errors in your tests! :tada:
## Example
A more in-depth example.
```jsx
// component.jsx
class Component extends React.Component {
static propTypes = {
title: PropTypes.string.isRequired,
followers: PropTypes.number.isRequired,
user: PropTypes.shape({
loggedIn: PropTypes.bool.isRequired,
name: PropTypes.string.isRequired
}).isRequired
}
render() {
{this.props.title}
{this.props.followers}
{this.props.user.loggedIn && Hello, {this.props.user.name}.
}
}
}
export default Component
```
```jsx
// component-test.js
import generateProps from 'react-generate-props'
import Component from './component.jsx'
const props = generateProps(Component)
// => { title: 'title', followers: 1, user: { loggedIn: true, name: 'name' } }
render()
/* =>
title
1
Hello, name.
*/
```
## API
The library takes two arguments.
```js
generateProps(schema, opts)
```
#### `schema`: An Object, Function, or Class containing a PropTypes definition, or a single PropType. All of the following are valid:
Plain Object
```js
const Counter = { count: PropTypes.number.isRequired }
```
Plain Object with a `propTypes` key
```js
const Counter = { propTypes: { count: PropTypes.number.isRequired } }
```
Functional Component
```js
const Counter = ({ counter }) => {/* ... */}
Counter.propTypes = { count: PropTypes.number.isRequired }
```
`React.Component` Class
```js
class Counter extends React.Component {
static propTypes = { count: PropTypes.number.isRequired }
}
```
Single PropType
```js
const Counter = PropTypes.shape({ count: PropTypes.number.isRequired }).isRequired
```
In each of these cases, the effect would be the same
```js
generateProps(Counter)
// => { count: 1 }
```
#### `opts`: An Object which may contain the following:
```js
{
required: true,
// default: true. When true, props marked as .isRequired will be generated.
optional: false,
// default: false. When true, props *not* marked as .isRequired will be generated.
generators: {
// Can be used to override this lib's default generators.
// Each key is a prop type, each value is a function.
// Each function receives the propName as its first argument,
// followed by that prop type's argument, if it takes one.
bool: (propName) => false,
function: (propName) => spy(),
number: (propName) => propName.length,
instanceOf: (propName, klass) => new klass(),
oneOf: (propName, values) => values[values.length - 1]
}
}
```
## One More Example
```js
const propTypes = {
name: PropTypes.string.isRequired,
loggedIn: PropTypes.bool,
userType: PropTypes.oneOf(['admin', 'user']).isRequired
}
generateProps(propTypes)
// => { name: 'string', userType: 'admin' }
generateProps(propTypes, { optional: true })
// => { name: 'string', loggedIn: true, userType: 'admin' }
generateProps(propTypes, {
optional: true,
generators: {
string: (propName) => 'Alice',
bool: (propName) => propName === 'loggedIn',
oneOf: (propName, values) => values[values.length - 1]
}
})
// => { name: 'Alice', loggedIn: true, userType: 'user' }
```