Jest TypeError：fetch不是一个函数

Question

我有以下jest测试代码来测试 fetch 到端点：

import MovieApiService from 'services/MovieApiService';
import movies from '../constants/movies';

describe('MovieApiService', () => {

  test('if jest work correctly', () => {
    expect(true).toBe(true);
  });

  test('get an array of popular movies', () => {
    global.fetch = jest.mock('../mocks/movies');
    const movieApiService = new MovieApiService();
    return movieApiService.getPopularMovies()
      .then(data => expect(data).toBe(movies));
  });
});

但我得到了：

我知道movieApiService.getPopularMovies()是 javascript抓取请求，但节点没有抓取api，所以我怎样才能让这个测试成为使用jest工作？

提前致谢

Answer 1

尝试保持特定于测试用例的模拟实现，如果绑定多个测试用例使用相同的实现，则将其包含在describe块中，并在其中进行beforeEach调用。< / p>

这有助于描述特定于正在测试的场景的模拟实现。

使用您提供的代码测试您的实现很困难，但让我们尝试将您的模拟实现切换为以下内容：

// This is just dummy data, change its shape in a format that your api renders.
const dummyMoviesData = [
    {title: 'some-tilte-1', body: 'some-1'},
    {title: 'some-tilte-2', body: 'some-2'},
    {title: 'some-tilte-3', body: 'some-3'}
];
global.fetch = jest.fn(() => Promise.resolve(dummyMoviesData));

现在每当你调用电影服务api时，你可能会期望结果是dummyMoviesData的形状，甚至可以匹配它。

所以，

expect(outcome).toMatchObject(dummyMoviesData);

或

expect(outcome).toEqual(dummyMoviesData);

应该这样做。

Answer 2

我无法使用您提供的代码对此进行测试，但安装和导入npm模块jest-fetch-mock应该可以解决问题。

Answer 3

从2020年10月开始，解决错误TypeError: fetch is not function的方法是包括使用whatwg-fetch进行提取的polyfill。

该软件包为.fetch提供了polyfill，自2016年以来受到Github.com员工的良好支持和管理。建议read the caveats了解whatwg-fetch是否为适当的解决方案。

Babel和es2015 +的用法非常简单，只需将其添加到文件中即可。

import 'whatwg-fetch'`

如果与Webpack一起使用，请在应用程序入口点之前的入口配置选项中添加软件包。

entry: ['whatwg-fetch', ...]

您可以在https://github.github.io/fetch/

阅读全面的文档。

如果您不熟悉WhatWG，请在其website上了解有关Web超文本应用程序技术工作组的更多信息。