How to make React unit test with Jest using OnsenUI?
-
I am trying to run a simple snapshot unit test using Jest and Enzyme.
Here is my component:
import React from 'react'; import injectSheet from 'react-jss' import theme from '../theme/progressBar' import {ProgressBar} from "react-onsenui" const LoadingBar = ({sheet:{classes}, progress}) => <div className={classes.wzProgressBar + " wzProgressBar__loading"}> <div className="wzProgressBar_container"> <ProgressBar className="wzProgressBar_content" value={progress}/> </div> </div> export default injectSheet(theme)(LoadingBar);
My test file:
import React from 'react'; import LoadingBar from './LoadingBar'; import renderer from 'react-test-renderer'; test('Load bar at 0%', () => { const component = renderer.create(<LoadingBar progress={0}/>); let tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); test('Load bar at 50%', () => { const component = renderer.create(<LoadingBar progress={50}/>); let tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); test('Load bar at 100%', () => { const component = renderer.create(<LoadingBar progress={100}/>); let tree = component.toJSON(); expect(tree).toMatchSnapshot(); });
My jest config in package.json:
"jest": { "rootDir": "imports/ui" },
And my .babelrc
"env": { "test": { "presets": [ "es2015", "react", "stage-0" ] } }
Here is the result in the terminal:
wizar-guide@0.0.1 test /Users/vikti/dev/wizar-guide > jest --verbose FAIL 1-molecules/LoadingBar.snapshot.test.jsx ● Test suite failed to run Invalid state at ../../node_modules/onsenui/js/onsenui.js:4744:9 at ../../node_modules/onsenui/js/onsenui.js:4745:2 at ../../node_modules/onsenui/js/onsenui.js:3739:84 at Object.<anonymous> (../../node_modules/onsenui/js/onsenui.js:3742:2) at Object.<anonymous>.React (../../node_modules/react-onsenui/dist/react-onsenui.js:3:123) at Object.<anonymous> (../../node_modules/react-onsenui/dist/react-onsenui.js:6:2) at Object.<anonymous> (1-molecules/LoadingBar.jsx:5:21) at Object.<anonymous> (1-molecules/LoadingBar.snapshot.test.jsx:2:19) at process._tickCallback (../../internal/process/next_tick.js:103:7) Test Suites: 1 failed, 1 total Tests: 0 total Snapshots: 0 total Time: 3.664s Ran all test suites. npm ERR! Test failed. See above for more details.
As soon I remove the onsenui component my test passes. So is there any configuration I miss to make test with OnsenUI?
-
I’m having the same problem. The root seems to be the fact that the test doesn’t run in an actual browser, so a lot of things are missing (for me the problem looks to be about css transitions). Still looking for a solution.
-
jsdom
is missing many things that some parts of Onsen UI require. There’s more information about it in this SO thread.