fuzzprops

An experiment in automatically generating sets of supposedly-valid props for React components, in order to make tests write themselves.

WARNING

This is experimental at best. React's maintainers are moving toward favoring Flow type-checking over propTypes. The algorithm for generating test props is quite slow. It's also pretty stupid and won't create much variation, which has both advantages and disadvantages.

That all said, except for slowing down your test suite, any shortcomings are mostly harmless.

How does it work?

It's a very simple, brute-force technique, like fuzzing is.

• Start with a list of potential input values, which can be anything.
• For each of a component's React.PropTypes validation functions, test every input value against it, keeping only the values that pass validation.
• Use the lists of should-be-valid prop values to generate should-be-valid props objects.

You can then use those props objects to render the component and answer the question: "If I obey my PropTypes validation rules, does the component render without exploding?"

If your components explodes when given supposedly-valid props, you should consider either handling the input that made it explode or tightening its propTypes validation.

Usage

Mocha/enzyme/ES6 example:

import React, {Component, PropTypes, createElement} from 'react'
import {mount} from 'enzyme'
import fuzzProps from 'fuzzprops'

class Numbers extends Component {
  static propsTypes = {
    optionalNumber: PropTypes.number,
    requiredNumber: PropTypes.number.isRequired,
  };
  render() {
    return <div />
  }
}

const fuzzerValues = [
  'Hello, World!',
  null,
  undefined,
  -1,
  0,
  1,
  1234.4321,
  '1',
  '-1',
  '0',
  '1234.4321',
  {},
  [],
  [0],
  [0,0,0,0,0,0,0,0],
  ['1234', 2134, 'safasfa', null],
]

const maxIterations = 10

describe('Numbers component', function() {
  it('should render without throwing when given valid props', function() {
    fuzzProps(Numbers, fuzzerValues, maxIterations).forEach(function(props) {
      mount(<Numbers ...props>{props.children || null}</Numbers>)
    })
  })
})