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
Post a Comment