Cypress组件测试中直接Stub RTK Query Hook失效问题求助

当你直接在组件中使用RTK Query生成的useGetDataFromRTKQQuery Hook时，Cypress的cy.stub无法检测到调用，核心原因是ES模块的导出绑定特性：

1. RTK Query的Hook是在你的API slice文件中通过createApi生成并导出的，组件直接import这个Hook时，组件模块会保留对原Hook的引用绑定。
2. Cypress的cy.stub本质是修改测试文件中导入的Hook引用，但ES模块的导出是绑定关系而非值拷贝，组件已经加载的原Hook引用不会同步更新，导致stub无法作用到组件实际调用的Hook上。

而通过封装函数调用Hook时，你是在自己的模块中导出一个自定义函数（比如export const useMyData = () => useGetDataFromRTKQQuery()），此时组件调用的是这个自定义函数。测试中stub这个自定义函数时，Cypress可以正确替换该函数的引用，组件会直接调用stub后的版本，因此能被检测到。

方案1：使用Webpack模块别名替换（推荐） #

通过Cypress的Webpack配置，将真实的API slice模块替换为mock版本，让组件直接导入mock的Hook：

1. 在cypress.config.js中配置Webpack别名：

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'webpack',
      webpackConfig: {
        resolve: {
          alias: {
            // 替换你的真实API slice路径为mock文件
            '@/features/api/apiSlice': './cypress/mocks/apiSliceMock.js'
          }
        }
      }
    }
  }
});

2. 创建cypress/mocks/apiSliceMock.js，导出stub后的Hook：

import { cy } from 'local-cypress';

// 定义mock数据，结构要和真实Hook返回一致
const mockData = { id: 1, content: 'mock content' };

export const useGetDataFromRTKQQuery = cy.stub().returns({
  data: mockData,
  isLoading: false,
  error: null
});

方案2：使用RTK Query官方测试工具 #

RTK Query内置了测试支持，你可以创建一个测试专用的API实例，预存mock数据后替换组件使用的API：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { render } from '@testing-library/react';
import YourComponent from './YourComponent';

// 创建测试用API slice
const mockApi = createApi({
  reducerPath: 'mockApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: (builder) => ({
    getDataFromRTKQ: builder.query({
      query: () => 'data',
    }),
  }),
});

// 预存mock响应数据
mockApi.endpoints.getDataFromRTKQ.initiate({}).unwrap().mockResolvedValue({ id: 1, content: 'mock content' });

// 在测试中，让组件使用mockApi的Provider
it('should call the RTKQ Hook', () => {
  render(
    <mockApi.Provider>
      <YourComponent />
    </mockApi.Provider>
  );
  
  // 验证Hook调用
  expect(mockApi.endpoints.getDataFromRTKQ.initiate).to.be.called;
});

方案3：保留封装函数的方式（快速解决） #

既然封装后的函数能被正常stub，继续将RTK Query Hook封装为自定义Hook，测试时直接stub这个自定义Hook即可：

// 你的自定义Hook文件
import { useGetDataFromRTKQQuery } from './apiSlice';

export const useFetchData = () => useGetDataFromRTKQQuery();

// 测试文件
import { useFetchData } from './useFetchData';

it('should call the wrapped Hook', () => {
  cy.stub(useFetchData).returns({ data: mockData, isLoading: false });
  
  cy.mount(<YourComponent />);
  
  expect(useFetchData).to.be.called;
});

注意事项 #

• 不要直接stub RTK Query内部的私有方法，这会破坏其内部状态管理逻辑，导致组件行为异常。
• 所有mock的Hook返回值必须和真实Hook的结构完全一致（包含data、isLoading、error等核心属性），否则组件会因找不到属性报错。

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