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?
– Danizavtz
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!
– Matheus Fernandes