diff --git a/packages/dify-ui/tsconfig.json b/packages/dify-ui/tsconfig.json
index f6a4a896843..3dac6d6f3f5 100644
--- a/packages/dify-ui/tsconfig.json
+++ b/packages/dify-ui/tsconfig.json
@@ -9,7 +9,8 @@
"src/**/*.ts",
"src/**/*.tsx",
"vite.config.ts",
- "vitest.config.ts"
+ "vitest.config.ts",
+ "vitest.setup.ts"
],
"exclude": ["node_modules", "dist", "storybook-static", "coverage"]
}
diff --git a/packages/dify-ui/vitest.config.ts b/packages/dify-ui/vitest.config.ts
index bcfbd42d73d..27d4b612875 100644
--- a/packages/dify-ui/vitest.config.ts
+++ b/packages/dify-ui/vitest.config.ts
@@ -49,7 +49,6 @@ export default defineConfig({
provider: playwright(),
instances: [{ browser: 'chromium' }],
headless: true,
- testerHtmlPath: './vitest.tester.html',
},
},
},
diff --git a/packages/dify-ui/vitest.css b/packages/dify-ui/vitest.css
new file mode 100644
index 00000000000..7a7dead3b4c
--- /dev/null
+++ b/packages/dify-ui/vitest.css
@@ -0,0 +1,6 @@
+@import 'tailwindcss';
+@import './src/styles/styles.css';
+
+@plugin './src/plugins/icons.ts';
+
+@source './src';
diff --git a/packages/dify-ui/vitest.setup.ts b/packages/dify-ui/vitest.setup.ts
index b42c603a1f5..b386544d02f 100644
--- a/packages/dify-ui/vitest.setup.ts
+++ b/packages/dify-ui/vitest.setup.ts
@@ -1,3 +1,7 @@
+import './vitest.css'
+
+document.documentElement.dataset.theme = 'light'
+
;(
globalThis as typeof globalThis & {
BASE_UI_ANIMATIONS_DISABLED: boolean
diff --git a/packages/dify-ui/vitest.tester.html b/packages/dify-ui/vitest.tester.html
deleted file mode 100644
index 1323b3c4b4e..00000000000
--- a/packages/dify-ui/vitest.tester.html
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
-
-
-
- Dify UI Tests
-
-
-
diff --git a/web/docs/test.md b/web/docs/test.md
index 65d576b3ddd..ac5b4dca495 100644
--- a/web/docs/test.md
+++ b/web/docs/test.md
@@ -99,6 +99,7 @@ Mocks must preserve the public contract needed by the test. Do not replace Dify
## Dify Test Setup
- Tests under `web/` run in `happy-dom` through `web/vite.config.ts` and load `web/vitest.setup.ts`.
+- Tests under `packages/dify-ui/` use separate Vitest Browser Mode projects: unit specs load the package styles through `vitest.setup.ts`, while Storybook tests run stories through `@storybook/addon-vitest`.
- New component and feature specs should generally use a sibling `__tests__/` directory. Existing colocated utility and hook specs may follow their owning module's convention. Cross-feature integration specs belong in `web/__tests__/`.
- The shared `react-i18next` mock is loaded globally. Use `createReactI18nextMock` from `web/test/i18n-mock` only when a test needs custom translations.
- For `nuqs` behavior, use the helpers in `web/test/nuqs-testing.tsx` and assert URL updates. Mock `nuqs` only when URL synchronization is explicitly outside the test contract.
@@ -148,12 +149,14 @@ vp test run --coverage path/to/spec-or-directory
- [Vitest documentation]
- [Vitest Browser Mode documentation]
- [Vitest Browser Mode locators]
+- [Storybook Vitest addon]
- [Testing Library guiding principles]
- [React Testing Library documentation]
- [Testing Library query guidance]
- [Testing Library user-event guidance]
[React Testing Library documentation]: https://testing-library.com/docs/react-testing-library/intro
+[Storybook Vitest addon]: https://storybook.js.org/docs/writing-tests/integrations/vitest-addon
[Testing Library guiding principles]: https://testing-library.com/docs/guiding-principles
[Testing Library query guidance]: https://testing-library.com/docs/queries/about
[Testing Library user-event guidance]: https://testing-library.com/docs/user-event/intro