fixed storyshots with react-diff-view

scm-ui/ui-components/src/repos/Diff.stories.tsx

@@ -16,14 +16,17 @@ storiesOf("Diff", module)
   .add("Collapsed", () => <Diff diff={diffFiles} defaultCollapse={true} />)
   .add("File Controls", () => <Diff diff={diffFiles} fileControlFactory={() => <Button>Custom Control</Button>} />)
   .add("File Annotation", () => (
-    <Diff diff={diffFiles} fileAnnotationFactory={file => [<p>Custom File annotation for {file.newPath}</p>]} />
+    <Diff
+      diff={diffFiles}
+      fileAnnotationFactory={file => [<p key={file.newPath}>Custom File annotation for {file.newPath}</p>]}
+    />
   ))
   .add("Line Annotation", () => (
     <Diff
       diff={diffFiles}
       annotationFactory={ctx => {
         return {
-          N2: [<p>Line Annotation</p>]
+          N2: <p key="N2">Line Annotation</p>
         };
       }}
     />

scm-ui/ui-components/src/storyshots.test.ts

@@ -1,6 +1,22 @@
 import path from "path";
-import initStoryshots from "@storybook/addon-storyshots";
+import initStoryshots, { snapshotWithOptions } from "@storybook/addon-storyshots";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const createNodeMock = (element: any) => {
+  if (element.type === "tr") {
+    return {
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      querySelector: (selector: string) => {}
+    };
+  }
+  return null;
+};
 
 initStoryshots({
-  configPath: path.resolve(__dirname, "..", ".storybook")
+  configPath: path.resolve(__dirname, "..", ".storybook"),
+  // fix snapshot tests with react-diff-view which uses a ref on tr
+  // @see https://github.com/storybookjs/storybook/pull/1090
+  test: snapshotWithOptions({
+    createNodeMock
+  })
 });