Fixes bug where a browser-only implementation was executing behaviour meant for server.

Author: ctrlplusb

src/__tests__/__snapshots__/integration.test.js.snap

@@ -1,47 +1,6 @@
-exports[`integration works 1`] = `
-<AsyncComponentProvider
-  execContext={
-    Object {
-      "getComponent": [Function],
-      "getNextId": [Function],
-      "getResolved": [Function],
-      "registerComponent": [Function],
-    }
-  }>
-  <AsyncBob>
-    <Bob>
-      <div>
-        <div>
-          <AsyncBobTwo>
-            <Bob>
-              <div>
-                <span>
-                  In Render.
-                </span>
-              </div>
-            </Bob>
-          </AsyncBobTwo>
-          <DeferredAsyncBob />
-          <BoundaryAsyncBob>
-            <Bob>
-              <div>
-                <span>
-                  In Boundary but outside an AsyncComponent, server render me!
-                </span>
-                <AsyncBobThree />
-              </div>
-            </Bob>
-          </BoundaryAsyncBob>
-        </div>
-      </div>
-    </Bob>
-  </AsyncBob>
-</AsyncComponentProvider>
-`;
-
-exports[`integration works 2`] = `"<div data-reactroot=\"\" data-reactid=\"1\" data-react-checksum=\"-636787408\"><div data-reactid=\"2\"><div data-reactid=\"3\"><span data-reactid=\"4\">In Render.</span></div><!-- react-empty: 5 --><div data-reactid=\"6\"><span data-reactid=\"7\">In Boundary but outside an AsyncComponent, server render me!</span><!-- react-empty: 8 --></div></div></div>"`;
+exports[`integration works 1`] = `"<div><div><div><span>In Render.</span></div><div><span>In Boundary but outside an AsyncComponent, server render me!</span></div></div></div>"`;
 
-exports[`integration works 3`] = `
+exports[`integration works 2`] = `
 <AsyncComponentProvider
   execContext={
     Object {
@@ -82,7 +41,7 @@ exports[`integration works 3`] = `
 </AsyncComponentProvider>
 `;
 
-exports[`integration works 4`] = `
+exports[`integration works 3`] = `
 <AsyncComponentProvider
   execContext={
     Object {

src/__tests__/integration.test.js

@@ -1,7 +1,7 @@
 /* @flow */
 
 import React from 'react';
-import { renderToString } from 'react-dom/server';
+import { renderToStaticMarkup } from 'react-dom/server';
 import { mount } from 'enzyme';
 import { createAsyncComponent, withAsyncComponents } from '../';
 import { STATE_IDENTIFIER } from '../constants';
@@ -63,14 +63,18 @@ describe('integration', () => {
     delete global.window[STATE_IDENTIFIER];
   });
 
-  it('works', () =>
+  it('works', () => {
+    const windowTemp = global.window;
+    // we have to delete the window to emulate a server only environment
+    delete global.window;
+
     // "Server" side render...
-    withAsyncComponents(app)
+    return withAsyncComponents(app)
       .then(({ appWithAsyncComponents, state, STATE_IDENTIFIER: STATE_ID }) => {
-        expect(mount(appWithAsyncComponents)).toMatchSnapshot();
-        const serverString = renderToString(appWithAsyncComponents);
+        const serverString = renderToStaticMarkup(appWithAsyncComponents);
         expect(serverString).toMatchSnapshot();
-        // Attach the state to the "window" for the client
+        // Restore the window and attach the state to the "window" for the client
+        global.window = windowTemp;
         global.window[STATE_ID] = state;
         return serverString;
       })
@@ -80,7 +84,7 @@ describe('integration', () => {
           .then(({ appWithAsyncComponents }) => {
             const clientRenderWrapper = mount(appWithAsyncComponents);
             expect(clientRenderWrapper).toMatchSnapshot();
-            expect(renderToString(appWithAsyncComponents)).toEqual(serverHTML);
+            expect(renderToStaticMarkup(appWithAsyncComponents)).toEqual(serverHTML);
             return clientRenderWrapper;
           })
           // Now give the client side components time to resolve
@@ -91,6 +95,6 @@ describe('integration', () => {
           .then(clientRenderWrapper =>
             expect(clientRenderWrapper).toMatchSnapshot(),
           ),
-      ),
-  );
+      );
+  });
 });

src/withAsyncComponents.js

@@ -32,7 +32,8 @@ function createExecContext() {
 export default function withAsyncComponents(app : React$Element) {
   const execContext = createExecContext();
 
-  const rehydrateState = typeof window !== 'undefined'
+  const isBrowser = typeof window !== 'undefined';
+  const rehydrateState = isBrowser
     && typeof window[STATE_IDENTIFIER] !== 'undefined'
     ? window[STATE_IDENTIFIER]
     : null;
@@ -43,6 +44,12 @@ export default function withAsyncComponents(app : React$Element) {
     </AsyncComponentProvider>
   );
 
+  if (isBrowser && !rehydrateState) {
+    return Promise.resolve({
+      appWithAsyncComponents,
+    });
+  }
+
   const doWalk = (el, ctx = {}, fetchRoot = false) => {
     const resolvers = [];