docs: re-enable addon-jest with Vite workaround

storybookjs/storybook#15391
nl-design-system · Sep 17, 2023 · dba64dd · dba64dd
1 parent 9ecf34b
commit dba64dd
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 5 deletions.
diff --git a/packages/storybook-react/config/main.ts b/packages/storybook-react/config/main.ts
@@ -12,7 +12,7 @@ const config: StorybookConfig = {
     '@storybook/addon-a11y',
     'storybook-addon-pseudo-states',
     '@storybook/preset-scss',
-    // '@storybook/addon-jest',
+    '@storybook/addon-jest',
     '@etchteam/storybook-addon-status/register',
     'storybook-addon-themes',
   ],
@@ -28,6 +28,20 @@ const config: StorybookConfig = {
   docs: {
     autodocs: true,
   },
+  async viteFinal(config) {
+    // Workaround for `@storybook/addon-jest` with Vite
+    // https://github.com/storybookjs/storybook/issues/14856#issuecomment-1262333250
+    if (config.resolve) {
+      config.resolve = {
+        ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          path: require.resolve('path-browserify'),
+        },
+      };
+    }
+    return config;
+  },
 };
 
 export default config;
diff --git a/packages/storybook-react/config/preview.tsx b/packages/storybook-react/config/preview.tsx
@@ -1,20 +1,21 @@
+import { withTests } from '@storybook/addon-jest';
 import { Preview } from '@storybook/react';
+import results from '@utrecht/component-library-react/dist/.jest-test-results.json';
 import { addonStatus } from '@utrecht/storybook-helpers/src/addon-status';
 import { addonThemes } from '@utrecht/storybook-helpers/src/addon-themes';
 import { addonViewport } from '@utrecht/storybook-helpers/src/addon-viewport';
-// import { withTests } from '@storybook/addon-jest';
-// import results from '@utrecht/component-library-react/dist/.jest-test-results.json';
 import React from 'react';
 import '@utrecht/design-tokens/dist/index.css';
 import '@utrecht/storybook-helpers/src/storybook-docs.scss';
 import '@nl-design-system-unstable/amsterdam-design-tokens/dist/index.css';
 import '@nl-design-system-unstable/rotterdam-design-tokens/dist/index.css';
 import '@gemeente-denhaag/design-tokens-components/dist/theme/index.css';
-
+console.log(results);
 const preview: Preview = {
   decorators: [
     (Story: any) => <div className="utrecht-document">{Story()}</div>,
-    // withTests({ results }),
+    ///
+    withTests({ results }),
   ],
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },

diff --git a/packages/storybook-vue/config/main.ts b/packages/storybook-vue/config/main.ts
@@ -22,6 +22,20 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
+  async viteFinal(config) {
+    // Workaround for `@storybook/addon-jest` with Vite
+    // https://github.com/storybookjs/storybook/issues/14856#issuecomment-1262333250
+    if (config.resolve) {
+      config.resolve = {
+        ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          path: require.resolve('path-browserify'),
+        },
+      };
+    }
+    return config;
+  },
 };
 
 export default config;
diff --git a/packages/storybook-vue/config/preview.tsx b/packages/storybook-vue/config/preview.tsx
@@ -1,5 +1,7 @@
+import { withTests } from '@storybook/addon-jest';
 import { Preview } from '@storybook/vue3';
 import { Document } from '@utrecht/component-library-vue';
+import results from '@utrecht/component-library-vue/dist/.jest-test-results.json';
 import { addonStatus } from '@utrecht/storybook-helpers/dist/addon-status';
 import { addonViewport } from '@utrecht/storybook-helpers/dist/addon-viewport';
 import { defineCustomElements } from '@utrecht/web-component-library-stencil/loader';
@@ -18,6 +20,7 @@ const preview: Preview = {
       components: { Document, story },
       template: '<Document class="utrecht-theme"><story /></Document>',
     }),
+    withTests({ results }),
   ],
   parameters: {
     ...addonStatus,