Updated outdated SSR-test (dispatch in ancestors) (#1213)

Author: Ephem

test/integration/server-rendering.spec.js

@@ -28,6 +28,28 @@ describe('React', () => {
       </div>
     )
 
+    class Dispatcher extends React.Component {
+      constructor(props) {
+        super(props)
+        if (props.constructAction) {
+          props.dispatch(props.constructAction)
+        }
+      }
+      UNSAFE_componentWillMount() {
+        if (this.props.willMountAction) {
+          this.props.dispatch(this.props.willMountAction)
+        }
+      }
+      render() {
+        if (this.props.renderAction) {
+          this.props.dispatch(this.props.renderAction)
+        }
+
+        return <Greeter greeted={this.props.greeted} />
+      }
+    }
+    const ConnectedDispatcher = connect()(Dispatcher)
+
     it('should be able to render connected component with props and state from store', () => {
       const store = createStore(greetingReducer)
 
@@ -71,48 +93,43 @@ describe('React', () => {
       expect(store.getState().greeting).toContain('Hi')
     })
 
-    it.skip('should render children with original state even if actions are dispatched in ancestor', () => {
+    it('should render children with updated state if actions are dispatched in ancestor', () => {
       /*
           Dispatching during construct, render or willMount is
           almost always a bug with SSR (or otherwise)
 
           This behaviour is undocumented and is likely to change between
           implementations, this test only verifies current behaviour
 
-          Note: this test passes in v6, because we use context to propagate the store state, and the entire
+          Note: this test fails in v6, because we use context to propagate the store state, and the entire
           tree will see the same state during the render pass.
-
           In all other versions, including v7, the store state may change as actions are dispatched
           during lifecycle methods, and components will see that new state immediately as they read it.
       */
       const store = createStore(greetingReducer)
 
-      class Dispatcher extends React.Component {
-        constructor(props) {
-          super(props)
-          props.dispatch(props.action)
-        }
-        UNSAFE_componentWillMount() {
-          this.props.dispatch(this.props.action)
-        }
-        render() {
-          this.props.dispatch(this.props.action)
-
-          return <Greeter greeted={this.props.greeted} />
-        }
-      }
-      const ConnectedDispatcher = connect()(Dispatcher)
-
-      const action = { type: 'Update', payload: { greeting: 'Hi' } }
+      const constructAction = { type: 'Update', payload: { greeting: 'Hi' } }
+      const willMountAction = { type: 'Update', payload: { greeting: 'Hiya' } }
+      const renderAction = { type: 'Update', payload: { greeting: 'Hey' } }
 
       const markup = renderToString(
         <Provider store={store}>
-          <ConnectedDispatcher action={action} greeted="world" />
+          <ConnectedDispatcher
+            constructAction={constructAction}
+            greeted="world"
+          />
+          <ConnectedDispatcher
+            willMountAction={willMountAction}
+            greeted="world"
+          />
+          <ConnectedDispatcher renderAction={renderAction} greeted="world" />
         </Provider>
       )
 
-      expect(markup).toContain('Hello world')
-      expect(store.getState().greeting).toContain('Hi')
+      expect(markup).toContain('Hi world')
+      expect(markup).toContain('Hiya world')
+      expect(markup).toContain('Hey world')
+      expect(store.getState().greeting).toContain('Hey')
     })
 
     it('should render children with changed state if actions are dispatched in ancestor and new Provider wraps children', () => {
@@ -122,35 +139,12 @@ describe('React', () => {
 
           This behaviour is undocumented and is likely to change between
           implementations, this test only verifies current behaviour
+
+          This test works both when state is fetched directly in connected
+          components and when it is fetched in a Provider and placed on context
       */
       const store = createStore(greetingReducer)
 
-      class Dispatcher extends React.Component {
-        constructor(props) {
-          super(props)
-          if (props.constructAction) {
-            props.dispatch(props.constructAction)
-          }
-        }
-        UNSAFE_componentWillMount() {
-          if (this.props.willMountAction) {
-            this.props.dispatch(this.props.willMountAction)
-          }
-        }
-        render() {
-          if (this.props.renderAction) {
-            this.props.dispatch(this.props.renderAction)
-          }
-
-          return (
-            <Provider store={store}>
-              <Greeter greeted={this.props.greeted} />
-            </Provider>
-          )
-        }
-      }
-      const ConnectedDispatcher = connect()(Dispatcher)
-
       const constructAction = { type: 'Update', payload: { greeting: 'Hi' } }
       const willMountAction = { type: 'Update', payload: { greeting: 'Hiya' } }
       const renderAction = { type: 'Update', payload: { greeting: 'Hey' } }