petehunt
11 years ago
4 changed files with 83 additions and 4 deletions
@ -0,0 +1,76 @@ |
|||
--- |
|||
id: test-utils |
|||
title: Test Utilities |
|||
layout: docs |
|||
permalink: test-utils.html |
|||
prev: class-name-manipulation.html |
|||
next: examples.html |
|||
--- |
|||
|
|||
`React.addons.TestUtils` makes it easy to test React components in the testing framework of your choice (we use [Jasmine](http://pivotal.github.io/jasmine/)). All functions except for `renderIntoDocument()` work without a browser DOM. |
|||
|
|||
#### ReactComponent renderIntoDocument(ReactComponent instance) |
|||
|
|||
Render a component into a detached DOM node in the document. **This is the only function that requires a DOM.** |
|||
|
|||
#### boolean isComponentOfType(ReactComponent instance, function componentClass) |
|||
|
|||
Returns true if `instance` is an instance of a React `componentClass`. |
|||
|
|||
#### boolean isDOMComponent(ReactComponent instance) |
|||
|
|||
Returns true if `instance` is a DOM component (such as a `<div>` or `<span>`). |
|||
|
|||
#### boolean isCompositeComponent(ReactComponent instance)` |
|||
|
|||
Returns true if `instance` is a composite component (created with `React.createClass()`) |
|||
|
|||
#### boolean isCompositeComponentWithType(ReactComponent instance, function componentClass) |
|||
|
|||
The combination of `isComponentOfType()` and `isCompositeComponent()`. |
|||
|
|||
#### boolean isTextComponent(ReactComponent instance) |
|||
|
|||
Returns true if `instance` is a plain text component. |
|||
|
|||
#### array findAllInRenderedTree(ReactComponent tree, function test) |
|||
|
|||
Traverse all components in `tree` and accumulate all components where `test(component)` is true. This is not that useful on its own, but it's used as a primitive for other test utils. |
|||
|
|||
#### array scryRenderedDOMComponentsWithClass(ReactCompoennt tree, string className) |
|||
|
|||
Finds all instance of components in the rendered tree that are DOM components with the class name matching `className`. |
|||
|
|||
#### ReactComponent findRenderedDOMComponentWithClass(ReactComponent tree, string className) |
|||
|
|||
Like `scryRenderedDOMComponentsWithClass()` but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one. |
|||
|
|||
#### array scryRenderedDOMComponentsWithTag(ReactComponent tree, string tagName) |
|||
|
|||
Finds all instance of components in the rendered tree that are DOM components with the tag name matching `tagName`. |
|||
|
|||
#### ReactComponent findRenderedDOMComponentWithTag(ReactComponent tree, string tagName) |
|||
|
|||
Like `scryRenderedDOMComponentsWithTag()` but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one. |
|||
|
|||
#### array scryRenderedComponentsWithType(ReactComponent tree, function componentClass) |
|||
|
|||
Finds all instances of components with type equal to `componentClass`. |
|||
|
|||
#### ReactComponent findRenderedComponentWithType(ReactComponent tree, function componentClass) |
|||
|
|||
Same as `scryRenderedComponentsWithType()` but expects there to be one result and returns that one result, or throws exception if there is any other number of matches besides one. |
|||
|
|||
#### object mockComponent(function componentClass, string? tagName) |
|||
|
|||
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>` (or other tag if `mockTagName` is provided) containing any provided children. |
|||
|
|||
#### Simulate.{eventName}({ReactComponent|DOMElement} element, object nativeEventData) |
|||
|
|||
Simulate an event dispatch on a React component instance or browser DOM node with optional `nativeEventData` event data. This uses React's event system so it works outside of the browser. **This is possibly the single most useful utility in `ReactTestUtils`.** |
|||
|
|||
**NOTE:** this helper is used to simulate browser events, so synthetic React events like `change` are not available. If you want to test `change`, simulate the underlying `input` browser event. |
|||
|
|||
Example usage: `React.addons.TestUtils.Simulate.click(myComponent)` |
|||
|
|||
`Simulate` has a method for every event that React understands. |
Loading…
Reference in new issue