C3: No se puede requerir () para usar con Jest

También recibo este error, no estoy seguro de si es un problema con c3 o jsdom.

Cree un proyecto npm vacío. Entonces, intente esto:

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

Producción:

/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)

No recibía este error antes.
Probablemente relacionado con esto https://github.com/tmpvar/jsdom/pull/1445

¿Crees que podemos burlarnos de la propiedad SVGPathElement?

Creo que obviamente es un problema con la implementación de SVG incompleta de jsdom (por lo que no los culpo; esa mierda parece que apesta)

Sin embargo, ¿cuál sería una buena solución? Quiero poder realizar una prueba unitaria de un proyecto que tiene C3 como dependencia con jsdom / jest, pero este es un bloqueador bastante grande. En realidad, no necesito probar unitariamente ninguna de las funciones de C3, así que supongo que podría eliminarlo ...

¿Crees que podemos burlarnos de la propiedad SVGPathElement?

Esa sería una posible solución.

Ni siquiera estoy usando c3, pero probablemente otros paquetes de mi proyecto sí lo estén.
Mis pruebas funcionaron bien hasta que actualicé un montón de dependencias. Todavía estoy tratando de averiguar qué dependencia está usando c3.
PD: jsdom está presente en mis archivos de prueba.

¡Lo encontré! El cambio de keen-js a v3.4.1 "resolvió" el problema. La última versión es 4.0.0.

En caso de que alguien tuviera el mismo problema que el mío, Keen decidió dividir su paquete principal en 3 paquetes separados: https://github.com/keen/keen-js/releases/tag/v4.0.0

El problema es que keen-dataviz.js usa c3.js. No estoy usando gráficos, así que en mi caso, la solución es instalar keen-tracking y eliminar keen-js.

Estoy enfrentando el mismo problema al usar jest e intento tomar una instantánea de un componente que usa

    TypeError: Cannot read property 'prototype' of undefined

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

solo algunas diferencias en el número de línea, probablemente algunas relacionadas con la compilación (estoy usando la versión c3: 0.4.18)

actualización: window.SVGPathElement.prototype.createSVGPathSegClosePath = function () es la línea aquí también

ps: funciona perfectamente en el navegador, solo en broma ocurre este error

Aquí igual. Creo que este responde por qué: https://github.com/tmpvar/jsdom/issues/1423

@brandonros
Si no necesita la funcionalidad c3 en sus casos de prueba de broma, creo que está bien reemplazar SVGPathElement con un objeto ficticio.

Pude requerir c3.js en el entorno de nodo dummying window.SVGPathElement como el siguiente:

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

@fernandes Estoy enfrentando un problema similar. ¿Ha podido encontrar una solución alternativa?

hola @esonmez , no lo había hecho ...

como he investigado, jsdom no implementa las cosas SVG en él, es por eso que no puedo usar c3 en las pruebas (que usa jdsom), simplemente aislé el componente c3 tanto como pude y eliminé esta prueba jeje

@fernandes Entendido . Jugué un poco más con él y pude ejecutar las pruebas de instantáneas burlándome de c3:

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

y luego en la parte de configuración de Jest de mi package.json :

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

jajaja eso es interesante, gracias por compartir el consejo, lo voy a implementar en mi proyecto, ¡gracias!

Estaba emocionado de resolver esto usando la sugerencia de @esonmez , pero dado que el proyecto en el que estoy trabajando aprovecha la aplicación create-react-app, me quedé atascado nuevamente:

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.

Frustrante por decir lo menos. En cualquier caso, en nuestro archivo de configuración de broma, pude simularlo como @ kt3k :

global.SVGPathElement = function () {}

Y eso funcionó a las mil maravillas. ¡Gracias por toda la ayuda!

Para preguntas relacionadas con la interacción entre C3.js y cualquier otra biblioteca (react, vuejs, ..), utilice el Grupo de Google en https://groups.google.com/forum/#!forum/c3js.

¡Gracias!