Unit testing ReactJS wrapper for Kendo chart

[Thomas]

I am attempting to write unit tests for a React component that includes a wrapper for a KendoUI chart.  For testing, I am using jsdom so I can write an isolated unit test for each component.  When I attempt to render the component into the jsdom document, I'm getting the following exception:

C:\temp\kendo-test\node_modules\kendo-ui-react-jquery-charts\node_modules\kendo\js\kendo.color.js:352
            var _Color = kendo.Class.extend({
                         ^

ReferenceError: kendo is not defined
    at C:\temp\kendo-test\node_modules\kendo-ui-react-jquery-charts\node_modules\kendo\js\kendo.color.js:352:19
    at Object.<anonymous> (C:\temp\kendo-test\node_modules\kendo-ui-react-jquery-charts\node_modules\kendo\js\kendo.color.js:559:4)
    at __meta__.id (C:\temp\kendo-test\node_modules\kendo-ui-react-jquery-charts\node_modules\kendo\js\kendo.color.js:73:227)
    at Object.module.exports.583 (C:\temp\kendo-test\node_modules\kendo-ui-react-jquery-charts\node_modules\kendo\js\kendo.color.js:74:4)
    at __webpack_require__ (C:\temp\kendo-test\node_modules\kendo-ui-react-jquery-charts\node_modules\kendo\js\kendo.color.js:21:30)
    at Object.module.exports.0 (C:\temp\kendo-test\node_modules\kendo-ui-react-jquery-charts\node_modules\kendo\js\kendo.color.js:49:19)
    at __webpack_require__ (C:\temp\kendo-test\node_modules\kendo-ui-react-jquery-charts\node_modules\kendo\js\kendo.color.js:21:30)
    at C:\temp\kendo-test\node_modules\kendo-ui-react-jquery-charts\node_modules\kendo\js\kendo.color.js:41:18
    at Object.<anonymous> (C:\temp\kendo-test\node_modules\kendo-ui-react-jquery-charts\node_modules\kendo\js\kendo.color.js:44:10)
    at Module._compile (module.js:409:26)
    at Module._extensions..js (module.js:416:10)
    at Object.require.extensions.(anonymous function) [as .js] (C:\temp\kendo-test\node_modules\babel-core\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.module.exports.585 (C:\temp\kendo-test\node_modules\kendo-ui-react-jquery-charts\node_modules\kendo\js\kendo.dataviz.chart.js:79:19)
    at __webpack_require__ (C:\temp\kendo-test\node_modules\kendo-ui-react-jquery-charts\node_modules\kendo\js\kendo.dataviz.chart.js:21:30)
    at __meta__.id (C:\temp\kendo-test\node_modules\kendo-ui-react-jquery-charts\node_modules\kendo\js\kendo.dataviz.chart.js:109:10)
    at Object.module.exports.625 (C:\temp\kendo-test\node_modules\kendo-ui-react-jquery-charts\node_modules\kendo\js\kendo.dataviz.chart.js:116:4)
    at __webpack_require__ (C:\temp\kendo-test\node_modules\kendo-ui-react-jquery-charts\node_modules\kendo\js\kendo.dataviz.chart.js:21:30)
    at Object.module.exports.0 (C:\temp\kendo-test\node_modules\kendo-ui-react-jquery-charts\node_modules\kendo\js\kendo.dataviz.chart.js:49:19)
    at __webpack_require__ (C:\temp\kendo-test\node_modules\kendo-ui-react-jquery-charts\node_modules\kendo\js\kendo.dataviz.chart.js:21:30)
    at C:\temp\kendo-test\node_modules\kendo-ui-react-jquery-charts\node_modules\kendo\js\kendo.dataviz.chart.js:41:18
    at Object.<anonymous> (C:\temp\kendo-test\node_modules\kendo-ui-react-jquery-charts\node_modules\kendo\js\kendo.dataviz.chart.js:44:10)
    at Module._compile (module.js:409:26)
    at Module._extensions..js (module.js:416:10)
    at Object.require.extensions.(anonymous function) [as .js] (C:\temp\kendo-test\node_modules\babel-core\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:\temp\kendo-test\node_modules\kendo-ui-react-jquery-charts\dist\index.js:7:26)
    at Module._compile (module.js:409:26)
    at Module._extensions..js (module.js:416:10)
    at Object.require.extensions.(anonymous function) [as .js] (C:\temp\kendo-test\node_modules\babel-core\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:/temp/kendo-test/src/components/RiskByYearChart.jsx:2:1)
    at Module._compile (module.js:409:26)
    at loader (C:\temp\kendo-test\node_modules\babel-core\node_modules\babel-register\lib\node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .jsx] (C:\temp\kendo-test\node_modules\babel-core\node_modules\babel-register\lib\node.js:154:7)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:/temp/kendo-test/test/components/RiskByYearChart-spec.jsx:6:1)
    at Module._compile (module.js:409:26)
    at loader (C:\temp\kendo-test\node_modules\babel-core\node_modules\babel-register\lib\node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .jsx] (C:\temp\kendo-test\node_modules\babel-core\node_modules\babel-register\lib\node.js:154:7)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at C:\temp\kendo-test\node_modules\mocha\lib\mocha.js:222:27
    at Array.forEach (native)
    at Mocha.loadFiles (C:\temp\kendo-test\node_modules\mocha\lib\mocha.js:219:14)
    at Mocha.run (C:\temp\kendo-test\node_modules\mocha\lib\mocha.js:487:10)
    at Object.<anonymous> (C:\temp\kendo-test\node_modules\mocha\bin\_mocha:459:18)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:441:10)
    at startup (node.js:139:18)
    at node.js:974:3

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "test"
npm ERR! node v4.5.0
npm ERR! npm  v2.15.9
npm ERR! code ELIFECYCLE
npm ERR! kendo-test@1.0.0 test: `mocha --compilers js:babel-core/register --require ./test/test_helper.js "test/**/*@(.js|.jsx)"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the kendo-test@1.0.0 test script 'mocha --compilers js:babel-core/register --require ./test/test_helper.js "test/**/*@(.js|.jsx)"'.
npm ERR! This is most likely a problem with the kendo-test package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     mocha --compilers js:babel-core/register --require ./test/test_helper.js "test/**/*@(.js|.jsx)"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs kendo-test
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR!     npm owner ls kendo-test
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\temp\kendo-test\npm-debug.log

 

I'm attaching a zip file with the component and test.  To run (assuming you have nodejs installed):

• unzip the file
• from a command prompt cd to the project directory
• run "npm install"
• run "npm run test"

Thanks in advance for any help!

[T. Tsonev]

Hi,

We haven't tried testing Kendo UI components in JSDom. Based on their implementation, I'd say they're rather dependent on a fully-featured DOM.

I'm afraid this isn't something we can fix. 

Regards,
T. Tsonev
Telerik by Progress