fix: deps update

.storybook/main.ts

@@ -41,7 +41,7 @@ module.exports = {
     'storybook-addon-designs',
   ],
   features: {
-    storyStoreV7: true,
+    storyStoreV7: false, // FIXME disabled for storyshots to work properly
   },
   core: {
     builder: 'webpack5',

package.json

@@ -17,22 +17,21 @@
     "@commitlint/config-conventional": "^11.0.0",
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.8.1",
-    "@mdx-js/react": "^1.6.22",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/git": "^9.0.0",
-    "@storybook/addon-a11y": "^6.5.7",
-    "@storybook/addon-actions": "^6.5.7",
-    "@storybook/addon-docs": "^6.5.7",
+    "@storybook/addon-a11y": "^6.5.16",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-docs": "^6.5.16",
     "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-links": "^6.5.7",
-    "@storybook/addon-storyshots": "6.3.13",
-    "@storybook/addon-storysource": "^6.5.7",
-    "@storybook/addon-viewport": "^6.5.7",
-    "@storybook/addons": "^6.5.7",
-    "@storybook/builder-webpack5": "^6.5.7",
-    "@storybook/manager-webpack5": "^6.5.7",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addon-storyshots": "6.5.16",
+    "@storybook/addon-storysource": "^6.5.16",
+    "@storybook/addon-viewport": "^6.5.16",
+    "@storybook/addons": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/react": "^6.5.7",
+    "@storybook/react": "^6.5.16",
     "@svgr/webpack": "^5.4.0",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
@@ -82,7 +81,7 @@
     "react-router-dom": "^5.3.4",
     "react-test-renderer": "^18.2.0",
     "rimraf": "^3.0.2",
-    "storybook-addon-designs": "^6.2.1",
+    "storybook-addon-designs": "^6.3.1",
     "storybook-addon-pseudo-states": "^1.14.0",
     "styled-components": "^5.2.0",
     "ts-jest": "^26.5.6",
@@ -141,6 +140,9 @@
     "documentation:generate": "typedoc --out typeDocs src",
     "documentation:up": "node server/docs-server.js"
   },
+  "resolutions": {
+    "react-test-renderer": "18.1.0"
+  },
   "jest": {
     "collectCoverageFrom": [
       "src/**/*.{ts,tsx}",

src/storybook.test.ts

@@ -1,10 +1,9 @@
+import path from 'path';
+
 import { createSerializer } from '@emotion/jest';
-import initStoryshots, { Stories2SnapsConverter } from '@storybook/addon-storyshots';
+import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
 import { addSerializer } from 'jest-specific-snapshot';
 import { ReactElement } from 'react';
-import renderer from 'react-test-renderer';
-
-import { crawlTreeChildrenProps } from './utils/storyshots';
 
 /** Every time we run the tests, the dynamic attribute values that are generated for each element cause tests to fail.
  * A quick solution is to update snapshots every time we run the tests (jest -u) and then push the updated snapshots to git.
@@ -37,16 +36,19 @@ function createNodeMock(element: ReactElement) {
 }
 
 initStoryshots({
+  framework: 'react',
+  integrityOptions: { cwd: __dirname },
   storyNameRegex: /^(?!.*DontTest).*/,
-  test: ({ story, context }) => {
-    const converter = new Stories2SnapsConverter();
-    const options = { createNodeMock };
-
-    const snapshotFilename = converter.getSnapshotFileName(context);
-    const storyElement = story.render(context);
-    const tree = renderer.create(storyElement, options).toJSON();
-    crawlTreeChildrenProps(tree);
-
-    expect(tree).toMatchSpecificSnapshot(snapshotFilename);
+  test: (story) => {
+    // FIXME Workaround for https://github.com/storybookjs/storybook/issues/16692
+    const fileName = path.resolve(__dirname, '..', story.context.fileName);
+
+    return multiSnapshotWithOptions({
+      createNodeMock,
+    })({
+      ...story,
+      options: {},
+      context: { ...story.context, fileName },
+    });
   },
 });

src/utils/helpers.ts

@@ -4,7 +4,10 @@ import { TestId } from 'utils/types';
 
 /** A function that generates a unique id by making a value randomly based on time also */
 export const generateUniqueID = (elementType = ''): string =>
-  elementType + '_' + (Date.now() + Math.random()).toString(36).substr(2, 9);
+  elementType +
+  (process.env.NODE_ENV !== 'test'
+    ? '_' + (Date.now() + Math.random()).toString(36).substr(2, 9)
+    : '');
 
 /** A function that takes two strings to generate a test data id by combining them if both exist */
 export const generateTestDataId = (defaultId: TestId, customId?: TestId) =>

tsconfig.json

@@ -33,7 +33,7 @@
     "scripts",
     "typeDocs",
     "server",
-    "**/storyUtils",
+    "src/components/storyUtils",
     "**/__snapshots__",
     "**/*.stories.tsx",
     "**/*.stories.mdx",