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 <slot /> 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

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

Instead of calling an action function to change the state, we can choose to change it directly by importing the attributes from our store. In order to not loose reactivity while destructuring properties we can use `storeToRefs()` function.

https://app.egghead.io/api/v1/lessons/vue-js-mutate-application-state-properties-directly-with-pinia-s-storetorefs/subtitles

Instructor: [0:00] I'm going to copy this test and create another one, but this time, we want to check for the error message. This time, I'd like to change my approach slightly. Instead of calling the action that changes the state, I want to change the state directly from within my test.
[0:20] In order to do that, I need to change the state of this object right here. This would not be too different from when we are using our state inside the component. Basically, what I'm going to do is to destructure the notification object from our store.

[0:42] There's a little catch for when I actually want to change the values of that notification object. In order to make it reactive, I need to change all of the values into refs. Luckily, there's this neat little function from pinia store to refs, which wraps the use store function and make the notification object reactive.

[1:11] Now, obviously, I need to import it from pinia but now I can go ahead and change the notification value to whatever I want. Let's say the show property will be set to true. The error property will be set to true as well.

[1:34] I'm going to pass a message and let me actually move it up here and change it to error message. Then we'll mount our notification. We're not going to be needing this in our test and we want to make sure that the notification message appears, but instead of info icon, we want to render the error icon.

[2:00] Since we are mutating the state directly, this assertion we need to delete. Let me filter out my test by using data only. When I save my test, you can see that the message is being nicely rendered and we see the proper icon. Also, the message is not disappearing and that is because we don't have a timeout function that would hide it for us this time.

Mutate Application State Properties Directly with Pinia’s storeToRefs()

Share this video with your friends

Course

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