用 Spectator 模拟 NgRx 商店答案

【问题标题】：Mocking NgRx store with Spectator用 Spectator 模拟 NgRx 商店
【发布时间】：2020-07-14 00:22:33
【问题描述】：

我正在尝试与 Angular、Jest 和 Spectator 一起编写单元测试。现在我正在努力嘲笑 NgRx 商店。尝试从 Spectator 实例中获取提供的 NgRx 实例 MockStore 时，我收到“No provider for 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.get）从 Spectator 获取 MockStore 的实例，我就会收到“No provider for MockStore”-错误。我也尝试像这样提供MockStore：

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

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

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

【问题讨论】：

我认为您需要将MockStore 添加到createComponentFactory 的componentProviders 数组属性中
或者只是providers

标签： angular unit-testing jestjs ngrx-store angular-spectator

【解决方案1】：

您可以使用方便的mockProvider函数。

在提供者数组中：

import { createComponentFactory, mockProvider, Spectator, SpyObject } from '@ngneat/spectator/jest';
import { Store } from '@ngrx/store';

providers: [mockProvider(Store)],

【讨论】：

当然，但是使用 NgRx 提供的provideMockStore 函数会更方便，因为它提供了轻松模拟选择器等的方法。

【解决方案2】：

我遇到了同样的问题，这似乎对我有用：

在setup-jest.ts 中，我使用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 和间谍：

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})
  });
});

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

【讨论】：