为什么可以'；我不能用香草javascript调用fetch on jest吗？

我对测试库有点陌生，最近开始学习笑话。我目前正试图用jest实现香草javascript项目

我知道在jest中“模拟”异步API调用是最佳实践，但我想实际使用fetch调用API，看看jest是否正常工作。但我被“取回”的请求卡住了。需要提醒的是，我的项目不是节点项目，只是普通的javascript项目

在继续实际测试代码之前，因为我在项目中使用了babel和webpack。下面是.bablerc.js和webpack.config.js实现

.lrc.js

webpack.config.js

通过上面的项目配置，webpack和WebpackDev服务器工作得很好，可以检索完整构建的html、css和js文件。在检查完除Jest之外的所有功能后，我实现了一个简单的API调用函数，该函数可以获取数组中的单词列表

export const getWordsAPI = () =>
  fetch(
    'https://server-api-address'
  ).then((res) => res.json());

并尝试在我的jest测试代码中调用api函数

import { getWordsAPI } from '../src/js/api';

describe('Integration with getWords API', () => {
  test('Get Word List', async () => {
    const result = await getWordsAPI();
    expect(result).toEqual([
      {
        text: 'hello',
      },
      {
        text: 'world',
      }
    ]);
  });
});

但是，我不断得到这个“fetch is not defined”错误

ReferenceError: fetch is not defined

> 1 | export const getWordsAPI = () =>
    |                            ^
  2 |   fetch(
  3 |     'https://server-api-address'
  4 |   ).then((res) => res.json());

  at getWordsAPI (src/js/api.js:1:28)
  at _callee$ (__tests__/api.test.js:5:26)
  at tryCatch (node_modules/regenerator-runtime/runtime.js:63:40)        
  at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:293:22)
  at Generator.next (node_modules/regenerator-runtime/runtime.js:118:21) 
  at asyncGeneratorStep (__tests__/api.test.js:11:103)
  at _next (__tests__/api.test.js:13:194)
  at __tests__/api.test.js:13:364
  at Object.<anonymous> (__tests__/api.test.js:13:97)

我最终使用同构fetch库对测试代码执行fetch操作，这让我感到不舒服

import 'isomorphic-fetch';
import { getWordsAPI } from '../src/js/api';

describe('Integration with getWords API', () => {
    ...
}

我知道fetch没有定义错误发生在nodejs环境中，因为node没有提供fetch，但这是一个普通的javascript项目获取默认情况下在浏览器上提供，应在不进行任何额外工作的情况下工作。但为什么会发生这种错误呢？我不知道是什么导致了这个问题，无论是babel还是webpack，甚至是玩笑本身

请告诉我我错过了什么。可能我遗漏了与此问题相关的Jest体系结构的主要概念。等待任何人的回应

---

另外，如果您需要知道我在项目中使用的库的版本，这里是我的package.json文件。除了库之外，我在Windows操作系统上使用WSL2，并使用npm而不是Thread

{
  "name": "typing_game",
  "version": "1.0.0",
  "description": "Typing Game by Vanilla Javascript",
  "main": "index.js",
  "author": "piecemakerz <piecemakerz@naver.com>",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack",
    "test": "jest"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@types/jest": "^26.0.15",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.2.1",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.0",
    "jest": "^26.6.3",
    "mini-css-extract-plugin": "^1.3.1",
    "prettier": "^2.1.2",
    "sass-loader": "^10.1.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "core-js": "^3.7.0",
    "isomorphic-fetch": "^3.0.0",
    "sass": "^1.29.0"
  },
  "jest": {
    "transform": {
      "^.+\\.js?$": "babel-jest"
    }
  }
}

