[test] Fix crashes in Dev Overlay Stories

Author: eps1lon

packages/next/.storybook/test-runner.ts

@@ -15,6 +15,9 @@ const config: TestRunnerConfig = {
       detailedReportOptions: {
         html: true,
       },
+      // Verbose prints additional logs in the terminal on passing tests taking up space
+      // that's needed by failed tests.
+      verbose: false,
     })
   },
 }

packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-layout/error-overlay-layout.stories.tsx

@@ -15,6 +15,10 @@ type Story = StoryObj<typeof ErrorOverlayLayout>
 
 export const Default: Story = {
   args: {
+    error: {
+      name: 'ModuleNotFoundError',
+      message: "Cannot find module './missing-module'",
+    },
     errorType: 'Build Error',
     errorMessage: 'Failed to compile',
     errorCode: 'E001',

packages/next/src/next-devtools/dev-overlay/components/hydration-diff/diff-view.tsx

@@ -57,7 +57,7 @@ export function PseudoHtmlDiff({
 
   const htmlComponents = useMemo(() => {
     const componentStacks: React.ReactNode[] = []
-    const reactComponentDiffLines = reactOutputComponentDiff!.split('\n')
+    const reactComponentDiffLines = reactOutputComponentDiff.split('\n')
     reactComponentDiffLines.forEach((line, index) => {
       const isDiffLine = line[0] === '+' || line[0] === '-'
       const isHighlightedLine = line[0] === '>'

packages/next/src/next-devtools/dev-overlay/container/errors.stories.tsx

@@ -156,6 +156,7 @@ const runtimeErrors: ReadyRuntimeError[] = [
 
 export const Default: Story = {
   args: {
+    getSquashedHydrationErrorDetails: () => null,
     runtimeErrors,
     versionInfo: {
       installed: '15.0.0',
@@ -188,6 +189,7 @@ export const VeryLongErrorMessage: Story = {
 
 export const WithHydrationWarning: Story = {
   args: {
+    ...Default.args,
     runtimeErrors: [
       {
         id: 1,

packages/next/src/next-devtools/dev-overlay/container/runtime-error/component-stack-pseudo-html.stories.tsx

@@ -15,22 +15,17 @@ type Story = StoryObj<typeof PseudoHtmlDiff>
 
 export const TextMismatch: Story = {
   args: {
-    reactOutputComponentDiff: undefined,
-  },
-}
-
-export const TextInTagMismatch: Story = {
-  args: {
-    reactOutputComponentDiff: undefined,
+    reactOutputComponentDiff: `<Page>
+  <Layout>
+    <div>
+-     Server content
++     Client content`,
   },
 }
 
 export const ReactUnifiedMismatch: Story = {
   args: {
-    reactOutputComponentDiff: `<Page>
-  <Layout>
-    <div>
--     <p>Server content</p>
-+     <p>Client content</p>`,
+    reactOutputComponentDiff:
+      '<Page>\n  <Layout>\n    <div>asd\n-     <p>Server content</p>\n+     <p>Client content</p>',
   },
 }