How to mock two components to perform cypress testing using mountVue()?

Asked

Viewed 50 times

1

I am trying to mock two components using Cypress. These components were created in Vue. To perform unit tests I was able to mock using the mountVue() as you can see in the example below:

import IButton from '../../../src/components/Button/Button.vue'
import mountVue from 'cypress-vue-unit-test'

describe('Button', () => {
  beforeEach(mountVue({
    template: `
      <IButton ref="button">Some Text</IButton>
    `,
    components: {
      IButton
    }
  }))

  it('displays the text inside it', () => {
    cy.contains('Some Text')
  })

  it('has "sumit" class and type by default', () => {
    cy.get('.i-button')
      .should('have.class', 'submit')
      .should('have.attr', 'type', 'submit')
  })
})

So I’d like to know if there’s a way to mock two components at the same time, using the same kind of structure. The idea is to test the integration of two components.

In a separate file, I thought to start importing the two components (product and quantity selector) in the same file:

import IProductCard from '../../../src/components/ProductCard/ProductCard.vue'
import IQuantitySelector from '../../../src/components/QuantitySelector/QuantitySelector.vue'
import mountVue from 'cypress-vue-unit-test'

and I thought I’d build a structure similar to this:

 describe('With quantity selector', () => {
      beforeEach(mountVue(IQuantitySelector, IProductCard
      ))

      it('has produtc card and quantity selector', () =>
        cy.get('.i-quantity-selector')
          .should('exist')
          .should('be.visible')
      )
})

But when I run the test, he assembles one component first and then the other, but I wanted him to assemble both at the same time. I don’t know if there is a possibility to mount like this, but I’ve tried everything. I’ve tried to create a Arrow Function () => {}, I’ve tried using the mount() and the shallowMount() without success. In all cases he assembles one, and assembles the other separately. But I would like to assemble the two, and in the future more components together.

  • Usually when I want to test the integration between components I load the whole html. The page loaded completely (with all components). Would you like to understand why this requirement to test 2 only? Loading the full page (with all components loaded on it) does not solve?

  • I’d like to run tests between a few components before testing the full page. They are components that make sense to test together, but that does not depend on a whole page assembled to test!

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.