Improve the quality of your applications with a solid component test suite.

In the Testing Vue.js Components workshop, you will learn how to test your components using Cypress Component Testing and Vitest.

You'll learn the techniques and strategies needed to test common component architecture.

We cover the essentials, such as when to choose which tool: Vitest or Cypress Component Testing, best practices on what to actually test, testing a component’s rendered HTML, and testing component interactions with other components and user interactions with the component.

In the course, we follow the recommendations of the official Vue docs choosing to do tests that:

• assert correct render output based on inputted props and slots
• and assert correct render updates or emitted events in response to user input events.

On the other hand we avoid tests that:

• tests component internals as testing implementation details makes the tests brittle
• rely exclusively on snapshot tests

Throughout the workshop, you will practice what you learn by working on a lot of hands-on assignments with help from Daniel.

Once you're done with the workshop you'll be able to test your Vue.js applications with confidence using Cypress Component Testing and Vitest.

Topics

• Introduction to Cypress Component Testing
• Programmatic interaction with Vue.js components
• Asserting DOM output matches expectations
• Mocking API requests
• Testing composables

Who is this for

This workshop is for developers who already know how to test JavaScript with Vitest, and want to expand their knowledge with testing Vue.js components.

If you don't know how to programmatically interact with a component, and test it’s rendered output, then this workshop is made for you!

Prerequisites

• Attend our Testing JavaScript Fundamentals workshop or have the equivalent experience with testing
• Intermediate Vue.js experience

Please note:
The Testing Vue.js Components workshop is part 2 in our testing workshop series.
We will not cover the fundamentals of testing, how to use Vitest, or go deep into what mocks, stubs, and spies are in this workshop. For that, please see part 1 - Testing JavaScript Fundamentals.