Необходимо протестировать веб-сервис axios, который обещает вернуть результат с помощью Jest в приложении Vue.js, но с ошибкой

Question

Я разрабатываю новое приложение, используя Vue.js и axios, чтобы получить информацию о фондовом рынке на основе названия компании.В начале приложения я собираю все названия американской компании S & p 500 в массив javascript

<script>
  import axios from 'axios'
  import StockInfo from './StockInfo.vue'

export default {
  name: 'app',
  data () {
    return {
        stockname : "",
        resultArrived : false,
        fetchStatus: false,
        resultDetails: {
            Symbol : '',
            LastUpdated: '',
            Open : '',
            Close : '',
            High : '',
            Low : '',
            DividendAmount : 0.0
        },
        errorMessage : '',
        stockdetails : []
    }
  },
  components : {
      'stockdetails' : StockInfo
  },
  created : function() {
      this.LoadStockData();
  },

  methods: {
    LoadStockData : function() 
    {
      var basicUrl = "https://api.iextrading.com/1.0/ref-data/symbols";
      var self = this;
      axios.get(basicUrl).then(result => {
          // Make sure that we receive proper result
          let smallset = [];
          result.data.filter(function(record) {
              if(record.type === "cs") {
                  // Convert string to lower case
                  let finalvalue = self.GetProperCompanyName(record.name);
                  let updatedvalue = {
                      Symbol : record.symbol,
                      Name : finalvalue
                  };
                  smallset.push(updatedvalue);
                  return updatedvalue;
              }
          });
          this.stockdetails = smallset;
      }, error => {
          this.errorMessage = error.message;
          this.resultArrived = false;
          this.fetchStatus = true;
        });
    },

   }

}
</script>


describe('User input Scenario', () => {
    jest.mock('axios');

    it('App should be mounted',async () => {
        const appwrapper = mount(app);
        await appwrapper.vm.$nextTick();

          expect(axios.get).toHaveBeenCalledWith('https://api.iextrading.com/1.0/ref-data/symbols');
        expect(appwrapper.vm.stockdetails.length).toBeGreaterThan(0);
    });

});

Теперь я хочу провести модульное тестирование этого сценария, используя jest и testutil, поэтому я написал следующий тестовый пример

describe('User input Scenario', () => {
    jest.mock('axios');

    it('App should be mounted',async () => {
        const appwrapper = mount(app);
        await appwrapper.vm.$nextTick();

        expect(axios.get).toHaveBeenCalledWith('https://api.iextrading.com/1.0/ref-data/symbols');
        expect(appwrapper.vm.stockdetails.length).toBeGreaterThan(0);
    });

});

Но когда я запустил этот тестовый пример, Я получаю следующие ошибки

FAIL ./App.test.js ● Сценарий ввода пользователя ›Приложение должно быть смонтировано

expect(jest.fn())[.not].toHaveBeenCalledWith()

jest.fn() value must be a mock function or spy.
Received:
  function: [Function wrap]

  63 |         await appwrapper.vm.$nextTick();
  64 |
> 65 |         expect(axios.get).toHaveBeenCalledWith('https://api.iextrading.com/1.0/ref-data/symbols');
     |                           ^
  66 |         expect(appwrapper.vm.stockdetails.length).toBeGreaterThan(0);
  67 |     });
  68 |

  at toHaveBeenCalledWith (App.test.js:65:27)
  at tryCatch (node_modules/regenerator-runtime/runtime.js:62:40)
  at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:296:22)
  at Generator.prototype.(anonymous function) [as next] (node_modules/regenerator-runtime/runtime.js:114:21)
  at step (App.test.js:23:191)
  at App.test.js:23:361

Наборы тестов: 1 провал, 1 пройдено, 2 всего тестов: 1 не пройден, 7 пройден, всего 8 снимков: 0 всего времени: 5,328 с

Answer 1

Александр Смышляев

Second part of answer did the trick, for axios, it need mocking with expected result value

jest.mock('axios', () => ({
    get: jest.fn()
}));


describe("Basic App.vue Layout Verification", () => {
    let appwrapper;
    beforeEach(() => {
        axios.get.mockClear();
        axios.get.mockReturnValue(Promise.resolve({}));
    });

    it('App Mounting verfication',async () => {
        // Given
        const result = { 
             data :  [{
                    symbol: "A",
                    name: "Agilent Technologies Inc.",
                    date: "2018-12-28",
                    isEnabled: true,
                    type: "cs",
                    iexId: "2"
                },
                {
                    symbol: "A",
                    name: "Agilent Technologies Inc.",
                    date: "2018-12-28",
                    isEnabled: true,
                    type: "cs",
                    iexId: "2"
                },
                {
                    symbol: "A",
                    name: "Agilent Technologies Inc.",
                    date: "2018-12-28",
                    isEnabled: true,
                    type: "cs",
                    iexId: "2"
                },
                {
                    symbol: "A",
                    name: "Agilent Technologies Inc.",
                    date: "2018-12-28",
                    isEnabled: true,
                    type: "cs",
                    iexId: "2"
                }
            ]};
        axios.get.mockReturnValue(Promise.resolve(result));
        const appwrapper = mount(app);
        await appwrapper.vm.$nextTick();
        expect(axios.get).toHaveBeenCalledWith('https://api.iextrading.com/1.0/ref-data/symbols');
        expect(appwrapper.vm.stockdetails.length).toBeGreaterThan(0);
        expect(typeof appwrapper.vm.stockdetails).toEqual("object");
     
        // Now validate actual result parsed by webservice return value
        expect(appwrapper.vm.stockdetails[0].Symbol).toEqual("A");
        expect(appwrapper.vm.stockdetails[0].Name).toEqual("agilent technologies");
    });
});

Answer 2

Может быть, также нужно импортировать axios в тестовый файл

import axios from 'axios';

И попытаться смоделировать метод get

axios.get.mockResolvedValue({data: 'something'});

Пример в Jest: https://jestjs.io/docs/en/mock-functions#mocking-modules

Также существуют отдельные пакеты npm для ложных осей во время тестирования jest-mock-axios или аналогичных