Migrating to Vitest 4.0
With Vitest 4.0, the Browser Mode is out of experimental! 🎉 But that's not the only thing that has changed. In this exercise, you will go through all the breaking changes related to the Browser Mode and learn how to migrate to them in your projects.
Browser Mode Breaking changes
Dependencies
You no longer need to install the
@vitest/browser package. The Browser Mode comes built-in into Vitest itself.npm remove @vitest/browser
Imports
You should now import the
page object directly from the vitest package (its /browser export):-import { page } from '@vitest/browser/context'
+import { page } from 'vitest/browser'
Providers
Browser automation providers now have to be installed as separate dependencies. This is done to simplify provider options and their type-safety.
For example, to use the Playwright provider, install the following package:
npm i @vitest/browser-playwright
The integration of browser providers in your
vitest.config.ts has also changed. You should now pass the imported provider directly as the value of the test.browser.provider property. Any previous launch/connect/context provider options migrate from test.browser.instances to the provider function call.// Import the provider package directly.
+import { playwright } from '@vitest/browser-playwright'
export default defineConfig({
test: {
browser: {
enabled: true,
provider: 'playwright',
instances: [
{
browser: 'chromium',
context: {
reduceMotion: 'reduce',
},
},
]
provider: playwright({
contextOptions: {
reducedMotion: 'reduce',
},
}),
},
},
})