Merge pull request #28222 from storybookjs/norbert/happy-dom

Build: Migrate to `happy-dom`, use `vitest` `node-environment` by default

code/.eslintrc.js

@@ -58,14 +58,7 @@ module.exports = {
       },
     },
     {
-      files: ['**/template/**/*'],
-      rules: {
-        'import/no-extraneous-dependencies': 'off',
-      },
-    },
-    {
-      // this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
-      files: ['**/addons/docs/**/*'],
+      files: ['**/template/**/*', '**/vitest.config.ts', '**/addons/docs/**/*'],
       rules: {
         'import/no-extraneous-dependencies': 'off',
       },

code/addons/a11y/src/components/A11YPanel.test.tsx

@@ -1,3 +1,5 @@
+// @vitest-environment happy-dom
+
 import { describe, beforeEach, afterEach, it, expect, vi } from 'vitest';
 import React from 'react';
 import { render, waitFor, fireEvent, act, cleanup } from '@testing-library/react';

code/addons/a11y/src/components/A11yContext.test.tsx

@@ -1,3 +1,5 @@
+// @vitest-environment happy-dom
+
 import { describe, beforeEach, afterEach, it, expect, vi } from 'vitest';
 import * as React from 'react';
 import type { AxeResults } from 'axe-core';

code/addons/a11y/src/components/Report/HighlightToggle.test.tsx

@@ -1,3 +1,5 @@
+// @vitest-environment happy-dom
+
 import { describe, it, expect, afterEach, vi } from 'vitest';
 import React from 'react';
 import { render, fireEvent, cleanup } from '@testing-library/react';

code/addons/a11y/vitest.config.ts

@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );

code/addons/actions/vitest.config.ts

@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );

code/addons/backgrounds/vitest.config.ts

@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );

code/addons/controls/vitest.config.ts

@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );

code/addons/docs/vitest.config.ts

@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );

code/addons/essentials/vitest.config.ts

@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );

code/addons/gfm/vitest.config.ts

@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );

code/addons/highlight/vitest.config.ts

@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );

code/addons/interactions/vitest.config.ts

@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );

code/addons/jest/vitest.config.ts

@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );

code/addons/links/src/react/components/link.test.tsx

@@ -1,3 +1,5 @@
+// @vitest-environment happy-dom
+
 /// <reference types="@testing-library/jest-dom" />;
 import { describe, it, expect, afterEach, vi } from 'vitest';
 import React from 'react';

code/addons/links/src/utils.test.ts

@@ -1,3 +1,5 @@
+// @vitest-environment happy-dom
+
 import { describe, beforeAll, beforeEach, it, expect, vi } from 'vitest';
 import { addons } from '@storybook/preview-api';
 import { SELECT_STORY } from '@storybook/core-events';

code/addons/links/vitest.config.ts

@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );

code/addons/measure/vitest.config.ts

@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );

code/addons/onboarding/vitest.config.ts

@@ -4,6 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: { environment: 'jsdom' },
+    // Add custom config here
   })
 );

code/addons/outline/vitest.config.ts

@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );

code/addons/storysource/vitest.config.ts

@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );

code/addons/themes/vitest.config.ts

@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );

code/addons/toolbars/vitest.config.ts

@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );

code/addons/viewport/vitest.config.ts

@@ -4,8 +4,6 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'jsdom',
-    },
+    // Add custom config here
   })
 );

code/builders/builder-manager/vitest.config.ts

@@ -1,12 +1,10 @@
-/* eslint-disable import/no-extraneous-dependencies */
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { defineConfig, mergeConfig } from 'vitest/config';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'node',
-    },
+    // Add custom config here
   })
 );

code/builders/builder-vite/vitest.config.ts

@@ -1,12 +1,10 @@
-/* eslint-disable import/no-extraneous-dependencies */
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { defineConfig, mergeConfig } from 'vitest/config';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'node',
-    },
+    // Add custom config here
   })
 );

code/builders/builder-webpack5/vitest.config.ts

@@ -1,12 +1,10 @@
-/* eslint-disable import/no-extraneous-dependencies */
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { defineConfig, mergeConfig } from 'vitest/config';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'node',
-    },
+    // Add custom config here
   })
 );

code/frameworks/angular/package.json

@@ -80,7 +80,6 @@
     "@types/cross-spawn": "^6.0.2",
     "@types/tmp": "^0.2.3",
     "cross-spawn": "^7.0.3",
-    "jsdom": "^23.0.1",
     "tmp": "^0.2.1",
     "typescript": "^5.3.2",
     "webpack": "5",

code/frameworks/angular/src/builders/build-storybook/index.spec.ts

@@ -1,7 +1,3 @@
-/*
- * @vitest-environment node
- */
-
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { vi, describe, beforeEach, expect, it, afterEach } from 'vitest';
 import { Architect, createBuilder } from '@angular-devkit/architect';

code/frameworks/angular/src/builders/start-storybook/index.spec.ts

@@ -1,7 +1,3 @@
-/*
- * @vitest-environment node
- */
-
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { vi, describe, expect, it, beforeEach, afterEach } from 'vitest';
 import { Architect, createBuilder } from '@angular-devkit/architect';

code/frameworks/angular/src/client/angular-beta/RendererFactory.test.ts

@@ -1,3 +1,5 @@
+// @vitest-environment happy-dom
+
 import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { Component, ɵresetJitOptions } from '@angular/core';
 import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';

code/frameworks/angular/src/client/angular-beta/StorybookModule.test.ts

@@ -1,3 +1,5 @@
+// @vitest-environment happy-dom
+
 import { NgModule, Component, EventEmitter, Input, Output } from '@angular/core';
 import { describe, expect, it } from 'vitest';
 

code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.test.ts

@@ -1,3 +1,5 @@
+// @vitest-environment happy-dom
+
 import { Subject, lastValueFrom } from 'rxjs';
 import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
 

code/frameworks/angular/src/client/angular-beta/utils/NgComponentAnalyzer.test.ts

@@ -1,3 +1,5 @@
+// @vitest-environment happy-dom
+
 import {
   Type,
   Component,

code/frameworks/angular/vitest.config.ts

@@ -1,12 +1,12 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import { defineConfig, mergeConfig } from 'vitest/config';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
-export default defineConfig(({ mode }) => {
-  return mergeConfig(vitestCommonConfig, {
+export default mergeConfig(
+  vitestCommonConfig,
+  defineConfig({
+    // Add custom config here
     test: {
       setupFiles: ['src/test-setup.ts'],
-      environment: 'jsdom',
     },
-  });
-});
+  })
+);

code/frameworks/ember/vitest.config.ts

@@ -1,12 +1,9 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import { defineConfig, mergeConfig } from 'vitest/config';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'node',
-    },
+    // Add custom config here
   })
 );

code/frameworks/html-webpack5/vitest.config.ts

@@ -1,12 +1,10 @@
-/* eslint-disable import/no-extraneous-dependencies */
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { defineConfig, mergeConfig } from 'vitest/config';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'node',
-    },
+    // Add custom config here
   })
 );

code/frameworks/nextjs/vitest.config.ts

@@ -1,12 +1,10 @@
-/* eslint-disable import/no-extraneous-dependencies */
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { defineConfig, mergeConfig } from 'vitest/config';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'node',
-    },
+    // Add custom config here
   })
 );

code/frameworks/preact-vite/vitest.config.ts

@@ -1,12 +1,10 @@
-/* eslint-disable import/no-extraneous-dependencies */
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { defineConfig, mergeConfig } from 'vitest/config';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    test: {
-      environment: 'node',
-    },
+    // Add custom config here
   })
 );