[READ-ONLY] Mirror of https://github.com/vitest-dev/vitest. Next generation testing framework powered by Vite.
vitest.dev
test
testing-tools
vite
docs: clarify how config file works (#3832)
+47
-1
+47
-1
docs/guide/index.md
+47
-1
docs/guide/index.md
···
46
46
- Pass `--config` option to CLI, e.g. `vitest --config ./path/to/vitest.config.ts`
47
47
- Use `process.env.VITEST` or `mode` property on `defineConfig` (will be set to `test` if not overridden) to conditionally apply different configuration in `vite.config.ts`
48
48
49
-
To configure `vitest` itself, add `test` property in your Vite config. You'll also need to add a reference to Vitest types using a [triple slash command](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-) at the top of your config file, if you are importing `defineConfig` from `vite` itself.
49
+
Vitest supports the same extensions for your configuration file as Vite does: `.js`, `.mjs`, `.cjs`, `.ts`, `.cts`, `.mts`. Vitest does not support `.json` extension.
50
+
51
+
If you are not using Vite as your build tool, you can configure Vitest using the `test` property in your config file:
50
52
51
53
```ts
52
54
import { defineConfig } from 'vitest/config'
···
58
60
})
59
61
```
60
62
63
+
::: tip
64
+
Even if you do not use Vite yourself, Vitest relies heavily on it for its transformation pipeline. For that reason, you can also configure any property described in [Vite documentation](https://vitejs.dev/config/).
65
+
:::
66
+
67
+
If you are already using Vite, add `test` property in your Vite config. You'll also need to add a reference to Vitest types using a [triple slash command](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-) at the top of your config file.
68
+
69
+
```ts
70
+
/// <reference types="vitest" />
71
+
import { defineConfig } from 'vite'
72
+
73
+
export default defineConfig({
74
+
test: {
75
+
// ...
76
+
},
77
+
})
78
+
```
79
+
61
80
See the list of config options in the [Config Reference](../config/)
81
+
82
+
::: warning
83
+
If you decide to have two separate config files for Vite and Vitest, make sure to define the same Vite options in your Vitest config file since it will override your Vite file, not extend it. You can also use `mergeConfig` method from `vite` or `vitest/config` entries to merge Vite config with Vitest config:
84
+
85
+
:::code-group
86
+
```ts [vitest.config.mjs]
87
+
import { defineConfig, mergeConfig } from 'vitest/config'
88
+
import viteConfig from './vite.config.mjs'
89
+
90
+
export default mergeConfig(viteConfig, defineConfig({
91
+
test: {
92
+
// ...
93
+
}
94
+
}))
95
+
```
96
+
97
+
```ts [vite.config.mjs]
98
+
import { defineConfig } from 'vite'
99
+
import Vue from '@vitejs/plugin-vue'
100
+
101
+
export default defineConfig({
102
+
plugins: [Vue()],
103
+
})
104
+
```
105
+
106
+
But we recommend to use the same file for both Vite and Vitest instead of creating two separate files.
107
+
:::
62
108
63
109
## Workspaces Support
64
110