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

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.