javascript - Testing react-bootstrap with mocha and ES6/babel -


i trying write unit test of react , react-bootstrap components using mocha.

all of javascript written in es6, , using babel transpile es5.

the files using below.

after running npm install, run npm test. fails following output:

$ npm test  > @ test /users/tda0106/test/npm > mocha --compilers jsx:babel-register simple-test.jsx      simple test     1) "before all" hook: render , locate element     0 passing (34ms)   1 failing    1) simple test "before all" hook: render , locate element:      assertionerror: expected null exist       @ context.<anonymous> (simple-test.jsx:21:9)    npm err! test failed.  see above more details. 

testutils.renderintodocument returning null no reason can see. testutil docs indicate window , document must defined before importing react, point of test-dom.jsx.

i test-dom.jsx loaded before react, because before added line setting global.navigator, react throwing error deep in code trying access variable.

any idea need make work?

package.json

{   "dependencies": {     "react": "^15.0.1",     "react-bootstrap": "^0.28.5",     "react-dom": "^15.0.1"   },   "scripts": {       "test": "mocha --compilers jsx:babel-register simple-test.jsx"   },   "devdependencies": {     "babel-preset-es2015": "^6.6.0",     "babel-preset-react": "^6.5.0",     "babelify": "^7.2.0",     "chai": "^3.5.0",     "jsdom": "^8.4.0",     "mocha": "^2.4.5",     "react-addons-test-utils": "^15.0.1"   } } 

test-dom.jsx

// react needs basic dom objects defined before imported.   // , babel moves imports before rest of code.  // dom setup needs in own file , imported.  import jsdom 'jsdom';   const document = jsdom.jsdom("hello world"); const window = document.defaultview;  // super simple dom ready react render // store dom , window in global scope ready react access global.document = document;  global.window = window;  global.navigator = {useragent: 'none'};  export default { document: document, window: window }; 

simple-test.jsx

import testdom './test-dom.jsx';  import { expect } 'chai';  import react 'react'; import { panel } 'react-bootstrap';  import testutils 'react-addons-test-utils';   const map = () => (     <panel>a map </panel> );  describe('a simple test', () => {      before('render , locate element', () => {        const renderedcomponent = testutils.renderintodocument(             <map />         );          expect(renderedcomponent).to.exist; // fails     });        it('test something', () => {         expect(1+1).is('true');     }); }); 

.babelrc

{     "presets": [         "es2015",         "react"     ] } 


Comments

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

asp.net mvc - breakpoint on javascript in CSHTML? -