Setup Vue 3 Component Testing in Cypress
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.
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.