Cypress调用getState()始终返回initialState问题求助

以下是针对该问题的几种排查和解决方向：

1. 确认Redux Store已正确挂载到window对象 #

确保在应用的store配置文件中，仅在开发环境下将store实例挂载到window（生产环境不会暴露store，而Cypress默认运行开发环境）：

// store.ts
import { configureStore } from '@reduxjs/toolkit';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();
const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(sagaMiddleware),
});

sagaMiddleware.run(rootSaga);

// 开发环境下挂载store到window
if (process.env.NODE_ENV === 'development') {
  (window as any).store = store;
}

export default store;

如果使用TypeScript，需补充window的类型声明（在src/types/window.d.ts）：

declare global {
  interface Window {
    store: import('../store').AppStore; // 替换为你的store实际类型
  }
}

export {};

2. 确保测试执行时机晚于状态更新 #

测试可能在Redux状态更新完成前就调用了getState()，可以通过以下方式等待状态就绪：

• 等待UI元素更新：先触发状态变更操作，再等待对应UI元素出现后检查状态

// 触发状态变更的操作（比如点击按钮）
cy.get('[data-testid="trigger-state-update"]').click();

// 等待UI反馈，确认状态已更新
cy.get('[data-testid="state-updated-indicator"]').should('be.visible');

// 再获取并断言状态
cy.window()
  .its("store")
  .invoke("getState")
  .then((state) => {
    expect(state.requiredKey).to.have.length(1)
  });

• 使用Cypress的自动重试断言：用should替代then，Cypress会自动重试直到断言通过或超时

cy.window()
  .its("store")
  .invoke("getState")
  .should((state) => {
    expect(state.requiredKey).to.have.length(1)
  });

3. 等待Redux Saga的异步操作完成 #

如果状态更新依赖Redux Saga的异步任务（比如API请求），需等待异步操作完成后再检查状态：

// 拦截目标API请求
cy.intercept('GET', '/api/your-endpoint').as('fetchData');

// 触发触发异步操作的UI操作
cy.get('[data-testid="load-data-btn"]').click();

// 等待API请求完成
cy.wait('@fetchData');

// 再检查状态
cy.window()
  .its("store")
  .invoke("getState")
  .then((state) => {
    expect(state.requiredKey).to.have.length(1)
  });

4. 区分组件测试与E2E测试的环境差异 #

从你的cypress.config.ts看，同时配置了组件测试和E2E测试：

• 如果是组件测试：需要在组件挂载时手动将store挂载到window，因为组件测试的window环境是隔离的

// 组件测试文件
import { mount } from 'cypress/react';
import YourComponent from './YourComponent';
import store from '../store';

beforeEach(() => {
  (window as any).store = store;
  mount(<YourComponent store={store} />);
});

• 如果是E2E测试：确保启动的是完整的应用（npm start），且应用已正确将store挂载到window

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