Cypress组件测试中使用Jest全局变量提示未定义的问题

数据老陈

2026-8-22

解决Cypress组件测试中无法使用jest全局变量的问题

问题原因

Cypress组件测试环境默认不提供jest全局对象，你代码里用到的jest.mock、jest.fn都是Jest专属API，Cypress运行时无法识别，所以抛出jest is not defined错误。

解决方案

方案1：使用Cypress原生Stub替代

Cypress自带cy.stub()方法可以实现类似Jest的mock功能，针对vue-router的useRoute可以这样写：

import { mount } from '@cypress/vue';
import { useRoute } from 'vue-router';
import YourComponent from './YourComponent.vue'; // 导入你的目标组件

describe('Foo', () => {
  beforeEach(() => {
    // Stub useRoute 方法，返回模拟的路由query对象
    cy.stub(useRoute).returns({ query: { foo: 'bar' } });
  });

  it('正确渲染基于路由query的内容', () => {
    mount(YourComponent);
    // 这里添加你的断言逻辑，比如检查组件是否显示了预期值
    cy.contains('bar').should('be.visible');
  });
});

方案2：手动导入Jest Mock工具

如果你更习惯用Jest的mock语法，可以安装jest-mock包并手动导入使用：

安装依赖：

npm install jest-mock --save-dev

在测试文件中导入并使用：

import { mount } from '@cypress/vue';
import { jest } from 'jest-mock';
import YourComponent from './YourComponent.vue';

// 使用jest.mock模拟vue-router模块
jest.mock('vue-router', () => ({
  useRoute: jest.fn(() => ({ query: { foo: 'bar' } }))
}));

describe('Foo', () => {
  it('测试组件逻辑', () => {
    mount(YourComponent);
    // 添加你的断言逻辑
  });
});