Why I am getting undefined while testing redux actions?

Question

describe('Fetch robots action success', () => {
  it('handle request robot action success', async () => {
    const store = mockStore();
    const mockApiData = [
      {
        id: 1,
        name: 'John',
        email: 'john@gmail.com',
      },
    ];

    nock('https://jsonplaceholder.typicode.com/users')
      .get('/users')
      .reply(200, mockApiData);
    store.dispatch(actions.requestRobots());

    const expectedSuccessAction = {
      type: REQUEST_ROBOTS_SUCCESS,
      payload: mockApiData,
    };

    const action = store.getActions();
    expect(action[1]).toEqual(expectedSuccessAction);
  });
});

This is the function I am trying to test

export const requestRobots = () => (dispatch) => {
  dispatch({ type: REQUEST_ROBOTS_PENDING });
  apiCall('https://jsonplaceholder.typicode.com/users')
    .then((data) => dispatch({ type: REQUEST_ROBOTS_SUCCESS, payload: data }))
    .catch((error) =>
      dispatch({ type: REQUEST_ROBOTS_FAILED, payload: error })
    );
}

it should give all the action but it is giving only one action when i console.log (action) there are three actions
REQUEST_ROBOTS_SUCCESS, REQUEST_ROBOTS_FAILED and REQUEST_ROBOTS_PENDING.
It is giving only REQUEST_ROBOTS_PENDING and for other action when i run npm test it is giving undefined.

giving me this error

 Expected: {"payload": [{"email": "john@gmail.com", "id": 1, "name": "John"}], "type": "REQUEST_ROBOTS_SUCCESS"}
    Received: undefined

      55 |
      56 |     const action = store.getActions();
    > 57 |     expect(action[1]).toEqual(expectedSuccessAction);
         |                       ^
      58 |   });
      59 | });
      60 |

      at Object.<anonymous> (src/actions.test.js:57:23)

Answer 1

To make it work, you need to know:

1. nock@beta support for fetch

We have introduced experimental support for fetch. Please share your feedback with us. You can install it by

npm install --save-dev nock@beta

Related issue: Node 18+: make nock work native fetch

2. Set the testEnvironment to node for jestjs:

By adding a @jest-environment docblock at the top of the file, you can specify another environment to be used for all tests in that file:

Instead of setting the testEnvironment in the jest.config.js file.

3. You forget to return the fetch() promise in the requestRobots thunk. See Asynchronous actions

4. Switch the node version to 18+ by using nvm like nvm use 18.20.3

The complete working example:

thunk.ts:

import { REQUEST_ROBOTS_FAILED, REQUEST_ROBOTS_PENDING, REQUEST_ROBOTS_SUCCESS } from './actionTypes';

export const requestRobots = () => (dispatch) => {
  dispatch({ type: REQUEST_ROBOTS_PENDING });
  return fetch('https://jsonplaceholder.typicode.com/users')
    .then((res) => res.json())
    .then((data) => dispatch({ type: REQUEST_ROBOTS_SUCCESS, payload: data }))
    .catch((error) => dispatch({ type: REQUEST_ROBOTS_FAILED, payload: error }));
};

thunk.test.ts

/**
 * @jest-environment node
 */

import { REQUEST_ROBOTS_SUCCESS } from './actionTypes';
import configureStore from 'redux-mock-store';
import nock from 'nock';
import thunk from 'redux-thunk';
import * as actions from './thunk';

const mockStore = configureStore([thunk]);

describe('Fetch robots action success', () => {
  it('handle request robot action success', (done) => {
    const store = mockStore();
    const mockApiData = [
      {
        id: 1,
        name: 'John',
        email: 'john@gmail.com',
      },
    ];

    const scope = nock('https://jsonplaceholder.typicode.com').get('/users').reply(200, mockApiData);

    store.dispatch(actions.requestRobots()).then(() => {
      const expectedSuccessAction = {
        type: REQUEST_ROBOTS_SUCCESS,
        payload: mockApiData,
      };

      const action = store.getActions();
      expect(action[1]).toEqual(expectedSuccessAction);

      scope.done();
      done();
    });
  });
});

Test result:

 PASS  stackoverflow/78952710/thunk.test.ts
  Fetch robots action success
    √ handle request robot action success (27 ms)                                                                                                                                                                                                    
                                                                                                                                                                                                                                                     
Test Suites: 1 passed, 1 total                                                                                                                                                                                                                       
Tests:       1 passed, 1 total                                                                                                                                                                                                                       
Snapshots:   0 total
Time:        1.139 s

package versions:

"jest": "^29.7.0",
"redux-mock-store": "^1.5.4",
"nock": "^14.0.0-beta.11",
"redux-thunk": "^2.4.2",
"redux": "^4.2.1",