Quasar项目Jest转Vitest后mount组件报Cannot read 'deep'错误

问题根源 #

这个错误是由于组件中使用的Quasar v-ripple指令在Vitest测试环境中未被正确注册或mock，导致Vue渲染时尝试访问指令对象的deep属性但该对象为undefined。Jest环境中之前的配置可能自动处理了Quasar指令的注册，而Vitest迁移时遗漏了这一步。

解决方案 #

方案1：全局注册Quasar的v-ripple指令 #

直接在测试中导入并注册Quasar的Ripple指令，确保渲染时能找到该指令：

/**
 * @vitest-environment happy-dom
 */
import Login from "src/modules/auth/views/LoginPersonal.vue";
import { describe, test, vi } from "vitest";
import { mount } from "@vue/test-utils";
import { Ripple } from 'quasar'; // 导入Quasar的Ripple指令

let mockLogIn = vi.fn();

vi.mock("src/modules/auth/hooks/useLogUser", () => ({
  useLogUser: () => ({
    logIn: mockLogIn,
    loadingState: false,
    email: "",
    password: "",
  }),
}));

const mockStore = {
  dispatch: vi.fn(),
  getters: {
    "user/currentStatus": "authenticated",
    "user/currentUser": {
      name: "test",
      email: "test@test.com",
    },
  },
};
vi.mock("vuex", () => ({
  useStore: () => mockStore,
}));

describe("Login view", () => {
  test("Debe llamar al metodo Login cuando se hace click", async () => {
    const wrapper = mount(Login, {
      global: {
        directives: {
          ripple: Ripple // 注册v-ripple指令
        }
      }
    });
    // 后续测试逻辑
  });
});

方案2：mock v-ripple指令（轻量方案） #

如果不想引入完整的Quasar指令，可以mock一个空的指令对象，满足Vue渲染的基本要求：

// 在mount配置中添加mock指令
const wrapper = mount(Login, {
  global: {
    directives: {
      ripple: {
        // 空实现指令生命周期钩子
        mounted: () => {},
        updated: () => {},
        // 若需支持SSR可添加该方法
        getSSRProps: () => ({})
      }
    }
  }
});

方案3：检查版本兼容性 #

确保以下包版本匹配：

• @vue/test-utils 版本 >= 2.0.0（对应Vue 3）
• vitest 版本 >= 0.20.0
• quasar 版本 >= 2.0.0

版本不兼容可能引发这类渲染错误，建议升级到最新兼容版本。

验证 #

修改后重新运行测试，mount(Login)应该能正常渲染组件，不再出现Cannot read properties of undefined (reading 'deep')错误。

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