Question

我真的很难尝试使用Mocha / Chai-Sinon在VueJS中测试请求，Axios作为请求库，并尝试了Moxios和<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:tools="http://schemas.android.com/tools" android:background="@color/colorDartGray" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="morega.mota.ui.SetIpAddressActivity">  <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/searching_button_view" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" > <Button android:layout_width="200dp" android:layout_height="75dp" android:text="@string/cancel" android:id="@+id/cancel_button" android:layout_marginLeft="10dp" android:layout_marginStart="10dp" android:layout_toRightOf="@+id/connect_button" android:layout_toEndOf="@+id/connect_button"/> <Button android:layout_width="200dp" android:layout_height="75dp" android:id="@+id/connect_button" android:text="@string/connect"/> </RelativeLayout> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/company_logo" android:src="@drawable/logo" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="@string/ip_address_instruction" android:id="@+id/textView" android:layout_below="@+id/company_logo" android:layout_centerHorizontal="true" android:textColor="#ffffff" android:textSize="40sp"/> <LinearLayout android:orientation="horizontal" android:layout_width="750dp" android:layout_height="400dp" android:layout_centerVertical="true" android:layout_centerHorizontal="true"> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1"/> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="."/> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1"/> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="."/>/> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1"/> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="."/>/> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1"/> </LinearLayout> </RelativeLayout>的混合。以下示例与后者有关。

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

但测试要么抱怨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
          })
      }
    }
  }

Answer 1

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

你的getData（）方法应返回axios 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 post above如此巨大的赞誉，他帮助我指明了正确的方向。

简而言之，当我应该using the $data property

时，我试图错误地访问数据

我也放弃了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.uninstall执行beforeEach()和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)
})

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

2 个答案: