Add ReactTestUtils to react-tools (main.js) and document it #560

Closed
petehunt opened this Issue Nov 18, 2013 · 11 comments

Comments

Projects
None yet
8 participants
@petehunt
Contributor

petehunt commented Nov 18, 2013

No description provided.

@zpao

This comment has been minimized.

Show comment
Hide comment
@zpao

zpao Nov 18, 2013

Member

👍

Member

zpao commented Nov 18, 2013

👍

@plaxdan

This comment has been minimized.

Show comment
Hide comment

plaxdan commented Nov 20, 2013

👍

@thomasboyt

This comment has been minimized.

Show comment
Hide comment
@thomasboyt

thomasboyt Jan 3, 2014

Contributor

👍 With React's recent increase in popularity, an easy testing story is going to be more and more in demand

Contributor

thomasboyt commented Jan 3, 2014

👍 With React's recent increase in popularity, an easy testing story is going to be more and more in demand

@ghost ghost assigned benjamn Jan 3, 2014

@thomasboyt

This comment has been minimized.

Show comment
Hide comment
@thomasboyt

thomasboyt Jan 3, 2014

Contributor

In fact, would adding a react-with-test-utils.js be fine? It'd just be a version of react-with-addons.js with test utils included, specifically for using in your test runner.

Contributor

thomasboyt commented Jan 3, 2014

In fact, would adding a react-with-test-utils.js be fine? It'd just be a version of react-with-addons.js with test utils included, specifically for using in your test runner.

@benjamn

This comment has been minimized.

Show comment
Hide comment
@benjamn

benjamn Jan 3, 2014

Contributor

I'll take it. I especially want to explain the new ReactTestUtils.mockComponent method:

/**
* Pass a mocked component module to this method to augment it with
* useful methods that allow it to be used as a dummy React component.
* Instead of rendering as usual, the component will become a simple
* <div> containing any provided children.
*
* @param {object} module the mock function object exported from a
* module that defines the component to be mocked
* @param {?string} mockTagName optional dummy root tag name to return
* from render method (overrides
* module.mockTagName if provided)
* @return {object} the ReactTestUtils object (for chaining)
*/
mockComponent: function(module, mockTagName) {
var ConvenienceConstructor = React.createClass({
render: function() {
var mockTagName = mockTagName || module.mockTagName || "div";
return ReactDOM[mockTagName](null, this.props.children);
}
});
copyProperties(module, ConvenienceConstructor);
module.mockImplementation(ConvenienceConstructor);
return this;
},

Contributor

benjamn commented Jan 3, 2014

I'll take it. I especially want to explain the new ReactTestUtils.mockComponent method:

/**
* Pass a mocked component module to this method to augment it with
* useful methods that allow it to be used as a dummy React component.
* Instead of rendering as usual, the component will become a simple
* <div> containing any provided children.
*
* @param {object} module the mock function object exported from a
* module that defines the component to be mocked
* @param {?string} mockTagName optional dummy root tag name to return
* from render method (overrides
* module.mockTagName if provided)
* @return {object} the ReactTestUtils object (for chaining)
*/
mockComponent: function(module, mockTagName) {
var ConvenienceConstructor = React.createClass({
render: function() {
var mockTagName = mockTagName || module.mockTagName || "div";
return ReactDOM[mockTagName](null, this.props.children);
}
});
copyProperties(module, ConvenienceConstructor);
module.mockImplementation(ConvenienceConstructor);
return this;
},

@thomasboyt

This comment has been minimized.

Show comment
Hide comment
@thomasboyt

thomasboyt Jan 3, 2014

Contributor

fwiw, here's my take on what I mentioned: thomasboyt@01d53c9

Contributor

thomasboyt commented Jan 3, 2014

fwiw, here's my take on what I mentioned: thomasboyt@01d53c9

@petehunt

This comment has been minimized.

Show comment
Hide comment
@petehunt

petehunt Jan 3, 2014

Contributor

Relevant: #745

Contributor

petehunt commented Jan 3, 2014

Relevant: #745

@rcs

This comment has been minimized.

Show comment
Hide comment
@rcs

rcs Jan 14, 2014

For anybody running across this issue, @spicyj pointed me at http://myshareoftech.com/2013/12/unit-testing-react-dot-js-with-jasmine-and-karma.html , which includes information for shipping a vendored version of react with test utils, but also uses constructs like

expect(label.refs.p).toBeDefined();
expect(label.refs.p.props.children).toBe("Some Text We Need for Test")

to inspect react component state, which was the necessary piece for me.

rcs commented Jan 14, 2014

For anybody running across this issue, @spicyj pointed me at http://myshareoftech.com/2013/12/unit-testing-react-dot-js-with-jasmine-and-karma.html , which includes information for shipping a vendored version of react with test utils, but also uses constructs like

expect(label.refs.p).toBeDefined();
expect(label.refs.p.props.children).toBe("Some Text We Need for Test")

to inspect react component state, which was the necessary piece for me.

@tommyh

This comment has been minimized.

Show comment
Hide comment
@tommyh

tommyh Jan 14, 2014

I have written a library called jasmine-react which I use to test react components: https://github.com/tommyh/jasmine-react.

it allows you todo things like:

  • spyOn methods for a react component
  • stub children components to isolate your tests to just the "component under test"
  • unmounting any component afterEach test
  • setting a class displayName which makes validating error messages easier

repost of info I put in reactjs freenode: in the long run, I might try to merge some of my features into https://github.com/facebook/react/blob/master/src/test/ReactTestUtils.js and #560. but for right now, jasmine-react works out of the box w/ no custom grunt build needed

tommyh commented Jan 14, 2014

I have written a library called jasmine-react which I use to test react components: https://github.com/tommyh/jasmine-react.

it allows you todo things like:

  • spyOn methods for a react component
  • stub children components to isolate your tests to just the "component under test"
  • unmounting any component afterEach test
  • setting a class displayName which makes validating error messages easier

repost of info I put in reactjs freenode: in the long run, I might try to merge some of my features into https://github.com/facebook/react/blob/master/src/test/ReactTestUtils.js and #560. but for right now, jasmine-react works out of the box w/ no custom grunt build needed

@SanderSpies

This comment has been minimized.

Show comment
Hide comment
@SanderSpies

SanderSpies Jan 15, 2014

Contributor

👍

Contributor

SanderSpies commented Jan 15, 2014

👍

@petehunt

This comment has been minimized.

Show comment
Hide comment
@petehunt

petehunt Apr 3, 2014

Contributor

This was done

Contributor

petehunt commented Apr 3, 2014

This was done

@petehunt petehunt closed this Apr 3, 2014

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