react-test-renderer How to Create a Component With Context? - reactjs

Question

The Api for react-test-render says:
TestRenderer.create(element, options);
What are valid options for create?
Can I use it to set a component's context?
https://reactjs.org/docs/test-renderer.html#reference

Answer 1

The TestRenderer API doesn't support setting context directly - check out the create implementation here.
You can create a simple wrapper that just passes context:
import React from 'react'
import TestRenderer from 'react-test-renderer'
import PropTypes from 'prop-types'
// The example component under test
export default class WithContext extends React.Component {
static contextTypes = {
someProperty: PropTypes.any,
}
render () {
return (
<div>{ this.context.someProperty }</div>
)
}
}
describe('<WithContext>', () => {
it('renders the supplied context', () => {
const tree = TestRenderer.create(
<PassContext value={{ someProperty: 'context' }}>
<WithContext />
</PassContext>
)
tree.root.find(findInChildren(node =>
typeof node === 'string' &&
node.toLowerCase() === "context"
))
});
});
class PassContext extends React.Component {
static childContextTypes = {
someProperty: PropTypes.any,
}
getChildContext () {
return this.props.value
}
render () {
return this.props.children
}
}
// Returns a TestInstance#find() predicate that passes
// all test instance children (including text nodes) through
// the supplied predicate, and returns true if one of the
// children passes the predicate.
function findInChildren (predicate) {
return testInstance => {
const children = testInstance.children
return Array.isArray(children)
? children.some(predicate)
: predicate(children)
}
}