使用Vue,Axios和Mocha对HTTP请求进行单元测试

Question

我正在努力尝试使用Mocha/Chai-Sinon在VueJS中测试请求,将Axios作为请求库并尝试混合使用Moxios和 axios-mock-adaptor.以下示例与后者有关.

我正在尝试做的是在创建组件时发出请求,这很简单.

但测试要么抱怨results变量未定义,要么抱怨async timout.

我是通过分配变量来做到的 getData() function? Or should I返回值做到的吗？任何帮助,将不胜感激.

零件

  // 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
          })
      }
    }
  }

测试

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

我不确定moxios模拟适配器,但我有类似的斗争.我最终使用了vue-webpack模板使用axios和moxios.我的目标是伪造一些博客文章,并声称它们被分配到this.posts变量.

你的getData()方法应该像你说的那样返回axios promise - 这样,我们就可以通过某种方式告诉测试方法完成了promise.否则它会继续下去.

然后在getData()的成功回调中,您可以分配您的数据.所以它看起来像

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

现在你的测试就像

it('returns the api call', (done) => {
    const vm = Vue.extend(VideoCard)
    const videoCard = new vm()

    videoCard.getData().then(() => {
        // expect, assert, whatever
    }).then(done, done)
)}

注意使用done().这只是一个指南,你必须根据你正在做的事情来修改它.如果您需要更多详细信息,请与我们联系.我建议使用moxios来模拟axios调用.

这是一篇关于测试帮助我的api调用的好文章.

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

Answer 2

非常感谢上面的 xenetics 帖子，他帮助我指明了正确的方向。

简而言之，当我应该使用该属性时，我试图错误地访问数据$data

我也放弃axios-mock-adaptor并重新使用moxios.

我确实必须return在我的组件中做出承诺，就像这样；

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

（使用let self = this绕过 axios 范围“问题”）

然后为了测试这个，我所要做的就是存根请求（在分别为和做moxios.install()和之后。moxios.uninstallbeforeEach()afterEach()

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)
})