test(web): render real Seed components under vitest (inline @seed-design) + assert Mercury button styling

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<string, unknown>) => (
-    <button {...props}>{children as React.ReactNode}</button>
-  ),
-}));
-
+import { it, expect } from "vitest";
 import { MercuryButton } from "./MercuryButton";
 
 it("renders yellow primary CTA", () => {
   render(<MercuryButton variant="primary">Холбох</MercuryButton>);
   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)");
 });

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/] } },
+  },
 });