Home » vue » jest tests for Axios.all and Axios.spread

jest tests for Axios.all and Axios.spread

Posted by: admin November 26, 2021 Leave a comment

Questions:

I am struggling to write JEST test cases for below method

getStudentList (studentList:}[]) {

    if (studentList.length < 1) {
      Promise.resolve()
    }
    let promises = []
    for (const student of StudentList) {
      if (!student.name) {
        Promise.resolve()
      }
      var url = `${API_URL}/${student.name}/`

      promises.push(Axios.get(url}))
    }

    return Axios.all(promises)
      .then(Axios.spread((...args) => {
        // customise the response here
        return args
          .map(response => response.data)
          .map(data => {
            //do something with data
            return data
          })
      }))

It uses axios.all and axios.spread to get the data back..i have written simple test cases for Axios.get..but how to write test case for this? This method is in a vue project in a service class

Answers:

This is a short example of how you can write your expectations (with 100% coverage) for the code above:

import myService from './myService';
import Axios from 'axios';

jest.mock('axios');

global.API_URL = 'http://example.com/mock_api';

describe('myService', () => {
  describe('getStudentList', () => {
    describe('without students in the list', () => {
      it('should result undefined', () => {
        const result = myService.getStudentList();
        expect(result).resolves.toEqual( undefined );
      });
    });

    describe('with students in the list', () => {
      const mockStudentList = [{
        name: 'student1',
      }, {
        someProp: 'some value',
      }, {
        name: 'student3',
      }];

      const results = [];
      const mockAxiosSpreadResult = jest.fn();

      beforeAll(() => {
        Axios.get.mockClear();
        Axios.all.mockResolvedValue(results);
        Axios.spread.mockReturnValue(mockAxiosSpreadResult);
        myService.getStudentList( mockStudentList );
      });

      it('should call Axios.get once for each student with name', () => {
        expect(Axios.get).toHaveBeenCalledWith(`${API_URL}/student1/`);
        expect(Axios.get).toHaveBeenCalledWith(`${API_URL}/student3/`);
      });

      it('should call Axios.spread with a callback', () => {
        expect(Axios.spread).toHaveBeenCalledWith(expect.any(Function));
      });

      it('should call the result of Axios.spread with the resolved value of Axios.all', () => {
        expect(mockAxiosSpreadResult).toHaveBeenCalledWith(results);
      });

      describe('Axios.spread callback', () => {
        let callback;
        beforeAll(() => {
          callback = Axios.spread.mock.calls[0][0];
        });

        describe('called with parameters', () => {
          let result;
          beforeAll(() => {
            result = callback({
              data: 1
            },{
              data: 2
            },{
              data: 3
            },{
              data: 4
            });
          });

          it('should do something with the data', () => {
            expect(result).toEqual([1,2,3,4]);
          });
        });
      });
    });
  });
});

working example