我有下面的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 fetch请求 *,但是 Node.js 没有fetch API,那么我怎样才能使用Jest使这个测试工作呢?
5条答案
按热度按时间f0ofjuux1#
我无法用您提供的代码进行测试,但是安装并导入npm模块jest-fetch-mock应该可以。
oknrviil2#
尝试让您的模拟实现特定于测试用例,如果多个测试用例绑定使用相同的实现,则将它们 Package 在一个
describe
块中,并在其中包含一个beforeEach
调用。这有助于描述特定于被测试场景的模拟实现。
使用您提供的代码来测试您的实现是很困难的,但是让我们尝试将您的模拟实现切换为类似于下面的代码:
现在,无论何时调用电影服务API,您都可能期望结果是dummyMoviesData的形状,甚至与之匹配。
所以,
或
应该可以。
6bc51xsx3#
截至2020年10月,解决错误
TypeError: fetch is not function
的方法是使用whatwg-fetch
包含提取的多边形填充。该软件包为
.fetch
提供了polyfill,自2016年以来,www.example.com的员工对该软件包进行了良好的支持和管理Github.com。建议阅读警告,以了解whatwg-fetch
是否是合适的解决方案。Babel和es2015+的用法很简单,只需添加到您的文件中。
如果将与Webpack一起使用,请在应用程序入口点之前的入口配置选项中添加软件包。
您可以在https://github.github.io/fetch/上阅读全面的文档
如果您不熟悉WhatWG,请在其website上了解有关Web超文本应用技术工作组的更多信息。
wh6knrhe4#
安装并添加下面的代码片段到我的jest文件的顶部为我修复了它:
import "isomorphic-fetch"
u3r8eeie5#
首先要理解的是,fetch是特定于浏览器的API,在Node.js中不存在。Jest测试在Node.js中运行,尽管它们执行使用window. fetch的组件。
实际上,当您运行Jest时,React组件会在Node.js中呈现,而在Node.js中不存在fetch-这就是对它进行多边形填充的全部原因。
我知道你知道这一点,但我写了他们的其他人谁不知道为什么会发生这种情况。
要解决此问题,请执行以下步骤:1:安装“whatwg-fetch”包(npm i whatwg-fetch). 2:在项目的根目录中创建一个“jest.config.js”文件,并输入以下代码:
3:创建一个'jest.setup.js'文件并将下面的代码放入其中:
现在您在jest测试中的“fetch”请求必须工作。您可以查看下面的链接以获取更多信息:
https://github.com/mswjs/examples/tree/master/examples/with-jest