cypressvuejs3quasar-frameworkcypress-component-test-runner

Quasar2 Vue3 Cypress Cannot read properties of undefined (reading 'deep')

I have the following component test:

import AutoGeneratedPage from '../../../src/components/AutoGenerate/AutoGenerate.vue'; // <= note the absence of `.vue` extension, here we are importing the JS/TS part of a Double File Component
describe('AutoGenerated Page tests', () => {
  it('Auto generated page from JSON should contain all the UI Elements', () => {
    cy.mount(AutoGeneratedPage);
    cy.get('[data-test="toggle-setting-0"]').eq(false);
    cy.get('[data-test="toggle-setting-0"]').focus().click();
    cy.get('[data-test="toggle-setting-0"]').eq(true);
    cy.get('[data-test="dropdown-setting-3"]').should('have.text', 'Option 1');
    cy.get('[data-test="dropdown-setting-3"]').should('have.text', 'Option 2');
    cy.get('[data-test="dropdown-setting-3"]').should('have.text', 'Option 3');
  });
})

and bump into the following error when running the component test: What do I miss? https://github.com/khteh/quasar enter image description here

Solution

  • Remove mount() and all references to quasar UI stuff. mount() must only be used for Component Tests. Not E2E tests.