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

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

该软件包为Github.com 员工提供了一个polyfill.fetch，自 2016 年以来一直受到 Github.com 员工的良好支持和管理。建议阅读注意事项以了解是否whatwg-fetch是合适的解决方案。

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

import 'whatwg-fetch'

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

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

您可以在https://github.github.io/fetch/阅读全面的文档

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

Answer 2

尝试让您的模拟实现特定于测试用例，如果多个测试用例必然使用相同的实现，则将它们包装在一个describe块中，并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

安装以下代码片段并将其添加到我的笑话文件的顶部为我解决了这个问题：

import "isomorphic-fetch"

Answer 4

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