fix: fix error handling in loadComponents (#87)

Author: damassi

src/loadComponents.js

@@ -10,29 +10,26 @@ function loadState(rootState) {
       const component = componentTracker.get(state.id)
 
       if (!component) {
-        console.warn(
+        console.warn( // eslint-disable-line
           'loadable-component client modules:',
           componentTracker.getAll(),
         )
-        console.warn(
+        console.warn( // eslint-disable-line
           'loadable-component server modules:',
           window[LOADABLE_STATE],
         )
-        throw new Error(
-          `loadable-components: module "${
-            state.id
-          }" is not found, client and server modules are not sync. You are probably not using the same resolver on server and client.`,
-        )
+
+        return Promise.reject(new Error(`loadable-components: module "${
+          state.id
+        }" is not found, client and server modules are not sync. You are probably not using the same resolver on server and client.`))
       }
 
       const getLoadable = component[LOADABLE]
 
       if (typeof getLoadable !== 'function') {
-        throw new Error(
-          `loadable-components: module "${
-            state.id
-          }" is not a loadable component, please verify your SSR setup`,
-        )
+        return Promise.reject(new Error(`loadable-components: module "${
+          state.id
+        }" is not a loadable component, please verify your SSR setup`))
       }
 
       return getLoadable()
@@ -44,18 +41,15 @@ function loadState(rootState) {
 
 function loadComponents() {
   if (typeof window === 'undefined') {
-    throw new Error(
-      'loadable-components: `loadComponents` must be called client-side: `window` is undefined',
-    )
+    return Promise.reject(new Error('loadable-components: `loadComponents` must ' +
+      'be called client-side: `window` is undefined'))
   }
 
   const state = window[LOADABLE_STATE]
   if (!state) {
-    throw new Error(
-      'loadable-components state not found. ' +
-        'You have a problem server-side. ' +
-        'Please verify that you have called `loadableState.getScriptTag()` server-side.',
-    )
+    return Promise.reject(new Error('loadable-components state not found. ' +
+      'You have a problem server-side. ' +
+      'Please verify that you have called `loadableState.getScriptTag()` server-side.'))
   }
 
   return loadState(state)

src/loadComponents.test.js

@@ -10,6 +10,7 @@ describe('loadComponents', () => {
   let Component3
 
   beforeEach(() => {
+    global.console.warn = jest.fn() // hide logs
     Component1 = loadable(async () => () => null)
     jest.spyOn(Component1, 'load')
     Component2 = loadable(async () => () => null)
@@ -24,21 +25,49 @@ describe('loadComponents', () => {
     }
   })
 
-  it('should load all components', async () => {
-    await loadComponents()
-    expect(Component1.load).toHaveBeenCalled()
-    expect(Component2.load).toHaveBeenCalled()
-    expect(Component3.load).toHaveBeenCalled()
+  it('rejects when no LOADABLE_STATE', async () => {
+    delete window[LOADABLE_STATE]
+
+    expect.assertions(1)
+    try {
+      await loadComponents()
+    } catch (error) {
+      expect(error.message).toMatch(/loadable-components state not found/)
+    }
   })
 
-  it('should handle no LOADABLE_STATE', async () => {
-    delete window[LOADABLE_STATE]
+  it('rejects when no component is found in componentTracker', async () => {
+    window[LOADABLE_STATE] = {
+      children: [{ id: null } ]
+    }
+
     expect.assertions(1)
+    try {
+      await loadComponents()
+    } catch (error) {
+      expect(error.message).toMatch(/loadable-components: module "null" is not found/)
+    }
+  })
 
+  it('rejects when found component is not a function', async () => {
+    const BadComponent = -1
+    const badId = componentTracker.track(BadComponent, ['./BadComponent'])
+    window[LOADABLE_STATE] = {
+      children: [{ id: badId } ]
+    }
+
+    expect.assertions(1)
     try {
       await loadComponents()
-    } catch (err) {
-      expect(err.message).toMatch(/loadable-components state not found/)
+    } catch (error) {
+      expect(error.message).toMatch(/loadable-components: module ".\/BadComponent" is not a loadable component/)
     }
   })
+
+  it('should load all components', async () => {
+    await loadComponents()
+    expect(Component1.load).toHaveBeenCalled()
+    expect(Component2.load).toHaveBeenCalled()
+    expect(Component3.load).toHaveBeenCalled()
+  })
 })