Question

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

我的组件具有如下选择语句：

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”，并且仅在“应创建测试组件”测试用例时才会发生。另一个测试用例按预期方式登录消息。

我不知道我要去哪里错了。

Answer 1

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

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

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

如果要更改每次测试的info外观，则可以使用选项2，并在设置select方法返回或延迟第一个component.onInit()的设置后调用fixture.detectChanges设置选择之后。这意味着从您的beforeEach中删除fixture.detectChanges。

此功能很可能不需要异步或whenStable。

无法读取未定义的“管道”

1 个答案: