Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Write, Test and Debug Vue 3 Components in the Browser Using Cypress

via egghead.io

Overview

Approaching testing at a component level definitely has its benefits. Seeing your components rendered in isolation and making sure it behaves correctly with different properties is definitely faster than trying to interact with an app at an end-to-end level. Besides, it renders each component in the browser as the user would see it, and that allows you to debug components using your dev tools.
With Cypress’ component testing, you can now take the best of both worlds. Render components and interact with them in a real browser. You can pass different properties, spy on its function calls, click and type into them or even intercept its network calls. All this with a minimal setup and vast options.
What you'll learn
setup component testing in Cypress
customize component mounting properties
render a component in a browser
examine a component with different passed properties
make assertions on component’s emitted events
render a component with content passed into its
catch edge cases by calling actions and passing values into Pinia’s state
handle router and its effect component behavior

Syllabus

  • Setup Vue 3 Component Testing in Cypress
  • Mount and Test a Vue 3 Component in Cypress
  • Setup Global CSS Properties for Cypress Component Tests
  • Pass Properties Into a Vue 3 Component Within a Cypress Test
  • Render a Vue 3 Component with and Test its Content Properties
  • Use Cypress cy.spy() Function to Test a Vue 3 Component’s Emitted Events
  • Call Pinia Store Actions From Within a Cypress Component Test
  • Mutate Application State Properties Directly with Pinia’s storeToRefs()
  • Rewrite Cypress mount() Command to Provide a Default Store to all Components
  • Test a Component Rendering Within Different Router Locations in Cypress Component Test

Taught by

Filip Hric

Reviews

3.9 rating at egghead.io based on 2 ratings

Start your review of Write, Test and Debug Vue 3 Components in the Browser Using Cypress

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.