TypeError: Cannot read properties of undefined (reading 'subscribe') in Jasmine

Question

I am trying to write the test cases for the below method :-

 subscriptionPackages() {
    this.managePackageService.getPackages().subscribe(
      (response) => {
        this.packagePlan = response;
      },
      (httpErrorRes) => {
      }
    );
  }

I have tried the below snippet in my spec.ts file for covering the above code :-

  fdescribe('AddProductComponent', () => {
  let component: AddProductComponent;
  let fixture: ComponentFixture<AddProductComponent>;
  let packageServiceStub = jasmine.createSpyObj('ManagePackageService', ['getPackages']);

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [HttpClientTestingModule,ReactiveFormsModule,FormsModule,ToastrModule.forRoot(),
        TranslateModule.forRoot(), NgSelectModule],
      declarations: [ AddProductComponent ],
      providers :[AppConfig,
        { provide: ManagePackageService, useValue: packageServiceStub }]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(AddProductComponent);
    component = fixture.componentInstance;
    component.packagePlan = [{'name':'basic', 'id':1}, {'name':'advance', 'id':2}, {'name':'premium', 'id':3}];
    fixture.detectChanges();
  });

it('should create  subscriptionPackages', () => {
  const mockpackageResponse = []; 
  packageServiceStub.getPackages.and.returnValue(of(mockpackageResponse));
  component.subscriptionPackages();
  expect(component.packagePlan).toBeTruthy();
 });

From this code my test case is covered but I am getting below error :-

score 7 · Accepted Answer · edited Jan 14 '23 at 14:47

7

Do you call subscriptionPackages in the ngOnInit or the constructor of the component?

If you're calling it in the ngOnInit, you need to mock the returnValue before the first fixture.detectChanges(). The first fixture.detectChanges() is when ngOnInit is called.

beforeEach(() => {
    fixture = TestBed.createComponent(AddProductComponent);
    component = fixture.componentInstance;
    // !! Move this line here if calling subscriptionPackages in ngOnInit !!
    packageServiceStub.getPackages.and.returnValue(of(mockpackageResponse));
    component.packagePlan = [{'name':'basic', 'id':1}, {'name':'advance', 'id':2}, {'name':'premium', 'id':3}];
    fixture.detectChanges();
  });

it('should create  subscriptionPackages', () => {
  const mockpackageResponse = []; 
  component.subscriptionPackages();
  expect(component.packagePlan).toBeTruthy();
 });

beforeEach(() => {
     // !! Move this line here if calling subscriptionPackages in constructor !!
    packageServiceStub.getPackages.and.returnValue(of(mockpackageResponse));
    fixture = TestBed.createComponent(AddProductComponent);
    component = fixture.componentInstance;
    component.packagePlan = [{'name':'basic', 'id':1}, {'name':'advance', 'id':2}, {'name':'premium', 'id':3}];
    fixture.detectChanges();
  });

it('should create  subscriptionPackages', () => {
  const mockpackageResponse = []; 
  component.subscriptionPackages();
  expect(component.packagePlan).toBeTruthy();
 });

edited Jan 14 '23 at 14:47

Gregor

73
1
7

answered Nov 16 '21 at 13:51

AliF50

16,947
1
21
37

Thanks it is resolved now. – aparna bhargav Nov 16 '21 at 14:17
is this also working in the case if we invoke method inside `ngOnChanges`, just like I did for 'subscriptionPackage()', What if the same method `ngOnChange`. – aparna bhargav Nov 16 '21 at 14:19
1

`ngOnChanges` only runs if an `@Input` property changes from the parent component. You can call `ngOnChanges` manually though if you don't want to host your component in parent component. Check out this post: https://medium.com/@christophkrautz/testing-ngonchanges-in-angular-components-bbb3b4650ee8. – AliF50 Nov 16 '21 at 16:31
I have just post this post, please check the below link, If you have any idea of this kindly suggest me the solution. https://stackoverflow.com/questions/70000998/typeerror-cannot-read-properties-of-undefined-reading-value – aparna bhargav Nov 17 '21 at 08:57
1

I found that any subscribe is better done on the OnChange event and keep the ngOnInit as simple as possible solves this problem - thanks – Mauricio Gracia Gutierrez Dec 28 '21 at 14:30

TypeError: Cannot read properties of undefined (reading 'subscribe') in Jasmine

1 Answers1

Linked