模拟交叉获取

Question

我正在 Next/React 项目上通过 Node 使用 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 发起的测试有关，并且测试库正在模拟浏览器，发出请求的实际库没有被模拟为正确的执行环境（在我的例子中是浏览器）。但我并不完全确定。

提前致谢

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