Issue with detecting errors in Angular unit test when using jest throwError method

Question

Issue with detecting errors in Angular unit test when using jest throwError method

Imagine I have a component that contains the following method:

someMethod() {
  this.someService
    .doServicesMethod(this.id)
    .pipe(
      finalize(() => (this.loading = false)),
      catchError((e) => {
        this.showErrorMessage = true;
        return throwError(e);
      }),
    )
    .subscribe({
      next: (result) => {/* handle result*/},
    });
}

Now, I want to create a unit test using jest. Here is how I proceed:

it(
  'should test someMethod',
  waitForAsync(() => {
    spyOn(someService, 'doServicesMethod').and.returnValue(throwError('someError'));

    expect(component.showErrorMessage).toBeFalsy();
    expect(component.loading).toBeTruthy();

    try {
      component.someMethod();
    } catch (error) {
      expect(component.loading).toBeFalsy();
      expect(component.showErrorMessage).toBeTruthy();
    }
  }),
);

Unfortunately, the unit test does not work as expected. I initially attempted running the test without waitForAsync, which caused the error to be detected in subsequent tests, leading to failure with someError.

Using waitForAsync helps detect the error but not within the try-catch-block, causing the test itself to fail.

Even calling tick(); after component.someMethod(); detects the error, however, it is not properly caught and results in a failure with someError.

I am having trouble finding a solution, so if anyone has any ideas on how to make this test successful, please share them!

angular typescript unit-testing rxjs jestjs

Answer 1

Answer №1

I have always relied on using the expect().toThrow() or expect().toThrowError() methods

it('should test someMethod', async () => {
    expect( () => {
        await component.someMethod()
    }).toThrow();
});

You can also handle specific errors by using

toThrowError(<Replace with Error>)

If I'm not working with a promise, I typically do:

it('should test someMethod', () => {
    expect( () => {
        component.someMethod()
    }).toThrow( ... );
});

If your try/catch isn't catching errors and this approach isn't effective, ensure that someMethod is actually throwing an error.

Here's a sample function I use:

export function ExpandTextStringToArray(
    DataField: string,
    Separator: string = ',',
    TrimText: boolean = false
): string[] {
    if (DataField === undefined || DataField === null) {
        throw new Error(APPLICATION_EXCEPTIONS.VALUE_MUST_BE_STRING);
    }
    const ExpandedString: string[] = DataField.split(Separator);
    if (TrimText) {
        ExpandedString.forEach((Text, Index, Data) => {
            Data[Index] = Text.trim();
        });
    }
    return ExpandedString;
}

Here's a successful test case that catches the thrown error:

it('should throw an exception when passing null for the DataField', () => {
    expect(() => {
        ExpandTextStringToArray(null);
    }).toThrowError(APPLICATION_EXCEPTIONS.VALUE_MUST_BE_STRING);
});

Answer 2

I have always relied on using the expect().toThrow() or expect().toThrowError() methods

it('should test someMethod', async () => {
    expect( () => {
        await component.someMethod()
    }).toThrow();
});

You can also handle specific errors by using

toThrowError(<Replace with Error>)

If I'm not working with a promise, I typically do:

it('should test someMethod', () => {
    expect( () => {
        component.someMethod()
    }).toThrow( ... );
});

If your try/catch isn't catching errors and this approach isn't effective, ensure that someMethod is actually throwing an error.

Here's a sample function I use:

export function ExpandTextStringToArray(
    DataField: string,
    Separator: string = ',',
    TrimText: boolean = false
): string[] {
    if (DataField === undefined || DataField === null) {
        throw new Error(APPLICATION_EXCEPTIONS.VALUE_MUST_BE_STRING);
    }
    const ExpandedString: string[] = DataField.split(Separator);
    if (TrimText) {
        ExpandedString.forEach((Text, Index, Data) => {
            Data[Index] = Text.trim();
        });
    }
    return ExpandedString;
}

Here's a successful test case that catches the thrown error:

it('should throw an exception when passing null for the DataField', () => {
    expect(() => {
        ExpandTextStringToArray(null);
    }).toThrowError(APPLICATION_EXCEPTIONS.VALUE_MUST_BE_STRING);
});

Issue with detecting errors in Angular unit test when using jest throwError method

Answer №1

Similar questions

Display the initial MUI components from an array of data in a distinctive manner

The input tag loses focus after its value is updated using a class method in Angular 8.x

The issue of Angular 6 view failing to display accurate data upon page load

Generating React Components Dynamically using TypeScript

What is the best way to customize column width in AG-Grid?

Utilizing a class structure to organize express.Router?

What is the best way to integrate @uirouter in the Angular/sampleapp project?

Verify Angular route path using an interceptor

The defaultValue of the Observable TextArea is blank space following the transmission of a sendMessage using SignalR in a Typescript

Server Components can only receive plain objects and select built-ins from Client Components. Any classes or null prototypes will not be compatible

There was an issue with the program: "ERROR TypeError: When trying to call a method from the

Tips for avoiding the transmission of className and style attributes to React components

Guide on integrating the plyr npm module for creating a video player in Angular2

What is the best way to transform a JSON data-storing object into an array within Angular?

Disable the selection of the year option in the Angular Material Date picker

How can I verify the value of a class variable in TypeScript by using a method?

Is it possible to trigger the setState() function of a parent component when a child component is clicked?

The element in TS 7023 is implicitly assigned an 'any' type due to the fact that an expression of type 'any' is not valid for indexing in type '{}'

Issue with displaying international characters when using HttpClient's http.get() function in Angular.The

What is the most effective way to retrieve the width and height of an oversized image in Angular?