From 97c969d963df0ad0831f5afbaeae7786bb6705f8 Mon Sep 17 00:00:00 2001 From: Artem Zakharchenko Date: Thu, 13 Nov 2025 15:27:30 +0100 Subject: [PATCH 1/2] 05/01: add vitest 4.0 migration extra --- .../01.problem.vitest-4.0/README.mdx | 63 +++++++++++++++++++ .../01.problem.vitest-4.0/package.json | 3 + .../01.solution.vitest-4.0/README.mdx | 8 +++ exercises/05.extras/FINISHED.mdx | 5 ++ exercises/05.extras/README.mdx | 9 +++ tsconfig.json | 3 + 6 files changed, 91 insertions(+) create mode 100644 exercises/05.extras/01.problem.vitest-4.0/README.mdx create mode 100644 exercises/05.extras/01.problem.vitest-4.0/package.json create mode 100644 exercises/05.extras/01.solution.vitest-4.0/README.mdx create mode 100644 exercises/05.extras/FINISHED.mdx create mode 100644 exercises/05.extras/README.mdx diff --git a/exercises/05.extras/01.problem.vitest-4.0/README.mdx b/exercises/05.extras/01.problem.vitest-4.0/README.mdx new file mode 100644 index 0000000..61ecb84 --- /dev/null +++ b/exercises/05.extras/01.problem.vitest-4.0/README.mdx @@ -0,0 +1,63 @@ +# Migrating to Vitest 4.0 + +With [Vitest 4.0](https://github.com/vitest-dev/vitest/releases/tag/v4.0.0), the Browser Mode is out of experimental! :tada: 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. + +Feel free to take a look at the [Vitest 4.0 migration guide](https://vitest.dev/guide/migration.html#vitest-4) for the detailed instructions related to all the changes in the new version. + +## Browser Mode Breaking changes + +### Dependencies + +You no longer need to install the `@vitest/browser` package. The Browser Mode comes built-in into Vitest itself. + +```sh +npm remove @vitest/browser +``` + +### Imports + +You should now import the `page` object directly from the `vitest` package (its `/browser` export): + +```ts remove=1 add=2 nocopy +-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: + +```sh +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. + +```ts remove=8,12-14 add=17-21 +// 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', + }, + }), + }, + }, +}) +``` diff --git a/exercises/05.extras/01.problem.vitest-4.0/package.json b/exercises/05.extras/01.problem.vitest-4.0/package.json new file mode 100644 index 0000000..b156f9f --- /dev/null +++ b/exercises/05.extras/01.problem.vitest-4.0/package.json @@ -0,0 +1,3 @@ +{ + "name": "exercises_05.extras_01.problem.vitest-4.0" +} diff --git a/exercises/05.extras/01.solution.vitest-4.0/README.mdx b/exercises/05.extras/01.solution.vitest-4.0/README.mdx new file mode 100644 index 0000000..a307018 --- /dev/null +++ b/exercises/05.extras/01.solution.vitest-4.0/README.mdx @@ -0,0 +1,8 @@ +# Migrating to Vitest 4.0 + +This completes the migration to Vitest 4.0. Don't hesitate to reach out to me in case of any questions. I will leave a few useful links related to this migration below for future reference. + +## Useful materials + +- [Vitest 4.0 release notes](https://github.com/vitest-dev/vitest/releases/tag/v4.0.0) +- [Vitest 4.0 migration guide](https://vitest.dev/guide/migration.html#vitest-4) diff --git a/exercises/05.extras/FINISHED.mdx b/exercises/05.extras/FINISHED.mdx new file mode 100644 index 0000000..feb479d --- /dev/null +++ b/exercises/05.extras/FINISHED.mdx @@ -0,0 +1,5 @@ +# Extras + +That's it! There's no more extras for me to share. If you have any feedback on how to improve these extra exercises, please let me know by filling in and submitting the form to your right. + +Thank you once again for completing this workshop and see you in the future exercises! Take care and write great tests :wave:. diff --git a/exercises/05.extras/README.mdx b/exercises/05.extras/README.mdx new file mode 100644 index 0000000..35a63ff --- /dev/null +++ b/exercises/05.extras/README.mdx @@ -0,0 +1,9 @@ +# Extras + +Hi :wave: Artem from the future here. + +There's been a couple of changes to some of the technologies we went through in this workshop so I decided to add this extra exercise block to help you accommodate and understand those changes. Don't worry, **everything you've learned thus far still applies**. In my workshops, you're always getting concepts, mental models, and best practices first, APIs second. + +But those APIs still matter and these extras are here to guide you through any changes that has happened to the tools you've been using. + +The extra exercises _do not have any videos_, which does not diminish their practical value in any way. diff --git a/tsconfig.json b/tsconfig.json index e883af5..443d95f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -87,6 +87,9 @@ }, { "path": "exercises/04.debugging/03.solution.breakpoints" + }, + { + "path": "exercises/05.extras/01.problem.vitest-4.0" } ] } From 3a4b270aa49238e2a9b623e984de303f8b8e56d0 Mon Sep 17 00:00:00 2001 From: Artem Zakharchenko Date: Thu, 13 Nov 2025 15:29:35 +0100 Subject: [PATCH 2/2] remove package.json and tsconfig.json --- exercises/05.extras/01.problem.vitest-4.0/package.json | 3 --- tsconfig.json | 3 --- 2 files changed, 6 deletions(-) delete mode 100644 exercises/05.extras/01.problem.vitest-4.0/package.json diff --git a/exercises/05.extras/01.problem.vitest-4.0/package.json b/exercises/05.extras/01.problem.vitest-4.0/package.json deleted file mode 100644 index b156f9f..0000000 --- a/exercises/05.extras/01.problem.vitest-4.0/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "name": "exercises_05.extras_01.problem.vitest-4.0" -} diff --git a/tsconfig.json b/tsconfig.json index 443d95f..e883af5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -87,9 +87,6 @@ }, { "path": "exercises/04.debugging/03.solution.breakpoints" - }, - { - "path": "exercises/05.extras/01.problem.vitest-4.0" } ] }