无法读取未定义的 'pipe'

Question

我正在尝试对 angular 中的一个组件进行单元测试。我是单元测试的新手，目前面临以下问题

我的组件有 select 语句如下：

this.store.select(getInfo)
    .pipe(takeWhile(() => this.isLive)
    )
    .subscribe((data) => {
      this.text = data;

    });

我的单元测试用例是这样写的：

fdescribe(‘TestComponent', () => {
  let component: TestComponent;
  let fixture: ComponentFixture<TestComponent>; 

  const testStore = jasmine.createSpyObj('Store', ['select']);

  beforeEach(async(() => {

    TestBed.configureTestingModule({
      declarations: [TestComponent
        ],
      imports: [MaterialModule, FiltersModule],
      providers: [
        {provide: Store, useValue: testStore }],

      schemas: [NO_ERRORS_SCHEMA]
    })

      .compileComponents();
  }));

  beforeEach(() => {


    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

  });

  it('should create Test component', async() => {
    let initialState = {
         data: {
    “name: “xyz”,
    “age” : 20

    } , 
      info: [1]
    };

    testStore.select.and.returnValues(

       of(initialState.info)
     );
     fixture.detectChanges();
     await fixture.whenStable();
    expect(component).toBeTruthy();
  });
  it('should have at least 1 info’, async() => {
    let initialState = {
         data: {
    “name: “xyz”,
    “age” : 20

    } , 
      info: [1]
    };

    testStore.select.and.returnValues(

       of(initialState.info)
     );

    fixture.detectChanges();
    await fixture.whenStable();

    console.log("text is ",component.text);
    });

});

这是一个非常幼稚的测试。在继续编写更复杂的测试之前，我只是想了解基本概念。所以，我面临的问题是。它提示我一个错误说： TypeError: Cannot read 属性 'pipe' of undefined 并且这只发生在 ''should create Test component' 测试用例中。另一个测试用例按预期记录消息。

我无法理解我哪里出错了。

Answer 1

当您提供服务时，每个测试都会获得所提供对象的单独副本。您正在将 testStore.select 的值设置为测试本身内部的原始对象。你有两个选择。第一种是在您在 beforeEach 中声明 Jasmine 间谍之后立即设置 testStore.select。第二个选项是在测试中获取对您的 testStore 的引用并分配给它。

const service = TestBed.get(Store) as Store;
service.select = jasmine.createSpy('select').and.returnValue(of(info));

您选择哪个选项由您决定。因为我没有看到对组件方法的调用，所以我假设您显示的组件代码是从 onInit 调用的。在那种情况下，第一个选项更容易使用。

如果您想更改每个测试的 info 外观，您可以使用选项二并在设置 select 方法将 return 或将第一个 fixture.detectChanges 延迟到设置 select 之后。这意味着从您的 beforeEach.

中删除 fixture.detectChanges

您很可能不需要异步或 whenStable 即可工作。

无法读取未定义的 'pipe'

cannot read 'pipe' of undefined

typescript

karma-jasmine

angular