Quick Tests with Vitest

Lessons

1. Intro to Vitest

2:11

2. Writing your first test

5:42

3. Testing our components

10:11

4. Snapshots

3:34

5. Testing API Calls (mocking)

8:09

6. Testing a Page (E2E Testing)

10:45

7. Vitest UI, Coverage & Jest Migration

5:01

Testing our components

In the last lesson, we learned how to set up Vitest in our project and wrote a simple test to check the square root of a number. In this lesson, we’re going to build out our notification component and test that it works as intended.

Building our component

To focus on testing, I’ve already built our component. You can copy the code for the component below or from the GitHub repository in the lesson resources.

Let’s create a new file in our components folder called NotificationToast.vue and add the following code to it:

**📁src/components/Notifica