diff --git a/packages/emotion-theming/README.md b/packages/emotion-theming/README.md index d58e003ec..fdc867a8f 100644 --- a/packages/emotion-theming/README.md +++ b/packages/emotion-theming/README.md @@ -179,6 +179,40 @@ import { channel } from 'emotion-theming'; console.log(channel); '__EMOTION_THEMING__'; ``` +### createBroadcast: Function + +Creates a broadcast that is used to listen to theme events via context. This is probably only useful for testing. +If you have styled components that depend on `theme` via `ThemeProvider`, one option is to wrap all your components being tested +in `ThemeProvider`. However if you're using `enzyme`, you'll lose the ability to call some methods that require it to be run on the root instance. +Instead you can `mount` a component a pass the channel and broadcast as part of `context`. + +```js +import {channel, createBroadcast} from 'emotion-theming'; +import {mount} from 'enzyme'; +import PropTypes from 'prop-types'; +import React from 'react'; + +describe('emotion-theming', function() { + it('can use theme from a ThemeProvider', function() { + const myTheme = {color: 'green'}; + const broadcast = createBroadcast(myTheme); + const wrapper = mount(, { + context: { + [channel]: broadcast, + }, + childContextTypes: { + [channel]: PropTypes.object, + }, + }); + + wrapper.setState({foo: 'bar'}); + expect(wrapper.state('foo')).toBe('bar'); + }); +}); +``` + + + ## Credits Thanks goes to the [styled-components team](https://github.com/styled-components/styled-components) and [their contributors](https://github.com/styled-components/styled-components/graphs/contributors) who originally wrote this. diff --git a/packages/emotion-theming/src/index.js b/packages/emotion-theming/src/index.js index 619b17adf..2909dc63b 100644 --- a/packages/emotion-theming/src/index.js +++ b/packages/emotion-theming/src/index.js @@ -1,4 +1,4 @@ // @flow export { default as ThemeProvider } from './theme-provider' export { default as withTheme } from './with-theme' -export { channel, contextTypes } from './utils' +export { channel, contextTypes, createBroadcast } from './utils' diff --git a/packages/emotion-theming/src/utils.js b/packages/emotion-theming/src/utils.js index db8342643..44a5bb12c 100644 --- a/packages/emotion-theming/src/utils.js +++ b/packages/emotion-theming/src/utils.js @@ -7,5 +7,6 @@ export const contextTypes = { } export { default as channel } from './channel' +export { default as createBroadcast } from './create-broadcast' export type Theme = Object | ((theme: Object) => Object)