C3: Jestで使用するためにrequire()を使用できません

作成日 2017年08月07日  ·  13コメント  ·  ソース: c3js/c3

TypeError: Cannot read property 'prototype' of undefined

      at ../../../../node_modules/c3/c3.js:2720:30
      at ../../../../node_modules/c3/c3.js:3263:3
      at Object.<anonymous>.CLASS.target (../../../../node_modules/c3/c3.js:2:82)
      at Object.<anonymous> (../../../../node_modules/c3/c3.js:5:2)

これは

        window.SVGPathElement.prototype.createSVGPathSegClosePath = function () {

どこに報告すればいいのかよくわかりません。 ジェスト、jsdom、ここ?

最も参考になるコメント

@fernandes了解しました。 私はそれをもう少しいじって、c3をモックすることによってスナップショットテストを実行することができました:

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

そして、私のpackage.jsonのJest設定部分で:

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

全てのコメント13件

このエラーも発生しますが、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は私のテストファイルに存在します。

それを見つけた! keen-jsをv3.4.1にロールバックすると、問題が「解決」しました。 最新バージョンは4.0.0です。

私と同じ問題を抱えている人の場合、Keenはメインパッケージを3つの別々のパッケージに分割することにしました: https

問題は、keen-dataviz.jsがc3.jsを使用していることです。 私はチャートを使用していないので、私の場合の解決策は、keen-trackingをインストールし、keen-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コンポーネントを可能な限り分離し、このテストを削除しました。

@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.

控えめに言ってもイライラする。 いずれにせよ、私たちのjestセットアップファイルでは、 @ kt3kと同じようにモックを作成することができました。

global.SVGPathElement = function () {}

そして、それは魅力のように機能しました。 すべての助けをありがとう!

C3.jsと他のライブラリ(react、vuejs、..)との相互作用に関する質問については、https://groups.google.com/forum/#!forum / c3jsのGoogleグループを使用してください。

ありがとうございました!

このページは役に立ちましたか?
0 / 5 - 0 評価