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

Question

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

Fody · Answer 1 · 2022-08-01T01:34:20.873

0

The first assertion needs changing:

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);

change to

cy.get('[data-test="toggle-setting-0"]').invoke('val').should('eq', false);
cy.get('[data-test="toggle-setting-0"]').focus().click();
cy.get('[data-test="toggle-setting-0"]').invoke('val').should('eq', true);

because .eq(number) is a Cypress command for taking the nth item in a group.

The error Cannot read properties of undefined (reading 'deep') is due to the deep rendering (i.e nested components) in the AutoGenerate.vue component.

If you comment out the child components, the test succeeds.

<div v-for="(field, index) in layoutObj.data" :key="index">
  <span>{{field.name}}</span>
  <!-- <toggle-setting
    v-if="field.type === 'toggle'"
    :name="field.name"
    :fieldName="field.fieldName"
    :description="field.description"
    :data-test="`toggle-setting-${index}`"
  />
  <pop-up-edit-setting
    v-if="field.type === 'popUpEdit'"
    :dataType="field.dataType"
    :name="field.name"
    :fieldName="field.fieldName"
    :hint="field.hint"
    :data-test="`popup-edit-setting-${index}`"
  />
  <drop-down-setting
    v-if="field.type === 'dropDown'"
    :name="field.name"
    :description="field.description"
    :fieldName="field.fieldName"
    :internalOptions="internalOptions"
    :data-test="`dropdown-setting-${index}`"
  /> -->
</div>

Of course, the child components are required, but I thought I'd post this in case it gives you clues.

In any case, the Cypress component test is configured correctly, this is the config I used.

const { defineConfig } = require("cypress");
const webpackConfig = require("./webpack.config");

module.exports = defineConfig({
  e2e: {
    ...
  },
  component: {
    devServer: {
      framework: "vue",
      bundler: "webpack",      
      webpackConfig,
    },
    specPattern: 'test/cypress/components/**/*.cy.{js,jsx,ts,tsx}',
    indexHtmlFile: 'test/cypress/support/component-index.html',
  },
});

Will add to this if I find out the problem with deep-nested components.

edited Aug 01 '22 at 01:34

answered Jul 31 '22 at 06:07

Fody

23,754
3
20
37

Just tried your suggestion but to no avail. Same error. – Kok How Teh Jul 31 '22 at 06:09
Ok it's something else - but you do need that change anyway. – Fody Jul 31 '22 at 06:10
Also the 3rd assertion. – Fody Jul 31 '22 at 06:11
Actually that's still not right! – Fody Jul 31 '22 at 06:13
Just tried. Still the same error. – Kok How Teh Jul 31 '22 at 06:15
Presume the toggle control is an ``, you also need to put `invoke('val')` to extract the inner value, then check it has false and true. – Fody Jul 31 '22 at 06:15
Yeah there appears to be more than one thing wrong, but the above is the only one can see in the code. Do you have a repo, I can try to get the error coming from `mount()` command. – Fody Jul 31 '22 at 06:18
https://github.com/khteh/quasar – Kok How Teh Jul 31 '22 at 06:22
`cy.get('[data-test="toggle-setting-0"]').invoke('val').should('eq', false);` doesn't work. I get `expect '' to equal false` error. – Kok How Teh Aug 02 '22 at 08:55
I should have spotted that - the result of `.invoke('val')` is always a string (never number or boolean). What do you get after the click() (comment out the above line so the test can run passed the click()). – Fody Aug 02 '22 at 09:02
This works: `cy.get('[data-test="toggle-setting-0"]').should("not.be.checked");`.However, after `click()`, the UI shows the correct state but `cy.get('[data-test="toggle-setting-0"]').should("be.checked");` fails. Puzzled. – Kok How Teh Aug 02 '22 at 09:03
Try [check()](https://docs.cypress.io/api/commands/check) instead of click(). – Fody Aug 02 '22 at 09:05
No, error message telling me that it can only be used on `checkbox` or `radio` button. This is a slider toggle button. – Kok How Teh Aug 02 '22 at 09:10
The Cypress browser UI shows it is checked though. – Kok How Teh Aug 02 '22 at 09:11

score 0 · Accepted Answer · answered Aug 02 '22 at 09:39

0

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

answered Aug 02 '22 at 09:39

Kok How Teh

3,298
6
47
85

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

2 Answers2