react-fake-props

? Magically generate fake props for your React tests

Github星跟蹤圖

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 :cactus: - Patreon

主要指標

概覽
名稱與所有者typicode/react-fake-props
主編程語言JavaScript
編程語言JavaScript (語言數: 3)
平台
許可證MIT License
所有者活动
創建於2017-05-30 19:11:46
推送於2024-02-14 10:26:22
最后一次提交
發布數13
最新版本名稱v1.1.0 (發布於 2024-02-13 22:46:22)
第一版名稱v0.1.1 (發布於 2017-09-06 13:32:01)
用户参与
星數625
關注者數6
派生數23
提交數97
已啟用問題?
問題數13
打開的問題數3
拉請求數11
打開的拉請求數5
關閉的拉請求數5
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?