From 5ab9e09ee69f37f435d1b09df58d65b9d4ba7a56 Mon Sep 17 00:00:00 2001
From: "Daniel A.C. Martin" <daniel-ac-martin@users.noreply.github.com>
Date: Wed, 22 Jul 2020 15:01:12 +0100
Subject: [PATCH 1/2] Core: toRequireContext: recurse in more cases

`../base-dir/*/index.stories.jsx` will lead to `glob` being set to `*/index.stories.jsx` and so `glob.split('/').length` = 2.

With the existing code the `recursive` flag would _not_ be set and yet webpack will need to recurse into the directories in order to find any `index.stories.jsx` files that might exist within them.

Therefore, we should compare to 1 and not 2.

See: https://github.com/storybookjs/storybook/issues/11530#issuecomment-662465689
---
 lib/core/src/server/preview/to-require-context.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/core/src/server/preview/to-require-context.ts b/lib/core/src/server/preview/to-require-context.ts
index b64d87ad1be1..1e322fdf12a6 100644
--- a/lib/core/src/server/preview/to-require-context.ts
+++ b/lib/core/src/server/preview/to-require-context.ts
@@ -31,7 +31,7 @@ export const toRequireContext = (input: any) => {
     case typeof input === 'string': {
       const { base, glob } = globBase(fixedInput);
 
-      const recursive = glob.includes('**') || glob.split('/').length > 2;
+      const recursive = glob.includes('**') || glob.split('/').length > 1;
       const regex = makeRe(glob, { fastpaths: false, noglobstar: false, bash: false });
       const { source } = regex;
 

From 496b9b7e64d5f34baac0d6dc7bdadd2f4471d04c Mon Sep 17 00:00:00 2001
From: "Daniel A.C. Martin" <github@daniel-martin.co.uk>
Date: Wed, 22 Jul 2020 15:44:30 +0100
Subject: [PATCH 2/2] Core: Add tests for recursive flag

Adds some crude tests for when we expect to run webpack's
`require.context` in recursive mode.
---
 .../server/preview/to-require-context.test.js | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/lib/core/src/server/preview/to-require-context.test.js b/lib/core/src/server/preview/to-require-context.test.js
index 086f9ae46a9e..bd0b64756e92 100644
--- a/lib/core/src/server/preview/to-require-context.test.js
+++ b/lib/core/src/server/preview/to-require-context.test.js
@@ -4,6 +4,7 @@ import { toRequireContext } from './to-require-context';
 const testCases = [
   {
     glob: '**/*.stories.tsx',
+    recursive: true,
     validPaths: [
       './Icon.stories.tsx',
       './src/Icon.stories.tsx',
@@ -23,6 +24,7 @@ const testCases = [
   // INVALID GLOB
   {
     glob: '../src/stories/**/*.stories.(js|mdx)',
+    recursive: true,
     validPaths: [
       '../src/stories/components/Icon.stories.js',
       '../src/stories/Icon.stories.js',
@@ -41,6 +43,7 @@ const testCases = [
   },
   {
     glob: 'dirname/../stories/*.stories.*',
+    recursive: false,
     validPaths: [
       './dirname/../stories/App.stories.js',
       './dirname/../stories/addon-centered.stories.js',
@@ -49,6 +52,7 @@ const testCases = [
   },
   {
     glob: '../src/stories/**/@(*.stories.js|*.stories.mdx)',
+    recursive: true,
     validPaths: [
       '../src/stories/components/Icon.stories.js',
       '../src/stories/Icon.stories.js',
@@ -67,6 +71,7 @@ const testCases = [
   },
   {
     glob: '../src/stories/**/*.stories.+(js|mdx)',
+    recursive: true,
     validPaths: [
       '../src/stories/components/Icon.stories.js',
       '../src/stories/Icon.stories.js',
@@ -85,6 +90,7 @@ const testCases = [
   },
   {
     glob: '../src/stories/**/*.stories.*(js|mdx)',
+    recursive: true,
     validPaths: [
       '../src/stories/components/Icon.stories.js',
       '../src/stories/Icon.stories.js',
@@ -104,6 +110,7 @@ const testCases = [
   // DUMB GLOB
   {
     glob: '../src/stories/**/*.stories.[tj]sx',
+    recursive: true,
     validPaths: [
       '../src/stories/components/Icon.stories.jsx',
       '../src/stories/Icon.stories.jsx',
@@ -120,8 +127,23 @@ const testCases = [
       '../src/stories/components/Icon/Icon.tsx',
     ],
   },
+  {
+    glob: '../components/*.stories.js',
+    recursive: false,
+    validPaths: ['../components/Icon.stories.js'],
+    invalidPaths: [
+      '../components/icon/node_modules/icon/Icon.stories.js',
+      './stories.js',
+      './src/stories/Icon.stories.js',
+      './Icon.stories.js',
+      '../src/Icon.stories.mdx',
+      '../src/stories/components/Icon/Icon.stories.ts',
+      '../src/stories/components/Icon/Icon.mdx',
+    ],
+  },
   {
     glob: '../components/*/*.stories.js',
+    recursive: true,
     validPaths: ['../components/icon/Icon.stories.js'],
     invalidPaths: [
       '../components/icon/node_modules/icon/Icon.stories.js',
@@ -135,6 +157,7 @@ const testCases = [
   },
   {
     glob: '../components/*/stories/*.js',
+    recursive: true,
     validPaths: ['../components/icon/stories/Icon.js'],
     invalidPaths: [
       '../components/icon/node_modules/icon/stories/Icon.js',
@@ -149,9 +172,9 @@ const testCases = [
 ];
 
 describe('toRequireContext', () => {
-  testCases.forEach(({ glob, validPaths, invalidPaths }) => {
+  testCases.forEach(({ glob, recursive, validPaths, invalidPaths }) => {
     it(`matches only suitable paths - ${glob}`, () => {
-      const { path: base, match } = toRequireContext(glob);
+      const { path: base, recursive: willRecurse, match } = toRequireContext(glob);
 
       const regex = new RegExp(match);
 
@@ -169,6 +192,7 @@ describe('toRequireContext', () => {
 
       expect(isNotMatchedForValidPaths).toEqual([]);
       expect(isMatchedForInvalidPaths).toEqual([]);
+      expect(willRecurse).toEqual(recursive);
     });
   });
 });