使用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調用

回答

相關問題