flatMap 在纱线测试 javascript 中不起作用答案

【问题标题】：flatMap doesn't work in yarn test javascriptflatMap 在纱线测试 javascript 中不起作用
【发布时间】：2019-01-24 18:38:52
【问题描述】：

我的组件方法中有一些代码using flatMap。代码在浏览器中运行良好，但在使用yarn test 运行代码时，flatMap 方法不存在。有没有人见过这样的东西？

● Click Events › should copy table data

TypeError: children.map(...).flatMap is not a function

  181 |     const dataKeys = children
  182 |       .map(({ $: { data: dataKey } }) => dataKey)
> 183 |       .flatMap(k => k.split(LEVEL_DELIMITER));
      |        ^

编辑 - 可重现的示例：创建了一个 CRA 基础并添加了这个简单的测试：

it('can flatMap', () => {
    [1, 2, 3, 4].flatMap(x => [x * 2]);
});

遇到同样的错误：

 FAIL  src/App.test.js
● can flatMap

TypeError: [1,2,3,4].flatMap is not a function

  at Object.<anonymous>.it (src/App.test.js:12:16)
      at new Promise (<anonymous>)
  at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
      at <anonymous>
  at process._tickCallback (internal/process/next_tick.js:188:7)

✓ renders without crashing (4ms)
✕ can flatMap

【问题讨论】：

你是在 Node 上运行测试，还是……？
你能在你的设置中做一个简单的测试，你只测试 flatMap 吗？ ... 像这样：[1, 2, 3, 4].flatMap(x => [x * 2]) 只是为了确保它不是其他东西（比如前一个链中的值等）
是的，使用纱线。我的节点版本是8.9.1
你用的是什么测试框架？
我正在使用jest。我的同事刚刚找到了发生这种情况的原因。这是因为 flatMap 不被 NodeJS 支持 --> developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript reactjs unit-testing ecmascript-6 yarnpkg

【解决方案1】：

我的一位同事找到了解决方案。显然 Node.js 不支持 flatMap：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap#Browser_compatibility

flatMap 现在在节点 11+ 中得到支持，如下所述，请参见相同的链接。

【讨论】：

兼容性表似乎已更新，现在显示版本 11。
谢谢！由于flatmap，jest 出现错误。将我机器上的节点从 v10.15.1 升级到 v12.11.0 是解决方案。

【解决方案2】：

对于它的价值，使用 react polyfill 包也对我有用。我可以控制自己的本地环境，但我必须使用的构建系统受到更多限制，并被多个团队使用。

npm 包：react-app-polyfill

用法：

// setupTests.js (jest)
// Using ie9 polyfills as the "kitchen sink" of polyfills
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';

这适用于我目前拥有的 Node v10.16.0。

【讨论】：

对这个 q/a 的很好补充。 polyfills 是解决此类问题的好方法。浏览器并不总是需要它！实际上，在决定摆脱它并只是以不同的方式编写代码以避免依赖之前，我自己就这样做了。 :)