使用 Jest-React Native 测试 fetch

Posted 2023-02-22

【中文标题】使用 Jest-React Native 测试 fetch

【英文标题】：Testing fetch using Jest- React Native

【发布时间】：2018-01-29 02:26:21

【问题描述】：

我有一个通用的 api 类，用于处理 React Native 中的 api 调用。它将进行调用并获取 json/ 错误并返回它。请参阅下面的代码。

// General api to acces data from web
import ApiConstants from './ApiConstants';
export default function api(path,params,method, sssid)

    let options;
        options = Object.assign(headers: 
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        , method: method , params ?  body: JSON.stringify(params)  : null );


    return fetch(ApiConstants.BASE_URL+path, options).then( resp => 
        let json = resp.json();
        if (resp.ok) 
            return json;
        
        return json.then(err => 
            throw err;
        ).then( json => json );
    );

但是当我写一个笑话测试来模拟 api 时，如下 tests 文件夹中。

test('Should login',() => 
    global.fetch = jest.fn(() => new Promise((resolve) => 
        resolve(  status: 201, json: () => (mock_data_login) );
    ));

    return Api(ApiConstants.LOGIN,'un':'test1','pwd':'1234','post', null).then((data1)=>

        expect(data1).toBeDefined();
        expect(data1.success).toEqual(true);
        expect(data1.message).toEqual('Login Success');
    );

);

它失败了：

TypeError: json.then 不是函数

当我将获取返回更改为此时，测试通过：

 return fetch(ApiConstants.BASE_URL+path, options).then( resp => 
            let json = resp.json();
            return json
        );
    

为什么会弹出这种类型的错误错误？我无法更改 API 模块，因为那将更改我的 redux saga 代码。我该怎么办？

【参考方案1】：

在您的代码中，json 只是一个 Object 而不是 Promise，所以 then 是未定义的。这就是您得到的抱怨，因为您试图将 undefined 用作函数。问题不在测试中，而是在您的代码中出现错误。请尝试以下方法。

return fetch(ApiConstants.BASE_URL+path, options)
        .then(resp => resp.json())
        .then( json => json)
        .catch((error) => error);
    );

【讨论】：

但是 api 调用工作正常。我会尝试你的答案，如果我觉得它有用，我会将其标记为已接受

成功的响应可能没有被命中，因为它在它发生之前返回。您的模拟响应可能没有“ok”属性，因此它会一直运行，直到遇到问题为止。

【参考方案2】：

编辑：哦，刚刚读到你不能对发生错误的组件进行更改？

尝试像这样转换您的 fetch：

return fetch(ApiConstants.BASE_URL+path, options)
.then(resp => 
  let json = resp.json();
  if (resp.ok) 
    return json;
   else 
    throw Error(resp.error) // assuming you have some kind of error from endpoint?
  
)
.then(/*handle your ok response*/)
.catch(/*handle your error response*/);

【参考方案3】：

我遇到了同样的问题，问题是你只模拟 response.json 作为函数，但它应该是 Promise，像这样，

 global.fetch = jest.fn(() => new Promise((resolve) => 
    resolve(  status: 201, json: () => 
         return Promise.resolve(mock_data_login);
        
    );
));

这将为您返回一个 Promise json 函数。

希望这能解决您的问题。

【讨论】：

这是我找到的最好的 fetch 模拟。也帮助测试了 .json() 承诺。