「React Native」单元测试

一、逻辑测试（jest）

基于之前网络防重复请求，进行逻辑测试，测试因子（请求链接是否相同url、请求时间是否在限制500ms内重复请求、是否是特殊url直接响应）

import UrlCache from '../../src/api/UrlCache'
const testNormalUrl = 'https//www.baidu.com?hello=1'
const testSpecialUrl = 'https//www.baidu.com/api/services/Bill/SourceOrder/GetSourceOrderList'
beforeAll(() => {
    UrlCache.filterRepeatUrl(testNormalUrl)
    UrlCache.filterRepeatUrl(testSpecialUrl)
})

describe("测试UrlCache工具类", () => {
    test('不一样url', () => {
        expect(UrlCache.filterRepeatUrl('https//www.google.com?hello=1')).toBeTruthy()
    })
    test('一样url,不同参数', () => {
        expect(UrlCache.filterRepeatUrl('https//www.baidu.com?name=1')).toBeTruthy()
    })
    test('一样url,一样参数', () => {
        expect(UrlCache.filterRepeatUrl(testNormalUrl)).toBeFalsy()
    })
    test('一样url,一样参数,延时100ms', (done) => {
        setTimeout(() => {
            expect(UrlCache.filterRepeatUrl(testNormalUrl)).toBeFalsy()
            done()
        }, 100)
    })
    test('一样url,一样参数,延时500ms', (done) => {
        setTimeout(() => {
            expect(UrlCache.filterRepeatUrl(testNormalUrl)).toBeTruthy()
            done()
        }, 500)
    })
    test('一样url,一样参数,延时1000ms', (done) => {
        setTimeout(() => {
            expect(UrlCache.filterRepeatUrl(testNormalUrl)).toBeTruthy()
            done()
        }, 1000)
    })
    test('特殊url，直接返回', () => {
        expect(UrlCache.filterRepeatUrl(testSpecialUrl)).toBeTruthy()
    })
    test('特殊url,延时100ms', (done) => {
        setTimeout(() => {
            expect(UrlCache.filterRepeatUrl(testSpecialUrl)).toBeTruthy()
            done()
        }, 100)
    })
    test('特殊url,延时1000ms', (done) => {
        setTimeout(() => {
            expect(UrlCache.filterRepeatUrl(testSpecialUrl)).toBeTruthy()
            done()
        }, 1000)
    })
})
afterAll(() => {
    UrlCache.clearCache()
})

image.png

二、UI测试（react-native-testing-library）

基于基础输入框进行ui测试，主要测试输入，输出。模拟触发用户的各种输入行为。

import 'react-native';
import React from 'react';
import BaseInputText from '../../src/components/input/BaseInputText'
import { render, fireEvent } from 'react-native-testing-library';
import { toRegExp } from '../../src/commons/RegExpUtil'
function createBaseInputText(onChangeTextMock, onBlurMock, onFocusMock, onChangeMock, regular, weightFactor) {
    const { getAllByDisplayValue, getAllByA11yLabel, getByText } = render(
        <BaseInputText
            regular={regular}
            initValue='请输入您的姓名:'
            onChangeText={onChangeTextMock}
            onBlur={onBlurMock}
            isChineseInput={false}
            onFocus={onFocusMock}
            limitFactor={weightFactor}
            onChange={onChangeMock} />
    )
    answerInputs = getAllByDisplayValue("请输入您的姓名:");
    return answerInputs[0]
}


function weightFactorFuc(textNum) {
    if (textNum < 100) {
        return true
    } else {
        return false
    }
}

describe("测试BaseInputText", () => {
    let onBlurMock = jest.fn();
    let onChangeTextMock = jest.fn();
    let onChangeTextENInputMock = jest.fn();
    let onChangeTextChInputMock = jest.fn();
    let onChangeTextLimitWithin = jest.fn();
    let onChangeTextLimitWithout = jest.fn();
    let onFocusMock = jest.fn();
    let onChangeMock = jest.fn();
    test('onChangeTextTest 普通输入', () => {
        let answerInput = createBaseInputText(onChangeTextMock, null, null, null, null, null)
        fireEvent.changeText(answerInput, 'react native');
        expect(onChangeTextMock).toHaveBeenCalled();
    })
    test('onChangeTextTest 传入中文正则表达式校验规则，传入英文', () => {
        let answerInput = createBaseInputText(onChangeTextENInputMock, null, null, null, (text) => { return toRegExp('/^[\\u4e00-\\u9fa5]{0,}$/').test(text) }, null)
        fireEvent.changeText(answerInput, 'react native');
        expect(onChangeTextENInputMock).toHaveBeenCalledTimes(0);
    })
    test('onChangeTextTest 传入中文正则表达式校验规则，传入中文', () => {
        let answerInput = createBaseInputText(onChangeTextChInputMock, null, null, null, (text) => { return toRegExp('/^[\\u4e00-\\u9fa5]{0,}$/').test(text) }, null)
        fireEvent.changeText(answerInput, '中国喜剧人');
        expect(onChangeTextChInputMock).toHaveBeenCalled();
    })
    test('onChangeTextTest 传入限制条件（小于100），实际输入大于100', () => {
        let answerInput = createBaseInputText(onChangeTextLimitWithout, null, null, null, null, weightFactorFuc)
        fireEvent.changeText(answerInput, "200");
        expect(onChangeTextLimitWithout).toHaveBeenCalledTimes(0);
    })
    test('onChangeTextTest 传入限制条件（小于100），实际输入小于100', () => {
        let answerInput = createBaseInputText(onChangeTextLimitWithin, null, null, null, null, weightFactorFuc)
        fireEvent.changeText(answerInput, "10");
        expect(onChangeTextLimitWithin).toHaveBeenCalled();
    })
    test('onBlurTest 触发OnBlur事件', () => {
        let answerInput = createBaseInputText(null, onBlurMock, null, null, null, null)
        fireEvent(answerInput, 'blur');
        expect(onBlurMock).toHaveBeenCalled();
    })
    test('onFocusTest 触发OnFocus事件', () => {
        let answerInput = createBaseInputText(null, null, onFocusMock, null, null, null)
        fireEvent(answerInput, 'focus');
        expect(onFocusMock).toHaveBeenCalled();
    })
    test('onChangeMock 触发OnChange事件', () => {
        let answerInput = createBaseInputText(null, null, null, onChangeMock, null, null)
        fireEvent(answerInput, 'change');
        expect(onChangeMock).toHaveBeenCalled();
    })
})

image.png

三、测试用例注意事项：（参考现有UI测试+逻辑测试的写法）

1.块/组件/模块描述语清晰（测试某个文件的说明）
2.Test case描述语清晰（结合变量，比如是基于哪种场景下，实际赋值是什么）
3.(变动因子，是否与时间相关、是否指定变量相关、其他逻辑条件)是否有叠加关系
4.UI测试中，输入、输出。（主要参考的是props的值，抛开style先不关）

四、参考链接

https://jestjs.io/docs/zh-Hans/getting-started
http://react.caibaojian.com.cn/docs/shallow-renderer.html
https://github.com/callstack/react-native-testing-library/blob/master
https://blog.csdn.net/moshenglv/article/details/79610986
https://callstack.github.io/react-native-testing-library/docs/api/#render