reactjs - 模拟交叉获取

Question

我在 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 库正在模拟浏览器，发出请求的实际库并未针对正确的执行环境(在我的情况下为浏览器)进行模拟。但我不完全确定。
提前致谢

Answer 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);
});