模拟交叉获取

Posted 2023-02-22

【中文标题】模拟交叉获取

【英文标题】：Mocking cross-fetch

【发布时间】：2020-11-25 02:39:06

【问题描述】：

我在 Next/React 项目中使用 Jest 通过节点运行测试。

我也在使用交叉提取。

当我尝试为我的组件时

import crossFetch from 'cross-fetch'
jest.mock('cross-fetch')

        crossFetch.mockResolvedValue(
          status: 200,
          json: () =>  
            user : testUser 
          ,
        )
        render(<UserProfile />)

getServerSideProps 中的 API 请求 总是返回 500

export async function getServerSideProps( query:  userId  ) 
  let user = null
  let code = 200
  try 
    let response = await fetch(`https://example.com/users/$userId`,  method: 'GET' ) 
    let statusCode = response.status
    let data = await response.json()
    if (statusCode !== 200) 
      code = statusCode
     else 
      user = data.user
    
   catch (e) 
    console.log(e.message)
  
  return 
    props: 
      user,
      code,
    ,
  

我觉得这与从 Node 启动的测试和 testing-library 库正在模拟浏览器有关，发出请求的实际库没有被模拟为正确的执行环境（在我的情况下是浏览器）。但我不完全确定。

提前致谢

【问题讨论】：

不确定这是否是问题，但 fetch 需要绝对网址。

【参考方案1】：

也许它不起作用，因为默认导出是一个函数。试试这个：

//test.js
import crossFetch from 'cross-fetch';

jest.mock('cross-fetch', () => 
  //Mock the default export
  return 
    __esModule: true,
    default: jest.fn()
  ;
);

test('should do a mock fetch', () => 
  crossFetch.mockResolvedValue(
    status: 200,
    json: () =>  
      user: testUser 
    ,
  );
  expect(crossFetch().status).toEqual(200);
);