Fix incorrect babel config file reading

app/react/src/server/babel_config.js

@@ -66,11 +66,19 @@ export default function(configDir) {
   }
 
   const finalConfig = babelConfig || defaultConfig;
-  finalConfig.plugins = finalConfig.plugins || [];
-  finalConfig.plugins.push([
-    require.resolve('babel-plugin-react-docgen'),
-    { DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES' },
-  ]);
+  // Ensure plugins are defined or fallback to an array to avoid empty values.
+  const babelConfigPlugins = finalConfig.plugins || [];
+  const extraPlugins = [
+    [
+      require.resolve('babel-plugin-react-docgen'),
+      {
+        DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
+      },
+    ],
+  ];
+  // If `babelConfigPlugins` is not an `Array`, calling `concat` will inject it
+  // as a single value, if it is an `Array` it will be spreaded.
+  finalConfig.plugins = [].concat(babelConfigPlugins, extraPlugins);
 
   return finalConfig;
 }

app/react/src/server/babel_config.test.js

@@ -0,0 +1,90 @@
+import mock from 'mock-fs';
+import loadBabelConfig from './babel_config';
+
+describe('babel_config', () => {
+  // As the 'fs' is going to be mocked, let's call require.resolve
+  // so the require.cache has the correct route to the file.
+  // In fact let's use it in the tests :)
+  const babelPluginReactDocgenPath = require.resolve('babel-plugin-react-docgen');
+
+  it('should return the config with the extra plugins when `plugins` is an array.', () => {
+    // Mock a simple `.babelrc` config file.
+    mock({
+      '.babelrc': `{
+        "presets": [
+          "es2015",
+          "foo-preset"
+        ],
+        "plugins": [
+          "foo-plugin"
+        ]
+      }`,
+    });
+
+    const config = loadBabelConfig('.foo');
+
+    expect(config.plugins).toEqual([
+      'foo-plugin',
+      [
+        babelPluginReactDocgenPath,
+        {
+          DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
+        },
+      ],
+    ]);
+
+    mock.restore();
+  });
+
+  it('should return the config with the extra plugins when `plugins` is not an array.', () => {
+    // Mock a `.babelrc` config file with plugins key not being an array.
+    mock({
+      '.babelrc': `{
+        "presets": [
+          "es2015",
+          "foo-preset"
+        ],
+        "plugins": "bar-plugin"
+      }`,
+    });
+
+    const config = loadBabelConfig('.bar');
+
+    expect(config.plugins).toEqual([
+      'bar-plugin',
+      [
+        babelPluginReactDocgenPath,
+        {
+          DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
+        },
+      ],
+    ]);
+
+    mock.restore();
+  });
+
+  it('should return the config only with the extra plugins when `plugins` is not present.', () => {
+    // Mock a `.babelrc` config file with no plugins key.
+    mock({
+      '.babelrc': `{
+        "presets": [
+          "es2015",
+          "foo-preset"
+        ]
+      }`,
+    });
+
+    const config = loadBabelConfig('.biz');
+
+    expect(config.plugins).toEqual([
+      [
+        babelPluginReactDocgenPath,
+        {
+          DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
+        },
+      ],
+    ]);
+
+    mock.restore();
+  });
+});