Vitest as a test runner

Vitest is a test runner and framework that's growing in popularity. This course uses it whenever specific examples are required, but many of the samples included are generic and apply to whatever framework you've chosen.

Most runners or test frameworks tend to have a lot in common, and this course will be useful regardless of your chosen stack. We've chosen to focus on Vitest for a number of reasons:

  • It is modern and involves very little work to set up or configure, as opposed to other test runners. While it's built on the Vite build tool, Vitest still works with existing projects.

  • It also has great support for working with EcmaScript Modules (ESM), including mocking whole imports. While it has some caveats, it's more stable than other tooling.

Most importantly, it presents a largely compatible API to Jest, likely the most popular runner. But again, the way you structure and group your tests tends to be similar no matter which framework you're using. More advanced features, like complicated test doubles, tend to stray a bit further. This course uses Vitest to describe them, but always describes the generic solution as well.

React as a component model

While this course does provide general code examples that test plain JavaScript, for example, mathematical functions, it rapidly moves into testing React components before later including Web Components generally and using Lit. This course also uses Next.js.

This is a practical choice. Despite criticisms, React is the most used framework of the participants in the recent State of JS survey.