使用Cypress测试独立组件时出现MockStore无提供者错误

我正尝试使用Cypress测试依赖NgRx Store数据的AppComponent，已按照官方文档配置测试环境，测试代码如下：

let store: MockStore;
let initialState: { loggedOnUser: null };

beforeEach(() => {
    cy.mount(AppComponent, setupCypressConfig<AppComponent>({
        providers: [
            provideMockStore({ initialState }),
        ]
    }));
    store = TestBed.inject(MockStore);
});

运行测试时出现错误：

NullInjectorError: No provider for MockStore!

该配置在另一个组件中可正常运行，且我使用的是Angular独立组件。我尝试了以下方案但均无效：

• 注入Store而非MockStore，即store = TestBed.inject(Store);
• 在providers中添加MockStore，配置如下：

cy.mount(AppComponent, setupCypressConfig<AppComponent>({
   providers: [
      MockStore,
      provideMockStore({ initialState }),
   ]
}));

问题核心是Cypress的组件挂载上下文和TestBed不共享，直接用TestBed.inject无法获取到Cypress挂载模块中提供的MockStore实例。以下是可行的修复方案：

方案1：使用Cypress的cy.getAngularService获取MockStore #

替换TestBed.inject为Cypress提供的Angular服务获取方法，确保从正确的上下文获取实例：

import { MockStore } from '@ngrx/store/testing';

let store: MockStore;
// 确保initialState类型与应用实际State匹配，避免类型不兼容问题
const initialState = { loggedOnUser: null };

beforeEach(() => {
  cy.mount(AppComponent, setupCypressConfig<AppComponent>({
    providers: [
      provideMockStore({ initialState }),
    ]
  }));
  
  // 通过Cypress获取MockStore实例
  cy.getAngularService(MockStore).then(mockStore => {
    store = mockStore;
  });
});

方案2：检查独立组件的依赖配置 #

确保AppComponent没有在自身的providers中声明Store（会覆盖测试环境的MockStore），同时如果组件依赖NgRx的相关模块，需要在挂载配置的imports中显式引入：

import { StoreModule } from '@ngrx/store';

beforeEach(() => {
  cy.mount(AppComponent, {
    imports: [StoreModule.forRoot({})], // 显式导入Store基础模块
    providers: [
      provideMockStore({ initialState: { loggedOnUser: null } }),
    ]
  });

  cy.getAngularService(MockStore).then(mockStore => {
    store = mockStore;
  });
});

方案3：手动创建并提供MockStore实例 #

如果上述方法仍无效，可以手动实例化MockStore并添加到providers中：

import { MockStore, provideMockStore } from '@ngrx/store/testing';
import { State } from './path-to-your-app-state';

beforeEach(() => {
  const initialState: State = { loggedOnUser: null };
  
  cy.mount(AppComponent, setupCypressConfig<AppComponent>({
    providers: [
      provideMockStore({ initialState }),
      // 手动提供MockStore的提供者，确保DI能找到
      { provide: MockStore, useFactory: (store: Store) => store as MockStore, deps: [Store] }
    ]
  }));

  cy.getAngularService(MockStore).then(mockStore => {
    store = mockStore;
  });
});

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