Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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}/>
    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();
    test('Load bar at 50%', () => {
      const component = renderer.create(<LoadingBar progress={50}/>);
      let tree = component.toJSON();
    test('Load bar at 100%', () => {
      const component = renderer.create(<LoadingBar progress={100}/>);
      let tree = component.toJSON();

    My jest config in package.json:

    "jest": {
        "rootDir": "imports/ui"

    And my .babelrc

     "env": {
        "test": {
          "presets": [

    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.

  • Onsen UI

    jsdom is missing many things that some parts of Onsen UI require. There’s more information about it in this SO thread.