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 think it is because renderFixed is not bound to the instance.
Could you try to replace renderFixed() {by renderFixed = ()=>{?

for those who ask: here is a demo repo which works with JSS: https://github.com/dagatsoin/JSS-OnseUI-example

npm install -g monaca # Install Monaca CLI - Onsen UI toolkit
monaca signup # Free sign up
git clone git@github.com:dagatsoin/JSS-OnseUI-example.git
cd JSS-OnseUI-example
npm install
monaca preview 

@argelius thx you very much.

Hello,

I have just discovered Onsen UI and I would like to know about customization and theming provided react components. I don’t find reference/tutorial on the v2.rc about those topics, so here is my questions:

• How far we can customize existing components? I am looking for something more mutable than material-ui.
• Which css methodology does Onsen use? (I saw some BEM in the default style sheet)
• Does it use css-module or inline style or BEM namespace to avoid naming conflict?
• What is the workflow for theming?
• Is it compatible with JSS?

Thank you :)