Vue3迁移后Jest测试报错：$q.loading未定义

数据老陈

2026-6-17

解决Vue3迁移后Jest测试中$q.loading未定义的问题

问题原因

Quasar的Loading插件在Jest测试环境中不会自动注册，即使调用了installQuasarPlugin()，默认也仅初始化Quasar核心功能，未包含Loading这类附加插件。

解决方案

方案1：全局启用Loading插件

在测试文件顶部调用installQuasarPlugin时，显式指定要启用的Loading插件：

import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest';
import { Loading } from 'quasar';

// 显式加载Loading插件
installQuasarPlugin({
  plugins: { Loading }
});

这样测试环境中的$q.loading会被正确初始化，调用hide()时就不会出现未定义的错误。

方案2：局部模拟$q.loading对象

如果不想全局启用插件，可在组件挂载时通过Vue Test Utils的global.mocks模拟$q.loading：

import { mount } from '@vue/test-utils';
import TargetComponent from './TargetComponent.vue';

test('测试组件逻辑', () => {
  const wrapper = mount(TargetComponent, {
    global: {
      mocks: {
        $q: {
          loading: {
            hide: jest.fn(),
            show: jest.fn()
          }
        }
      }
    }
  });

  // 触发组件中调用$q.loading.hide()的逻辑后，还可断言方法调用
  expect(wrapper.vm.$q.loading.hide).toHaveBeenCalled();
});

这种方式更灵活，适合仅在单个测试用例中需要Loading的场景。