Use enzyme instead
Helpers for testing with React's shallow renderer
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>
);
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' />
]
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>
Recursively searches component
, returning an array of all children of type
.
shallowHelpers.filterType(component, MyInput);
// returns
[<MyInput testProp='1' />]
Recursively searches component
, returning the first child of type
.
shallowHelpers.findType(component, MyInput);
// returns
<MyInput testProp='1' />
Recursively searches component
, returning an array of all children has a className of className
.
shallowHelpers.filterClass(component, 'test');
// returns
[<div className="test">Test</div>]
Recursively searches component
, returning the first child that has a className of className
.
shallowHelpers.findClass(component, 'test');
// returns
<div className="test">Test</div>
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 facebook/react#3721 (comment) and facebook/react#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;
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'}
);
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);