From 344092bf89af3a039611f08434dd4f2f0a69e250 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 21 Nov 2024 14:34:58 +0100 Subject: [PATCH] Merge pull request #29676 from storybookjs/yann/fix-addon-test-setup-windows Addon Test: Use pathe for better windows support (cherry picked from commit 1bb5920115f5a4978bbe58bd51a10e1591cf5c06) --- code/addons/test/package.json | 1 + code/addons/test/src/node/boot-test-runner.ts | 2 +- .../addons/test/src/node/test-manager.test.ts | 2 +- code/addons/test/src/node/vitest-manager.ts | 2 +- code/addons/test/src/postinstall.ts | 34 +++++++++++-------- code/addons/test/src/preset.ts | 2 +- code/addons/test/src/vitest-plugin/index.ts | 4 +-- code/yarn.lock | 1 + 8 files changed, 28 insertions(+), 20 deletions(-) diff --git a/code/addons/test/package.json b/code/addons/test/package.json index 5fffb4b477e2..59d1e484d3fe 100644 --- a/code/addons/test/package.json +++ b/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", diff --git a/code/addons/test/src/node/boot-test-runner.ts b/code/addons/test/src/node/boot-test-runner.ts index 032be588b107..4acc4995919b 100644 --- a/code/addons/test/src/node/boot-test-runner.ts +++ b/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'; diff --git a/code/addons/test/src/node/test-manager.test.ts b/code/addons/test/src/node/test-manager.test.ts index 415c9bbc7bb6..e51a4016e6b8 100644 --- a/code/addons/test/src/node/test-manager.test.ts +++ b/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'; diff --git a/code/addons/test/src/node/vitest-manager.ts b/code/addons/test/src/node/vitest-manager.ts index ab31e1fc7694..84fadfcbf25d 100644 --- a/code/addons/test/src/node/vitest-manager.ts +++ b/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'; diff --git a/code/addons/test/src/postinstall.ts b/code/addons/test/src/postinstall.ts index 90595b0e15d6..6c275d7c707b 100644 --- a/code/addons/test/src/postinstall.ts +++ b/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:`); @@ -491,14 +494,17 @@ async function getStorybookInfo({ configDir, packageManager: pkgMgr }: Postinsta } const builderPackageJson = await fs.readFile( - `${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(`${renderer}/package.json`, 'utf8'); + const rendererPackageJson = await fs.readFile( + require.resolve(join(renderer, 'package.json')), + 'utf8' + ); rendererPackageName = JSON.parse(rendererPackageJson).name; } diff --git a/code/addons/test/src/preset.ts b/code/addons/test/src/preset.ts index 685a56e2baf4..41808c55d21b 100644 --- a/code/addons/test/src/preset.ts +++ b/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'; diff --git a/code/addons/test/src/vitest-plugin/index.ts b/code/addons/test/src/vitest-plugin/index.ts index 968b0e656141..ac2c65b4f860 100644 --- a/code/addons/test/src/vitest-plugin/index.ts +++ b/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 = { diff --git a/code/yarn.lock b/code/yarn.lock index fd065ae707ed..e1e142315e83 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6437,6 +6437,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"