├── LICENSE ├── README.md ├── index.js └── package.json /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | Copyright (c) 2016 Kent C. Dodds 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in all 12 | copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 20 | SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-test-context-provider 2 | 3 | A function that allows you to specify context to pass to a child component (intended for testing only). 4 | 5 | ## Installation 6 | 7 | This module is distributed via [npm][npm] which is bundled with [node][node] and should 8 | be installed as one of your project's `devDependencies`: 9 | 10 | ``` 11 | npm install --save-dev react-test-context-provider 12 | ``` 13 | 14 | ## Usage 15 | 16 | ```javascript 17 | var getContextProvider = require('react-test-context-provider') 18 | var contextObject = {color: 'blue'} // the context you want to provide to the children components 19 | var reactElement = getElementWithContext(contextObject, ) // returns the react element as rendered with the given context 20 | ``` 21 | 22 | In this example, I'm using the [Jest](http://facebook.github.io/jest/) testing framework. 23 | 24 | **Button.js** 25 | 26 | ```javascript 27 | import React, {PropTypes} from 'react' 28 | export default function Button({children}, {color}) { 29 | // function components receive context as the second argument 30 | return 31 | } 32 | Button.propTypes = {children: PropTypes.any.isRequired} 33 | Button.contextTypes = {color: PropTypes.string} 34 | ``` 35 | 36 | **Button.test.js** 37 | 38 | ```javascript 39 | import React from 'react' 40 | import renderer from 'react-test-renderer' 41 | import getElementWithContext from 'react-test-context-provider' 42 | import Button from './Button' 43 | 44 | test('styles the button with a background of the context color', () => { 45 | const element = getElementWithContext({color: 'blue'}, ) 46 | const component = renderer.create(element) 47 | expect(component).toMatchSnapshot() 48 | 49 | // NOTE: This API is also curried, so you can provide the context first and the children later: 50 | // import getContextProvider from 'react-test-context-provider' 51 | // const getElementWithBlueColorContext = getContextProvider({color: 'blue'}) 52 | // const element = getElementWithBlueColorContext() 53 | }) 54 | ``` 55 | 56 | ## LICENSE 57 | 58 | MIT 59 | 60 | [npm]: https://www.npmjs.com/ 61 | [node]: https://nodejs.org 62 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Kent C. Dodds (http://kentcdodds.com) 3 | * @license MIT 4 | */ 5 | 'use strict'; 6 | 7 | var React = require('react'); 8 | var PropTypes = require('prop-types'); 9 | 10 | module.exports = function getContextProviderCurried(context, children) { 11 | if (typeof children === 'undefined') { 12 | return function getContextProviderGetter(children) { 13 | return getContextProvider(context, children); 14 | }; 15 | } else { 16 | return getContextProvider(context, children); 17 | } 18 | }; 19 | 20 | function getContextProvider(context, children) { 21 | function childContextTypes() { 22 | return Object.keys(context).reduce(function(obj, key) { 23 | obj[key] = PropTypes.any; 24 | return obj; 25 | }, {}); 26 | } 27 | 28 | class ContextProvider extends React.Component { 29 | getChildContext() { 30 | return context; 31 | } 32 | 33 | render() { 34 | return children; 35 | } 36 | } 37 | 38 | ContextProvider.displayName = 'ContextProvider'; 39 | ContextProvider.childContextTypes = childContextTypes(); 40 | 41 | return React.createElement(ContextProvider, null); 42 | } 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-test-context-provider", 3 | "version": "2.2.0", 4 | "description": "A function that allows you to specify context to pass to a child component (intended for testing only)", 5 | "main": "index.js", 6 | "keywords": [ 7 | "react", 8 | "testing", 9 | "context" 10 | ], 11 | "author": "Kent C. Dodds (http://kentcdodds.com/)", 12 | "license": "MIT", 13 | "peerDependencies": { 14 | "react": ">= 9" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/kentcdodds/react-test-context-provider.git" 19 | }, 20 | "bugs": { 21 | "url": "https://github.com/kentcdodds/react-test-context-provider/issues" 22 | }, 23 | "homepage": "https://github.com/kentcdodds/react-test-context-provider#readme" 24 | } 25 | --------------------------------------------------------------------------------