Merge pull request #29676 from storybookjs/yann/fix-addon-test-setup-…

…windows

Addon Test: Use pathe for better windows support

code/addons/test/package.json

@@ -98,6 +98,7 @@
     "execa": "^8.0.1",
     "find-up": "^7.0.0",
     "formik": "^2.2.9",
+    "pathe": "^1.1.2",
     "picocolors": "^1.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

code/addons/test/src/node/boot-test-runner.ts

@@ -1,5 +1,4 @@
 import { type ChildProcess } from 'node:child_process';
-import { join } from 'node:path';
 
 import type { Channel } from 'storybook/internal/channels';
 import {
@@ -13,6 +12,7 @@ import {
 
 // eslint-disable-next-line depend/ban-dependencies
 import { execaNode } from 'execa';
+import { join } from 'pathe';
 
 import { TEST_PROVIDER_ID } from '../constants';
 import { log } from '../logger';

code/addons/test/src/node/test-manager.test.ts

@@ -3,7 +3,7 @@ import { createVitest } from 'vitest/node';
 
 import { Channel, type ChannelTransport } from '@storybook/core/channels';
 
-import path from 'path';
+import path from 'pathe';
 
 import { TEST_PROVIDER_ID } from '../constants';
 import { TestManager } from './test-manager';

code/addons/test/src/node/vitest-manager.ts

@@ -1,11 +1,11 @@
 import { existsSync } from 'node:fs';
-import path, { normalize } from 'node:path';
 
 import type { TestProject, TestSpecification, Vitest, WorkspaceProject } from 'vitest/node';
 
 import type { Channel } from 'storybook/internal/channels';
 import type { TestingModuleRunRequestPayload } from 'storybook/internal/core-events';
 
+import path, { normalize } from 'pathe';
 import slash from 'slash';
 
 import { log } from '../logger';

code/addons/test/src/postinstall.ts

@@ -1,8 +1,6 @@
 import { existsSync } from 'node:fs';
 import * as fs from 'node:fs/promises';
 import { writeFile } from 'node:fs/promises';
-import { dirname, join, relative } from 'node:path';
-import * as path from 'node:path';
 
 import {
   JsPackageManagerFactory,
@@ -16,6 +14,7 @@ import { colors, logger } from 'storybook/internal/node-logger';
 // eslint-disable-next-line depend/ban-dependencies
 import { execa } from 'execa';
 import { findUp } from 'find-up';
+import { dirname, extname, join, relative, resolve } from 'pathe';
 import picocolors from 'picocolors';
 import prompts from 'prompts';
 import { coerce, satisfies } from 'semver';
@@ -27,7 +26,8 @@ import { printError, printInfo, printSuccess, step } from './postinstall-logger'
 const ADDON_NAME = '@storybook/experimental-addon-test' as const;
 const EXTENSIONS = ['.js', '.jsx', '.ts', '.tsx', '.cts', '.mts', '.cjs', '.mjs'] as const;
 
-const findFile = async (basename: string) => findUp(EXTENSIONS.map((ext) => basename + ext));
+const findFile = async (basename: string, extraExtensions: string[] = []) =>
+  findUp([...EXTENSIONS, ...extraExtensions].map((ext) => basename + ext));
 
 export default async function postInstall(options: PostinstallOptions) {
   printSuccess(
@@ -244,7 +244,10 @@ export default async function postInstall(options: PostinstallOptions) {
     args: ['playwright', 'install', 'chromium', '--with-deps'],
   });
 
-  const vitestSetupFile = path.resolve(options.configDir, 'vitest.setup.ts');
+  const fileExtension =
+    allDeps['typescript'] || (await findFile('tsconfig', ['.json'])) ? 'ts' : 'js';
+
+  const vitestSetupFile = resolve(options.configDir, `vitest.setup.${fileExtension}`);
   if (existsSync(vitestSetupFile)) {
     printError(
       '🚨 Oh no!',
@@ -264,9 +267,9 @@ export default async function postInstall(options: PostinstallOptions) {
   logger.plain(`${step} Creating a Vitest setup file for Storybook:`);
   logger.plain(colors.gray(`  ${vitestSetupFile}`));
 
-  const previewExists = EXTENSIONS.map((ext) =>
-    path.resolve(options.configDir, `preview${ext}`)
-  ).some((config) => existsSync(config));
+  const previewExists = EXTENSIONS.map((ext) => resolve(options.configDir, `preview${ext}`)).some(
+    (config) => existsSync(config)
+  );
 
   await writeFile(
     vitestSetupFile,
@@ -331,10 +334,10 @@ export default async function postInstall(options: PostinstallOptions) {
 
   if (rootConfig) {
     // If there's an existing config, we create a workspace file so we can run Storybook tests alongside.
-    const extname = path.extname(rootConfig);
-    const browserWorkspaceFile = path.resolve(dirname(rootConfig), `vitest.workspace${extname}`);
+    const extension = extname(rootConfig);
+    const browserWorkspaceFile = resolve(dirname(rootConfig), `vitest.workspace${extension}`);
     // to be set in vitest config
-    const vitestSetupFilePath = path.relative(path.dirname(browserWorkspaceFile), vitestSetupFile);
+    const vitestSetupFilePath = relative(dirname(browserWorkspaceFile), vitestSetupFile);
 
     logger.line(1);
     logger.plain(`${step} Creating a Vitest project workspace file:`);
@@ -373,9 +376,9 @@ export default async function postInstall(options: PostinstallOptions) {
     );
   } else {
     // If there's no existing Vitest/Vite config, we create a new Vitest config file.
-    const newVitestConfigFile = path.resolve('vitest.config.ts');
+    const newVitestConfigFile = resolve(`vitest.config.${fileExtension}`);
     // to be set in vitest config
-    const vitestSetupFilePath = path.relative(path.dirname(newVitestConfigFile), vitestSetupFile);
+    const vitestSetupFilePath = relative(dirname(newVitestConfigFile), vitestSetupFile);
 
     logger.line(1);
     logger.plain(`${step} Creating a Vitest project config file:`);
@@ -497,17 +500,15 @@ async function getStorybookInfo({ configDir, packageManager: pkgMgr }: Postinsta
   }
 
   const builderPackageJson = await fs.readFile(
-    require.resolve(
-      path.join(typeof builder === 'string' ? builder : builder.name, 'package.json')
-    ),
+    require.resolve(join(typeof builder === 'string' ? builder : builder.name, 'package.json')),
     'utf8'
   );
   const builderPackageName = JSON.parse(builderPackageJson).name;
 
   let rendererPackageName: string | undefined;
   if (renderer) {
     const rendererPackageJson = await fs.readFile(
-      require.resolve(path.join(renderer, 'package.json')),
+      require.resolve(join(renderer, 'package.json')),
       'utf8'
     );
     rendererPackageName = JSON.parse(rendererPackageJson).name;

code/addons/test/src/preset.ts

@@ -1,5 +1,4 @@
 import { readFileSync } from 'node:fs';
-import { isAbsolute, join } from 'node:path';
 
 import type { Channel } from 'storybook/internal/channels';
 import { checkAddonOrder, getFrameworkName, serverRequire } from 'storybook/internal/common';
@@ -11,6 +10,7 @@ import {
 import { oneWayHash, telemetry } from 'storybook/internal/telemetry';
 import type { Options, PresetProperty, StoryId } from 'storybook/internal/types';
 
+import { isAbsolute, join } from 'pathe';
 import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 

code/addons/test/src/vitest-plugin/index.ts

@@ -1,6 +1,4 @@
 /* eslint-disable no-underscore-dangle */
-import { join, resolve } from 'node:path';
-
 import type { Plugin } from 'vitest/config';
 
 import {
@@ -12,6 +10,8 @@ import { readConfig, vitestTransform } from 'storybook/internal/csf-tools';
 import { MainFileMissingError } from 'storybook/internal/server-errors';
 import type { StoriesEntry } from 'storybook/internal/types';
 
+import { join, resolve } from 'pathe';
+
 import type { InternalOptions, UserOptions } from './types';
 
 const defaultOptions: UserOptions = {

code/yarn.lock

@@ -6612,6 +6612,7 @@ __metadata:
     execa: "npm:^8.0.1"
     find-up: "npm:^7.0.0"
     formik: "npm:^2.2.9"
+    pathe: "npm:^1.1.2"
     picocolors: "npm:^1.1.0"
     polished: "npm:^4.2.2"
     prompts: "npm:^2.4.0"