​

Let’s continue from where we last finished.

Once you set up your component testing configuration and your cy.mount() command, you are ready to go start testing! So let’s take a look at how this can be done.

Where to place component tests

With e2e testing, we usually have a dedicated folder where all of our tests are. But with component testing it is better to place your tests right next to your components.

When you create your first test, it’s useful to put a naming convention in place. In fact, Cypress will encourage you to do so with its default configuration, as it will look for any .cy.js or .cy.ts files. Basically, the .cy addition identifies the file as a Cypress test.

You can, however change this e.g. to .spec.ts in your configuration file:

​

component: {
  devServer: {
    framework: 'vue',
    bundler: 'vite',
  },
  setupNodeEvents(on, config) { },
  specPattern: 'src/**/*.spec.ts',
}

​

Mounting the component

Component testing in Cypress feels very familiar with e2e testing. It uses the same it() and describe() blocks from Mocha, but instead of calling cy.visit(), you will use cy.mount() to mount your component into browser.

import Footer from './Footer.vue'

it('display footer', () => {

  cy.mount(Footer)

})

​

Notice that whenever we want to mount a component, we need to import it into our test file. When we run this test in Cypress, it will successfully mount our component.

​

You’d be right to raise your eyebrows as this is not exactly what you would expect. Our component is missing CSS styles! In many cases, components rely on some other resource. It can be a module, package, state manager or CSS as in this case. This means that in order to make our component test work, it is often the case that we need to import a bunch of stuff.

CSS is something that probably all your components will need, so you might want to import that to your component.ts configuration file:

import { mount } from 'cypress/vue'
import '@/index.css';


declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount
    }
  }
}

Cypress.Commands.add('mount', mount)

What to test now?

Well, anything you want! If the component is dynamic, test its different states. If you have a form with validations, fill them in and check them. You have the power of Cypress command library at your disposal and you can use them as you wish. We’ll go through different ways of testing in future issues.

​

My new course is out!!

If you want to learn more than what’s in this issue, come and see my newest course on egghead.io! I’m pretty sure you are going to enjoy it, I believe this might be one of my best ones ❤️

​

​