markalfred / React Generate Props
Licence: mit
Generate default props based on your React component's PropTypes
Stars: ✭ 23
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Generate Props
Enzyme
JavaScript Testing utilities for React
Stars: ✭ 19,781 (+85904.35%)
Mutual labels: jest, test, enzyme
React Fake Props
🔮 Magically generate fake props for your React tests
Stars: ✭ 604 (+2526.09%)
Mutual labels: test, enzyme, props
egghead-bookshelf
An example React application to accompany the "Add Internationalization (i18n) to a React app using React Intl" Egghead.io course
Stars: ✭ 28 (+21.74%)
Mutual labels: enzyme, jest
Jest In Case
Jest utility for creating variations of the same test
Stars: ✭ 902 (+3821.74%)
Mutual labels: jest, test
react-testing-talk
No description or website provided.
Stars: ✭ 12 (-47.83%)
Mutual labels: enzyme, jest
react-boilerplate
Sets the ground up for CRA-like projects.
Stars: ✭ 23 (+0%)
Mutual labels: enzyme, jest
enzyme-v3-and-react-16
Example of how to setup React 16, Enzyme 3 and Jest 21
Stars: ✭ 21 (-8.7%)
Mutual labels: enzyme, jest
React Redux Boilerplate
Awesome React Redux Workflow Boilerplate with Webpack 4
Stars: ✭ 307 (+1234.78%)
Mutual labels: jest, enzyme
Webpack React Boilerplate
Minimal React 16 and Webpack 4 boilerplate with babel 7, using the new webpack-dev-server, react-hot-loader, CSS-Modules
Stars: ✭ 358 (+1456.52%)
Mutual labels: jest, enzyme
parcelui
Parcel + Typescript + React/Preact + Router + CSS Modules + SASS + Jest + Api-Now + Github Actions CI
Stars: ✭ 32 (+39.13%)
Mutual labels: enzyme, jest
testing-reactjs-examples
🧪 "What should we test in our React components" - presentation examples.
Stars: ✭ 23 (+0%)
Mutual labels: enzyme, jest
jest-launchdarkly-mock
Easily unit test LaunchDarkly feature flagged components with jest
Stars: ✭ 14 (-39.13%)
Mutual labels: jest, test
puppeteer-screenshot-tester
Small library that allows us to compare screenshots generated by puppeteer in our tests.
Stars: ✭ 50 (+117.39%)
Mutual labels: jest, test
enzyme-extensions
🎩 Enzyme extensions to test shallowly rendered enzyme wrappers 🏄🏻
Stars: ✭ 30 (+30.43%)
Mutual labels: enzyme, jest
react-multi-context
Manage multiple React 16 contexts with a single component.
Stars: ✭ 19 (-17.39%)
Mutual labels: enzyme, jest
Simple React App
Simple base app using react, react-router v4, hot-reload & sass.
Stars: ✭ 263 (+1043.48%)
Mutual labels: jest, enzyme
Youtube React
A Youtube clone built in React, Redux, Redux-saga
Stars: ✭ 421 (+1730.43%)
Mutual labels: jest, enzyme
react-generate-props
Generate default props based on your React component's PropTypes
generateProps({ name: PropTypes.string, number: PropTypes.number })
// => { name: 'name', number: 1 }
Installation
$ npm install --save-dev react-generate-props
Usage
Important: Initialize the library before importing any components into your test suite.
// test-helper.js
import { init } from 'react-generate-props'
init()
Define your component's propTypes.
const Counter = ({ count }) => <div>{count}</div>
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.
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! 🎉
Example
A more in-depth example.
// 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() {
<div>
<h1>{this.props.title}</h1>
<small>{this.props.followers}</small>
{this.props.user.loggedIn && <p>Hello, {this.props.user.name}.</p>}
</div>
}
}
export default Component
// 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(<Component {...props} />)
/* =>
<div>
<h1>title</h1>
<small>1</small>
<p>Hello, name.</p>
</div>
*/
API
The library takes two arguments.
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
const Counter = { count: PropTypes.number.isRequired }
Plain Object with a propTypes
key
const Counter = { propTypes: { count: PropTypes.number.isRequired } }
Functional Component
const Counter = ({ counter }) => {/* ... */}
Counter.propTypes = { count: PropTypes.number.isRequired }
React.Component
Class
class Counter extends React.Component {
static propTypes = { count: PropTypes.number.isRequired }
}
Single PropType
const Counter = PropTypes.shape({ count: PropTypes.number.isRequired }).isRequired
In each of these cases, the effect would be the same
generateProps(Counter)
// => { count: 1 }
opts
: An Object which may contain the following:
{
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
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' }
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].