React JS API调用函数Jest测试用例运行失败问题求助

• 1. API调用函数无返回值：你定义的getUserTest函数虽然标记了async，但内部没有返回fetch调用产生的Promise对象，函数默认返回的Promise resolve值为undefined，所以测试用例中拿到的data是空值。
• 2. fetch mock结构不符合规范：真实浏览器环境中fetch成功后返回的是Response实例，该实例携带json()方法用于解析响应体；但你的测试中直接将测试数据作为fetch的resolve值，这个值没有json()方法，所以抛出response.json is not a function的报错。

步骤1：修改API调用函数，补充返回值 #

给fetch调用前增加return关键字，暴露整个Promise链的执行结果：

export async function getUserTest() {
    // 新增return关键字
    return fetch(config.apiUrl.myFleetAPI, {
        method: 'GET',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
            Authorization: 'Bearer ' + 'GcGs5OF5TQ50sbjXRXDDtG8APTSa0s'
        }
    })
        .then((response) => {
            return response.json();
        })
        .catch((reject) => console.log(reject));
}

步骤2：修改测试用例的mock逻辑，模拟真实Response结构 #

调整mockAPICall的实现，让fetch resolve的结果携带可调用的json()方法，该方法返回你预设的测试数据：

import React from 'react';
import { getUserTest } from '../Service/Dashboard/Dashboard';

global.fetch = jest.fn();
// 修改mock实现，符合fetch返回值规范
const mockAPICall = (option, data) => global.fetch.mockImplementation(() => Promise[option]({
  json: () => Promise.resolve(data)
}));

describe('Car Components component', () => {
    describe('when rendered', () => {
        it('should call a fetchData function', async () => {
            const testData = { current_user: 'Rahul Raj', name: 'Lafarge' };

            mockAPICall('resolve', testData);
            // 用async/await写法更简洁，也可以保留原来的return then写法
            const data = await getUserTest();
            expect(data).toEqual(testData);
        });
    });
});

修改完成后重新运行测试即可正常通过。

内容的提问来源于stack exchange，提问作者ROHIT RAJ