前端自動化測試 - Jest異步請求篇（二）

基礎配置在前端自動化測試 - Jest基礎配置篇（一）

用axios遠程的請求數據。要使用axios就需要先進行安裝，直接使用npm或yarn進行安裝就可以了

npm install axios@0.19.0 --save

安裝完成后，可以打開package.json看一下安裝結果和版本，我這里使用的是0.19.0(如果你是其它版本，可能這個方法會出錯，所以你最好和我使用一樣的版本)。

異步代碼的測試方法-1
一個異步請求地址
http://a.jspang.com/jestTest.json

安裝好axios以后，在項目根目錄下面，新建一個文件fetchData.js文件，然后編寫代碼如下：

import axios from 'axios'

export const fetchData = (fn)=>{
    axios.get('http://a.jspang.com/jestTest.json').then((response)=>{
        fn(response.data)
    })
}

測試文件fetchData.test.js在項目根目錄下，新建一個fetchData.test.js文件

import { fetchData } from './fetchData.js'

test('fetchData 測試',()=>{
   fetchData((data)=>{
       expect(data).toEqual({
           success: true
       })

   })
  })

注意這樣寫是由問題的，因為方法還沒有等到回調，我們的結果已經完成了，所以這時候你對於沒測試完，只是方法可用，就返回了測試結果，這種結果是不保證正確的。

比如現在我們把請求的地址后邊加一個1,這時候才測試，依然是正確的。

 axios.get('http://a.jspang.com/jestTest1.json').then((response)=>{
        fn(response.data)
    })

所以我們必須加入一個done方法，保證我們的回調已經完成了，這時候我們表示測試完成。

import { fetchData } from './fetchData.js'

test('fetchData 測試',(done)=>{
   fetchData((data)=>{
       expect(data).toEqual({
           success: true
       })
       done()
   })
  })

異步代碼的測試方法-2直接返回promise
還有一種方法式直接返回一個promise值，這樣的方法在工作中也式經常使用的.

fetchData.js文件，然后編寫下面的代碼:

export const fetchTwoData = ()=>{
    return axios.get('http://a.jspang.com/jestTest.json')
}

從代碼中可以看出，我們直接只用了Return返回了異步請求的promise值，這樣的方法在實際工作中也經常使用。

打開fetchData.test.js文件，然后新寫一個測試用例，在寫之前記得先把fetchTwoData方法引過來。

import { fetchData , fetchTwoData } from './fetchData.js'

引入之后，編寫測試用例，代碼如下:

test('FetchTwoData 測試', ()=>{
       return  fetchTwoData().then((response)=>{
            expect(response.data).toEqual({
                success: true
            })
        })
  })

這部分代碼需要注意的是要使用return才能測試成功，這個坑我學習的時候也踩到了，所以給大家說一下，希望大家不要踩坑。

異步代碼的測試方法-3不存在接口的測試方法
后台需求不允許前台訪問時，這時候就會返回404（頁面不存在），這時候在測試時也存在一些坑

繼續打開fetchData.test.js文件，然后編寫測試代碼如下，注意這個地址是不存在的，也就是返回404

export const fetchThreeData = ()=>{
    return axios.get('http://a.jspang.com/jestTest_error.json')
}

這時候可能很多小伙伴說測試404直接用catch就可以了，很簡單，然后代碼寫成了這樣。

test('FetchThreeData 測試', ()=>{
      return fetchThreeData().catch((e)=>{
        //console.log(e.toString())   
        expect(e.toString().indexOf('404')> -1).toBe(true)

      })
  })

但這樣是錯誤的，比如現在我們把異步請求代碼改正確后，我們再走一下測試，還是可以通過測試的。 現在把網址改成正確的:(http://a.jspang.com/jestTest.json)
那這是為什么那？因為測試用例使用了catch方法，也就是說只有出現異常的時候才會走這個方法，而現在沒有出現異常，就不會走這個測試方法，Jest就默認這個用例通過了測試。

這個也算是一個坑，想改這個坑也非常簡單，只要使用expect.assertions(1)就可以了，這個代碼的意思是“斷言，必須需要執行一次expect方法才可以通過測試”。

修改過后的代碼就變成了這個樣子

test('FetchThreeData 測試', ()=>{
      expect.assertions(1)  // 斷言，必須執行一次expect
      return fetchThreeData().catch((e)=>{
        expect(e.toString().indexOf('404')> -1).toBe(true)

      })
  })

這時候測試用例就無法正常通過測試了，因為此時我們的地址是存在並正確返回結果的。我們需要改成錯誤的地址，才能通過測試。(http://a.jspang.com/jestTest_error.json)

異步代碼的測試方法-4async...await

上面異步測試用例時我使用了return的形式，這只是其中的一種方法，還有另一種方法，就是使用async...await...的這種語法形式來寫測試用例。兩種語法沒有好壞之分，就看自己習慣和容易理解那種方法。

還是文件fetchData.js中，編寫一個新的方法:

 export const fetchFourData = ()=>{
    return axios.get('http://a.jspang.com/jestTest.json')
}

注意，這時候地址是正確的，也就是可以正常返回結果的。

async...await編寫測試代碼

這時候我們的代碼使用async....await...的形式，這里我們還使用了resolves用於把現有對象轉換成Promise對象，然后使用Jest中的toMatchObject進行匹配對象中的屬性。

test('FetchFourData 測試', async()=>{
        //resolves把現有對象轉換成Promise對象，
        //toMatchObject 匹配對象中的屬性
        await expect(fetchFourData()).resolves.toMatchObject({
            data:{
                success:true
            }
        })
})

寫完上面的代碼就可以出正確的結果了，但是這種方法還是有點抽象的，需要用resolves轉換一下。有沒有簡單方法，答案是肯定的。我們可以把上面的測試方法寫成這樣。

test('FetchFourData 測試', async()=>{
        const response  = await fetchFourData()
        expect(response.data).toEqual({
            success : true
        })
})

這就是用async...await...來進行異步代碼測試。