Merge pull request #28088 from storybookjs/kasper/display-vitest-errors

Test: Display toHaveBeenCalledWith expected / received values on failure
(cherry picked from commit ea73dac)

code/addons/interactions/src/components/Interaction.tsx

@@ -5,12 +5,12 @@ import { styled, typography } from '@storybook/theming';
 import { transparentize } from 'polished';
 
 import { ListUnorderedIcon } from '@storybook/icons';
-import { Expected, MatcherResult, Received } from './MatcherResult';
+import { MatcherResult } from './MatcherResult';
 import { MethodCall } from './MethodCall';
 import { StatusIcon } from './StatusIcon';
 
 import type { Controls } from './InteractionsPanel';
-import { isJestError } from '../utils';
+import { isChaiError, isJestError } from '../utils';
 
 const MethodCallWrapper = styled.div(() => ({
   fontFamily: typography.fonts.mono,
@@ -117,33 +117,23 @@ export const Exception = ({ exception }: { exception: Call['exception'] }) => {
   if (isJestError(exception)) {
     return <MatcherResult {...exception} />;
   }
+  if (isChaiError(exception)) {
+    return (
+      <RowMessage>
+        <MatcherResult
+          message={`${exception.message}${exception.diff ? `\n\n${exception.diff}` : ''}`}
+          style={{ padding: 0 }}
+        />
+        <p>See the full stack trace in the browser console.</p>
+      </RowMessage>
+    );
+  }
+
   const paragraphs = exception.message.split('\n\n');
   const more = paragraphs.length > 1;
   return (
     <RowMessage>
       <pre>{paragraphs[0]}</pre>
-      {exception.showDiff && exception.diff ? (
-        <>
-          <br />
-          <MatcherResult message={exception.diff} style={{ padding: 0 }} />
-        </>
-      ) : (
-        <pre>
-          <br />
-          {exception.expected && (
-            <>
-              Expected: <Expected value={exception.expected} />
-              <br />
-            </>
-          )}
-          {exception.actual && (
-            <>
-              Received: <Received value={exception.actual} />
-              <br />
-            </>
-          )}
-        </pre>
-      )}
       {more && <p>See the full stack trace in the browser console.</p>}
     </RowMessage>
   );

code/addons/interactions/src/components/InteractionsPanel.stories.tsx

@@ -120,11 +120,11 @@ export const Failed: Story = {
   },
 };
 
-export const NoInteractions: Story = {
-  args: {
-    interactions: [],
-  },
-};
+// export const NoInteractions: Story = {
+//   args: {
+//     interactions: [],
+//   },
+// };
 
 export const CaughtException: Story = {
   args: {

code/addons/interactions/src/components/MatcherResult.stories.tsx

@@ -29,53 +29,81 @@ export default {
 export const Expected = {
   args: {
     message: dedent`
-      expect(jest.fn()).lastCalledWith(...expected)
-
-      Expected: {"email": "michael@chromatic.com", "password": "testpasswordthatwontfail"}
-
-      Number of calls: 0
+      expected last "spy" call to have been called with [ { …(2) } ]
+      
+      - Expected: 
+      Array [
+        Object {
+          "email": "michael@chromatic.com",
+          "password": "testpasswordthatwontfail",
+        },
+      ]
+      
+      + Received: 
+      undefined
     `,
   },
 };
 
 export const ExpectedReceived = {
   args: {
     message: dedent`
-      expect(jest.fn()).toHaveBeenCalledWith(...expected)
-
-      Expected: called with 0 arguments
-      Received: {"email": "michael@chromatic.com", "password": "testpasswordthatwontfail"}
-
-      Number of calls: 1
+      expected last "spy" call to have been called with []
+      
+      - Expected
+      + Received
+      
+      - Array []
+      + Array [
+      +   Object {
+      +     "email": "michael@chromatic.com",
+      +     "password": "testpasswordthatwontfail",
+      +   },
+      + ]
     `,
   },
 };
 
 export const ExpectedNumberOfCalls = {
   args: {
     message: dedent`
-      expect(jest.fn()).toHaveBeenCalledTimes(expected)
-
-      Expected number of calls: 1
-      Received number of calls: 0
+      expected "spy" to not be called at all, but actually been called 1 times
+      
+      Received: 
+      
+        1st spy call:
+      
+          Array [
+            Object {
+              "email": "michael@chromatic.com",
+              "password": "testpasswordthatwontfail",
+            },
+          ]
+      
+      
+      Number of calls: 1
     `,
   },
 };
 
 export const Diff = {
   args: {
     message: dedent`
-      expect(jest.fn()).toHaveBeenCalledWith(...expected)
-
-      - Expected
-      + Received
-
-        Object {
-      -   "email": "michael@chromatic.com",
-      +   "email": "michael@chromaui.com",
-          "password": "testpasswordthatwontfail",
-        },
-
+      expected "spy" to be called with arguments: [ { …(2) } ]
+      
+      Received: 
+      
+        1st spy call:
+      
+        Array [
+          Object {
+      -     "email": "michael@chromaui.com",
+      +     "email": "michael@chromatic.com",
+            "password": "testpasswordthatwontfail",
+          },
+        ]
+      
+      
       Number of calls: 1
     `,
   },

code/addons/interactions/src/components/MatcherResult.tsx

@@ -85,7 +85,7 @@ export const MatcherResult = ({
         if (line.match(/^\s*- /)) {
           return [<Expected key={line + index} value={line} />, <br key={`br${index}`} />];
         }
-        if (line.match(/^\s*\+ /)) {
+        if (line.match(/^\s*\+ /) || line.match(/^Received: $/)) {
           return [<Received key={line + index} value={line} />, <br key={`br${index}`} />];
         }
 

code/ui/.storybook/main.ts

@@ -30,6 +30,10 @@ const allStories = [
     directory: '../../addons/onboarding/src',
     titlePrefix: '@addons/onboarding',
   },
+  {
+    directory: '../../addons/interactions/src',
+    titlePrefix: '@addons/interactions',
+  },
 ];
 
 /**