Jest TypeError：fetch 不是函数

Question

我有以下 Jest 测试代码来测试对端点的提取：

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 fetch request ，但Node.js没有 fetch API，那么我如何使用 Jest 使这个测试工作？

Answer 1

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

Answer 2

尽量让你模拟特定于测试用例的实现，如果多个测试用例必须使用相同的实现，那么将它们包装在一个describe块中，并在beforeEach调用beforeEach 。

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

使用您提供的代码很难测试您的实现，但让我们尝试将您的模拟实现切换为这样的：

// 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 3

截至 2020 年 10 月，解决错误TypeError: fetch is not function一种方法是使用whatwg-fetch包含用于 fetch 的whatwg-fetch 。

该软件包提供了一个填充工具为.fetch并有良好的支持，并通过Github.com员工，因为2016年是明智的管理阅读注意事项，以了解是否whatwg-fetch是合适的解决方案。

Babel 和 es2015+ 的使用很简单，只需添加到您的文件中即可。

import 'whatwg-fetch'`

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

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

您可以在https://github.github.io/fetch/阅读综合文档

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

Answer 4

安装下面的代码片段并将其添加到我的 jest 文件的顶部为我修复了它：

import "isomorphic-fetch"