All Projects → typicode → React Fake Props

typicode / React Fake Props

Licence: mit
🔮 Magically generate fake props for your React tests

Programming Languages

javascript
184084 projects - #8 most used programming language
flow
126 projects

Projects that are alternatives of or similar to React Fake Props

React Generate Props
Generate default props based on your React component's PropTypes
Stars: ✭ 23 (-96.19%)
Mutual labels:  test, enzyme, props
Redux Form Test
Shows how to do unit tests and integration tests with Redux-Form
Stars: ✭ 221 (-63.41%)
Mutual labels:  test, enzyme
Should Enzyme
Useful functions for testing React Components with Enzyme.
Stars: ✭ 41 (-93.21%)
Mutual labels:  test, enzyme
Enzyme
JavaScript Testing utilities for React
Stars: ✭ 19,781 (+3175%)
Mutual labels:  test, enzyme
Richgo
Enrich `go test` outputs with text decorations.
Stars: ✭ 544 (-9.93%)
Mutual labels:  test
Mocha
☕️ simple, flexible, fun javascript test framework for node.js & the browser
Stars: ✭ 20,986 (+3374.5%)
Mutual labels:  test
Tparse
CLI tool for analyzing and summarizing go test output. Pipe friendly. CI/CD friendly.
Stars: ✭ 445 (-26.32%)
Mutual labels:  test
Enzyme
High-performance automatic differentiation of LLVM.
Stars: ✭ 418 (-30.79%)
Mutual labels:  enzyme
React Tdd Guide
A series of examples on how to TDD React
Stars: ✭ 585 (-3.15%)
Mutual labels:  enzyme
Httptest
Qiniu httptest utilities
Stars: ✭ 571 (-5.46%)
Mutual labels:  test
Dotenv Flow
Loads environment variables from .env.[development|test|production][.local] files for Node.js® projects.
Stars: ✭ 537 (-11.09%)
Mutual labels:  test
Gradle Test Logger Plugin
A Gradle plugin for printing beautiful logs on the console while running tests
Stars: ✭ 460 (-23.84%)
Mutual labels:  test
Carina
Carina automation framework: Web, Mobile, API, DB
Stars: ✭ 549 (-9.11%)
Mutual labels:  test
Erik
Erik is an headless browser based on WebKit. An headless browser allow to run functional tests, to access and manipulate webpages using javascript.
Stars: ✭ 445 (-26.32%)
Mutual labels:  test
Thea11ymachine
The A11y Machine is an automated accessibility testing tool which crawls and tests pages of any web application to produce detailed reports.
Stars: ✭ 574 (-4.97%)
Mutual labels:  test
Magiskhidepropsconf
MagiskHidePropsConf
Stars: ✭ 441 (-26.99%)
Mutual labels:  props
Spring Guide
Spring 실전 가이드
Stars: ✭ 521 (-13.74%)
Mutual labels:  test
Vue Testing Library
🦎 Simple and complete Vue.js testing utilities that encourage good testing practices.
Stars: ✭ 567 (-6.13%)
Mutual labels:  test
Stresstestplatform
基于Jmeter实现的在线压测和管理Jmx的平台。
Stars: ✭ 515 (-14.74%)
Mutual labels:  test
Ginkgo
BDD Testing Framework for Go
Stars: ✭ 5,346 (+785.1%)
Mutual labels:  test

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 🌵 - Patreon

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].