+4 -10

docs/config/index.md

Reviewed

··· 1711 1711 ``` 1712 1712 1713 1713 ::: tip 1714 1714 - To have a better type safety when using built-in providers, you can add one of these types (for provider that you are using) to your tsconfig's `compilerOptions.types` field: 1714 1714 + To have a better type safety when using built-in providers, you should reference one of these types (for provider that you are using) in your [config file](/config/file): 1715 1715 1716 1716 - ```json 1717 1717 - { 1718 1718 - "compilerOptions": { 1719 1719 - "types": [ 1720 1720 - "@vitest/browser/providers/webdriverio", 1721 1721 - "@vitest/browser/providers/playwright" 1722 1722 - ] 1723 1723 - } 1724 1724 - } 1716 1716 + ```ts 1717 1717 + /// <reference types="@vitest/browser/providers/playwright" /> 1718 1718 + /// <reference types="@vitest/browser/providers/webdriverio" /> 1725 1719 ``` 1726 1720 ::: 1727 1721

packages/browser/dummy.js

Reviewed

+1

packages/browser/matchers.d.ts

Reviewed

··· 4 4 5 5 declare module 'vitest' { 6 6 interface JestAssertion<T = any> extends jsdomMatchers.default.TestingLibraryMatchers<void, T> {} 7 7 + interface AsymmetricMatchersContaining extends jsdomMatchers.default.TestingLibraryMatchers<void, void> {} 7 8 8 9 type Promisify<O> = { 9 10 [K in keyof O]: O[K] extends (...args: infer A) => infer R

+6 -3

packages/browser/package.json

Reviewed

··· 32 32 "default": "./dist/client.js" 33 33 }, 34 34 "./matchers": { 35 35 - "types": "./matchers.d.ts" 35 35 + "types": "./matchers.d.ts", 36 36 + "default": "./dummy.js" 36 37 }, 37 38 "./providers/webdriverio": { 38 38 - "types": "./providers/webdriverio.d.ts" 39 39 + "types": "./providers/webdriverio.d.ts", 40 40 + "default": "./dummy.js" 39 41 }, 40 42 "./providers/playwright": { 41 41 - "types": "./providers/playwright.d.ts" 43 43 + "types": "./providers/playwright.d.ts", 44 44 + "default": "./dummy.js" 42 45 }, 43 46 "./locator": { 44 47 "types": "./dist/locators/index.d.ts",

+7 -25

docs/guide/browser/assertion-api.md

Reviewed

··· 32 32 - [`toHaveRole`](https://github.com/testing-library/jest-dom#toHaveRole) 33 33 - [`toHaveErrorMessage`](https://github.com/testing-library/jest-dom#toHaveErrorMessage) 34 34 35 35 - If you are using TypeScript or want to have correct type hints in `expect`, make sure you have either `@vitest/browser/providers/playwright` or `@vitest/browser/providers/webdriverio` specified in your `tsconfig` depending on the provider you use. If you use the default `preview` provider, you can specify `@vitest/browser/matchers` instead. 35 35 + If you are using [TypeScript](/guide/browser/#typescript) or want to have correct type hints in `expect`, make sure you have either `@vitest/browser/providers/playwright` or `@vitest/browser/providers/webdriverio` referenced in your [setup file](/config/#setupfile) or a [config file](/config/file) depending on the provider you use. If you use the default `preview` provider, you can specify `@vitest/browser/matchers` instead. 36 36 37 37 ::: code-group 38 38 - ```json [preview] 39 39 - { 40 40 - "compilerOptions": { 41 41 - "types": [ 42 42 - "@vitest/browser/matchers" 43 43 - ] 44 44 - } 45 45 - } 38 38 + ```ts [preview] 39 39 + /// <reference types="@vitest/browser/matchers" /> 46 40 ``` 47 47 - ```json [playwright] 48 48 - { 49 49 - "compilerOptions": { 50 50 - "types": [ 51 51 - "@vitest/browser/providers/playwright" 52 52 - ] 53 53 - } 54 54 - } 41 41 + ```ts [playwright] 42 42 + /// <reference types="@vitest/browser/providers/playwright" /> 55 43 ``` 56 56 - ```json [webdriverio] 57 57 - { 58 58 - "compilerOptions": { 59 59 - "types": [ 60 60 - "@vitest/browser/providers/webdriverio" 61 61 - ] 62 62 - } 63 63 - } 44 44 + ```ts [webdriverio] 45 45 + /// <reference types="@vitest/browser/providers/webdriverio" /> 64 46 ``` 65 47 ::: 66 48

+6 -18

docs/guide/browser/commands.md

Reviewed

··· 149 149 ``` 150 150 151 151 ::: tip 152 152 - If you are using TypeScript, don't forget to add `@vitest/browser/providers/playwright` to your `tsconfig` "compilerOptions.types" field to get autocompletion in the config and on `userEvent` and `page` options: 152 152 + If you are using TypeScript, don't forget to reference `@vitest/browser/providers/playwright` in your [setup file](/config/#setupfile) or a [config file](/config/file) to get autocompletion in the config and in `userEvent` and `page` options: 153 153 154 154 - ```json 155 155 - { 156 156 - "compilerOptions": { 157 157 - "types": [ 158 158 - "@vitest/browser/providers/playwright" 159 159 - ] 160 160 - } 161 161 - } 154 154 + ```ts 155 155 + /// <reference types="@vitest/browser/providers/playwright" /> 162 156 ``` 163 157 ::: 164 158 ··· 171 165 Vitest automatically switches the `webdriver` context to the test iframe by calling `browser.switchToFrame` before the command is called, so `$` and `$$` methods refer to the elements inside the iframe, not in the orchestrator, but non-webdriver APIs will still refer to the parent frame context. 172 166 173 167 ::: tip 174 174 - If you are using TypeScript, don't forget to add `@vitest/browser/providers/webdriverio` to your `tsconfig` "compilerOptions.types" field to get autocompletion: 168 168 + If you are using TypeScript, don't forget to reference `@vitest/browser/providers/webdriverio` in your [setup file](/config/#setupfile) or a [config file](/config/file) to get autocompletion: 175 169 176 176 - ```json 177 177 - { 178 178 - "compilerOptions": { 179 179 - "types": [ 180 180 - "@vitest/browser/providers/webdriverio" 181 181 - ] 182 182 - } 183 183 - } 170 170 + ```ts 171 171 + /// <reference types="@vitest/browser/providers/webdriverio" /> 184 172 ``` 185 173 :::

+41 -4

docs/guide/browser/index.md

Reviewed

··· 245 245 }, 246 246 }) 247 247 ``` 248 248 - 249 249 - To have type hints, add `@vitest/browser/providers/playwright` to `compilerOptions.types` in your `tsconfig.json` file. 250 248 == WebdriverIO 251 249 You can configure what [options](https://webdriver.io/docs/configuration#webdriverio) Vitest should use when starting a browser via [`providerOptions`](/config/#browser-provideroptions) field: 252 250 ··· 266 264 }, 267 265 }) 268 266 ``` 269 269 - 270 270 - To have type hints, add `@vitest/browser/providers/webdriverio` to `compilerOptions.types` in your `tsconfig.json` file. 271 267 ::: 272 268 273 269 ## Browser Option Types ··· 283 279 - `firefox` 284 280 - `webkit` 285 281 - `chromium` 282 282 + 283 283 + ## TypeScript 284 284 + 285 285 + By default, TypeScript doesn't recognize providers options and extra `expect` properties. If you don't use any providers, make sure the `@vitest/browser/matchers` is referenced somewhere in your tests, [setup file](/config/#setupfile) or a [config file](/config/file) to pick up the extra `expect` definitions. If you are using custom providers, make sure to add `@vitest/browser/providers/playwright` or `@vitest/browser/providers/webdriverio` to the same file so TypeScript can pick up definitions for custom options: 286 286 + 287 287 + ::: code-block 288 288 + ```ts [default] 289 289 + /// <reference types="@vitest/browser/matchers" /> 290 290 + ``` 291 291 + ```ts [playwright] 292 292 + /// <reference types="@vitest/browser/providers/playwright" /> 293 293 + ``` 294 294 + ```ts [webdriverio] 295 295 + /// <reference types="@vitest/browser/providers/webdriverio" /> 296 296 + ``` 297 297 + 298 298 + Alternatively, you can also add them to `compilerOptions.types` field in your `tsconfig.json` file. Note that specifying anything in this field will disable [auto loading](https://www.typescriptlang.org/tsconfig/#types) of `@types/*` packages. 299 299 + 300 300 + ::: code-block 301 301 + ```json [default] 302 302 + { 303 303 + "compilerOptions": { 304 304 + "types": ["@vitest/browser/matchers"] 305 305 + } 306 306 + } 307 307 + ``` 308 308 + ```json [playwright] 309 309 + { 310 310 + "compilerOptions": { 311 311 + "types": ["@vitest/browser/providers/playwright"] 312 312 + } 313 313 + } 314 314 + ``` 315 315 + ```json [webdriverio] 316 316 + { 317 317 + "compilerOptions": { 318 318 + "types": ["@vitest/browser/providers/webdriverio"] 319 319 + } 320 320 + } 321 321 + ``` 322 322 + ::: 286 323 287 324 ## Browser Compatibility 288 325

+5 -17

docs/guide/browser/interactivity-api.md

Reviewed

··· 12 12 await userEvent.click(document.querySelector('.button')) 13 13 ``` 14 14 15 15 - Almost every `userEvent` method inherits its provider options. To see all available options in your IDE, add `webdriver` or `playwright` types (depending on your provider) to your `tsconfig.json` file: 15 15 + Almost every `userEvent` method inherits its provider options. To see all available options in your IDE, add `webdriver` or `playwright` types (depending on your provider) to your [setup file](/config/#setupfile) or a [config file](/config/file) (depending on what is in `included` in your `tsconfig.json`): 16 16 17 17 ::: code-group 18 18 - ```json [playwright] 19 19 - { 20 20 - "compilerOptions": { 21 21 - "types": [ 22 22 - "@vitest/browser/providers/playwright" 23 23 - ] 24 24 - } 25 25 - } 18 18 + ```ts [playwright] 19 19 + /// <reference types="@vitest/browser/providers/playwright" /> 26 20 ``` 27 27 - ```json [webdriverio] 28 28 - { 29 29 - "compilerOptions": { 30 30 - "types": [ 31 31 - "@vitest/browser/providers/webdriverio" 32 32 - ] 33 33 - } 34 34 - } 21 21 + ```ts [webdriverio] 22 22 + /// <reference types="@vitest/browser/providers/webdriverio" /> 35 23 ``` 36 24 ::: 37 25