typicode / react-fake-props Goto Github PK

View Code? Open in Web Editor NEW

628.0 7.0 37.0 2.5 MB

🔮 Magically generate fake props for your React tests

License: MIT License

JavaScript 93.80% TypeScript 5.95% Shell 0.25%

react test enzyme props proptypes flow

react-fake-props's Introduction

react-fake-props

Magically generate fake props for your React tests 🔮

react-fake-props parses your Component prop types using react-docgen and generates fake props. Supports TypeScript, 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 TypeScript:

type Props = {
  id: number
  name: string
}

class Component extends React.Component<Props> {
  // ...
}

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

// 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

License

MIT - Typicode 🌵

react-fake-props's People

Contributors

Stargazers

Watchers

react-fake-props's Issues

Nested shape objects

Hi guys,

Thank you so much for your work on this project. While using this I find that it breaks when there are components with nested shape objects, like the following.

Component.propTypes = {
	randomObject: PropTypes.shape({
		randomNested: PropTypes.shape({
			insideNestedString: PropTypes.string
        })
    })
}

This breaks with TypeError: Cannot read property 'optional' of undefined.

Thanks!

I'm using this library a lot to test some react components. I was wondering if it makes sense to add the possibility of generating random data (like faker.js or something). Or at least support to plug in one of those libraries (for it not to be included in react-fake-props deps)

Do you think it makes sense?

Why not use propTypes directly?

Just stumbled upon this library, forgive me if I'm missing something obvious. But since the component to be tested has to be in scope already, why not just use it directly to get propTypes? Or was the data structure that react-docgen provides easier to inspect?

I mean:

module.exports = function fakeProps(Component, { optional = false } = {}) {
  assert(Component.propTypes)
  return restOfWhatYouDidBefore(Component.propTypes, optional)
}

And when using it I think it would be much more obvious to do something like this:

import MyComponent from './myComponent'
import fakeProps from 'react-fake-props'

const myProps = fakeProps(MyComponent)
const vDom = <MyComponent {...myProps} />

Try react-docgen-typescript

Currently only Flow and PropTypes are supported, but https://github.com/styleguidist/react-docgen-typescript (or other libs) may improve TypeScript support

Update react-docgen to 4.0 and add TypeScript tests

Usage with connected components (Multiple exported component definitions found)

Hi, everyone!

I have one connected component that I just want to make a smoke test in it:

export class SubtopicsTable extends Component {
  componentDidMount() {
    this.props.fetchSubtopics()
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(SubtopicsTable)

In the test, I'm rendering the component using shallow that is not connected with redux:

import React from 'react'
import { shallow } from 'enzyme'
import fakeProps from 'react-fake-props'
import path from 'path'
import { SubtopicsTable } from '../SubtopicsTable'

const initialProps = fakeProps(
  path.join(__dirname, '../SubtopicsTable.js'), {optional: true}
)

describe('(Component) SubtopicsTable', () => {
  it('renders error when exists a error', () => {
    const wrapper = shallow(<SubtopicsTable {...initialProps} />)

    expect(wrapper).toHaveLength(1)
  })
})

This is not working. I'm getting this error: `Multiple exported component definitions found.``

How should I proceed? I don't want to set a mock store in this component since this is just a smoke test.

TypeError: pluginList.indexOf is not a function

Seeing the following error when using react-fake-props:
TypeError: pluginList.indexOf is not a function

Even a simple example like below will cause it:

import fakeProps from 'react-fake-props'
const props = fakeProps(<file_path>)

It sounds like this may be coming from the react-docgen dependency:
reactjs/react-docgen#47

I'm using [email protected], which I believe uses a newer version of babylon. It sounds like this may be the same issue as above. If that dependency were upgraded, that may fix the issue.

Generates invalid value for PropType.oneOf (array of strings)

Warning displayed in Jest from React:

 Warning: Failed prop type: Invalid prop `action` of value `'add'` supplied to `YourComponent`, expected one of ["add","edit"]

It seems it generated a string with quotes included within?

JS file summary:

import PropTypes from 'prop-types';

YourComponent.propTypes = {
    action: PropTypes.oneOf(['add', 'edit'])
};

Support stateless components

Will you support stateless components?

const Foo = ({prop1,prop2}) => <div></div>

Foo.propTypes = {
    prop1:PropTypes.number.isRequired,
    prop2:PropTypes.number.isRequired,
}
export Foo

react-docgen and FlowType support

Hi @typicode,
Firstly, thanks for a great module.

Our codebase uses Flow rather than PropTypes, so I was excited to read that react-fake-props supports Flow via react-docgen. However unfortunately it doesn't seem to actually work.
I investigated and the problem seems to be that for a Flow component react-docgen does not return a prop.type but rather a prop.flowType. Thus react-fake-props doesn't know how to interpret the field.
I've tested this with the latest v2.17 and the specified v2.15 of react-docgen.

I've started working on a PR to add support for this, however I wanted to check in with you first, in case I'm missing something obvious, because it's turning out to be a bit more work than I expected since react-docgen doesn't seem to abstract the differences between PropTypes and FlowTypes, so I'll need to write that interpreter.

Cheers,
Matt

Will this work with Typescript?

Immutable types not supported

Tests fail for components using Immutable types:

'Error, unknown type'

Could it be possible to support them ?

Fix tests on Node 4

Currently the build is failing for Node 4, not sure why exactly.
Any help would be appreciated getting that green badge again ^^

https://travis-ci.org/typicode/react-fake-props