使用Moxios测试Vue中的API调用

我无法确定如何测试发生在“已安装”生命周期钩子中的API调用。使用Moxios测试Vue中的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>

为了测试，我使用了Karma，Jasmine和Avoriaz。

这是一个失败的测试：

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请求。快速谷歌搜索引导我moxios。所以我用纱线安装它，最终拿出来。我不是100％确定将moxios.stubRequest放在哪里，但已尝试将它放在beforeAll（），beforeEach（）和“it”中。

```

import moxios from moxios 
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', '12345') 
    document.body.appendChild(element) 

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

    beforeEach(() => { 
    moxios.install() 
    }) 

    afterEach(() => { 
    moxios.uninstall() 
    }) 

    it('retrieves owner information from the 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) 
    })

看起来请求没有被实际存根。为了排除故障，我在axios.get（）调用（它已成功注销）之前放置了一个console.log语句，并且还放了一个console.log来注销响应，但是这个从来没有出现，这让我认为axios请求不起作用，不会被moxios“拦截”。

... 
     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()顶部存根出的要求，但是这也行不通。

我该如何安排这一点，以便moxios将API请求存根并返回以便我的测试通过？

来源

2017-08-01 Trinculo

您需要使用moxios.wait()等待moxios请求完成：

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

来源

2017-08-02 15:33:08

使用Moxios测试Vue中的API调用

回答

相关问题