6

在我通过以下视频进行 ngrx 隔离测试之后： John Crowson - 在 NgRx 8 中使用 MockStore | AngularUP

我尝试在我的简单项目中实现相同的功能。但是我收到了我无法理解的错误。有人帮我解决吗？

这对我有很大的帮助。

测试ts文件：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { provideMockStore, MockStore } from '@ngrx/store/testing';
import { ShellHomeComponent } from './shell-home.component';
import { StoreOne } from './../../models';
import { Store, select } from '@ngrx/store';
import { cold } from 'jasmine-marbles';

describe('ShellHomeComponent', () => {

    let component: ShellHomeComponent;
    let fixture: ComponentFixture<ShellHomeComponent>;
    let mockStore: MockStore<StoreOne>;

    const loadingState = {
        loading: true,
        items: [{ name: '1' }]
    } as StoreOne;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ ShellHomeComponent ],
            imports: [],
            providers: [provideMockStore({initialState: loadingState})]
        })
        .compileComponents();

        mockStore = TestBed.get(Store);

    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(ShellHomeComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });

    it('should display loading as true', () => {
        const expected = cold('loading', { loading: false, items: [{ name: '3' }] });
        expect(component.loading).toBeObservable(expected);
    });

});

运行后我收到以下错误：

ShellHomeComponent › should display loading as true

    expect(received).toEqual(expected) // deep equality

    - Expected
    + Received

      Array [
        Object {
          "frame": 0,
          "notification": Notification {
    -       "error": undefined,
    -       "hasValue": true,
    -       "kind": "N",
    -       "value": true,
    -     },
    -   },
    -   Object {
    -     "frame": 10,
    -     "notification": Notification {
    -       "error": undefined,
    +       "error": [TypeError: Cannot read property 'loading' of undefined],
            "hasValue": false,
    -       "kind": "C",
    +       "kind": "E",
            "value": undefined,
          },
        },
      ]

      41 |     it('should display loading as true', () => {
      42 |         const expected = cold('a|', { a: true });
    > 43 |         expect(component.loading).toBeObservable(expected);
         |                                   ^
      44 |     });
      45 |
      46 | });

      at compare (node_modules/jasmine-marbles/bundles/jasmine-marbles.umd.js:379:33)
      at src/app/module1/shell/shell-home/shell-home.component.spec.ts:43:35

  console.warn node_modules/@ngrx/store/bundles/store.umd.js:608
    The feature name "storeOne" does not exist in the state, therefore createFeatureSelector cannot access it.  Be sure it is imported in a loaded module using StoreModule.forRoot('storeOne', ...) or StoreModule.forFeature('storeOne', ...).  If the default state is intended to be undefined, as is the case with router state, this development-only warning message can be ignored.

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        6.321s
4

3 回答 3

10

我有一个类似的问题。我的测试失败了，因为state在我的减速器中未定义。我还在控制台中收到警告The feature name "my-feature" does not exist in the state's root, therefore createFeatureSelector cannot access it. Be sure it is imported in a loaded module using StoreModule.forRoot('my-feature', ...) or StoreModule.forFeature('my-feature', ...).

问题是当我需要为整个应用程序提供模拟商店时，我正在为该功能提供模拟商店。

尝试更改provideMockStore({initialState: loadingState})为provideMockStore<State>({initialState: {shellComponent: loadingState}})where Stateis your application 的 global state 的名称（确保您State从应用程序的state.ts文件中导入，而不是@ngrx/store），并且shellComponent是您正在测试的功能的名称。

于 2019-10-28T20:31:25.213 回答
2

为了建立 Danny 的答案，您将执行以下操作：

      providers: [
        provideMockStore({
          initialState: {
            'addInvestigationModal': initialState
          }
        })
      ]

但是，我仍然有一个错误An error was thrown in afterAll error properties: Object({ longStack: 'TypeError: Cannot read property 'property_name' of undefined。

我通过添加解决了这个问题 

afterEach(() => {
    fixture.destroy();
  });
于 2020-05-27T20:29:53.353 回答
0

我收到与以下相同的警告 @Danny：

状态的根中不存在功能名称“some-feature”，因此 createFeatureSelector 无法访问它。确保它是使用 StoreModule.forRoot('some-feature', ...) 或 StoreModule.forFeature('some-feature', ...) 在加载的模块中导入的。

我忘记了我必须将模块添加到导入列表中。

const someFeatureModule = StoreModule.forFeature('some-feature', someFeatureReducer);
...
@NgModule({
    imports: [
       someFeatureModule  <-- this was missing
    ]
        ...
于 2021-09-14T04:50:49.950 回答