【问题标题】:Testing async method in react with jest测试异步方法以开玩笑
【发布时间】:2018-02-22 03:21:14
【问题描述】:

我是单元测试的新手,我有 2 个文件:

餐厅减速器

import * as Const from '../constants/Const'

const RestaurantReducer = (state = {
    restaurantList: []
}, action) => {
    switch (action.type) {
        case Const.GET_RESTAURANT_LIST: {

            return {
                ...state,
                restaurantList: action.payload
            };
        }
    }
    return state;
};

export default RestaurantReducer;

和 RestauntActions.js

export function getRestaurantList() {
    return dispatch => {
        axios({
            method: "GET",
            url: URLS.URL_RESTAURANT_LIST
        }).then((response) => {
            dispatch({
                type: CONST.GET_RESTAURANT_LIST,
                payload: response.data
            })
        })
    }
}

和我的测试:

describe('request reducer', () => {

    it('Default values', () => {
        expect(restReducer(undefined, {type: 'unexpected'})).toEqual({
          restaurantList: []
        });
    });

    // ---------------- Dont know how to check this -------------------
    it('Async data',async () => {

        expect(restReducer(undefined, {
            type: 'GET_RESTAURANT_LIST',
        })).toEqual({
            ...state,
            restaurantList: []
        });
    });
});

我不知道该怎么做。您可以检查来自服务器的连接或数据吗?这些数据可以模拟,但它们是动态的。

【问题讨论】:

    标签: javascript reactjs testing jestjs


    【解决方案1】:

    你需要模拟你的依赖的基本思想(在这种情况下是 axios 调用)。 This answer describe how to do that.

    我创建了示例来说明这个想法:

    const axios = require('axios')
    const assert = require('assert')
    const moxios = require('moxios')
    
    
    const asyncFunctionToTest = () => {
        // grabs length of google page body
        return axios({
            url: 'http://google.com',
            method: 'GET'
        })
        .then(resp => resp.data.length)
    }
    
    
    
    describe('async function', () => {
        beforeEach(function () {
            // import and pass your custom axios instance to this method
            moxios.install()
        })
    
        afterEach(function () {
            // import and pass your custom axios instance to this method
            moxios.uninstall()
        })
        it('returns propper body length', () => {
            const BODY = 'short string'
            const mocked = moxios.wait(function () {
                const request = moxios.requests.mostRecent()
                request.respondWith({
                    status: 200,
                    response: BODY
                })
            })
            return Promise.all([asyncFunctionToTest(), mocked]) // imported bit: you need to return promise somehow in your test
                .then(([result]) => {
                    assert(result === BODY.length, result)
                })
        })
    })
    

    【讨论】:

    • 此检查仅 axios 请求,但我想在RestaurantReducer 中的 switch 中测试此操作
    • 请检查我创建的示例。
    • @ThePrzemyslaw94 你测试了吗?你需要什么建议吗?
    • @kharadziuk 感谢您的响应。Te 测试我的 axios 方法,但我正在寻找测试减速器。可能我太新手了
    猜你喜欢
    • 1970-01-01
    • 2020-10-08
    • 1970-01-01
    • 2022-01-01
    • 2018-11-23
    • 1970-01-01
    • 2021-10-12
    • 1970-01-01
    • 2019-05-17
    相关资源
    最近更新 更多