Utilizing the return value of a MockService in a Jasmine unit test results in test failure

Question

Utilizing the return value of a MockService in a Jasmine unit test results in test failure

A StackBlitz has been set up with the karma/jasmine loader for you to view test pass/fail results.

The application is functioning correctly.

All my tests are expected to pass without any issues, but I am encountering an unusual error when using a mockservice instead of the actual service in the createspyobject.

component.ts

  getReportFunc(): void {
    this.reportService.getReport(this.urn).subscribe(selectedReport => {
      this.model = selectedReport;
    });
  }

This method makes a simple call to a service to retrieve "getReport". A test will be added to ensure that the report has been retrieved, but currently facing a roadblock due to this issue.

spec.ts

describe("SearchComponent", () => {
  let component: SearchComponent;
  let fixture: ComponentFixture<SearchComponent>;
  let mockReportService;

  beforeEach(async(() => {
      mockReportService = jasmine.createSpyObj(['getReport']);
    TestBed.configureTestingModule({
      declarations: [SearchComponent],
      providers: [
        //ReportService,
            { provide: ReportService, useValue: mockReportService },
...

The problem lies in using

{ provide: ReportService, useValue: mockReportService }

, whereas just using ReportService works fine but restricts running one of the tests. The aim is to create a spy object with

mockReportService = jasmine.createSpyObj(['getReport']);

.

An error message stating

TypeError: Cannot read property 'subscribe' of undefined

can be seen in the StackBlitz. Assistance in resolving this issue to successfully run with a mockservice for testing the getReport subscribe function would be greatly appreciated.

angular typescript unit-testing jasmine karma-jasmine

Answer 1

Answer №1

The issue arises from improper usage of jasmine.createSpyObj. There are 2 approaches to address this problem:

Utilize jasmine.createSpyObj correctly:

// Make sure to include the first argument which was missing
mockReportService = jasmine.createSpyObj(ReportService, ['getReport']);


// Additionally, specify how to handle it:
beforeEach(() => {
  [...]
  // When called, return an Observable to ensure success when subscribing
  mockReportService.getReport.and.returnValue(of({}));
  fixture.detectChanges();
});

Avoid using spies

While spies can be handy, they are most beneficial when altering return values for various unit tests. If you simply need a consistent return value, consider using a hardcoded object like this instead:

const mockReportService = {
    getReport: () => of({})
}

providers: [
    { provide: ReportService, useValue: mockReportService },

Answer 2

The issue arises from improper usage of jasmine.createSpyObj. There are 2 approaches to address this problem:

Utilize jasmine.createSpyObj correctly:

// Make sure to include the first argument which was missing
mockReportService = jasmine.createSpyObj(ReportService, ['getReport']);


// Additionally, specify how to handle it:
beforeEach(() => {
  [...]
  // When called, return an Observable to ensure success when subscribing
  mockReportService.getReport.and.returnValue(of({}));
  fixture.detectChanges();
});

Avoid using spies

While spies can be handy, they are most beneficial when altering return values for various unit tests. If you simply need a consistent return value, consider using a hardcoded object like this instead:

const mockReportService = {
    getReport: () => of({})
}

providers: [
    { provide: ReportService, useValue: mockReportService },

Utilizing the return value of a MockService in a Jasmine unit test results in test failure

Answer №1

Similar questions

The module 'LoginModule' encountered an error when importing the unexpected value 'LoginRoutingModule'

Angular2 Error: Cannot have two identifiers with the same name, 'PropertyKey' is duplicated

Prevent Click Event on Angular Mat-Button

How can you resolve the error message "No overload matches this call." while implementing passport.serializeUser()?

Gain access to TypeScript headers by typing the request (req) object

ng-module with tabbed content

Steps to return to the previous roughing from two steps before in Angular 4

By default, showcase the value of the first item in the list selected in a mat-selection-list on a separate component

In the latest version of Expo SDK 37, the update to [email protected] has caused a malfunction in the onShouldStartLoadWithRequest feature when handling unknown deeplinks

Angular: Execute a function once all BehaviorSubject subscriptions have been initialized

Loop through the items and provide an observable containing the array

Struggled with the implementation of a customized Angular filter pipe

A Guide to Creating Java Unit Tests for Nested Methods

Enhance tns-platform-declarations with NativeScript

Is the user logged in and ready to be redirected to the dashboard through React router?

Tips for automatically assigning a default value in a material select within an Angular application

Is tsconfig.json necessary for JS libraries without TypeScript to include a .d.ts file when shipping?

Can Angular Universal help pinpoint the location of a window reference error?

A guide to playing a series of audio files in succession using the Ionic Media plugin

Using ES6, one can filter an array of objects based on another array of values