+
+
+
+ + Vite Powered +
+
+ Reuse Vite's config and plugins - consistent across your app and tests.
+ But it's not required to use Vitest!
+
+
+
+
+ + Jest Compatible +
+
+ Expect, snapshot, coverage, and more - migrating from Jest is
+ straightforward.
+
+ 
+
+
+
+
+
+
+ + Smart & instant watch mode +
++ Only rerun the related changes, just like HMR for tests! +
+
+ 
+
+
+
+
+
+
+ + ESM, TypeScript, JSX +
+
+ Out-of-box ESM, TypeScript and JSX support powered by Oxc.
+
+
+
+
+
diff --git a/docs/.vitepress/theme/Home.vue b/docs/.vitepress/theme/Home.vue
new file mode 100644
index 000000000..2c59554f2
--- /dev/null
+++ b/docs/.vitepress/theme/Home.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+ By
+ 
+
+
+
+
+ + Next Generation Testing Framework +
++ A Vite-native testing framework. It's fast! +
+ +
+
+
+ 
+
+
+
+
+
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 5c49363ad..ff5c5f627 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,19 +1,15 @@
import type { Theme } from 'vitepress'
import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
import { inBrowser } from 'vitepress'
-import DefaultTheme from 'vitepress/theme'
+import VitestTheme from '@voidzero-dev/vitepress-theme/src/vitest'
import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
-import { h } from 'vue'
-import HomePage from '../components/HomePage.vue'
import Version from '../components/Version.vue'
import CRoot from '../components/CRoot.vue'
import Deprecated from '../components/Deprecated.vue'
import Experimental from '../components/Experimental.vue'
import Advanced from '../components/Advanced.vue'
import CourseLink from '../components/CourseLink.vue'
-import '../style/main.css'
-import '../style/vars.css'
-import 'uno.css'
+import './styles.css'
import '@shikijs/vitepress-twoslash/style.css'
import 'virtual:group-icons.css'
@@ -22,12 +18,7 @@ if (inBrowser) {
}
export default {
- extends: DefaultTheme,
- Layout() {
- return h(DefaultTheme.Layout, null, {
- 'home-features-after': () => h(HomePage),
- })
- },
+ extends: VitestTheme as unknown as any,
enhanceApp({ app, router }) {
router.onBeforeRouteChange = (to) => {
if (typeof location === 'undefined') {
diff --git a/docs/.vitepress/theme/styles.css b/docs/.vitepress/theme/styles.css
new file mode 100644
index 000000000..79dfe6bcc
--- /dev/null
+++ b/docs/.vitepress/theme/styles.css
@@ -0,0 +1,51 @@
+@import "@voidzero-dev/vitepress-theme/src/styles/index.css";
+
+@source "./**/*.vue";
+
+/* Vitest */
+:root[data-variant="vitest"] {
+ --color-brand: #008039;
+}
+
+:root.dark:not([data-theme])[data-variant="vitest"],
+:root[data-theme="dark"][data-variant="vitest"] {
+ --color-brand: var(--color-zest);
+}
+
+:root[data-theme="light"][data-variant="vitest"] {
+ --color-brand: #008039;
+}
+
+
+.highlighted-word {
+ background-color: var(--vp-code-line-highlight-color);
+ transition: background-color 0.5s;
+ display: inline-block;
+}
+
+/* credit goes to https://dylanatsmith.com/wrote/styling-the-kbd-element */
+html:not(.dark) .VPContent kbd {
+ --kbd-color-background: #f7f7f7;
+ --kbd-color-border: #cbcccd;
+ --kbd-color-text: #222325;
+}
+
+.VPContent kbd {
+ --kbd-color-background: #898b90;
+ --kbd-color-border: #3d3e42;
+ --kbd-color-text: #222325;
+
+ background-color: var(--kbd-color-background);
+ color: var(--kbd-color-text);
+ border-radius: 0.25rem;
+ border: 1px solid var(--kbd-color-border);
+ box-shadow: 0 2px 0 1px var(--kbd-color-border);
+ font-family: var(--font-family-sans-serif);
+ font-size: 0.75em;
+ line-height: 1;
+ min-width: 0.75rem;
+ text-align: center;
+ padding: 2px 5px;
+ position: relative;
+ top: -1px;
+}
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
index 14bed543a..edf9b160e 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,42 +1,12 @@
---
-layout: home
-sidebar: false
-
title: Vitest
titleTemplate: Next Generation testing framework
+layout: home
+theme: dark
+---
-hero:
- name: Vitest
- text: Next Generation Testing Framework
- tagline: A Vite-native testing framework. It's fast!
- image:
- src: /logo-shadow.svg
- alt: Vitest
- actions:
- - theme: brand
- text: Get Started
- link: /guide/
- - theme: alt
- text: Features
- link: /guide/features
- - theme: alt
- text: Why Vitest?
- link: /guide/why
- - theme: alt
- text: View on GitHub
- link: https://github.com/vitest-dev/vitest
+
-features:
- - title: Vite Powered
- icon:
- details: Reuse Vite's config and plugins - consistent across your app and tests. But it's not required to use Vitest!
- - title: Jest Compatible
- icon:
- details: Expect, snapshot, coverage, and more - migrating from Jest is straightforward.
- - title: Smart & instant watch mode
- icon: ⚡
- details: Only rerun the related changes, just like HMR for tests!
- - title: ESM, TypeScript, JSX
- icon:
- details: Out-of-box ESM, TypeScript and JSX support powered by esbuild.
----
+
+
+
+
+
+ 
+ Why Vitest
+
+
+ Why Vitest
+ + The Vite Native Test Runner +
+ +
+
+
+ Vitest was created to make testing just work for Vite apps. By building on top of Vite, Vitest
+ natively
+ understands your Vite config and is able to reuse the same resolve and
+ transform pipelines.
+
+ You can also use Vitest even if you are not using Vite. It is Jest-comptible + and works for backend code too. +
+ Learn more +