How to make React unit test with Jest using OnsenUI?

dagatsoin

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?

cristovao-trevisan

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.

Fran Diox

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