Насмешливая ось:
Существует два простых способа смоделировать axios, чтобы ваши тесты не выполняли реальные http-запросы и вместо этого использовали фиктивный объект:
установить axios как свойство компонента:
import axios from 'axios`;
Vue.component({
data() {
return {
axios,
}
},
methods: {
makeApiCall() {
return this.axios.post(...)
}
}
})
Таким образом, вы можете легко ввести макет в свои тесты:
it('test axions', function() {
const post = jest.fn();
const mock = {
post,
}
// given
const wrapper = shallowMount(myComponent, {
data: {
axios: mock,
}
});
// when
wrapper.vm.makeApiCall();
// then
expect(post).toHaveBeenCalled();
});
Я думаю, что это самый простой способ.
Используйте плагин для добавления axios в каждый компонент
Вы можете установить плагин, например vue-plugin-axios , чтобы автоматически добавлять axios в каждый компонент, например:
makeApiCall(){
this.$axios.post(...)
}
Без необходимости явно объявлять это в data.
Затем в своем тесте вместо прохождения макета как части data вы передаете его как часть mocks, то есть vue-test-utils обрабатывает глобальные инъекции:
it('test axions', function() {
const post = jest.fn();
const mock = {
post,
}
// given
const wrapper = shallowMount(myComponent, {
mocks: {
$axios: mock,
}
});
// when
wrapper.vm.makeApiCall();
// then
expect(post).toHaveBeenCalled();
});
Вот как можно смоделировать вызовы axios, чтобы предотвратить реальные вызовы axios и выполнить настоящий http-запрос.
Настройка параметров макета и доступа к параметрам вызова
С помощью jest.fn вы можете настроить фиктивную функцию для возврата определенного объекта, например:
const post = jest.fn( () => ({status: 200, response: ...}) )
Вы также можете получить доступ к параметрам вызова через hasBeenCalledWith' method, or more complex stuff via mock.calls` ( подробнее здесь ):
expect(post).toHaveBeenCalledWith(expectedParams).
Итак, ваш последний тест должен выглядеть примерно так:
it('calls axios() with endpoint, method and body',async (done) => {
// given
const formData = { email: 'example@gmail.com', password: '111111' };
const fakeResponse = {response: "fake response"};
const email = 'example@gmail.com';
const uri = 'somepath/login/'; // I dont think you can access Vue process env variables in the tests, so you'll need to hardcode.
const password = '11111';
const post = jest.fn(() => Promise.resolve({status: 200}) );
const mock = {
post,
}
const wrapper = shallowMount(Component, {
data() {
return {
axios: mock,
// email,
// password, // you could do this instead to write to wrapper.vm later
}
}
});
wrapper.vm.email = 'example@gmail.com';
wrapper.vm.password = '111111';
// when
await wrapper.vm.doSigninNormal();
// then
expect(post).toHaveBeenCalledWith({uri, password, email});
// or
const calls = post.mock.calls;
const firstParam = calls[0][0];
expect(firstParam.uri).toBe(uri);
expect(firstParam.email).toBe(email);
expect(firstParam.password).toBe(password);
done();
});