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

});

我的单元测试用例编写如下：

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:无法读取未定义的属性“pipe”，并且这种情况仅发生在应创建测试组件“testcase”中。另一个测试用例按预期记录在消息中

---

我无法理解我哪里出了问题。

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

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

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

如果要更改每个测试的信息，可以使用选项2，在设置select方法将返回的内容后调用component.onInit，或者在设置select后延迟第一个fixture.detectChanges。这将意味着删除fixture.detectChanges之前的每个

---

您很可能不需要async或whenStable来实现此功能。

感谢您的回复。