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.

How to make React unit test with Jest using OnsenUI? browsing