Next.js: Fix react-dom/test-utils aliasing

storybookjs · Sep 5, 2024 · 714913d · 714913d
1 parent b00a8ce
commit 714913d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/code/frameworks/nextjs/src/config/webpack.ts b/code/frameworks/nextjs/src/config/webpack.ts
@@ -20,6 +20,9 @@ export const configureConfig = async ({
   nextConfigPath?: string;
 }): Promise<NextConfig> => {
   const nextConfig = await resolveNextConfig({ nextConfigPath });
+  baseConfig.resolve ??= {};
+  baseConfig.resolve.alias ??= {};
+  const aliasConfig = baseConfig.resolve.alias;
 
   addScopedAlias(baseConfig, 'next/config');
   if (tryResolve('next/dist/compiled/react')) {
@@ -31,9 +34,19 @@ export const configureConfig = async ({
       'react-dom/test-utils',
       'next/dist/compiled/react-dom/cjs/react-dom-test-utils.production.js'
     );
+  } else {
+    const name = 'react-dom/test-utils';
+    if (Array.isArray(aliasConfig)) {
+      aliasConfig.push({
+        name,
+        alias: name,
+      });
+    } else {
+      aliasConfig[name] = name;
+    }
   }
   if (tryResolve('next/dist/compiled/react-dom')) {
-    addScopedAlias(baseConfig, 'react-dom$', 'next/dist/compiled/react-dom');
+    addScopedAlias(baseConfig, 'react-dom', 'next/dist/compiled/react-dom');
   }
 
   setupRuntimeConfig(baseConfig, nextConfig);

diff --git a/code/renderers/react/src/act-compat.ts b/code/renderers/react/src/act-compat.ts
@@ -8,8 +8,12 @@ declare const globalThis: {
   IS_REACT_ACT_ENVIRONMENT: boolean;
 };
 
-// @ts-expect-error act might not be available in some versions of React
-const reactAct = typeof React.act === 'function' ? React.act : DeprecatedReactTestUtils.act;
+const reactAct =
+  // @ts-expect-error act might not be available in some versions of React
+  typeof React.act === 'function'
+    ? // @ts-expect-error act might not be available in some versions of React
+      React.act
+    : DeprecatedReactTestUtils.act ?? (async (cb: () => Promise<void> | void) => cb());
 
 export function setReactActEnvironment(isReactActEnvironment: boolean) {
   globalThis.IS_REACT_ACT_ENVIRONMENT = isReactActEnvironment;