Fast, easy and reliable testing for anything that runs in a browser.

cypress

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Approaching testing at a component level has definitely its benefits. Seeing your component rendered in isolation, and making sure it behaves correctly with different properties is definitely faster that trying to interact with an app at end-to-end level. On the other hand, seeing your app render in a browser in an end-to-end test is a significant advantage. 

With Cypress’ component testing you can now take the best of both worlds. Render component and interact with it 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 asserrtions on component’s emitted events
- render a component with content passed into its `<slot />`
- catch edge cases by calling actions and passing values into Pinia’s state
- handle router and it’s effect component behavior

To start with component testing in Cypress you need to open Cypress and go through setup wizard that will help you out with your first steps. It will take you through a couple of steps, where you’ll install dependencies and create important configuration. Most of this is done for you, but you can customize anything. In our application, we will be working with Vue 3 framework with Vite bundler.

Setup Vue 3 Component Testing in Cypress

To create our first test, you’ll create a spec file that pairs with the component. Usual naming convention is using `filename.cy.ts` (or .js), but this can be easily set up in `cypres.config.ts` file. After you create the spec file, you can mount the component by importing it and using cy.mount() command inside an `it()` block. This will render the component inside Cypress app, but will not load all the dependencies that the component needs, like css styles. These need to be imported into the spec file manually. Since we are running our component in a browser and inside a Cypress app, we can interact with it using common Cypress commands.

Mount and Test a Vue 3 Component in Cypress

Importing styles is going to be essential for all of our components to render properly. We will do this similarly as we do in our application - at top level. `component.ts` file is the proper file for this, as this is the one that gets loaded before running our specs. Importing our `index.css` file here will make all of our components render with the correct styles.

Setup Global CSS Properties for Cypress Component Tests

Some components can have properties passed into them, For these, we can use an options parameter in our `cy.mount()` function and pass `props` attribute which will define the properties we want to pass into our component. This way we can test whether different properties correctly render out in our component.

Pass Properties Into a Vue 3 Component Within a Cypress Test

By passing a `slots` option to our `cy.mount()` function, we can define content to be rendered inside our current component. We can use default or named components and eve use Vue’s `h()` function to create element and pass components with desired properties.

Render a Vue 3 Component with <slot /> and Test its Content Properties

