A function that allows you to specify context to pass to a child component (intended for testing only).
MIT License
A function that allows you to specify context to pass to a child component (intended for testing only).
This module is distributed via npm which is bundled with node and should
be installed as one of your project's devDependencies
:
npm install --save-dev react-test-context-provider
var getContextProvider = require('react-test-context-provider')
var contextObject = {color: 'blue'} // the context you want to provide to the children components
var reactElement = getElementWithContext(contextObject, <ComponentThatNeedsContext />) // returns the react element as rendered with the given context
In this example, I'm using the Jest testing framework.
Button.js
import React, {PropTypes} from 'react'
export default function Button({children}, {color}) {
// function components receive context as the second argument
return <button style={{background: color}}>{children}</button>
}
Button.propTypes = {children: PropTypes.any.isRequired}
Button.contextTypes = {color: PropTypes.string}
Button.test.js
import React from 'react'
import renderer from 'react-test-renderer'
import getElementWithContext from 'react-test-context-provider'
import Button from './Button'
test('styles the button with a background of the context color', () => {
const element = getElementWithContext({color: 'blue'}, <Button>Click Me</Button>)
const component = renderer.create(element)
expect(component).toMatchSnapshot()
// NOTE: This API is also curried, so you can provide the context first and the children later:
// import getContextProvider from 'react-test-context-provider'
// const getElementWithBlueColorContext = getContextProvider({color: 'blue'})
// const element = getElementWithBlueColorContext(<Button>Click Me</Button>)
})
MIT