Add test for nested providers

README.md

@@ -48,8 +48,8 @@ const store = createStore(combineReducers({
   user: (/* state, action */) => ({ name: 'John' })
 }))
 
+// Uses the default store `store` as name.
 const Root = () => (
-  {/* Uses the default store `store` as name. */}
   <Provider store={store}>
     <TodosContainer />
   </Provider>
@@ -63,13 +63,13 @@ import { createProvider } from 'react-redux-custom-store'
 
 const storeName = 'todo'
 const todoStore = createStore(combineReducers({
-  todos: (/* state, action */) => [ { text: 'OK' }, { text: 'Missing' } ]
+  todos: (/* state, action */) => [{ text: 'OK' }, { text: 'Missing' }],
 }))
 const Provider = createProvider(storeName)
 
+// Uses the custom store `todo` as name.
+// At this point there are 2 stores in `context`.
 const TodosContainer = () => (
-  {/* Uses the custom store `todo` as name.
-    At this point there are 2 stores in `context`. */}
   <Provider store={todoStore}>
     <Todos />
   </Provider>
@@ -96,7 +96,7 @@ TodoList.propTypes = {
 }
 
 const ConnectedTodoProfile = connect(
-  ({ user: { name } }) => ({ name })
+  ({ user: { name } }) => ({ name })
 )(TodoProfile) // uses default store name `store`
 
 const ConnectedTodoList = connect(

test/index.js

@@ -6,13 +6,13 @@ import { createStore, combineReducers } from 'redux'
 import connect from '../connect'
 import createProvider from '../create-provider'
 
-const storeName = 'blog'
 const store = createStore(combineReducers({
   user: (/* state, action */) => ({ name: 'John' }),
 }))
-const Provider = createProvider(storeName)
 
 test('Render component using custom store name', t => {
+  const storeName = 'blog'
+  const Provider = createProvider(storeName)
   const Foo = ({ name }) => (<span>{name}</span>)
   Foo.propTypes = { name: PropTypes.string }
 
@@ -40,3 +40,77 @@ test('Render component using custom store name', t => {
 
   t.end()
 })
+
+test('Render nested providers', t => {
+  const storeName = 'todo'
+  const TodoProvider = createProvider(storeName)
+
+  const todoStore = createStore(combineReducers({
+    todos: (/* state, action */) => [{ text: 'OK' }, { text: 'Missing' }],
+  }))
+
+  const TodoProfile = ({ name }) => (<h2>{name}</h2>)
+  TodoProfile.propTypes = { name: PropTypes.string.isRequired }
+  TodoProfile.contextTypes = {
+    store: PropTypes.object,
+    [storeName]: PropTypes.object,
+  }
+
+  const TodoList = ({ todos }) => (
+    <ul>
+      {todos.map(({ text }, i) => (<li key={i}>{text}</li>))}
+    </ul>
+  )
+  TodoList.propTypes = { todos: PropTypes.array.isRequired }
+  TodoList.contextTypes = {
+    store: PropTypes.object,
+    [storeName]: PropTypes.object,
+  }
+
+  const ConnectedTodoProfile = connect(
+    ({ user: { name } }) => ({ name })
+  )(TodoProfile) // uses default store name `store`
+
+  const ConnectedTodoList = connect(
+    ({ todos }) => ({ todos })
+  )(TodoList, storeName) // uses custom store name `todo`
+
+  const Todos = () => (
+    <div>
+      <ConnectedTodoProfile />
+      <ConnectedTodoList />
+    </div>
+  )
+
+  const TodosContainer = () => (
+    <TodoProvider store={todoStore}>
+      <Todos />
+    </TodoProvider>
+  )
+
+  const Provider = createProvider()
+  const Root = () => (
+    <Provider store={store}>
+      <TodosContainer />
+    </Provider>
+  )
+
+  const wrapper = mount(<Root />)
+
+  t.comment('TodoProfile')
+  const profile = wrapper.find('TodoProfile')
+  t.true(profile, 'find the connected component for profile')
+  t.true('store' in profile.node.context, 'find default store name in context')
+  t.true(storeName in profile.node.context, 'find custom store name in context')
+  t.equal(profile.text(), 'John')
+
+  t.comment('TodoList')
+  const list = wrapper.find('TodoList')
+  t.true(list, 'find the connected component for profile')
+  t.true('store' in list.node.context, 'find default store name in context')
+  t.true(storeName in list.node.context, 'find custom store name in context')
+  t.equal(list.find('li').at(0).text(), 'OK')
+  t.equal(list.find('li').at(1).text(), 'Missing')
+
+  t.end()
+})