Quasar2+Vue3+Cypress测试报错：Cannot read properties of undefined (reading 'deep')

问题场景 #

我编写了如下Quasar组件的Cypress测试代码：

import AutoGeneratedPage from '../../../src/components/AutoGenerate/AutoGenerate.vue'; // 注：这里没有.vue扩展名，导入的是双文件组件的JS/TS部分
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');
  });
})

运行测试时触发错误：Cannot read properties of undefined (reading 'deep')，项目基于quasar仓库构建，报错截图如下：

问题排查与解决步骤 #

1. 补全Quasar组件的Cypress挂载配置 #

Quasar组件依赖全局的框架配置（如组件注册、样式、插件初始化等），直接调用cy.mount()会导致Quasar内部依赖未加载，触发deep相关的未定义错误。需要在Cypress中配置Quasar专属的挂载逻辑：

• 确保项目已安装@quasar/quasar-app-extension-testing-e2e-cypress扩展
• 在Cypress支持文件（如cypress/support/component.ts）中添加全局挂载配置：

import { mount } from 'cypress/vue';
import { Quasar } from 'quasar';
import 'quasar/dist/quasar.css';

Cypress.Commands.add('mount', (component, options = {}) => {
  options.global = options.global || {};
  options.global.plugins = options.global.plugins || [];
  options.global.plugins.push({
    install: (app) => {
      app.use(Quasar, {
        plugins: {}, // 按需添加项目用到的Quasar插件
        // 可根据需求添加语言配置等
      });
    },
  });

  return mount(component, options);
});

2. 修正测试代码中的语法错误 #

原测试代码存在两处逻辑错误，也可能加剧异常触发：

• .eq(false)用法错误：.eq()接收的是索引数字，断言开关状态应该用.should('not.be.checked')或.should('be.checked')
• 下拉框连续断言不同文本：同一个元素不可能同时拥有三个不同文本，需改为触发选择操作后再断言对应内容

修正后的测试代码：

import AutoGeneratedPage from '../../../src/components/AutoGenerate/AutoGenerate.vue';

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"]').should('not.be.checked');
    cy.get('[data-test="toggle-setting-0"]').focus().click();
    cy.get('[data-test="toggle-setting-0"]').should('be.checked');
    
    // 下拉框操作与断言示例
    cy.get('[data-test="dropdown-setting-3"]').click();
    cy.get('.q-item__label').contains('Option 2').click();
    cy.get('[data-test="dropdown-setting-3"]').should('have.text', 'Option 2');
  });
})

3. 规范组件导入路径 #

原代码注释提到省略.vue扩展名导入JS/TS部分，但在Vue+Quasar项目中，直接导入完整的.vue文件即可，Cypress会自动处理模板与脚本模块，建议保留扩展名避免路径解析异常：

import AutoGeneratedPage from '../../../src/components/AutoGenerate/AutoGenerate.vue';

内容的提问来源于stack exchange，提问作者khteh