Unit Test HTTP Request with Vue, Axios, and Mocha

Question

I am really trying to test a request in VueJS using Mocha / Chai-Sinon, with Axios as the request library and trying a mixture of Moxios and axios-mock-adaptor . Below are examples with the latter.

I am trying to make a request when a component is created, which is quite simple.

But the tests either complain about the results variable, which is undefined, or async timout .

Am I doing this right by assigning the variable getData() function? Or should I getData() function? Or should I return` values? Any help would be appreciated.

Component

  // Third-party imports import axios from 'axios' // Component imports import VideoCard from './components/VideoCard' export default { name: 'app', components: { VideoCard }, data () { return { API: '/static/data.json', results: null } }, created () { this.getData() }, methods: { getData: function () { // I've even tried return instead of assigning to a variable this.results = axios.get(this.API) .then(function (response) { console.log('then()') return response.data.data }) .catch(function (error) { console.log(error) return error }) } } } 

Test

 import Vue from 'vue' import App from 'src/App' import axios from 'axios' import MockAdapter from 'axios-mock-adapter' let mock = new MockAdapter(axios) describe('try and load some data from somewhere', () => { it('should update the results variable with results', (done) => { console.log('test top') mock.onGet('/static/data.json').reply(200, { data: { data: [ { id: 1, name: 'Mexican keyboard cat' }, { id: 2, name: 'Will it blend?' } ] } }) const VM = new Vue(App).$mount setTimeout(() => { expect(VM.results).to.be.null done() }, 1000) }) }) 

Answer 1

I'm not sure about the moxios mock adapter, but I had a similar fight. I ended up using axios and moxios with the vue-webpack template. My goal was to fake a few blog posts and claim that they were assigned to the this.posts variable.

Your getData () method should return the axios promise, as you said you tried - so we have a way to talk about the testing method, the promise is over. Otherwise, it will continue.

Then in the getData () callback you can assign your data. Therefore it will look like

 return axios.get('url').then((response) { this.results = response }) 

Now in your test something like

 it('returns the api call', (done) => { const vm = Vue.extend(VideoCard) const videoCard = new vm() videoCard.getData().then(() => { // expect, assert, whatever }).then(done, done) )} 

Note the use of done (). This is just a guide, you will have to change it depending on what you are doing exactly. Let me know if you need details. I recommend using moxios to fake axiom calls.

Here is a good article on testing api calls that helped me.

https://wietse.loves.engineering/testing-promises-with-mocha-90df8b7d2e35#.yzcfju3qv

Answer 2

So massive a prestige for the Hanetics post above , which helped me point me in the right direction.

In short, I tried to access the data incorrectly when I had to using the $data property

I also reset axios-mock-adaptor and returned to using moxios .

I really needed to return promise in my component, for example:

 getData: function () { let self = this return axios.get(this.API) .then(function (response) { self.results = response.data.data }) .catch(function (error) { self.results = error }) } 

(Using let self = this deals with the "volume of axioms" problem)

Then, to check this, all I had to do was moxios.install() request (after executing moxios.install() and moxios.uninstall for beforeEach() and afterEach() respectively.

 it('should make the request and update the results variable', (done) => { moxios.stubRequest('./static/data.json', { status: 200, responseText: { data: [ { id: 1, name: 'Mexican keyboard cat' }, { id: 2, name: 'Will it blend?' } ] } }) const VM = new Vue(App) expect(VM.$data.results).to.be.null VM.getData().then(() => { expect(VM.$data.results).to.be.an('array') expect(VM.$data.results).to.have.length(2) }).then(done, done) })