`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.

Use Cypress cy.spy() Function to Test a Vue 3 Component’s Emitted Events

When component uses a state management tool like Pinia, it needs to be defined within the test. To use Pinia inside the Cypress component test, we need to create a Pinia instance and pass it into our store. For changing the state we can call our actions directly from within our test and assert different attributes of the component with Cypress commands

Call Pinia Store Actions From Within a Cypress Component Test

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.

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

Every component test that uses Pinia needs to have Pinia imported and initialized. Instead of doing this separately for each test you can customize your `cy.mount()` command to automatically use a default store. You can further then customize it to use your own store in case you want to change its state.

Rewrite Cypress mount() Command to Provide a Default Store to all Components

Some components render differently based on the route they are rendered on. To use router within component tests, it is best to define its default values in `cy.mount()` function. Since we can customize this in any way we’d like, we can create a custom `path` attribute where we can pass our own routes and test our component behavior against them.

Test a Component Rendering Within Different Router Locations in Cypress Component Test

Learn how to set up and test different network conditions using the Cypress intercept command.

Test Network Edge Cases with .intercept() Command in Cypress

This course is for learners just starting out as well as for those who want to get up to speed on Vue 3. You'll learn all the foundational skills of web development in Vue. 

The Beginner's Guide to Vue 3

At the end of this course, you will be able to add auditing tools to your development workflow for accessibility issues in your applications and ultimately automate those audits.

Auditing React Apps for Accessibility 

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

https://app.egghead.io/api/v1/lessons/vue-js-setup-vue-3-component-testing-in-cypress/subtitles

Man 1: [0:00] To start with component testing in Cypress, we're first going to install Cypress by typing npm install cypress with the latest version. Once it's installed, I'm going to run it by typing npx Cypress open. This will open Cypress in graphic user interface mode.
[0:24] I'm going to click component testing to set up my project. For my project, I'm going to use vue.js, with the version of three and I'm using Vite bundler. I'll choose that and click on next step.

[0:39] Based on these choices, Cypress is going to require some additional dev dependencies. Since I have all of them installed, I'm going to continue. In the next step, Cypress is going to create some configuration files and a component.ts file and also commands.ts file.

[1:03] There's also a component-index.html, which is where our components are going to be rendered to and also an example fixture. I'll click on continue and I'm basically done with the setup.

[1:16] In my VS code, I can see that I have a Cypress folder and also cypress.config file with the definition we have just chosen in the graphic user interface. Inside the support folder, I have the files that were mentioned.

[1:33] The component.ts will actually contain one more thing, which is the mount function from cypress/vue package that's going to be added here as a custom command in Cypress, so that we can use it as shown in the example below.

https://app.egghead.io/api/v1/lessons/vue-js-setup-vue-3-component-testing-in-cypress/transcript

https://app.egghead.io/api/v1/lessons/vue-js-mount-and-test-a-vue-3-component-in-cypress/transcript

https://app.egghead.io/api/v1/lessons/vue-js-setup-global-css-properties-for-cypress-component-tests/subtitles

Instructor: [0:00] Our index.css file is going to be important for all of our component tests. Instead of importing it like this into every file, we can import it globally. A good place for that would be inside our Cypress project and inside the component.ts file.
[0:20] Here, we have defined our custom command for mounting our components and this is where everything global should be. I'm going to import that CSS file in here, but I need to define the correct path.

[0:35] Of course, I could use the relative path to that, but since we are in TypeScript, I can define my paths in tsconfig file so that anything maps to @/ is going to be mapped to the src folder. This means that inside my component.ts file, I can just go @/index.css, and it's going to work. Now, when I save both of my tests, I can see that everything is still unchanged, and my component looks the way it should.

https://app.egghead.io/api/v1/lessons/vue-js-setup-global-css-properties-for-cypress-component-tests/transcript

vitest is a versatile testing tool that provides various options to run tests. Here's a breakdown of how you can use it:

**Running Tests in Watch Mode**

By default, vitest runs in watch mode. This means that the tests will re-run automatically whenever there are changes in your functions.

For example, if you have a script defined in your package.json as:
```json
{
  "scripts": {
    "test": "vitest"
  }
}
```

You can run it with the following command:

```bash
npm run test
```

If your function fails and you update it, vitest will run again, giving you immediate feedback.

**Running Tests Once**

If you wish to run the tests just once without entering the watch mode, you can use the `vitest run` command.

You can add this to your package.json scripts as:

```json
{
  "scripts": {
    "test": "vitest",
    "test:once": "vitest run"
  }
}
```

And then run it with:
```bash
npm run test:once
```

**Accessing the vitest UI**

vitest comes with a built-in UI which can be accessed using the `--UI` flag. 

In your package.json, you can have a script like:
```json
{
  "scripts": {
    "test": "vitest",
    "test:ui": "vitest --ui"
  }
}
```

To launch the dashboard along with the tests in watch mode, use:
```bash
npm run test:ui
```

![vitest ui](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698440916/tips/kevin-cunningham/vitest-ui.png)

This dashboard provides insights into:

each test and its report:

![single test](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698440916/tips/kevin-cunningham/vitest-single-test.png)

the module graph:

![module graph](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698440916/tips/kevin-cunningham/vitest-module-graph.png)

the code where the test originates from:

![code tested](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1698440917/tips/kevin-cunningham/vitest-code-test.png)

**Passing Flags to Package Scripts**

When you want to pass additional flags to the script with `npm run`, you might encounter an issue. For instance, running:
```bash
npm run test --ui
```

Won't work as expected. This is because the `--UI` flag is being passed to npm and not to the vitest command.

To correctly pass the flag, use an additional double dash `--` before your flags, like so:
```bash
npm run test -- --ui
```

This tells npm that the subsequent flags should be passed to the script and not npm itself.

In conclusion, vitest offers a rich set of features to help you run and monitor your tests effectively. Whether you prefer the watch mode for continuous feedback or need the UI dashboard for detailed insights, vitest has you covered. Remember to use the double dash `--` when passing flags to your npm scripts to ensure they work as intended.

Enhance Your Testing Workflow with vitest

[00:00] When I have a package script like this I can run it with npm run test. vitest runs in watch mode automatically so that if I change my function to fail it will run if I update it will run again.

[00:18] If instead I only wanted this to run one time I can run vitest run. In my package script I could add a another script tag vitest run like that and then npm run test once. It'll run once and then quit.

[00:37] vitest also comes with a UI which we can access with a flag dash dash UI. So I'll add another script vitest dash dash UI and I'll run npm run test UI which as well as running my test in watch

[00:53] mode will launch this dashboard where I can look at each test its report the module graph and the code where the test goes from. Creating these multiple test functions just to pass these parameters can be a bit frustrating especially for parameters that you're only using once or twice.

[01:13] If I do npm run test run then that will do the same as test once so we can get rid of that one. If I do npm run test dash dash UI that does not launch my UI and that's because

[01:30] this dash dash UI flag is being passed to npm and not to the script that npm run test is pointing towards. If I do want to pass additional flags to this script in other words reproduce this vitest

[01:45] dash dash UI then before my flags I do a separate dash dash. This is telling npm that anything that comes after this point shouldn't be passed to npm but should instead be appended to the end of the

[01:59] script tag. So this npm run test dash dash dash dash UI is the same as vitest dash dash UI so it's the same as this. So if I run this as well as running my tests I also get my dashboard. So you can pass arguments to package scripts in line but to be able to pass

[02:16] flags to package scripts you have to use an additional double dash.

https://app.egghead.io/api/v1/lessons/vue-js-pass-properties-into-a-vue-3-component-within-a-cypress-test/transcript

https://app.egghead.io/api/v1/lessons/vue-js-render-a-vue-3-component-with-slot-and-test-its-content-properties/subtitles

Instructor: [0:00] I will now be testing a dropdown component. Interesting thing about this component is that I have a slot over here. Slots are very powerful way of how we can pass contents, template, or even a whole component within our component.
[0:15] In my component test, when I want to pass content to a slot, I'll just add another option called slots, and then I can pass a default slot with the text of add new list. This is a default keyword, but if I had some named slots, I would put in the names of those slots in here. For now, the default will do.

[0:40] Let me save my test and as I can see, the content has now rendered inside my slot. I can now write a test where I'm going to assert that the text is actually visible. When I save it, it's going to pass.

[0:58] What if I want to pass a component? In fact, I do have a dropdown item that is supposed to be rendered in this dropdown component. Let me go back to my test and I'll just go ahead and import it. Dropdown item from components common and then dropdown item .vue.

[1:22] What I'll do now is that instead of this text I can just passed the component itself. When I now save my test, I can see that the component is rendered with slightly different styling as we had before. Our test is now failing. The reason for that is that our dropdown item component, which we now insert it as slot, accepts properties.

[1:46] One of those properties is item text, which is going to render the text of the dropdown item. By default, it goes by item text, which is what we can see rendered inside our browser. What we need to do is to pass properties into this dropdown item component. In order to do that, we are going to import an H function from vue.

[2:14] This essentially works as a function that will create an element. I'm going to create a constant that's going to be called dropdown action item. This is going to be a function that will return our H function where the first parameter will be the dropdown item. The second parameter will be an options object, which is going to contain all of the properties. Item text, and that's going to have the value of add a new list.

[2:53] Now, instead of having the drop-down item as a slot, I'm going to parsing the drop-down action item that I created. I'll save my test. I can see that my component is rendered as a slot inside the drop-down component. It would be nice to test more items.

[3:14] For example, in my drop-down item component, I can see that there's also a warning property, which, by default, goes to false, but if it's set up to true, it's going to set this warning class and apply a red text into it. Let's go ahead and test that.

[3:33] I'm going to copy this, but instead of an action item, I'm going to use warning item. The text for this is going to be delete list. I'll also parse the warning property. That's going to be set to true. Now, if I want to parse this component, I can change this default slot into an array and parse it as a second component.

[4:05] When I save it, I can see that both of my components are now rendered. To finish this off, I'm going to write a couple of assertions. Let's go for contains delete, make sure that it's visible. Then, also, I want to make sure that it has a class called warning. Then, finally, I'm going to get both of my items and go drop-down item. Then, make sure that there are two of those.

[4:42] I have length and two. I'll save my test. I can that everything parsing.

https://app.egghead.io/api/v1/lessons/vue-js-render-a-vue-3-component-with-slot-and-test-its-content-properties/transcript

https://app.egghead.io/api/v1/lessons/vue-js-use-cypress-cy-spy-function-to-test-a-vue-3-component-s-emitted-events/subtitles

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.

https://app.egghead.io/api/v1/lessons/vue-js-use-cypress-cy-spy-function-to-test-a-vue-3-component-s-emitted-events/transcript

https://app.egghead.io/api/v1/lessons/cypress-call-pinia-store-actions-from-within-a-cypress-component-test/subtitles

https://app.egghead.io/api/v1/lessons/cypress-call-pinia-store-actions-from-within-a-cypress-component-test/transcript

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.

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

https://app.egghead.io/api/v1/lessons/vue-js-rewrite-cypress-mount-command-to-provide-a-default-store-to-all-components/subtitles

Instructor: [0:00] In this component test, I actually have the same problem as I had in the previous example.
[0:06] Since my loading component actually uses pinia to access some state, I need to import createPinia from the pinia package, then import my store, and then actually call the createPinia and pass it on to my store function.

[0:30] This is, of course, very lengthy if I need to do it for all of my components that use the state. Instead what I can do is to rewrite my mount command so that it will load the default store automatically.

[0:45] In order to do that, I'm going to jump over to my cypress folder. In the support folder, I have my component.ts file. When I scroll down, I can see that my mount command basically returns the mount function from cypress/vue package.

[1:05] Let's rewrite this slightly. Instead of just returning the function, let's make this custom command receive a couple of arguments. The first one will be, of course, the component itself, and then we will load some options, which by default will be empty.

[1:23] Inside here, I'm going to call my pinia function, as I did before, and I need to import that, so let's do import. Then we are going to import our store and call it with the createPinia initializer. As a final step, this function is going to return our mount function but with the component and options as well.

[2:04] When I now save my component file and then delete all this from my loading spec, I can see that the test is still running, and it's loading the state of our store.

[2:17] Let me actually put it back. I want my cy.mount function to actually receive some options so whenever I decide to pass my own state, it will be able to handle that.

[2:32] Let me go back to the component and I'm going to make changes to my command, so that if the options object will contain a store property, then I want to use that, but if it's undefined, it can use the default store.

[2:49] I'll save this, and now I'll go back to my test, and I'm going to save this use store into a constant called "store," and I will be passing it on to the cy.mount function.

[3:02] When I save my test, it still works. Now, I want to make sure that I can change the properties. Let's just these tractor, the connection error property, which our loading component uses.

[3:18] I'm going to use store-to-refs function to use it on my store. Now, I need to import that. Let's do this and inside my test, I'm going to change the connection error value to 1.

[3:37] As I save my test, I can now see that there's another element on my page rendering a message, "This is taking too long," which is a message that will appear for user, if they have a connection error.

[3:50] We can now write tests that will make sure that this message appears in this case. Now, the only thing left for us to do is to fix this TypeScript errors. Basically, we just want to make sure that the mount function is able to take our arguments.

[4:14] Component can just be any. Then, we'll have the options which are optional. I just want to make sure that it's going to be an options object. I'll use, "Record< string, any."

[4:33] This function is going to return chainable and any, which is go-to return type for Cypress chainable functions at the moment. All of the commands that can be chained are basically inside this chainable interface.

https://app.egghead.io/api/v1/lessons/vue-js-rewrite-cypress-mount-command-to-provide-a-default-store-to-all-components/transcript

https://app.egghead.io/api/v1/lessons/vue-js-test-a-component-rendering-within-different-router-locations-in-cypress-component-test/transcript

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

Filip Hric

What you'll learn

You might also like these resources:

Test Network Edge Cases with .intercept() Command in Cypress

The Beginner's Guide to Vue 3

Auditing React Apps for Accessibility

Course Content

You might also like these resources:

Test Network Edge Cases with .intercept() Command in Cypress

The Beginner's Guide to Vue 3

Auditing React Apps for Accessibility