New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

0.14-rc1: findDOMNode(statelessComponent) doesn’t work with TestUtils.renderIntoDocument #4839

Closed
iamdustan opened this Issue Sep 10, 2015 · 13 comments

Comments

Projects
None yet
9 participants
@iamdustan
Copy link
Contributor

iamdustan commented Sep 10, 2015

Unsure if this also impacts in a browser. I wrote an example of this here: https://github.com/iamdustan/react-testing-stateless-components

I wrote two components. One with class Component extends React.Component and the other var Component = (props) => ().

The test case is identical for each. The class component test passes. The function component test fails.

https://github.com/iamdustan/react-testing-stateless-components/blob/master/class.js

import React from 'react';

class Component extends React.Component {
  render() {
    var {onClick, text} = this.props;
    return (
      <button onClick={onClick}>{text}</button>
    );
  }
};

Component.propTypes = {
  onClick: React.PropTypes.func.isRequired,
  text: React.PropTypes.string.isRequired,
};

export default Component;

https://github.com/iamdustan/react-testing-stateless-components/blob/master/stateless.js

import React from 'react';

var Component = ({onClick, text}) => (
  <button onClick={onClick}>{text}</button>
);

Component.propTypes = {
  onClick: React.PropTypes.func.isRequired,
  text: React.PropTypes.string.isRequired,
};

export default Component;

Output

Using Jest CLI v5.0.3
 FAIL  __tests__/stateless-test.js (0.998s)
● thing › it render
  - TypeError: Cannot read property 'textContent' of null
        at Spec.<anonymous> (/Users/dkasten/projects/react-test-case/__tests__/stateless-test.js:15:34)
        at jasmine.Block.execute (/Users/dkasten/projects/react-test-case/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:1065:17)
        at jasmine.Queue.next_ (/Users/dkasten/projects/react-test-case/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:2098:31)
        at null._onTimeout (/Users/dkasten/projects/react-test-case/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:2088:18)
        at Timer.listOnTimeout (timers.js:89:15)
 PASS  __tests__/class-test.js (1.109s)
1 test failed, 1 test passed (2 total)

This failure is not due to interactions with Jest as it also exists on another project that is not using Jest (although still using jsdom).

@zpao

This comment has been minimized.

Copy link
Member

zpao commented Sep 10, 2015

The test (to save a couple clicks):

  it('render', function() {
    var React = require('react');
    var findDOMNode = require('react-dom').findDOMNode;
    var StatelessComponent = require('../stateless');
    var TestUtils = require('react/lib/ReactTestUtils');

    var spy = jasmine.createSpy();
    var component = TestUtils.renderIntoDocument(
      <StatelessComponent text="Hello" onClick={spy} />
    );

    expect(findDOMNode(component).textContent).toBe('Hello');
  });

I would also expect this to work… cc @spicyj

@iamdustan

This comment has been minimized.

Copy link
Contributor

iamdustan commented Sep 10, 2015

I almost copied everything into here. Thanks @zpao.

@iamdustan

This comment has been minimized.

Copy link
Contributor

iamdustan commented Sep 10, 2015

I haven’t hit any issues with stateless components and the shallow renderer, yet.

@sophiebits

This comment has been minimized.

Copy link
Contributor

sophiebits commented Sep 10, 2015

Stateless components have no public instance. If you were to wrap it in another (stateful) composite then you could call findDOMNode on that component.

cc @sebmarkbage for verification

@iamdustan

This comment has been minimized.

Copy link
Contributor

iamdustan commented Sep 10, 2015

I moved the stateless currently failing approach to wrap it in a <div /> with the test utils. From this I can get to testing what I want, but it’s a bit awkward.

var component = TestUtils.renderIntoDocument(<div><StatelessComponent ... /></div>);
var statelessComponent = findDOMNode(component).children[0];

https://github.com/iamdustan/react-testing-stateless-components/blob/master/__tests__/stateless-failure-test.js
https://github.com/iamdustan/react-testing-stateless-components/blob/master/__tests__/stateless-success-test.js

Is there a better way of doing this that I’m unaware of? Or is this just the way it is going to be for a while?

@sebmarkbage

This comment has been minimized.

Copy link
Member

sebmarkbage commented Sep 10, 2015

You can use Shallow testing to avoid needing to reach into the DOM:

https://facebook.github.io/react/docs/test-utils.html#shallow-rendering

@iamdustan

This comment has been minimized.

Copy link
Contributor

iamdustan commented Sep 11, 2015

How do you test event handling with the shallow renderer? E.g. TestUtils.Simulate.*? (E.g. https://github.com/iamdustan/react-testing-stateless-components/blob/master/__tests__/stateless-success-test.js#L29-L30)

Are refs and Stateless Components also not 100% compatible with standard components? From what I can tell refs are always null for a stateless component...

@cymen

This comment has been minimized.

Copy link

cymen commented Nov 17, 2015

If you came here wondering about refs and Stateless Components take a look at #4936.

@vinnymac

This comment has been minimized.

Copy link

vinnymac commented Dec 1, 2015

@iamdustan Right now it seems you cannot test event handling with the shallow renderer. At least that is what I gather from #1445.

@stevenleeg

This comment has been minimized.

Copy link

stevenleeg commented Mar 29, 2016

I'm having this same issue while trying to test stateless components (renderIntoDocument is returning nil). It looks like wrapping it in <div> does help, but this does seem to be an awkward fix.

Has there been any progress on this issue?

@dinhodoes

This comment has been minimized.

Copy link

dinhodoes commented Mar 31, 2016

One way to avoid 'null' or the TestUtils altogether when testing event handlers is to instantiate the component as a constructor (i.e. var comp = new MyComp(props) ).

Interesting find from this article.

@wi-ski

This comment has been minimized.

Copy link

wi-ski commented Oct 9, 2016

I can confirm that using the new keyword resolved this issue for me. Any chance there's some progress on this issue? It looks ugly and my team is totally mess this up and le tests will not get written :(

@iamdustan

This comment has been minimized.

Copy link
Contributor

iamdustan commented Jul 20, 2017

Closing as works by design. If you end up here read #4936 for more information.

@iamdustan iamdustan closed this Jul 20, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment