Как побороть ошибку в Vue-test?

Question

[seredaes]

Я подключаю компонент и никакой тест даже еще не запускаю...а пишет ошибку как на скриншоте.
Подскажите пожалуйста, как правильно побороть ошибку или как переделать компонент?

Answer 1

[Александр]

Не видя код компонента ... тяжело ))) для меня ))) и самому интересно ))) на callback функциях я встал )))
Почему
window.$axios.get....
А не
import axios from 'axios';
...
axios.get

callback функция не определена.... наверно объект не тот )))

Comments

[Александр]

https://stackoverflow.com/questions/59414790/vue-r...

[Александр]

Кстати... offer_list в data Определен?

[seredaes]

Александр, Да и сам компонент работает. Падает именно тест...

[seredaes]

window.$axios.get.... потому что проект начали делать до меня и не родной vuex-axios подключен к проекту, а как отдельный код.
И в главном файле инициализации:

import axios from "axios";
Vue.prototype.$axios = axios;
window.$axios = axios;

[seredaes]

Я пробовал

const wrapper = shallowMount(ComponentForTest, {
      localVue,
      store,
      router,
      computed: {},
      propsData: {
        banner: {}
      },
<b>      methods: {
         xxx() {}
      }</b>
    });

Т.е. переопределить метод, чтобы он возвращал для теста готовые данные...
Так сработало, но пишет, что в будущем это будет deprecated и так нехорошо юзать, но стает вопрос, как замокать метод компонента, чтобы он не слал запрос, а возвращал для теста заготовленные данные?

[seredaes]

console.error
[vue-test-utils]: overwriting methods via the `methods` property is deprecated and will be removed in the next major version. There is no clear migration path for the `methods` property - Vue does not support arbitrarily replacement of methods, nor should VTU. To stub a complex method extract it from the component and test it in isolation. Otherwise, the suggestion is to rethink those tests.

Я пытался axios запрос вынести в actions VUEX но и там пристал тест, что не знает, что такое .then...

[Александр]

https://vue-test-utils.vuejs.org/ru/guides/#%D1%82...
Я до тестов еще не дошел ))) Почитал ...))) но в примере передается value в контексте поиска кнопки в DOM объекте.
1. Переопределить offer_list. Мне кажется что не надо переписывать axios.get. Надо перехватывать что вызывает axios.
2. Возможно. Мне кажется что заново надо писать

import axios from "axios";
Vue.prototype.$axios = axios;
window.$axios = axios;

В wrapper считает window.$axios. не Promise объектом. wrapper просто не понимает window.$axios.

[seredaes]

Все это сделано в тесте.
Ко всему еще добавлено:

jest.mock("axios");
jest.mock("axios", () => ({ get: jest.fn(), post: jest.fn(), create: jest.fn() }));

Просто при старте компонента вызывается метод
created() {
this.initData();
},
который вызывает другой метод
initData() {
this.getOffers();
this.getPublishers();
},
getOffers() делает запрос axios, но он не может быть выполнен, т.к. нет токена, в итоге валится похоже все...

Вот собственно вопрос, а как переопределить этот метод, чтобы в тесте он не делал ajax запрос, а я сразу ему отдавал данные, которые он должен вернуть...

[Александр]

Пункт 2. Но это все костыли )))
import axios from "axios";
Vue.prototype.$axios = axios;
window.$axios = axios;
jest.mock("window.$axios");
jest.mock("window.$axios", () => ({ get: jest.fn(), post: jest.fn(), create: jest.fn() }));

Answer 2

[profesor08]

Просто используй fetch, с ним проще, удобнее, легче. Ловить ошибки и обрабатывать результат кайф.

Сейчас, судя по скриншотам, у тебя говнокодище, если все таки хочешь использовать аксиос, то подключай его как написано в документации.

Ну, а что касается теста, то тест ничего не знает про объект window, так как выполняется в среде nodejs. Что там может быть в этом window не понятно. Живи с этим и пиши код нормально, даже если до тебя писали говнокод.

import axios from 'axios';

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Comments

[seredaes]

Сделал как Вы посоветовали, ошибку бъет

[seredaes]

Вычитал, нужно плагины доставлять...

А такой вопрос. Если я код AJAX вынесу в actions модуля, и перепишу в самом тесте сам actions, так будет корректно?

[profesor08]

seredaes, не знаю никаких actions в actions в vue, знаю что есть в vuex. Но это уже управление состояниями и по ним есть конкретная документация и там все написано, что можно делать, а что нельзя. Аctions могут быть асинхронными, так что ты можешь дергать какое-то api оттуда.

Answer 3

[seredaes]

В общем траблу решил так:

// MOCK AXIOS REQUESTS
    axios.get.mockImplementation(url => {
      if (url === "/offers") {
        return Promise.resolve({
          data: {
            name: 12
          }
        });
      } else if (url === "/publishers") {
        return Promise.resolve({
          data: {
            name: 12
          }
        });
      }
    });

И тест отработал отлично !!!
Может кому пригодиться :)