I'm trying to write a test in jest but keep getting UnhandledPromiseRejectionWarning when I try to use mockRejectedValue

The code looks like this:

it('Should set error message when call fails', async () => {
        const context = mockActionsContext();
        const user = {
            username: 'alice',
            password: 'password'
        };

        const getError = new Error('network error');

        (AuthService.login as jest.Mock) = jest.fn().mockRejectedValue(getError);
        await actions[ActionTypes.USER_LOGIN](context, user);

        // Check is the mits are called
        expect((contextmit as any).mock.calls).toEqual([
            [MutationTypes.USER_LOGIN],
            [MutationTypes.USER_LOGIN_ERROR, 'Oops, something went wrong. Try again later!']
        ]);

        // Login service is called with user login
        expect(AuthService.login as jest.Mock).toHaveBeenCalledWith(user);
    });

The AuthService.login returns an axios.post which I try to overwrite with a mock. actions[ActionTypes.USER_LOGIN](context, user) calls the Authservice.login

The test is passing but I don't want any unhandled promise rejection. Anybody an idea how to fix it?

Edit @goodmorningasif thanks for your reply. I've been looking at it too long I thing :)

The action looks as following:

    [ActionTypes.USER_LOGIN]: ({ mit }: Context, payload: User) => {
        return new Promise((resolve, reject) => {
            mit(MutationTypes.USER_LOGIN);

            AuthService.login(payload)
                .then((token) => {
                    mit(MutationTypes.USER_LOGIN_SUCCESS, token);

                    localStorage.setItem('user-token', token);
                    client.defaults.headersmon.Authorization = `Bearer ${token}`;
                    resolve(token);
                })
                .catch((error) => {
                    let errorMessage = 'Oops, something went wrong. Try again later!';

                    if (error?.response?.status === 401) {
                        errorMessage = 'Unknown username and password bination!';
                    }

                    localStorage.removeItem('user-token');

                    mit(MutationTypes.USER_LOGIN_ERROR, errorMessage);
                    reject(error);
                });
        });
    },

SOLUTION

In my case the action is returning a promise witch would get rejected. In the test, I'm calling the action directly and not catching the rejection.

await actions[ActionTypes.USER_LOGIN](context, user).catch(() => null);

This fixed it.

I'm trying to write a test in jest but keep getting UnhandledPromiseRejectionWarning when I try to use mockRejectedValue

The code looks like this:

it('Should set error message when call fails', async () => {
        const context = mockActionsContext();
        const user = {
            username: 'alice',
            password: 'password'
        };

        const getError = new Error('network error');

        (AuthService.login as jest.Mock) = jest.fn().mockRejectedValue(getError);
        await actions[ActionTypes.USER_LOGIN](context, user);

        // Check is the mits are called
        expect((context.mit as any).mock.calls).toEqual([
            [MutationTypes.USER_LOGIN],
            [MutationTypes.USER_LOGIN_ERROR, 'Oops, something went wrong. Try again later!']
        ]);

        // Login service is called with user login
        expect(AuthService.login as jest.Mock).toHaveBeenCalledWith(user);
    });

The AuthService.login returns an axios.post which I try to overwrite with a mock. actions[ActionTypes.USER_LOGIN](context, user) calls the Authservice.login

The test is passing but I don't want any unhandled promise rejection. Anybody an idea how to fix it?

Edit @goodmorningasif thanks for your reply. I've been looking at it too long I thing :)

The action looks as following:

    [ActionTypes.USER_LOGIN]: ({ mit }: Context, payload: User) => {
        return new Promise((resolve, reject) => {
            mit(MutationTypes.USER_LOGIN);

            AuthService.login(payload)
                .then((token) => {
                    mit(MutationTypes.USER_LOGIN_SUCCESS, token);

                    localStorage.setItem('user-token', token);
                    client.defaults.headers.mon.Authorization = `Bearer ${token}`;
                    resolve(token);
                })
                .catch((error) => {
                    let errorMessage = 'Oops, something went wrong. Try again later!';

                    if (error?.response?.status === 401) {
                        errorMessage = 'Unknown username and password bination!';
                    }

                    localStorage.removeItem('user-token');

                    mit(MutationTypes.USER_LOGIN_ERROR, errorMessage);
                    reject(error);
                });
        });
    },

SOLUTION

In my case the action is returning a promise witch would get rejected. In the test, I'm calling the action directly and not catching the rejection.

await actions[ActionTypes.USER_LOGIN](context, user).catch(() => null);

This fixed it.

• javascript
• typescript
• jestjs

1 Answer 1

Can we see the actions and reducer code? It's possible that there's an error in your error :)

You're testing that the login function is called and the action returns the error message you set but you're making an assumption about what causes the error. Maybe it's not because of the mockRejectedValue/'network error'.

I'd suggest including the actual error message in the action payload as well as your error message: one is for developers and debugging and one is for the user to know what to do next.

I also found this helpful on understanding UnhandledPromiseRejectionWarning: https://thecodebarbarian./unhandled-promise-rejections-in-node.js.html

Good instinct to figure out the issue and not be content with the test passing, by the way!