C3: 无法 require() 与 Jest 一起使用

我也收到此错误，不确定是 c3 还是 jsdom 的问题。

创建一个空的 npm 项目。 然后，试试这个：

npm i -S c3 jsom
node -e "var JSDOM = require('jsdom').JSDOM; global.window = new JSDOM().window; require('c3');"

输出：

/home/herinson/example/node_modules/c3/c3.js:2720
        window.SVGPathElement.prototype.createSVGPathSegClosePath = function () {
                             ^

TypeError: Cannot read property 'prototype' of undefined
    at /home/herinson/example/node_modules/c3/c3.js:2720:30
    at /home/herinson/example/node_modules/c3/c3.js:3263:3
    at CLASS.target (/home/herinson/example/node_modules/c3/c3.js:2:82)
    at Object.<anonymous> (/home/herinson/example/node_modules/c3/c3.js:5:2)
    at Module._compile (module.js:573:30)
    at Object.Module._extensions..js (module.js:584:10)
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)
    at Function.Module._load (module.js:462:3)
    at Module.require (module.js:517:17)

我之前没有收到这个错误。
可能与此有关https://github.com/tmpvar/jsdom/pull/1445

你认为我们可以模拟 SVGPathElement 属性吗？

我认为这显然是 jsdom 不完整的 SVG 实现的问题（我不怪他们；这听起来很糟糕）

但是，什么是好的解决方法？ 我希望能够使用 jsdom/jest 对具有 C3 作为依赖项的项目进行单元测试，但这是一个非常大的障碍。 我实际上不需要对任何 C3 功能进行单元测试，所以我想我可以将它存根......

你认为我们可以模拟 SVGPathElement 属性吗？

那将是一个可能的解决方案。

我什至不使用 c3，但我项目的其他包可能是。
我的测试工作正常，直到我更新了一堆依赖项。 我仍在尝试弄清楚使用 c3 的依赖项是什么。
PS：jsdom 存在于我的测试文件中。

找到了！ 将敏锐的 js 回滚到 v3.4.1“解决”了这个问题。 最新版本是 4.0.0。

如果有人和我有同样的问题，Keen 决定将他们的主包分成 3 个独立的包： https :

问题是敏锐的dataviz.js 使用c3.js。 我没有使用图表，因此就我而言，解决方案是安装敏锐跟踪并删除敏锐js。

我在使用 jest 时遇到了同样的问题，并尝试对使用react-c3js的组件进行快照

    TypeError: Cannot read property 'prototype' of undefined

      at node_modules/c3/c3.js:2806:30
      at node_modules/c3/c3.js:3349:3

只是行号上的一些差异，可能与构建有关（我使用的是 c3 版本：0.4.18）

更新： window.SVGPathElement.prototype.createSVGPathSegClosePath = function ()也是这里的行

ps：在浏览器上完美运行，只是开玩笑会发生这个错误

同样在这里。 我相信这个答案是为什么： https :

@brandonros
如果您在 jest 测试用例中不需要 c3 功能，我认为用虚拟对象替换 SVGPathElement 是可以的。

我能够通过虚拟化 window.SVGPathElement 在节点环境中要求 c3.js 如下所示：

var JSDOM = require('jsdom').JSDOM;
global.window = new JSDOM().window;
window.SVGPathElement = function () {};
console.log(require('c3')); // => no error!

@fernandes我也面临着类似的问题。 您是否能够找到解决方法？

嗨@esonmez ，我没有...

因为我研究过 jsdom 没有在上面实现 SVG 的东西，这就是为什么不能在测试中使用 c3（使用 jdsom），我只是尽可能地隔离了 c3 组件并放弃了这个测试 heheh

@fernandes 明白了。 我更多地玩弄它，并且能够通过模拟 c3 来运行快照测试：

// __mocks__/c3.js
module.exports = () => 'c3';

然后在我的package.json的 Jest 配置部分：

"moduleNameMapper": {
  "c3": "<rootDir>/__mocks__/c3.js",
}

哈哈哈，这很有趣，感谢分享提示，我将在我的项目中实施，谢谢！

我很高兴使用@esonmez的建议来解决这个问题，但由于我正在处理的项目利用了 create-react-app，我再次陷入困境：

Out of the box, Create React App only supports overriding these Jest options:

  • collectCoverageFrom
  • coverageReporters
  • coverageThreshold
  • snapshotSerializers.

These options in your package.json Jest configuration are not currently supported by Create React App:

  • moduleNameMapper

If you wish to override other Jest options, you need to eject from the default setup. You can do so by running npm run eject but remember that this is a one-way operation. You may also file an issue with Create React App to discuss supporting more options out of the box.

至少可以说令人沮丧。 无论如何，在我们的笑话设置文件中，我可以像@kt3k一样模拟它：

global.SVGPathElement = function () {}

这就像一个魅力。 感谢大家的帮助！

对于涉及 C3.js 和任何其他库（react、vuejs、..）之间相互作用的问题，请使用https://groups.google.com/forum/#!forum/c3js 上的 Google 群组

谢谢！