用Moxios测试Vue中的API调用

Question

我很难弄清楚如何测试在“挂载”生命周期挂钩中发生的API调用。

我有一个文件组件，负责显示有关“所有者”的一些信息。

这正是我在浏览器中想要/期望的工作方式。

<template>
  <div>
    <h3>Owner Information</h3>
    <table class="table table-striped table-condensed">
      <thead>
        <th>Name</th>
        <th>Address</th>
        <th>Social Security Number</th>
        <th>Ownership Percentage</th>
      </thead>
      <tbody>
        <tr :data-owner-id="owner.id" v-for="owner in owners">
          <td>{{ owner.name }}</td>
          <td>{{ owner.address }}</td>
          <td>{{ owner.censored_ssn }}</td>
          <td>{{ owner.ownership_percentage }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        principal_id: '',
        owners: []
      }
    },
    mounted() {
      const el = document.querySelector('#owner-information');
      this.principal_id = el.dataset.principal;

      var self = this;
      axios.get(`/principals/${this.principal_id}.json`).then(response => {
        response.data.owners.map((owner) => {
          owner.score = '';
          owner.link = '';
          owner.last_pull_date = '';
          self.owners.push(owner);
        });
      });
      .catch(e => {
        console.log(e);
      });
    }
  }
</script>

为了测试，我用的是卡玛，茉莉花和阿芙里亚斯。

下面是一个失败的测试：

import { mount } from 'avoriaz'
import OwnerInformation from '../../app/javascript/packs/OwnerInformation.vue'

describe('OwnerInformation', () => {
  let component

  beforeAll(() => {
    const element = document.createElement('div')
    element.setAttribute('id', 'owner-information')
    element.setAttribute('data-principal', '84033')
    document.body.appendChild(element)

    component = mount(OwnerInformation)
    component.vm.$mount('#owner-information')
  })

  it('retrieves owner information from the API', () => {
    expect(component.data().owners.length).toBe(1)
  })
})

上面的值期望1，但得到0。

因此，现在我想我需要以某种方式对我的API请求进行存根/模拟。一个快速的谷歌搜索将我引向艾斯。所以我用Yarn安装了它，并最终想出了这个。我并不100%确定将moxios.stubRequest放在哪里，但我已经尝试将其放入beforeAll()、beforeEach()和" it“中。

```javascript

从艾灸中进口艾灸

从“avoriaz”导入{挂载}

从'../../app/javascript/packs/OwnerInformation.vue‘导入OwnerInformation

描述(‘OwnerInformation’，() => {

let组件

beforeAll(() ) => {

const element = document.createElement('div')

element.setAttribute('id', 'owner-information')

element.setAttribute('data-principal', '12345')

document.body.appendChild(element)

component = mount(OwnerInformation)

component.vm.$mount('#owner-information')

})

beforeEach(() ) => {

moxios.install()

})

afterEach(() ) => {

moxios.uninstall()

})

它(‘从API检索所有者信息’，() => {

moxios.stubRequest('/principals/12345', {

  status: 200,

  response: {

    id: 1, owners: [

      { name: 'Test Owner', address: '123 Test St.', ssn: '123-12-1234', ownership_percentage: 100 

      }

    ]

  }

})

expect(component.data().owners.length).toBe(1)

})

It appears that the request is not actually be stubbed out.  To troubleshoot, I put a console.log statement just before the axios.get() call (which logs out successfully) and I also put a console.log to log out the response, but this one never shows up which makes me think that the axios request is not working and is not getting "intercepted" by moxios.

```javascript

..。

  console.log('CALLING API...')

  axios.get(`/principals/${this.principal_id}.json`).then(response => {

    console.log('***********************')

..。

当我运行测试时，我确实看到了404，但我不知道为什么：

01 08 2017 12:49:43.483:WARN [web-server]: 404: /principals/12345.json

对我来说，在beforeAll()顶部删除请求是最有意义的，但这也不起作用。

我如何安排这一点，以便艾默斯存根输出API请求，并返回以便我的测试通过？

Answer 1

您需要使用moxios.wait()来等待艾莫斯请求的完成：

/*** note the "done" argument -- you must call this method within wait()! ***/
it('retrieves owner information from the API', (done) => {
  moxios.stubRequest('/principals/12345', {
    status: 200,
    response: {
      id: 1, owners: [{ name: 'Test', address: '123 Test St.' }]
    }
  })
  moxios.wait(function() {
    expect(component.data().owners.length).toBe(1)
    done()
  })
})