diff --git a/src/ds/MercuryButton.test.tsx b/src/ds/MercuryButton.test.tsx index 31522fb..7b9f840 100644 --- a/src/ds/MercuryButton.test.tsx +++ b/src/ds/MercuryButton.test.tsx @@ -1,27 +1,13 @@ import { render, screen } from "@testing-library/react"; -import { it, expect, vi } from "vitest"; - -// `@seed-design/react`'s barrel re-exports every Seed component, each of -// which imports its own CSS recipe module. Those recipe modules do a -// side-effect `import "./xxx.css"`. Vitest's worker pool runs under real -// Node.js even when invoked via `bunx` (its bin has a `#!/usr/bin/env node` -// shebang), and plain Node's ESM loader has no CSS handling — only a -// bundler (Next.js's webpack, which the real app runs under) knows how to -// process those. So the real package cannot be loaded in this test -// process; stub just the piece MercuryButton uses. (Confirmed via -// `node -e "import('@seed-design/react')"` failing with -// `ERR_UNKNOWN_FILE_EXTENSION` for `.css`, while `bun -e` — a different -// runtime than vitest's worker — succeeds.) -vi.mock("@seed-design/react", () => ({ - ActionButton: ({ children, ...props }: Record) => ( - - ), -})); - +import { it, expect } from "vitest"; import { MercuryButton } from "./MercuryButton"; it("renders yellow primary CTA", () => { render(Холбох); const btn = screen.getByRole("button", { name: "Холбох" }); expect(btn).toBeInTheDocument(); + // primary is a fixed brand-yellow fill / black label, not theme-dynamic — + // asserted on the inline style string since jsdom won't resolve the CSS var. + expect(btn.getAttribute("style")).toContain("var(--mercury-brand-yellow)"); + expect(btn.getAttribute("style")).toContain("var(--mercury-on-brand)"); }); diff --git a/vitest.config.ts b/vitest.config.ts index 643bb3b..9828ce6 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -2,5 +2,10 @@ import { defineConfig } from "vitest/config"; import react from "@vitejs/plugin-react"; export default defineConfig({ plugins: [react()], - test: { environment: "jsdom", setupFiles: ["./vitest.setup.ts"], globals: true }, + test: { + environment: "jsdom", + setupFiles: ["./vitest.setup.ts"], + globals: true, + server: { deps: { inline: [/@seed-design/] } }, + }, });