Add ReactTestUtils to addons
petehunt committed
Feb 17, 2014 at 10:43 UTC
8122cadeb492b7bbd4014eb13e23654530ef1290
5 files changed
+87
-4
docs/_data/nav_docs.yml
+2
@@ -45,6 +45,8 @@
45
title: Two-Way Binding Helpers
46
- id: class-name-manipulation
47
title: Class Name Manipulation
48
+ - id: test-utils
49
+ title: Test Utilities
50
- id: examples
51
title: Examples
52
- title: Reference
docs/docs/09-addons.md
+4
-3
@@ -9,8 +9,9 @@ next: animation.html
9
10
`React.addons` is where we park some useful utilities for building React apps. **These should be considered experimental** but will eventually be rolled into core or a blessed utilities library:
11
12
-- `ReactTransitions`, for dealing with animations and transitions that are usually not simple to implement, such as before a component's removal.
13
-- `ReactLink`, to simplify the coordination between user's form input data and and the component's state.
14
-- `classSet`, for manipulating the DOM `class` string a bit more cleanly.
12
+- [`ReactTransitions`](animation.html), for dealing with animations and transitions that are usually not simple to implement, such as before a component's removal.
13
+- [`ReactLink`](two-way-binding-helpers.html), to simplify the coordination between user's form input data and and the component's state.
14
+- [`classSet`](class-name-manipulation.html), for manipulating the DOM `class` string a bit more cleanly.
15
+- [`ReactTestUtils`](test-utils.html), simple helpers for writing test cases (unminified build only).
16
17
To get the add-ons, use `react-with-addons.js` (and its minified counterpart) rather than the common `react.js`.
docs/docs/09.3-class-name-manipulation.md
+1
-1
@@ -4,7 +4,7 @@ title: Class Name Manipulation
4
layout: docs
5
permalink: class-name-manipulation.html
6
prev: two-way-binding-helpers.html
7
-next: examples.html
7
+next: test-utils.html
8
---
9
10
`classSet()` is a neat utility for easily manipulating the DOM `class` string.
docs/docs/09.4-test-utils.md
new
+76
@@ -0,0 +1,76 @@
1
+---
2
+id: test-utils
3
+title: Test Utilities
4
+layout: docs
5
+permalink: test-utils.html
6
+prev: class-name-manipulation.html
7
+next: examples.html
8
+---
9
+
10
+`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.
11
+
12
+#### ReactComponent renderIntoDocument(ReactComponent instance)
13
+
14
+Render a component into a detached DOM node in the document. **This is the only function that requires a DOM.**
15
+
16
+#### boolean isComponentOfType(ReactComponent instance, function componentClass)
17
+
18
+Returns true if `instance` is an instance of a React `componentClass`.
19
+
20
+#### boolean isDOMComponent(ReactComponent instance)
21
+
22
+Returns true if `instance` is a DOM component (such as a `<div>` or `<span>`).
23
+
24
+#### boolean isCompositeComponent(ReactComponent instance)`
25
+
26
+Returns true if `instance` is a composite component (created with `React.createClass()`)
27
+
28
+#### boolean isCompositeComponentWithType(ReactComponent instance, function componentClass)
29
+
30
+The combination of `isComponentOfType()` and `isCompositeComponent()`.
31
+
32
+#### boolean isTextComponent(ReactComponent instance)
33
+
34
+Returns true if `instance` is a plain text component.
35
+
36
+#### array findAllInRenderedTree(ReactComponent tree, function test)
37
+
38
+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.
39
+
40
+#### array scryRenderedDOMComponentsWithClass(ReactCompoennt tree, string className)
41
+
42
+Finds all instance of components in the rendered tree that are DOM components with the class name matching `className`.
43
+
44
+#### ReactComponent findRenderedDOMComponentWithClass(ReactComponent tree, string className)
45
+
46
+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.
47
+
48
+#### array scryRenderedDOMComponentsWithTag(ReactComponent tree, string tagName)
49
+
50
+Finds all instance of components in the rendered tree that are DOM components with the tag name matching `tagName`.
51
+
52
+#### ReactComponent findRenderedDOMComponentWithTag(ReactComponent tree, string tagName)
53
+
54
+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.
55
+
56
+#### array scryRenderedComponentsWithType(ReactComponent tree, function componentClass)
57
+
58
+Finds all instances of components with type equal to `componentClass`.
59
+
60
+#### ReactComponent findRenderedComponentWithType(ReactComponent tree, function componentClass)
61
+
62
+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.
63
+
64
+#### object mockComponent(function componentClass, string? tagName)
65
+
66
+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.
67
+
68
+#### Simulate.{eventName}({ReactComponent|DOMElement} element, object nativeEventData)
69
+
70
+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`.**
71
+
72
+**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.
73
+
74
+Example usage: `React.addons.TestUtils.Simulate.click(myComponent)`
75
+
76
+`Simulate` has a method for every event that React understands.
src/browser/ReactWithAddons.js
+4
@@ -42,5 +42,9 @@ React.addons = {
42
cloneWithProps: cloneWithProps
43
};
44
45
+if (__DEV__) {
46
+ React.addons.TestUtils = require('ReactTestUtils');
47
+}
48
+
49
module.exports = React;
50