Merge pull request #1214 from aberezkin/consuming-defined-values

Pass defined falsy values in consumers' children in replacement render

Author: theKashey

src/reconciler/hotReplacementRender.js

@@ -287,10 +287,12 @@ const hotReplacementRender = (instance, stack) => {
         next(stackChild.instance)
       } else if (isContextConsumer(child)) {
         try {
+          const contextValue = stackContext().get(getContextProvider(childType))
           next({
             children: (child.props ? child.props.children : child.children[0])(
-              stackContext().get(getContextProvider(childType)) ||
-                childType[CONTEXT_CURRENT_VALUE],
+              contextValue !== undefined
+                ? contextValue
+                : childType[CONTEXT_CURRENT_VALUE],
             ),
           })
         } catch (e) {

test/AppContainer.dev.test.js

@@ -1040,6 +1040,181 @@ describe(`AppContainer (dev)`, () => {
         expect(wrapper.text()).toBe('new render + old state')
       },
     )
+
+    it('passes a default context value', () => {
+      if (React.version.startsWith('16')) {
+        const spy = jest.fn()
+        const contextValue = 'value'
+        const { Consumer } = React.createContext('value')
+
+        class App extends Component {
+          render() {
+            return (
+              <Consumer>
+                {value => {
+                  spy()
+                  return <div>{value}</div>
+                }}
+              </Consumer>
+            )
+          }
+        }
+
+        RHL.register(App, 'App', 'test.js')
+
+        const wrapper = mount(
+          <AppContainer>
+            <App />
+          </AppContainer>,
+        )
+
+        expect(wrapper.contains(<div>{contextValue}</div>)).toBe(true)
+        expect(spy).toHaveBeenCalledTimes(1)
+      } else {
+        expect(true).toBe(true)
+      }
+    })
+
+    it('passes provider defined context value', () => {
+      if (React.version.startsWith('16')) {
+        const spy = jest.fn()
+        const contextValue = 'value'
+        const { Provider, Consumer } = React.createContext()
+
+        class App extends Component {
+          render() {
+            return (
+              <Provider value={contextValue}>
+                <Consumer>
+                  {value => {
+                    spy()
+                    return <div>{value}</div>
+                  }}
+                </Consumer>
+              </Provider>
+            )
+          }
+        }
+
+        RHL.register(App, 'App', 'test.js')
+
+        const wrapper = mount(
+          <AppContainer>
+            <App />
+          </AppContainer>,
+        )
+
+        expect(wrapper.contains(<div>{contextValue}</div>)).toBe(true)
+        expect(spy).toHaveBeenCalledTimes(1)
+      } else {
+        expect(true).toBe(true)
+      }
+    })
+
+    it('passes provider defined falsy context value', () => {
+      if (React.version.startsWith('16')) {
+        const spy = jest.fn()
+        const contextValue = 0
+        const { Provider, Consumer } = React.createContext()
+
+        class App extends Component {
+          render() {
+            return (
+              <Provider value={contextValue}>
+                <Consumer>
+                  {value => {
+                    spy(value)
+                    return <div>{value}</div>
+                  }}
+                </Consumer>
+              </Provider>
+            )
+          }
+        }
+
+        RHL.register(App, 'App', 'test.js')
+
+        const wrapper = mount(
+          <AppContainer>
+            <App />
+          </AppContainer>,
+        )
+
+        expect(wrapper.contains(<div>{contextValue}</div>)).toBe(true)
+        expect(spy).toHaveBeenCalledTimes(1)
+        expect(spy).toHaveBeenCalledWith(contextValue)
+      } else {
+        expect(true).toBe(true)
+      }
+    })
+
+    it('passes provider defined falsy context value on receiving new children', () => {
+      if (React.version.startsWith('16')) {
+        const spy = jest.fn()
+        const spy2 = jest.fn()
+        const contextValue = false
+        const { Provider, Consumer } = React.createContext()
+
+        class App extends Component {
+          render() {
+            return (
+              <Provider value={contextValue}>
+                <Consumer>
+                  {value => {
+                    spy(value)
+                    return <div>{value}</div>
+                  }}
+                </Consumer>
+              </Provider>
+            )
+          }
+        }
+
+        RHL.register(App, 'App', 'test.js')
+
+        const wrapper = mount(
+          <AppContainer>
+            <App />
+          </AppContainer>,
+        )
+
+        expect(wrapper.contains(<div>{contextValue}</div>)).toBe(true)
+        expect(spy).toHaveBeenCalledTimes(1)
+        expect(spy).toHaveBeenCalledWith(contextValue)
+
+        {
+          class App extends Component {
+            shouldComponentUpdate() {
+              return false
+            }
+
+            render() {
+              return (
+                <Provider value={contextValue}>
+                  <Consumer>
+                    {value => {
+                      spy2(value)
+                      return <div>{value}</div>
+                    }}
+                  </Consumer>
+                </Provider>
+              )
+            }
+          }
+
+          RHL.register(App, 'App', 'test.js')
+          wrapper.setProps({ children: <App /> })
+        }
+
+        const firstCallArg = spy2.mock.calls[0][0]
+
+        expect(spy2).toHaveBeenCalledTimes(2)
+        expect(firstCallArg).toBeDefined()
+        expect(firstCallArg).toBe(contextValue)
+      } else {
+        expect(true).toBe(true)
+      }
+    })
   })
 
   describe('with createClass root', () => {