react-shallow-renderer-helpers

Helpers for testing with React's shallow renderer

Documentation

Example

const shallowHelpers = require('react-shallow-renderer-helpers');
class MyInput extends React.Component {
  render() {
      return <div>MyInput</div>
  }
}
const renderer = TestUtils.createRenderer();
const component = renderer.render(
  <div>
    <div className="test">Test</div>
    <div testProp='1'>
      <div>Foo</div>
      <MyInput testProp='1' />
    </div>
  </div>
);

filter(component, predicate)

Recursively searches component, returning an array of all children that pass a predicate.

shallowHelpers.filter(component, function (c) {
  return c.props.testProp === 1;
});

// returns
[
    <div testProp='1'>
      <div>Foo</div>
      <MyInput testProp='1' />
    </div>,
    <MyInput testProp='1' />
]

find(component, predicate)

Recursively searches component, returning the first child that passes a predicate.

shallowHelpers.find(component, function (c) {
  return c.props.testProp === 1;
});

// returns
<div testProp='1'>
  <div>Foo</div>
  <MyInput testProp='1' />
</div>

filterType(component, type)

Recursively searches component, returning an array of all children of type.

shallowHelpers.filterType(component, MyInput);

// returns
[<MyInput testProp='1' />]

findType(component, type)

Recursively searches component, returning the first child of type.

shallowHelpers.findType(component, MyInput);

// returns
<MyInput testProp='1' />

filterClass(component, className)

Recursively searches component, returning an array of all children has a className of className.

shallowHelpers.filterClass(component, 'test');

// returns
[<div className="test">Test</div>]

findClass(component, className)

Recursively searches component, returning the first child that has a className of className.

shallowHelpers.findClass(component, 'test');

// returns
<div className="test">Test</div>

createRenderer

Returns a wrapper around React's shallow renderer that renders with the given context. Also exposes a getMountedInstance method that returns the rendered component instance. This allows for testing state and calling methods directly on the instance. See https://github.com/facebook/react/issues/3721#issuecomment-106318499 and https://github.com/facebook/react/pull/4918

var renderer = shallowHelpers.createRenderer();
renderer.render(() =>
  <MyComponent
    with={props}
    and={stuff}
  />,
  {here: 'is', my: 'context'}
);

var instance = renderer.getMountedInstance();
var testState = instance.state.test;

renderWithContext

Shorthand method for rendering with context without needing to explicitly create a renderer. Useful if you never need to access the component instance.

var output = shallowHelpers.renderWithContext(() =>
  <MyComponent
    with={props}
    and={stuff}
  />,
  {here: 'is', my: 'context'}
);

renderFactory

Returns a method for rendering with context the component passed as a parameter. Useful for testing if you need a helper method for rendering your component before multiple unit tests.

var Component = React.createClass({});
var renderMethod = shallowHelpers.renderFactory(Component);
var renderedComponent = renderMethod(props, context);