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.


  • Onsen UI

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


Log in to reply