This is a migrated thread and some comments may be shown as answers.

Unit testing ReactJS wrapper for Kendo chart

1 Answer 45 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Thomas
Top achievements
Rank 1
Thomas asked on 28 Nov 2016, 03:09 PM

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!

1 Answer, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 30 Nov 2016, 09:52 AM
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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Tags
Charts
Asked by
Thomas
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Share this question
or