测试集成NgRx Store的Angular组件：删除动作未触发致数据未消失

你的测试代码存在几个关键冲突和配置错误，导致删除动作无法触发预期的流程：

1. MockStore与真实Store模块冲突 #

你同时使用了provideMockStore和StoreModule.forRoot({})，这会让真实的Store模块覆盖MockStore的提供者。测试中实际运行的是真实Store，而非你配置的MockStore，因此Reducer更新的状态无法同步到组件，数据点自然不会从DOM中消失。

2. AppModule导入覆盖了服务Mock #

导入AppModule会引入该模块中声明的所有真实服务（包括DatapointService），直接覆盖了你在测试providers中定义的mock版本，这就是你看不到mock delete日志的原因——真实服务的方法被调用了，而非你写的mock方法。

3. Effects配置未适配测试环境 #

EffectsModule.forRoot(DatapointEffects)在测试中需要与MockStore协同工作，但由于前两个问题的存在，Effect无法正确监听MockStore的动作，也无法调用到mock的DatapointService。

修复后的测试代码示例 #

import { provideMockStore } from '@ngrx/store/testing';
import { provideMockActions } from '@ngrx/effects/testing';
import { Observable } from 'rxjs';
import { DatapointEffects } from './datapoint.effects';
import { DatapointService } from './datapoint.service';
import { CommonModule } from '@angular/common';
import { userEvent, waitFor, screen } from '@testing-library/angular';

describe('DatapointPageComponent', () => {
  let actions$: Observable<any>;
  let datapointService: DatapointService;

  beforeEach(async () => {
    await render(DatapointPageComponent, {
      providers: [
        provideMockStore({
          initialState: { ...APPLICATION_STATE },
        }),
        // 为Effects提供Mock动作流
        provideMockActions(() => actions$),
        {
          provide: DatapointService,
          useValue: {
            deleteIntegration: jasmine.createSpy('deleteIntegration').and.returnValue(of(true))
          },
        },
        // 注入Effect实例
        DatapointEffects
      ],
      declarations: [DatapointListComponent],
      // 只导入组件依赖的基础模块，避免引入冗余依赖
      imports: [CommonModule],
      schemas: [NO_ERRORS_SCHEMA],
    });

    // 获取mock服务实例用于验证
    datapointService = TestBed.inject(DatapointService);
  });

  it('should remove datapoint after delete button click', async () => {
    // 定位删除按钮（替换为你实际的按钮文本/标识）
    const deleteButton = screen.getByRole('button', { name: /删除数据点/i });
    // 触发点击
    await userEvent.click(deleteButton);

    // 验证mock服务的删除方法被调用
    expect(datapointService.deleteIntegration).toHaveBeenCalled();

    // 等待异步流程完成，验证数据点从DOM中消失（替换为你数据点的文本）
    await waitFor(() => {
      expect(screen.queryByText('测试数据点')).not.toBeInTheDocument();
    });
  });
});

额外注意事项 #

• 不要导入完整的AppModule，按需导入组件依赖的基础模块（如CommonModule、RouterTestingModule等）即可，避免依赖冲突。
• 使用waitFor处理异步操作：删除流程涉及Effect调用、Store更新、组件重新渲染，这些都是异步的，必须等待状态同步完成后再做断言。
• 用jasmine.createSpy替代简单的mock函数，更方便验证调用次数和参数。

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