omniscientjs / omniscient

A library providing an abstraction for React components that allows for fast top-down rendering embracing immutable data for js

Home Page:http://omniscientjs.github.io/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Omniscient 4.0 Components Seem to Not Working with React Test Utilities

hainguyenthanh opened this issue · comments

Hello, it seems that React components created by Omniscient 4.0 do not work well with React 0.14 test utilities. In my tests, TestUtils.renderIntoDocument() runs correctly with components created by React.createClass(). If I input a component created by Omniscient, it always return null.

Please run the following tests for more details. I hope this issue will be resolved soon.

var chai = require('chai'),
    expect = chai.expect,
    omniscient = require('omniscient'),
    React = require('react'),
    TestUtils = require('react-addons-test-utils');

const ReactComponent = React.createClass({
  render() {
    return (
      <div>
        <input type="text" value="Hello from ReactComponent"/>
      </div>
    );
  }
});

const OmniscientComponent = omniscient('OmniscientComponent', function(props) {
  return (
    <div>
      <input type="text" value='OmniscientComponent says "Hello"'/>
    </div>
  );
});

describe('ReactComponent', function() {
  it('renders input field with correct value', function() {
    let reactComp = TestUtils.renderIntoDocument(
      <ReactComponent/>
    );

    let input = TestUtils
      .findRenderedDOMComponentWithTag(reactComp, 'input');

    expect(input).not.to.be.null;
    expect(input.value).to.equal('Hello from ReactComponent');
  });
});

describe('OmniscientComponent', function() {
  it('renders input field with correct value', function() {
    let component = TestUtils.renderIntoDocument(
      <OmniscientComponent/>
    );

    let input = TestUtils
      .findRenderedDOMComponentWithTag(component, 'input');

    expect(input).not.to.be.null;
    expect(input.value).to.equal('OmniscientComponent says "Hello"');
  });
});

Thank you and sorry for my bad English.

Hi! Thanks for getting in touch. How are you running these tests? mocha+babel, babel-cli, jest etc?

So I got this running, but I'd like to see your setup in total to be able to debug further.

I patched up jsdom like in our integration-test.js https://github.com/omniscientjs/omniscient/blob/master/tests/integration-test.js#L19-L30 and ran it with mocha --compilers js:babel/register test.js. Without the jsdom setup I keep getting document does not exist errors.

While I don't know what's causing it to fail, it seems to have to with jsx - replacing <OmniscientComponent/> with OmniscientComponent() makes the test pass. Suspecting it's got something to do with the testing tool, as omniscient in general works fine with jsx (http://goo.gl/bF9VTn)

@torgeir Thank you for your help. Yes, the test runs if I replace <OmniscientComponent/> with OmniscientComponent(). Here is the link to my setup in total for you to debug further. https://drive.google.com/file/d/0B-zCd90OO_qoVUNJejBxWDJJYnc/view?usp=sharing

This is resolved in master, have a go with this

npm i -S omniscientjs/omniscient#master

We have some other minor-stuff in master as well that needs some tests before we release this.