C3: НСвозмоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ require () с Jest

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 7 Π°Π²Π³. 2017  Β·  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';

Π° Π·Π°Ρ‚Π΅ΠΌ Π² части ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ Jest ΠΌΠΎΠ΅Π³ΠΎ package.json :

"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?

Π― Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ это, ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° с Π½Π΅ΠΏΠΎΠ»Π½ΠΎΠΉ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠ΅ΠΉ SVG jsdom (Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ я ΠΈΡ… Π½Π΅ виню; это Π΄Π΅Ρ€ΡŒΠΌΠΎ Π·Π²ΡƒΡ‡ΠΈΡ‚ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Ρ‚ΠΎ это отстой)

Однако Ρ‡Ρ‚ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ ΠΎΠ±Ρ…ΠΎΠ΄Π½Ρ‹ΠΌ ΠΏΡƒΡ‚Π΅ΠΌ? Π― Ρ…ΠΎΡ‡Ρƒ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠ³ΠΎ тСстирования ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ C3 Π² качСствС зависимости ΠΎΡ‚ jsdom / jest, Π½ΠΎ это довольно большой Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Ρ‰ΠΈΠΊ. На самом Π΄Π΅Π»Π΅ ΠΌΠ½Π΅ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠ΅ тСстированиС ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ C3, поэтому я Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠ³ Π±Ρ‹ Π΅Π³ΠΎ Π·Π°Π³Π»ΡƒΡˆΠΈΡ‚ΡŒ ...

Как Π²Ρ‹ Π΄ΡƒΠΌΠ°Π΅Ρ‚Π΅, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ просто ΠΈΠΌΠΈΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свойство SVGPathElement?

Π­Ρ‚ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΌ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ.

Π― Π΄Π°ΠΆΠ΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ c3, Π½ΠΎ, вСроятно, Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΌΠΎΠ΅Π³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π΅ΡΡ‚ΡŒ.
Мои тСсты Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ, ΠΏΠΎΠΊΠ° я Π½Π΅ ΠΎΠ±Π½ΠΎΠ²ΠΈΠ» ΠΊΡƒΡ‡Ρƒ зависимостСй. Π― всС Π΅Ρ‰Π΅ ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ ΠΏΠΎΠ½ΡΡ‚ΡŒ, какая Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ c3.
PS: jsdom присутствуСт Π² ΠΌΠΎΠΈΡ… тСстовых Ρ„Π°ΠΉΠ»Π°Ρ….

НашСл! ΠžΡ‚ΠΊΠ°Ρ‚ keen-js Π΄ΠΎ v3.4.1 Β«Ρ€Π΅ΡˆΠΈΠ»Β» ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ. ПослСдняя вСрсия - 4.0.0.

Π’ случаС, Ссли Ρƒ ΠΊΠΎΠ³ΠΎ-Ρ‚ΠΎ такая ΠΆΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, ΠΊΠ°ΠΊ Ρƒ мСня, Кин Ρ€Π΅ΡˆΠΈΠ» Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ свой основной ΠΏΠ°ΠΊΠ΅Ρ‚ Π½Π° 3 ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠ°ΠΊΠ΅Ρ‚Π°: https://github.com/keen/keen-js/releases/tag/v4.0.0

ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ keen-dataviz.js ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ c3.js. Π― Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, поэтому Π² ΠΌΠΎΠ΅ΠΌ случаС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ - ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ keen-tracking ΠΈ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ keen-js.

Π― ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°ΡŽΡΡŒ с Ρ‚ΠΎΠΉ ΠΆΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ jest, ΠΈ ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ снимок ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ response-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://github.com/tmpvar/jsdom/issues/1423

@brandonros
Если Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ c3 Π² Π²Π°ΡˆΠΈΡ… тСстовых ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ…, я Π΄ΡƒΠΌΠ°ΡŽ, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ SVGPathElement Π½Π° Ρ„ΠΈΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚.

МнС ΡƒΠ΄Π°Π»ΠΎΡΡŒ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒ c3.js Π² срСдС ΡƒΠ·Π»Π°, создав ΠΎΠΊΠ½ΠΎ Window.SVGPathElement, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅:

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';

Π° Π·Π°Ρ‚Π΅ΠΌ Π² части ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ Jest ΠΌΠΎΠ΅Π³ΠΎ package.json :

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

Ρ…Π°Ρ…Π°Ρ…Π°, это интСрСсно, спасибо, Ρ‡Ρ‚ΠΎ подСлились совСтом, я ΡΠΎΠ±ΠΈΡ€Π°ΡŽΡΡŒ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ свой ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, спасибо!

Π― Π±Ρ‹Π» Ρ€Π°Π΄ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ прСдлоТСния

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, ..), ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π³Ρ€ΡƒΠΏΠΏΡƒ Google ΠΏΠΎ адрСсу https://groups.google.com/forum/#!forum/c3js.

Бпасибо!

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