web-dev-qa-db-ja.com

Vue、Axios、Mochaを使用したHTTPリクエストの単体テスト

Axiosをリクエストライブラリとして使用し、Moxiosと_axios-mock-adaptor_を組み合わせて、Mocha/Chai-Sinonを使用してVueJSでリクエストをテストするのに本当に苦労しています。以下の例は後者のものです。

私がやろうとしているのは、コンポーネントの作成時にリクエストを行うことです。これは非常に簡単です。

しかし、テストでは、results変数が未定義であるか、_async timout_について不平を言っています。

getData() function? Or should I return`の変数に値を割り当てることで正しく実行していますか？どんな助けでもいただければ幸いです。

コンポーネント

_  // 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)
  })
})
_
vue.jsaxioskarma-mocha
8
Lee Davies

Moxiosモックアダプターについてはよくわかりませんが、同様の苦労がありました。最終的に、vue-webpackテンプレートでaxiosとmoxiosを使用しました。私の目標は、いくつかのブログ投稿を偽に取得し、それらがthis.posts変数に割り当てられていることを表明することでした。

GetData（）メソッドshouldは、試したように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（）の使用に注意してください。これは単なるガイドであり、正確に何をしているかに応じて変更する必要があります。詳細が必要な場合はお知らせください。 axios呼び出しをモックするためにmoxiosを使用することをお勧めします。

これは私を助けたAPI呼び出しのテストについての良い記事です。

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

6
xenetics

上記の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()とbeforeEach()に対してそれぞれafterEach()と_moxios.uninstall_を実行した後。

_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)
})
_
4
Lee Davies