Skip to content
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

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

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

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

petehunt opened this issue Nov 18, 2013 · 11 comments

Comments

@petehunt
Copy link
Contributor

@petehunt petehunt commented Nov 18, 2013

No description provided.

@zpao
Copy link
Member

@zpao zpao commented Nov 18, 2013

👍

@plaxdan
Copy link

@plaxdan plaxdan commented Nov 20, 2013

👍

@thomasboyt
Copy link
Contributor

@thomasboyt 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
Copy link
Contributor

@thomasboyt 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
Copy link
Contributor

@benjamn 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
Copy link
Contributor

@thomasboyt thomasboyt commented Jan 3, 2014

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

@petehunt
Copy link
Contributor Author

@petehunt petehunt commented Jan 3, 2014

Relevant: #745

@rcs
Copy link

@rcs 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
Copy link

@tommyh 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
Copy link
Contributor

@SanderSpies SanderSpies commented Jan 15, 2014

👍

@petehunt
Copy link
Contributor Author

@petehunt 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
8 participants
You can’t perform that action at this time.