模拟交叉获取

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

Answer 2

我在测试

fetch-mock

调用时使用 fetch (

https://www.wheresrhys.co.uk/fetch-mock/

)。您可能需要为

fetch

提供一个填充，以便在 Jest 测试的上下文中被理解，这可以通过使用

import "cross-fetch/polyfill";

的文件中的

fetch

来完成。 请注意，Create React App 生成的环境处理必要的 polyfill 导入，但我不确定 Next.js 是否有类似的东西。

Answer 3

我也遇到过类似的问题（尽管我正在开发一个普通的 Typescript 项目），并设法在我的单元测试中模拟

cross-fetch

，如下所示：

import HttpClient from '../src/httpClient'; // the code I want to test
import fetch from 'cross-fetch';

jest.mock('cross-fetch');

let httpClient = new HttpClient();

it('should send a GET request', () => {
  (fetch as jest.Mock).mockResolvedValue({
    ok: true,
    json: () => Promise.resolve({ data: []})

  });
  await httpClient.get('my-endpoint');
  expect(fetch).toHaveBeenCalledWith("my-url/my-endpoint", {
    headers: {
      ...
    },
    method: 'GET'
  });
});

我希望这对其他人也有帮助！