angular - 用 Spectator 模拟 NgRx store

Question

我正在尝试与 Angular、Jest 和 Spectator 一起编写单元测试。现在我正在努力模拟 NgRx 商店。尝试从 Spectator 实例获取 NgRx 提供的 MockStore 实例时，出现“没有 MockStore 提供者”错误。

我已经阅读了有关模拟和单元测试的 NgRx 文档，并且我能够通过阅读文档在不使用 Spectator 的情况下模拟 NgRx 存储，我已经尝试使用谷歌搜索寻求帮助，但似乎无法找到模拟的示例NgRx store 和 Spectator 一起，我在 NgRx/store Gitter 上留言，看看有没有人能帮助我。

这是我的代码:

    let component: MyComponent;
    let spectator: Spectator<MyComponent>;
    let mockStore: MockStore<selectors.AppState>;
    let mockUsernameSelector: MemoizedSelector<AppState, string>;

    const createComponent = createComponentFactory({
        component: MyComponent,
        componentProviders: [
            provideMockStore(),
        ],
        shallow: true,
        detectChanges: false,
    });

    beforeEach(() => {
        spectator = createComponent();
        component = spectator.component;
        mockStore = spectator.inject<MockStore<selectors.AppState>>(MockStore);
        mockUsernameSelector = mockStore.overrideSelector(selectors.selectUserName, 'Bob');
    });

但正如我所说，一旦我尝试通过 spectator.inject 从 Spectator 获取 MockStore 的实例(也尝试过 spectator.get)，我收到“没有 MockStore 提供商”错误。我也试过像这样提供 MockStore:

    const createComponent = createComponentFactory({
        component: MyComponent,
        componentProviders: [
            mockProvider(MockStore, provideMockStore()),
        ],
        shallow: true,
        detectChanges: false,
    });

但很明显，我收到错误消息“没有商店的提供者”。

也许这里有人可以帮助我？提前致谢!

Answer 1

我有同样的问题，这似乎对我有用:

在 setup-jest.ts 中，我定义了带有通用测试导入的全局注入(inject)和使用带有初始状态的 provideMockStore 的商店提供者:

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

let initialState = MockStoreInitialState; // constant built from all reducers initial states

defineGlobalsInjections({
  imports: [
    MaterialModule,
    NoopAnimationsModule,
    ReactiveFormsModule,
    FormsModule,
    SharedModule,
    TranslateTestingModule.withTranslations({ en: require('./assets/i18n/en.json') }),
  ],
  providers: [provideMockStore({ initialState })],
});

然后在我使用 MockStore 和 spy 的组件中测试它时:

describe('SampleCardComponent', () => {
  let mockStore;
  let dispatchSpy;
  let spectator: Spectator<SampleCardComponent>;

  const createComponent = createTestComponentFactory({
    component: SampleCardComponent,
    mocks: [ExperimentTimePipe],
  });

  beforeEach(() => {
    spectator = createComponent({
      props: { sampleHolder: SAMPLE_MOCK },
    });
    mockStore = spectator.get(MockStore);
    dispatchSpy = jest.spyOn(mockStore, 'dispatch');
  });

  test('should create', () => {
    expect(spectator).toBeTruthy();
  });

  test('should call editSample function', () => {
    const handleEditSpy = jest.spyOn(spectator.component, 'handleEdit');

    spectator.click('.button-edit');
    spectator.detectChanges();
    expect(handleEditSpy).toHaveBeenCalled();
    expect(dispatchSpy).toHaveBeenCalledTimes(1);
    expect(dispatchSpy).toHaveBeenCalledWith({//...actionObject})
  });
});

老实说，我不知道这是否是最好的方法，但它确实有效。如果您发现了一些改进方法，我将很高兴听到。