diff --git a/.github/workflows/test-base.yml b/.github/workflows/test-base.yml index d2640374..0e06eb02 100644 --- a/.github/workflows/test-base.yml +++ b/.github/workflows/test-base.yml @@ -45,6 +45,9 @@ jobs: pnpm lint pnpm publint + - name: Run Typecheck + run: pnpm typecheck + - uses: ./.github/actions/setup-playwright # Needed for additional browsers that Vitest unit tests use. diff --git a/oxlint.config.ts b/oxlint.config.ts index 53d69b54..30fae4cc 100644 --- a/oxlint.config.ts +++ b/oxlint.config.ts @@ -5,8 +5,20 @@ export default defineConfig({ typeAware: true, }, + plugins: [ + "import", + + // Defaults: + "eslint", + "typescript", + "unicorn", + "oxc", + ], + rules: { "unicorn/prefer-node-protocol": "error", + "typescript/consistent-type-imports": ["error", { fixStyle: "inline-type-imports" }], + "import/no-duplicates": "error", }, overrides: [ diff --git a/package.json b/package.json index 8f442f81..f611a84c 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,8 @@ "dev:server": "node test-server/server", "lint": "oxlint", "fmt": "oxfmt", - "publint": "pnpm -r --parallel --filter !@chromatic-com/shared-e2e exec publint", + "publint": "pnpm -r --parallel --no-bail --filter !@chromatic-com/shared-e2e exec publint", + "typecheck": "pnpm -r --parallel --no-bail run typecheck", "prepare": "husky install", "release": "pnpm build && pnpm changeset publish", "test:unit": "vitest run --configLoader=runner", diff --git a/packages/cypress/package.json b/packages/cypress/package.json index f866a908..ac53940f 100644 --- a/packages/cypress/package.json +++ b/packages/cypress/package.json @@ -39,6 +39,7 @@ }, "scripts": { "build": "tsdown", + "typecheck": "tsc --noEmit", "test:cypress": "start-server-and-test 'pnpm --filter @chromaui/chromatic-e2e dev:server' 3000 'pnpm test:do-cypress'", "test:do-cypress": "ELECTRON_EXTRA_LAUNCH_ARGS=--remote-debugging-port=8192 cypress run --project tests", "test:unit": "pnpm --filter @chromaui/chromatic-e2e run test:unit --project Cypress" @@ -56,7 +57,8 @@ "@storybook/server-webpack5": "10.2.13", "cypress": "15.18.0", "start-server-and-test": "^2.0.3", - "tsdown": "^0.22.14" + "tsdown": "^0.22.14", + "typescript": "^5.9.3" }, "peerDependencies": { "cypress": ">=15.10.0" diff --git a/packages/cypress/src/commands.ts b/packages/cypress/src/commands.ts index 7e4c5efc..7ac079c9 100644 --- a/packages/cypress/src/commands.ts +++ b/packages/cypress/src/commands.ts @@ -1,5 +1,5 @@ import { takeSnapshot as takeChromaticSnapshot } from "./takeSnapshot"; -import { CypressSnapshot } from "./types"; +import { type CypressSnapshot } from "./types"; declare global { // eslint-disable-next-line @typescript-eslint/no-namespace diff --git a/packages/cypress/src/index.ts b/packages/cypress/src/index.ts index 48dc6136..a9df58f9 100644 --- a/packages/cypress/src/index.ts +++ b/packages/cypress/src/index.ts @@ -1,13 +1,13 @@ import { ResourceArchiver, writeTestResult, - ChromaticStorybookParameters, - ResourceArchive, - Viewport, + type ChromaticStorybookParameters, + type ResourceArchive, + type Viewport, } from "@chromatic-com/shared-e2e"; import CDP, { Version } from "chrome-remote-interface"; -import { CypressSnapshot } from "./types"; +import { type CypressSnapshot } from "./types"; interface WriteParams { testTitlePath: string[]; diff --git a/packages/cypress/src/support.ts b/packages/cypress/src/support.ts index fdb47dd8..69db75d8 100644 --- a/packages/cypress/src/support.ts +++ b/packages/cypress/src/support.ts @@ -1,6 +1,6 @@ import "./commands"; import { takeSnapshot } from "./takeSnapshot"; -import { CypressSnapshot } from "./types"; +import { type CypressSnapshot } from "./types"; const buildChromaticParams = (expose: Cypress.Cypress["expose"]) => ({ ...(expose("diffThreshold") && { diff --git a/packages/cypress/src/takeSnapshot.ts b/packages/cypress/src/takeSnapshot.ts index 9be3a586..7ff0a26b 100644 --- a/packages/cypress/src/takeSnapshot.ts +++ b/packages/cypress/src/takeSnapshot.ts @@ -1,7 +1,7 @@ import { createMirror, snapshot } from "@chromaui/rrweb-snapshot"; import type { serializedNodeWithId } from "@rrweb/types"; -import { CypressSnapshot } from "./types"; +import { type CypressSnapshot } from "./types"; export const takeSnapshot = ( doc: Document, diff --git a/packages/cypress/tsconfig.json b/packages/cypress/tsconfig.json index 6b2498b6..d2a1d3da 100644 --- a/packages/cypress/tsconfig.json +++ b/packages/cypress/tsconfig.json @@ -3,6 +3,6 @@ "compilerOptions": { "types": ["node", "cypress"] }, - "include": ["src", "scripts", "vitest.config.ts"], - "exclude": ["node_modules", "dist"] + "include": ["src", "scripts", "tests", "embedded.test.ts", "vitest.config.ts"], + "exclude": ["node_modules", "dist", "tests/cypress/test-downloads"] } diff --git a/packages/playwright/package.json b/packages/playwright/package.json index 67272b35..eee16864 100644 --- a/packages/playwright/package.json +++ b/packages/playwright/package.json @@ -36,6 +36,7 @@ }, "scripts": { "build": "tsdown", + "typecheck": "tsc --noEmit", "test:playwright": "playwright test", "test:unit": "pnpm --filter @chromaui/chromatic-e2e run test:unit --project Playwright" }, @@ -54,7 +55,8 @@ "playwright": "^1.46.1", "playwright-core": "^1.46.1", "ts-dedent": "^2.2.0", - "tsdown": "^0.22.14" + "tsdown": "^0.22.14", + "typescript": "^5.9.3" }, "peerDependencies": { "@playwright/test": "^1.0.0" diff --git a/packages/playwright/src/createResourceArchive.test.ts b/packages/playwright/src/createResourceArchive.test.ts index a6ac593c..0e675d48 100644 --- a/packages/playwright/src/createResourceArchive.test.ts +++ b/packages/playwright/src/createResourceArchive.test.ts @@ -1,8 +1,8 @@ -import { Server } from "node:http"; +import { type Server } from "node:http"; import { logger } from "@chromatic-com/shared-e2e"; import express, { type Request } from "express"; -import { Browser, chromium, Page } from "playwright"; +import { type Browser, chromium, type Page } from "playwright"; import { dedent } from "ts-dedent"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; diff --git a/packages/playwright/src/createResourceArchive.ts b/packages/playwright/src/createResourceArchive.ts index 9af9a6cf..70927070 100644 --- a/packages/playwright/src/createResourceArchive.ts +++ b/packages/playwright/src/createResourceArchive.ts @@ -1,9 +1,9 @@ import { ResourceArchiver, - ResourceArchive, + type ResourceArchive, DEFAULT_GLOBAL_RESOURCE_ARCHIVE_TIMEOUT_MS, logger, - HttpCredentials, + type HttpCredentials, } from "@chromatic-com/shared-e2e"; import type { Page } from "@playwright/test"; diff --git a/packages/playwright/src/makeTest.test.ts b/packages/playwright/src/makeTest.test.ts index 2e184498..200d0012 100644 --- a/packages/playwright/src/makeTest.test.ts +++ b/packages/playwright/src/makeTest.test.ts @@ -1,5 +1,5 @@ -import { Browser, chromium, Page } from "playwright"; -import { TestInfo } from "playwright/test"; +import { type Browser, chromium, type Page } from "playwright"; +import { type TestInfo } from "playwright/test"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; import { performChromaticSnapshot } from "./makeTest"; diff --git a/packages/playwright/src/takeSnapshot.test.ts b/packages/playwright/src/takeSnapshot.test.ts index 67952048..d447239e 100644 --- a/packages/playwright/src/takeSnapshot.test.ts +++ b/packages/playwright/src/takeSnapshot.test.ts @@ -1,6 +1,6 @@ -import { NodeType, serializedElementNodeWithId } from "@rrweb/types"; -import { Page } from "playwright"; -import { TestInfo } from "playwright/test"; +import { NodeType, type serializedElementNodeWithId } from "@rrweb/types"; +import { type Page } from "playwright"; +import { type TestInfo } from "playwright/test"; import { beforeEach, describe, expect, it } from "vitest"; import { chromaticSnapshots, takeSnapshot } from "./takeSnapshot"; diff --git a/packages/playwright/src/types.test-d.ts b/packages/playwright/src/types.test-d.ts index d7005594..b54224e5 100644 --- a/packages/playwright/src/types.test-d.ts +++ b/packages/playwright/src/types.test-d.ts @@ -1,4 +1,4 @@ -import { Page, TestInfo } from "@playwright/test"; +import { type Page, type TestInfo } from "@playwright/test"; import { expectTypeOf, test } from "vitest"; import * as publicAPI from "../dist/index.mjs"; diff --git a/packages/playwright/tsconfig.json b/packages/playwright/tsconfig.json index 3e40d2fd..b4f48f94 100644 --- a/packages/playwright/tsconfig.json +++ b/packages/playwright/tsconfig.json @@ -1,4 +1,4 @@ { "extends": "../../tsconfig.json", - "include": ["src", "vitest.config.ts"] + "include": ["src", "tests", "embedded.test.ts", "playwright.config.ts", "vitest.config.ts"] } diff --git a/packages/shared/package.json b/packages/shared/package.json index dd2983f0..1bb03bde 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -16,7 +16,8 @@ "./test-utils": "./src/test-utils" }, "scripts": { - "test:unit": "pnpm --filter @chromaui/chromatic-e2e run test:unit --project Shared" + "test:unit": "pnpm --filter @chromaui/chromatic-e2e run test:unit --project Shared", + "typecheck": "tsc --noEmit" }, "dependencies": { "@chromaui/rrweb-snapshot": "2.0.0-alpha.19-noAbsolute", @@ -32,7 +33,7 @@ "@testing-library/react": "^12.0.0", "@testing-library/user-event": "^13.2.1", "@types/node-fetch": "^2.6.6", - "mime": "^3.0.0", + "mime": "^4.0.0", "node-fetch": "2", "playwright": "^1.46.1", "playwright-core": "^1.46.1", diff --git a/packages/shared/src/types.ts b/packages/shared/src/types.ts index e3f17036..0473a8f2 100644 --- a/packages/shared/src/types.ts +++ b/packages/shared/src/types.ts @@ -1,6 +1,6 @@ -import { NodeType, serializedNodeWithId } from "@rrweb/types"; +import { type NodeType, type serializedNodeWithId } from "@rrweb/types"; -import { Viewport } from "./utils/viewport"; +import { type Viewport } from "./utils/viewport"; export interface ChromaticConfig { /** https://www.chromatic.com/docs/delay/ */ diff --git a/packages/shared/src/utils/filePaths.test.ts b/packages/shared/src/utils/filePaths.test.ts index c7910c56..f0457bc3 100644 --- a/packages/shared/src/utils/filePaths.test.ts +++ b/packages/shared/src/utils/filePaths.test.ts @@ -3,8 +3,14 @@ import fsPromises from "node:fs/promises"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; -import { archivesDir, ensureDir, outputFile, outputJSONFile, truncateFileName } from "./filePaths"; -import { removeLocalhostFromBaseUrl } from "./filePaths"; +import { + archivesDir, + ensureDir, + outputFile, + outputJSONFile, + truncateFileName, + removeLocalhostFromBaseUrl, +} from "./filePaths"; vi.mock("fs"); vi.mock("fs/promises"); diff --git a/packages/shared/src/utils/nodes.ts b/packages/shared/src/utils/nodes.ts index 60d29cbc..1fd75586 100644 --- a/packages/shared/src/utils/nodes.ts +++ b/packages/shared/src/utils/nodes.ts @@ -1,4 +1,4 @@ -import { NodeType, serializedNodeWithId } from "@rrweb/types"; +import { NodeType, type serializedNodeWithId } from "@rrweb/types"; import type { SerializedIframeNode } from "../types"; diff --git a/packages/shared/src/write-archive/dom-snapshot.test.ts b/packages/shared/src/write-archive/dom-snapshot.test.ts index eb70dcd0..3dc45762 100644 --- a/packages/shared/src/write-archive/dom-snapshot.test.ts +++ b/packages/shared/src/write-archive/dom-snapshot.test.ts @@ -1,4 +1,4 @@ -import { serializedNodeWithId } from "@rrweb/types"; +import { type serializedNodeWithId } from "@rrweb/types"; import { describe, expect, it } from "vitest"; import { DOMSnapshot } from "./dom-snapshot"; @@ -432,13 +432,13 @@ describe("DOMSnapshot", () => { it("maps pseudoClassIds", async () => { const domSnapshot = new DOMSnapshot({ snapshot, - pseudoClassIds: { hover: [2, 3, 4], focus: [5, 6, 7], active: [8, 9, 10] }, + pseudoClassIds: { ":hover": [2, 3, 4], ":focus": [5, 6, 7], ":active": [8, 9, 10] }, }); const mappedSnapshot = await domSnapshot.mapAssetPaths(sourceMap); expect(mappedSnapshot).toEqual( - `{"snapshot":${expectedMappedSnapshot},"pseudoClassIds":{"hover":[2,3,4],"focus":[5,6,7],"active":[8,9,10]}}`, + `{"snapshot":${expectedMappedSnapshot},"pseudoClassIds":{":hover":[2,3,4],":focus":[5,6,7],":active":[8,9,10]}}`, ); }); }); diff --git a/packages/shared/src/write-archive/index.test.ts b/packages/shared/src/write-archive/index.test.ts index 23a64f73..30d6518e 100644 --- a/packages/shared/src/write-archive/index.test.ts +++ b/packages/shared/src/write-archive/index.test.ts @@ -49,13 +49,15 @@ describe("writeTestResult", () => { home: { snapshot: Buffer.from(JSON.stringify(snapshotJson)), viewport: { height: 800, width: 800 }, + colorScheme: "dark", + pseudoClassIds: {}, }, }, { "http://localhost:3000/home": { statusCode: 200, body: Buffer.from("Chromatic") } }, { diffThreshold: 5, pauseAnimationAtEnd: true, - }, + } as any, ); expect(filePaths.ensureDir).toHaveBeenCalledTimes(1); expect(filePaths.outputFile).toHaveBeenCalledTimes(2); @@ -70,6 +72,7 @@ describe("writeTestResult", () => { parameters: { __id: "file-test-story--home", chromatic: { + colorScheme: "dark", diffThreshold: 5, pauseAnimationAtEnd: true, modes: { w800h800: { viewport: "w800h800" } }, @@ -122,6 +125,8 @@ describe("writeTestResult", () => { home: { snapshot: Buffer.from(JSON.stringify(snapshotJson)), viewport: { height: 800, width: 800 }, + colorScheme: "dark", + pseudoClassIds: {}, }, }, { @@ -135,7 +140,7 @@ describe("writeTestResult", () => { contentType: "image/png", }, }, - {}, + {} as any, ); expect(filePaths.ensureDir).toHaveBeenCalledTimes(1); @@ -145,7 +150,7 @@ describe("writeTestResult", () => { resolve( "./test-results/chromatic-archives/archive/file-toy-story-home.w800h800.snapshot.json", ), - JSON.stringify({ snapshot: expectedMappedJson }), + JSON.stringify({ snapshot: expectedMappedJson, pseudoClassIds: {} }), ); }); @@ -161,10 +166,12 @@ describe("writeTestResult", () => { home: { snapshot: Buffer.from(JSON.stringify(snapshotJson)), viewport: { height: 800, width: 800 }, + colorScheme: "dark", + pseudoClassIds: {}, }, }, { "http://localhost:3000/home": { statusCode: 200, body: Buffer.from("Chromatic") } }, - {}, + {} as any, ); expect(filePaths.ensureDir).toHaveBeenCalledTimes(1); expect(filePaths.outputFile).toHaveBeenCalledTimes(2); @@ -183,10 +190,15 @@ describe("writeTestResult", () => { pageUrl: "http://localhost:3000/", }, { - home: { snapshot: Buffer.from(JSON.stringify({})), viewport: { height: 800, width: 800 } }, + home: { + snapshot: Buffer.from(JSON.stringify({})), + viewport: { height: 800, width: 800 }, + colorScheme: "dark", + pseudoClassIds: {}, + }, }, {}, - {}, + {} as any, ); const { title } = vi.mocked(filePaths.outputJSONFile).mock.calls[0][1]; @@ -207,6 +219,8 @@ describe("writeTestResult", () => { home: { snapshot: Buffer.from(JSON.stringify(snapshotJson)), viewport: { height: 800, width: 800 }, + colorScheme: "dark", + pseudoClassIds: {}, }, }, { @@ -216,7 +230,7 @@ describe("writeTestResult", () => { body: Buffer.from("Chromatic"), }, }, - {}, + {} as any, ); expect(filePaths.outputFile).toHaveBeenCalledWith( @@ -238,10 +252,12 @@ describe("writeTestResult", () => { home: { snapshot: Buffer.from(JSON.stringify(snapshotJson)), viewport: { height: 800, width: 800 }, + colorScheme: "dark", + pseudoClassIds: {}, }, }, { "http://localhost:3000/home": { statusCode: 200, body: Buffer.from("Chromatic") } }, - {}, + {} as any, ); expect(filePaths.outputJSONFile).toHaveBeenCalledWith( expect.anything(), @@ -266,10 +282,12 @@ describe("writeTestResult", () => { home: { snapshot: Buffer.from(JSON.stringify(snapshotJson)), viewport: { height: 800, width: 800 }, + colorScheme: "dark", + pseudoClassIds: {}, }, }, { "http://localhost:3000/home": { statusCode: 200, body: Buffer.from("Chromatic") } }, - {}, + {} as any, ); expect(filePaths.outputJSONFile).toHaveBeenCalledWith( expect.anything(), @@ -290,10 +308,12 @@ describe("writeTestResult", () => { home: { snapshot: Buffer.from(JSON.stringify(snapshotJson)), viewport: { height: 800, width: 800 }, + colorScheme: "dark", + pseudoClassIds: {}, }, }, { "http://localhost:3000/home": { statusCode: 200, body: Buffer.from("Chromatic") } }, - {}, + {} as any, ); expect(filePaths.outputJSONFile).toHaveBeenCalledWith( expect.anything(), @@ -314,10 +334,12 @@ describe("writeTestResult", () => { home: { snapshot: Buffer.from(JSON.stringify(snapshotJson)), viewport: { height: 800, width: 800 }, + colorScheme: "dark", + pseudoClassIds: {}, }, }, { "http://localhost:3000/home": { statusCode: 200, body: Buffer.from("Chromatic") } }, - {}, + {} as any, ); expect(filePaths.outputJSONFile).toHaveBeenCalledWith( expect.anything(), @@ -338,10 +360,12 @@ describe("writeTestResult", () => { home: { snapshot: Buffer.from(JSON.stringify(snapshotJson)), viewport: { height: 800, width: 800 }, + colorScheme: "dark", + pseudoClassIds: {}, }, }, { "http://localhost:3000/home": { statusCode: 200, body: Buffer.from("Chromatic") } }, - {}, + {} as any, ); expect(filePaths.outputJSONFile).toHaveBeenCalledWith( expect.anything(), diff --git a/packages/shared/src/write-archive/snapshot-files.ts b/packages/shared/src/write-archive/snapshot-files.ts index a59ab023..d8e4f619 100644 --- a/packages/shared/src/write-archive/snapshot-files.ts +++ b/packages/shared/src/write-archive/snapshot-files.ts @@ -1,5 +1,5 @@ import { MAX_FILE_NAME_BYTE_LENGTH, truncateFileName } from "../utils/filePaths"; -import { Viewport, viewportToString } from "../utils/viewport"; +import { type Viewport, viewportToString } from "../utils/viewport"; import { sanitize } from "./storybook-sanitize"; const SNAPSHOT_FILE_EXT = "snapshot.json"; diff --git a/packages/shared/src/write-archive/stories-files.test.ts b/packages/shared/src/write-archive/stories-files.test.ts index b349bd0a..69076e0b 100644 --- a/packages/shared/src/write-archive/stories-files.test.ts +++ b/packages/shared/src/write-archive/stories-files.test.ts @@ -1,6 +1,6 @@ import { beforeEach, describe, expect, it, vi } from "vitest"; -import { ChromaticStorybookParameters } from "../types"; +import type { ChromaticStorybookParameters, DOMSnapshots } from "../types"; import * as storiesFiles from "./stories-files"; vi.mock("fs/promises"); @@ -42,10 +42,21 @@ describe("storiesFileName", () => { describe("createStories", () => { it("creates stories file JSON from DOM snapshots", () => { const title = "some test title"; - const domSnapshots = { - "snapshot 1": { snapshot: Buffer.from("n/a"), viewport: { width: 100, height: 200 } }, - "another snapshot": { snapshot: Buffer.from("n/a"), viewport: { width: 300, height: 400 } }, + const domSnapshots: DOMSnapshots = { + "snapshot 1": { + snapshot: Buffer.from("n/a"), + viewport: { width: 100, height: 200 }, + colorScheme: "dark", + pseudoClassIds: {}, + }, + "another snapshot": { + snapshot: Buffer.from("n/a"), + viewport: { width: 300, height: 400 }, + colorScheme: "dark", + pseudoClassIds: {}, + }, }; + const chromaticParams: ChromaticStorybookParameters = { delay: 200, pauseAnimationAtEnd: true, @@ -63,6 +74,7 @@ describe("createStories", () => { __id: "some-test-title--snapshot-1", server: { id: "some-test-title-snapshot-1" }, chromatic: { + colorScheme: "dark", delay: 200, pauseAnimationAtEnd: true, modes: { @@ -93,6 +105,7 @@ describe("createStories", () => { __id: "some-test-title--another-snapshot", server: { id: "some-test-title-another-snapshot" }, chromatic: { + colorScheme: "dark", delay: 200, pauseAnimationAtEnd: true, modes: { @@ -137,6 +150,8 @@ describe("createStories", () => { "\n\n\r\rSnapshot\nName\rWith\r\nNewlines\n\r\r\n": { snapshot: Buffer.from("n/a"), viewport: { width: 100, height: 200 }, + colorScheme: "dark", + pseudoClassIds: {}, }, }, {}, diff --git a/packages/shared/src/write-archive/stories-files.ts b/packages/shared/src/write-archive/stories-files.ts index 215575ca..4056272e 100644 --- a/packages/shared/src/write-archive/stories-files.ts +++ b/packages/shared/src/write-archive/stories-files.ts @@ -2,7 +2,7 @@ import { storyNameFromExport, toId } from "storybook/internal/csf"; import type { ChromaticStorybookParameters, DOMSnapshots } from "../types"; import { MAX_FILE_NAME_BYTE_LENGTH, truncateFileName } from "../utils/filePaths"; -import { Viewport, viewportToString } from "../utils/viewport"; +import { type Viewport, viewportToString } from "../utils/viewport"; import { snapshotId } from "./snapshot-files"; import { collapseNewlines, sanitize } from "./storybook-sanitize"; diff --git a/packages/vitest/package.json b/packages/vitest/package.json index 69f14e41..3161986e 100644 --- a/packages/vitest/package.json +++ b/packages/vitest/package.json @@ -38,6 +38,7 @@ }, "scripts": { "build": "tsdown", + "typecheck": "tsc --noEmit", "test:unit": "pnpm --filter @chromaui/chromatic-e2e run test:unit --project 'Vitest Unit' --project 'Vitest Browser'", "test:vitest": "vitest --config test/vitest.config.e2e.ts" }, @@ -58,6 +59,7 @@ "extend-to-be-announced": "2.0.0", "msw": "^2.12.10", "tsdown": "^0.22.14", + "typescript": "^5.9.3", "vitest": "^5.0.0" }, "peerDependencies": { diff --git a/packages/vitest/src/browser/getCurrentTest.ts b/packages/vitest/src/browser/getCurrentTest.ts index 07f5535f..569bb3b4 100644 --- a/packages/vitest/src/browser/getCurrentTest.ts +++ b/packages/vitest/src/browser/getCurrentTest.ts @@ -1,6 +1,6 @@ import * as vitest from "vitest"; -import { InternalTestContext } from "../types"; +import type { InternalTestContext } from "../types"; export type Test = ReturnType & InternalTestContext["task"]; @@ -22,5 +22,9 @@ async function resolveHooks() { } // Fallback to older API. Using this with 4.1.0 logs deprecation warning. - return await import("vitest/suite"); + // @ts-expect-error -- does not exist in vitest@5 + return (await import("vitest/suite")) as Pick< + typeof vitest.TestRunner, + "getCurrentTest" | "getCurrentSuite" + >; } diff --git a/packages/vitest/src/browser/public/takeSnapshot.ts b/packages/vitest/src/browser/public/takeSnapshot.ts index f99a6e26..0ecc8135 100644 --- a/packages/vitest/src/browser/public/takeSnapshot.ts +++ b/packages/vitest/src/browser/public/takeSnapshot.ts @@ -1,6 +1,6 @@ import { type DOMSnapshots } from "@chromatic-com/shared-e2e"; import { snapshot as rrwebSnapshot, createMirror } from "@chromaui/rrweb-snapshot"; -import { serializedNodeWithId } from "@rrweb/types"; +import { type serializedNodeWithId } from "@rrweb/types"; import { assert } from "vitest"; import { commands } from "vitest/browser"; diff --git a/packages/vitest/src/node/commands.browser.test.ts b/packages/vitest/src/node/commands.browser.test.ts index 461dab60..7b796d59 100644 --- a/packages/vitest/src/node/commands.browser.test.ts +++ b/packages/vitest/src/node/commands.browser.test.ts @@ -1,7 +1,7 @@ import { test, expect } from "vitest"; import { commands } from "vitest/browser"; -import { InternalTestContext } from "../types"; +import { type InternalTestContext } from "../types"; test("setupFile is registered", async (context) => { expect(context.task.meta.__chromatic_isRegistered).toBe(true); diff --git a/packages/vitest/src/node/commands.ts b/packages/vitest/src/node/commands.ts index 7d0f7eea..472aedb6 100644 --- a/packages/vitest/src/node/commands.ts +++ b/packages/vitest/src/node/commands.ts @@ -21,8 +21,7 @@ import { } from "../types"; import { NetworkIdleTracker } from "./NetworkIdleTracker"; import { ChromaticReporter } from "./reporter"; -import { trackEvent } from "./telemetry"; -import { TelemetryReporter } from "./telemetry"; +import { trackEvent, TelemetryReporter } from "./telemetry"; import { WebpackStatsReporter } from "./webpack-stats-reporter"; type TestID = TestCase["id"]; diff --git a/packages/vitest/src/node/plugin.ts b/packages/vitest/src/node/plugin.ts index d0053c49..6bf0714f 100644 --- a/packages/vitest/src/node/plugin.ts +++ b/packages/vitest/src/node/plugin.ts @@ -18,8 +18,8 @@ import { trackEvent as _trackEvent, type EventType, type TelemetryEvent, + TelemetryReporter, } from "./telemetry"; -import { TelemetryReporter } from "./telemetry"; import { mergePreviewStats, WebpackStatsReporter } from "./webpack-stats-reporter"; const DEFAULT_TAG_DESCRIPTION = "Visual Regression Tests for `@chromatic-com/vitest`"; @@ -239,7 +239,7 @@ function withErrorTracking( ): Vite.Plugin["configureVitest"] { return async (context) => { try { - // oxlint-disable-next-line typescript/await-thenable -- this is really promise + // eslint-disable-next-line typescript/await-thenable -- this is really promise return await configureVitest(context); } catch (error) { _trackEvent( diff --git a/packages/vitest/src/node/reporter.ts b/packages/vitest/src/node/reporter.ts index d030547a..d2062cf8 100644 --- a/packages/vitest/src/node/reporter.ts +++ b/packages/vitest/src/node/reporter.ts @@ -1,8 +1,7 @@ import { relative, resolve } from "node:path"; import colors from "tinyrainbow"; -import { TestCase, TestModule, Vitest } from "vitest/node"; -import { Reporter } from "vitest/reporters"; +import type { Reporter, TestCase, TestModule, Vitest } from "vitest/node"; import { DEFAULT_OUTPUT_DIR } from "../constants"; import { type ResolvedOptions } from "../types"; diff --git a/packages/vitest/src/node/telemetry/reporter.ts b/packages/vitest/src/node/telemetry/reporter.ts index 88c31dac..7f3ab033 100644 --- a/packages/vitest/src/node/telemetry/reporter.ts +++ b/packages/vitest/src/node/telemetry/reporter.ts @@ -1,5 +1,4 @@ -import { type Vitest } from "vitest/node"; -import { type Reporter } from "vitest/reporters"; +import { type Reporter, type Vitest } from "vitest/node"; import { type ResolvedOptions } from "../../types"; import { trackEvent } from "./track"; diff --git a/packages/vitest/src/node/telemetry/sanitize.test.ts b/packages/vitest/src/node/telemetry/sanitize.test.ts index e7e83251..bf8da35b 100644 --- a/packages/vitest/src/node/telemetry/sanitize.test.ts +++ b/packages/vitest/src/node/telemetry/sanitize.test.ts @@ -105,9 +105,9 @@ describe("Windows paths", () => { vi.spyOn(process, "cwd").mockReturnValue(WINDOWS_MOCK_CWD); vi.doMock("node:os", () => ({ homedir: () => WINDOWS_MOCK_HOMEDIR })); - vi.doMock("node:path", async (importOriginal) => ({ - ...(await importOriginal()), - sep: "\\", + vi.doMock(import("node:path"), async (importOriginal) => ({ + ...(await importOriginal()), + sep: "\\" as const, })); return function afterEach() { diff --git a/packages/vitest/src/node/telemetry/types.ts b/packages/vitest/src/node/telemetry/types.ts index 2e0a20f8..0069837b 100644 --- a/packages/vitest/src/node/telemetry/types.ts +++ b/packages/vitest/src/node/telemetry/types.ts @@ -1,7 +1,7 @@ /** These types are consumed by both browser and node sides */ import type { ChromaticNamespace, ConfigureOptions } from "../../types"; -import { EVENT_TYPE_PREFIX } from "./constants"; +import { type EVENT_TYPE_PREFIX } from "./constants"; export type EventType = keyof TelemetryPayloads; diff --git a/packages/vitest/src/node/webpack-stats-reporter.ts b/packages/vitest/src/node/webpack-stats-reporter.ts index 2c10302d..ddb072a1 100644 --- a/packages/vitest/src/node/webpack-stats-reporter.ts +++ b/packages/vitest/src/node/webpack-stats-reporter.ts @@ -2,8 +2,14 @@ import { existsSync, readFileSync } from "node:fs"; import { mkdir, readdir, readFile, rm, writeFile } from "node:fs/promises"; import { dirname, relative, resolve, sep } from "node:path"; -import { isCSSRequest, type TestCase, type TestModule, type Vite, type Vitest } from "vitest/node"; -import type { Reporter } from "vitest/reporters"; +import { + type Reporter, + isCSSRequest, + type TestCase, + type TestModule, + type Vite, + type Vitest, +} from "vitest/node"; import type { ResolvedOptions } from "../types"; import { trackEvent } from "./telemetry"; diff --git a/packages/vitest/test/css-pseudo-states.test.ts b/packages/vitest/test/css-pseudo-states.test.ts index 11190192..71299574 100644 --- a/packages/vitest/test/css-pseudo-states.test.ts +++ b/packages/vitest/test/css-pseudo-states.test.ts @@ -1,7 +1,7 @@ import { assert, expect } from "vitest"; import { commands, page, userEvent } from "vitest/browser"; -import { configure, takeSnapshot } from "../dist"; +import { configure, takeSnapshot } from "../dist/index.mjs"; import { test } from "./utils/browser"; configure({ disableAutoSnapshot: true }); diff --git a/packages/vitest/test/duplicate-test-names.test.ts b/packages/vitest/test/duplicate-test-names.test.ts index 2ac8d973..3e76206e 100644 --- a/packages/vitest/test/duplicate-test-names.test.ts +++ b/packages/vitest/test/duplicate-test-names.test.ts @@ -1,4 +1,4 @@ -import { configure, takeSnapshot } from "../dist"; +import { configure, takeSnapshot } from "../dist/index.mjs"; import { test } from "./utils/browser"; test.each(["one", "two"])("duplicate test name", async (label) => { diff --git a/packages/vitest/test/embeds.test.ts b/packages/vitest/test/embeds.test.ts index d46a3a61..ae01fb0d 100644 --- a/packages/vitest/test/embeds.test.ts +++ b/packages/vitest/test/embeds.test.ts @@ -1,7 +1,7 @@ import { expect } from "vitest"; -import { Locator, locators, page } from "vitest/browser"; +import { type Locator, locators, page } from "vitest/browser"; -import { takeSnapshot, configure } from "../dist"; +import { takeSnapshot, configure } from "../dist/index.mjs"; import { test } from "./utils/browser"; test("same-origin embed page loads", async ({ goTo }) => { diff --git a/packages/vitest/test/manual-snapshots.test.ts b/packages/vitest/test/manual-snapshots.test.ts index d1ff9c04..10e15434 100644 --- a/packages/vitest/test/manual-snapshots.test.ts +++ b/packages/vitest/test/manual-snapshots.test.ts @@ -1,7 +1,7 @@ import { expect } from "vitest"; import { page } from "vitest/browser"; -import { configure, takeSnapshot } from "../dist"; +import { configure, takeSnapshot } from "../dist/index.mjs"; import { test } from "./utils/browser"; test.override({ url: "/manual-snapshots" }); diff --git a/packages/vitest/test/newline-test-names.test.ts b/packages/vitest/test/newline-test-names.test.ts index d1bc4e88..432ce50d 100644 --- a/packages/vitest/test/newline-test-names.test.ts +++ b/packages/vitest/test/newline-test-names.test.ts @@ -1,6 +1,6 @@ import { describe } from "vitest"; -import { configure, takeSnapshot } from "../dist"; +import { configure, takeSnapshot } from "../dist/index.mjs"; import { test } from "./utils/browser"; describe(` diff --git a/packages/vitest/test/options.test.ts b/packages/vitest/test/options.test.ts index 7ed0e146..3de09d98 100644 --- a/packages/vitest/test/options.test.ts +++ b/packages/vitest/test/options.test.ts @@ -1,4 +1,4 @@ -import { configure } from "../dist"; +import { configure } from "../dist/index.mjs"; import { test } from "./utils/browser"; test("delay", async ({ goTo }) => { diff --git a/packages/vitest/test/snapshot-names.test.ts b/packages/vitest/test/snapshot-names.test.ts index 95aa7aa4..61efb7c1 100644 --- a/packages/vitest/test/snapshot-names.test.ts +++ b/packages/vitest/test/snapshot-names.test.ts @@ -1,6 +1,6 @@ import { describe, beforeEach } from "vitest"; -import { configure, takeSnapshot } from "../dist"; +import { configure, takeSnapshot } from "../dist/index.mjs"; import { test } from "./utils/browser"; configure({ disableAutoSnapshot: true }); diff --git a/packages/vitest/test/utils/node.ts b/packages/vitest/test/utils/node.ts index 34d2c333..215eba3f 100644 --- a/packages/vitest/test/utils/node.ts +++ b/packages/vitest/test/utils/node.ts @@ -14,7 +14,7 @@ import { createVitest, type InlineConfig, startVitest, - TestSequencer, + type TestSequencer, version as vitestVersion, type TestSpecification, } from "vitest/node"; diff --git a/packages/vitest/tsconfig.json b/packages/vitest/tsconfig.json index 9e01ac63..762852e0 100644 --- a/packages/vitest/tsconfig.json +++ b/packages/vitest/tsconfig.json @@ -3,5 +3,12 @@ "compilerOptions": { "stripInternal": true }, - "include": ["src", "test", "vitest.config.unit.ts", "vitest.config.browser.ts"] + "include": [ + "src", + "test", + "embedded.test.ts", + "vitest.config.unit.ts", + "vitest.config.browser.ts" + ], + "exclude": ["test/fixtures"] } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 390ba2c0..58752109 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -108,6 +108,9 @@ importers: tsdown: specifier: ^0.22.14 version: 0.22.14(publint@0.3.24)(typescript@5.9.3) + typescript: + specifier: ^5.9.3 + version: 5.9.3 packages/playwright: dependencies: @@ -151,6 +154,9 @@ importers: tsdown: specifier: ^0.22.14 version: 0.22.14(publint@0.3.24)(typescript@5.9.3) + typescript: + specifier: ^5.9.3 + version: 5.9.3 packages/shared: dependencies: @@ -189,8 +195,8 @@ importers: specifier: ^2.6.6 version: 2.6.13 mime: - specifier: ^3.0.0 - version: 3.0.0 + specifier: ^4.0.0 + version: 4.1.0 node-fetch: specifier: '2' version: 2.7.0 @@ -258,6 +264,9 @@ importers: tsdown: specifier: ^0.22.14 version: 0.22.14(publint@0.3.24)(typescript@5.9.3) + typescript: + specifier: ^5.9.3 + version: 5.9.3 vitest: specifier: ^5.0.0 version: 5.0.0(@types/node@22.20.1)(@vitest/browser-playwright@5.0.0)(@vitest/coverage-v8@5.0.0)(@vitest/ui@5.0.0)(msw@2.15.0(@types/node@22.20.1)(typescript@5.9.3))(vite@8.1.4(@types/node@22.20.1)(esbuild@0.27.7)(jiti@2.7.0)(terser@5.49.0)(yaml@2.9.0)) @@ -3002,9 +3011,9 @@ packages: engines: {node: '>=4'} hasBin: true - mime@3.0.0: - resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==} - engines: {node: '>=10.0.0'} + mime@4.1.0: + resolution: {integrity: sha512-X5ju04+cAzsojXKes0B/S4tcYtFAJ6tTMuSPBEn9CPGlrWr8Fiw7qYeLT0XyH80HSoAoqWCaz+MWKh22P7G1cw==} + engines: {node: '>=16'} hasBin: true mimic-fn@2.1.0: @@ -7036,7 +7045,7 @@ snapshots: mime@1.6.0: {} - mime@3.0.0: {} + mime@4.1.0: {} mimic-fn@2.1.0: {} diff --git a/tsconfig.json b/tsconfig.json index 99487b6b..61ddf0b1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,5 @@ { "compilerOptions": { - "allowSyntheticDefaultImports": true, "paths": { "playwright-core/types/protocol": [ "./packages/shared/node_modules/playwright-core/types/protocol.d.ts" @@ -8,19 +7,15 @@ "@chromatic-com/shared-e2e": ["./packages/shared/src/index.ts"], "@chromatic-com/shared-e2e/*": ["./packages/shared/src/*"] }, - "emitDecoratorMetadata": true, - "esModuleInterop": true, - "experimentalDecorators": true, - "incremental": false, "isolatedModules": true, - "strictBindCallApply": true, - "jsx": "react", "lib": ["es2023", "dom", "dom.iterable"], "module": "preserve", - "moduleResolution": "bundler", - "noImplicitAny": true, "skipLibCheck": true, - "target": "es2023" + "target": "es2023", + + // TODO: Enable "strict: true" and remove these: + "noImplicitAny": true, + "strictBindCallApply": true }, - "include": ["packages/**/*.ts", "packages/**/*.tsx", "scripts/**/*.ts", "vitest.config.ts"] + "include": ["packages/**/*.ts", "scripts/**/*.ts", "vitest.config.ts"] }