Use Cypress cy.spy() Function to Test a Vue 3 Component’s Emitted Events
emit() function enables components to communicate with one another. While this communication is a good candidate for end to end test, we can also test this in isolation within component. To do this, we’ll use cy.spy() function that will watch for the defined function call. Using this, we can confirm that our emitted event was actually invoked.
Instructor: [0:00] The next component I'm going to test emits a custom event called toggleInput. Basically, when I click on this button, it's going to show an input somewhere in the application. In my test, I want to verify that our component emits this event. [0:18] In order to do that, we're going to pass some options into our options object. I'll define properties with onToggleInput attribute. I will assign a cy.spy() command onto that. This may be a little bit confusing because if we take a look into our component, our toggleInput is not a property, it's an event that is emitted, but this is basically the current state of how this is handled.
[0:52] Cypress documentation mentions that this may change in the future, but as of current version, which is 10.4, we need to access the emitted events through the props object.
[1:05] When I now run my test inside my Cypress app, I can see that there's spies and stubs section, which is telling us how many functions are we spying on. When I click on the event, you can see that we are spying on our toggleInput event.
[1:23] Let's write a command that will do the click for us. I'll find a selector using SelectorPlayground, copy it, paste it into my test, and use the click command to click on my element. I'll save this, and I see that the function call has occurred.
[1:43] In order to make an assertion on our function call, I'm going to add an alias to this spy. I'll just call it toggleInputSpy, and I can now use get function to select this spy within our test and then make an assertion that it should have been called.
[2:07] After we click, our function should have been called. Let me save this, and I can see that the alias is highlighting the function call, and the assertion is passing because the function has been called. Additionally, if we take a look into our component, we can see that the toggleInput emit is called with an argument that is true.
[2:32] I can make assertion about this as well and make sure that the function has been called with a certain argument, and that argument should be true. As I now save my test, everything is nicely passing.