Reactjs 钩子默认导出时的模拟函数_Reactjs_React Hooks

Reactjs 钩子默认导出时的模拟函数

reactjs

Reactjs 钩子默认导出时的模拟函数,reactjs,react-hooks,Reactjs,React Hooks,我有一个自定义钩子API网关调用另一个自定义钩子http。我想模拟promise函数sendHttpRequest来测试sendAPIRequest。通过这段代码，我得到了“拒绝值：[TypeError:无法读取未定义的'then'属性]” 我试图避免任何模拟文件。如果我模拟axios，则apiGateway.test通过。如何在useHttp的默认导出上模拟函数sendHttpRequest http.js import { useCallback } from 'react'; impor

我有一个自定义钩子API网关调用另一个自定义钩子http。我想模拟promise函数sendHttpRequest来测试sendAPIRequest。通过这段代码，我得到了“拒绝值：[TypeError:无法读取未定义的'then'属性]” 我试图避免任何模拟文件。如果我模拟axios，则apiGateway.test通过。如何在useHttp的默认导出上模拟函数sendHttpRequest

http.js

import { useCallback } from 'react';
import axios from 'axios';

const useHttp = () => {
    const sendRequest = useCallback((url, method, body) => {
        return new Promise((resolve, reject) => {
            axios({ method: method, url: url, data: body, config: { crossDomain: true } })
                .then((response) => {
                    resolve(response.data);
                })
                .catch((error) => {
                    reject(error);
                });
        });
    }, []);

    return {
        sendHttpRequest: sendRequest,
    };
};

export default useHttp;

apiGateway.js

import { useCallback } from 'react';
import useHttp from '../abstract/http';
import configuration from '../../endpoints';

const useApiGateway = () => {
    const { sendHttpRequest } = useHttp();
    const apiGatewayBaseUrl = configuration.API_GATEWAY_BASE_URL;
    const apiGatewayPath = configuration.LAMBDA_USER_ENDPOINT;

    const sendRequest = useCallback((body) => {
        return new Promise((resolve, reject) => {
            sendHttpRequest(apiGatewayBaseUrl + apiGatewayPath, 'get', body)
                .then((response) => {
                    resolve(response);
                })
                .catch((error) => {
                    reject(error);
                });
        });
    }, []);

    return {
        sendApiRequest: sendRequest,
    };
};

export default useApiGateway;

apiGateway.test.js

import React from 'react';
import { act, renderHook } from '@testing-library/react-hooks';

import useApiGateway from './apiGateway';
import useHttp from '../abstract/http';
jest.mock('../abstract/http', () => jest.fn());
describe('hook/aws/apiGateway', () => {
    let result;
    beforeEach(() => {});

    it('should send GET request with no error', () => {
        //TODO mock http instead of axios
        let response = { data: '<html>Hello</html>' };
        useHttp.mockImplementation(() => ({
            sendHttpRequest: jest.fn(() => {}),
        }));
        let { sendHttpRequest } = useHttp();
        sendHttpRequest.mockResolvedValue(
            new Promise((resolve, reject) => {
                resolve(response);
            })
        );
        result = renderHook(() => useApiGateway()).result;
        console.log(useHttp());
        act(() => {
            return expect(result.current.sendApiRequest({})).resolves.toEqual(response.data);
        });
    });

});

您的模拟应该返回一个承诺（而不是试图模拟承诺库）

例如：

function myMockRequest() {
    return Promise.resolve({ mockResponse });
}

您的模拟应该返回一个承诺（而不是试图模拟承诺库）

例如：

function myMockRequest() {
    return Promise.resolve({ mockResponse });
}