實際測試用例的編寫(react+ jest+ enzyme)

1 測試用例里面我遇到的最大問題就是獲取元素,進行斷言,有的時候不知道為什么就獲取不到,或者不知道怎么斷言,真的是醉了

 

2 每次測試的時候,做個測試快照,這我感覺還行,比較簡單,就是有三種渲染方式,后面會用到,懶得寫了,發一下其他人的鏈接吧. https://www.tangshuang.net/4070.html

  我的快照代碼如下:

  

import React from 'react';
mport xxxfrom '../../../pages/xxx/xxxx';
import renderer, { act } from 'react-test-renderer';
import { mount, shallow, render } from 'enzyme';
jest.useFakeTimers();
const wrapper = shallow(<xxx/>);
const mountWrapper = mount(<xxx/>);
const renderWrapper = render(<xxx/>);
const tree = renderer.create(<xxx/>, {
    createNodeMock: node => {
        return document.createElement(node.type)
    }
}).toJSON();


it('renders correctly', () => {
    act(() => {
        expect(tree).toMatchSnapshot();
    })
});

  3  對於測試用例,我們不可避免的就是對於接口的模擬,所以我們就需要造一些假數據來跑我們原本的js文件

     對於一個完整的項目來說,基本都有server層,里面封裝這我們接口的url,get還是post,參數什么的,而前端調用接口的方式也很多啊,ajax,axios,fetch等等,所以怎么模擬就看你原本代碼怎么寫,中心思想就是把原本的替換掉

   下面是我替換的一個例子,因為我們最終返回的是一個promise,所以就直接模擬一下,這里要特別感謝這個鏈接,https://cloud.tencent.com/developer/news/145296,里面有代碼的目錄結構,讓我豁然開朗

let statusCode;
export function setStatus(code) {
    statusCode = code;  根據code不同返回不一樣的數據
}

const baseUrl = '';
export function httpGet(path, query) {
    let url = baseUrl + path;  // api url 
    let getLocalUrl = getLocalDataUrl(url)  //處理一下url方便我們建立假數據的文件名
    // console.log(getLocalUrl, 'getLocalUrl')
    let method = 'get';
    try {
        return new Promise((resolve, reject) => {
            const mockData = require(`../__mockData__/${getLocalUrl}.data`).default;  // 獲取假數據
            const result = mockData[`${method.toUpperCase()} ${statusCode}`];
            if (statusCode == 200) {
                resolve(result)
            } else {
                let err = result
                reject(err)
            }
        });
    } catch (err) {
        return err
    }
}

　　

  4 接下來就是對useEffect測試一下,在快照代碼上面添加幾行代碼即可:

   

jest.mock('../../../@core/HttpRequest.js')

import renderer, { act } from 'react-test-renderer';
import HttpRequest, { setStatus } from '../../../@core/HttpRequest'

beforeEach(() => {
    act(() => {
        setStatus(200)
    })
})

　這樣就可以跑到useEffect,但是只能跑成功case,那種失敗的api請求沒能模擬到,尷尬,好多代碼沒跑到就是因為這個問題

 

5 然后就是對於元素的click,change什么的,也就是找到元素,simulate一些他們的時間,類似於jq吧.下面給兩個實例代碼

 

wrapper.find('#fromDt').simulate('change', { target: { value: '3333' } })

wrapper.find('#searchCurrency').simulate('click')  

可以定義id或者class在元素上面,然后找就好了　　

 6 組件內部又使用了組件.

  使用dive(),詳情可以在enzyme文檔上看到,下面是我的實例代碼

 

 wrapper.find(xxx組件名字).dive().find('#sortId').at(0).simulate('click')   //如果數據多條,可以使用at(數字),來指定對哪個元素進行操作

7--------------------------------------------------------------------------------------------------------------------以后想到再補充吧　　

8  https://jestjs.io/docs/zh-Hans/setup-teardown   關於jest的分組還是要看一下的,對於if判斷很有用處