{
“名称”：“键入游戏”，
“版本”：“1.0.0”，
“描述”：“通过香草Javascript键入游戏”，
“main”：“index.js”，
“作者”：“piecemakerz”，
“许可证”：“麻省理工学院”，
“脚本”：{
“开始”：“网页包开发服务器--打开”，
“构建”：“网页包”，
“测试”：“开玩笑”
},
“依赖性”：{
“@babel/core”：“^7.12.3”，
“@babel/preset env”：“^7.12.1”，
“@types/jest”：“^26.0.15”，
“巴别塔笑话”：“^26.6.3”，
“巴别塔加载器”：“^8.2.1”，
“清理网页包插件”：“^3.0.0”，
“css加载器”：“^5.0.1”，
“html网页包插件”：“^4.5.0”，
“笑话”：“^26.6.3”，
“迷你css提取插件”：“^1.3.1”，
“更漂亮”：“^2.1.2”，
“sass加载程序”：“^10.1.0”，
“网页包”：“^4.44.2”，
“webpack cli”：“^3.3.12”，
网页包开发服务器“^3.11.0”
},
“依赖项”：{
“核心js”：“^3.7.0”，
“同构提取”：“^3.0.0”，
“sass”：“^1.29.0”
},
“笑话”：{
“转变”：{
“^.+\\.js？$”：“巴别塔笑话”
}
}
}

但为什么会发生此错误？-目前还不清楚问题是什么。在浏览器中可以使用fetch，但在节点中不可用，这是正确的。浏览器！=节点。这是香草JS，或者React，或者其他什么都不重要。它可以在浏览器中使用，但测试在节点中运行，并且节点中没有

fetch

全局变量，除非您显式地使用同构fetch或其他方式对其进行多重填充。我对测试库有点陌生-然后要了解的第一件事是，除了e2e之外，真正的网络请求通常不会在测试中执行（对于e2e来说，玩笑是无效的）或者集成测试的一些变体。你不需要多填充fetch，只需要模拟它。我尝试了所有方法来解决这个问题，包括jest fetch mock，但无法解决问题。-然后你可以开始解决这个问题，因为模拟它是一种正确的方法，在不理解失败原因的情况下放弃不是吗非常有效。我想实际使用fetch调用API以查看jest是否正常工作-只要fetch polyfill正常工作，它就正常工作。它可能在节点中工作，但在浏览器中不工作，反之亦然，因为polyfill不完全符合规范。因为您正在高效地测试第三方polyfill，这可能与实际应用的工作方式不同在浏览器中，在这样的测试中没有什么价值，它只是减慢了测试运行，使它变得薄片并测试某些东西。这就是为什么实际请求通常在浏览器E2E中执行的原因。请考虑在尝试取笑时更新问题。ge关于测试。我以为Jest测试是在“假Web浏览器”环境下运行的，该环境提供了获取功能。但根据您的评论，Jest测试是在“节点服务器”环境下运行的，该环境不提供获取功能。这就是为什么“未定义获取”错误不断发生的原因。所以我将获取功能更改为axios…并且所有功能都正常运行！只是为了说明ure，我在Jest上调用实际api只是为了检查Jest测试流如何工作，没有其他意义。我将从现在起使用moke更改Jest代码。谢谢。@EstusFlask如果我上面写的内容有任何错误，请随意评论。我一直渴望了解什么是正确的。但为什么会发生此错误？不清楚问题是什么。这是错误的更正：fetch在浏览器中可用，但在Node中不可用。Browser！=Node。它是vanilla JS，或React，或其他什么都不重要。它可以在浏览器中可用，但测试在Node中运行，并且在Node中没有

fetch

全局变量，除非您显式地用同构fetch或其他方式对其进行多填充。我是一个新手sting库-然后首先要了解的是，除了e2e（Jest对e2e不有效）或集成测试的一些变体之外，真实的网络请求通常不会在测试中执行。您不需要多填充获取，只需要模拟它。我尝试了所有方法来解决这个问题

invalid json response body at reason unexpected end of json input

import 'isomorphic-fetch';
import { getWordsAPI } from '../src/js/api';

describe('Integration with getWords API', () => {
    ...
}

{
  "name": "typing_game",
  "version": "1.0.0",
  "description": "Typing Game by Vanilla Javascript",
  "main": "index.js",
  "author": "piecemakerz <piecemakerz@naver.com>",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack",
    "test": "jest"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@types/jest": "^26.0.15",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.2.1",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.0",
    "jest": "^26.6.3",
    "mini-css-extract-plugin": "^1.3.1",
    "prettier": "^2.1.2",
    "sass-loader": "^10.1.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "core-js": "^3.7.0",
    "isomorphic-fetch": "^3.0.0",
    "sass": "^1.29.0"
  },
  "jest": {
    "transform": {
      "^.+\\.js?$": "babel-jest"
    }
  }
}