如何在Cypress测试中访问Angular应用的NgRX状态

核心问题分析 #

当前实现存在3个关键问题：

1. 挂载时机偏差：AppComponent构造函数执行时，Angular可能未完成Store初始化，且Cypress的cy.window()可能在Store挂载到window前就已执行。
2. 环境判断失效：直接通过windowWithStore.Cypress检测Cypress环境不可靠，需改用更准确的判断方式。
3. 断言对象错误：Store本身不是数组，断言have.length属于对象类型错误，需针对Store内部的状态数据做判断。

具体修复方案 #

1. 可靠挂载Store到Window

将Store挂载逻辑移至main.ts，确保Angular应用完全启动后再挂载Store，避免时机问题：

// main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { Store } from '@ngrx/store';

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(moduleRef => {
    const store = moduleRef.injector.get(Store);
    // 更可靠的Cypress环境检测
    if (typeof window.Cypress !== 'undefined') {
      (window as any).store = store;
    }
  })
  .catch(err => console.error(err));

2. 优化Cypress测试逻辑

确保先加载页面，等待Store挂载完成后再进行断言，且针对Store内的状态数据判断：

describe('My First Test', () => {
  before(() => {
    // 先访问应用首页，确保页面完全加载
    cy.visit('/');
    // 等待Store成功挂载到window对象
    cy.window().should('have.property', 'store');
  });

  it('should access and verify NgRx store state', () => {
    cy.window().its('store')
      // 调用selectSnapshot获取目标状态，替换为你的实际Feature State路径
      .invoke('selectSnapshot', (state: any) => state.yourFeatureModuleState)
      .should('have.length', 6);
  });
});

3. 完善类型定义（可选）

全局声明Window类型，避免重复类型转换：

// src/app/types/window.d.ts
import { Store } from '@ngrx/store';
import { AppState } from '../app.state'; // 导入你的根状态类型

declare global {
  interface Window {
    store?: Store<AppState>;
    Cypress?: Cypress.Cypress;
  }
}

额外排查点 #

• 查看浏览器控制台是否输出挂载日志，确认Store挂载逻辑是否执行；
• 确保NgRx的StoreModule.forRoot()已在AppModule中正确配置；
• 若存在跨域问题，可在cypress.config.ts中启用chromeWebSecurity: false（仅本地测试使用）。

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