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

Rewrite test renderer docs #10916

Merged
merged 1 commit into from
Sep 28, 2017
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions docs/docs/reference-test-renderer.md
Original file line number Diff line number Diff line change
Expand Up @@ -102,143 +102,143 @@ expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);
TestRenderer.create(element, options);
```

Create a TestRenderer instance with a passed element, which has the following methods and properties.
Create a `TestRenderer` instance with the passed React element. It doesn't use the real DOM, but it still fully renders the component tree into memory so you can make assertions about it. The returned instance has the following methods and properties.

### `testRenderer.toJSON()`

```javascript
testRenderer.toJSON()
```

Return a JSON object representing the element.
Return an object representing the rendered tree. This tree only contains the platform-specific nodes like `<div>` or `<View>` and their props, but doesn't contain any user-written components. This is handy for [snapshot testing](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest).

### `testRenderer.toTree()`

```javascript
testRenderer.toTree()
```

Return a tree object representing the element.
Return an object representing the rendered tree. Unlike `toJSON()`, the representation is more detailed than the one provided by `toJSON()`, and includes the user-written components. You probably don't need this method unless you're writing your own assertion library on top of the test rendererer.

### `testRenderer.update()`

```javascript
testRenderer.update(element)
```

Update the element with a passed element.
Re-render the in-memory tree with a new root element. This simulates a React update at the root. If the new element has the same type and key as the previous element, the tree will be updated; otherwise, it will re-mount a new tree.

### `testRenderer.unmount()`

```javascript
testRenderer.unmount()
```

Unmount the element from testRenderer.
Unmount the in-memory tree, triggering the appropriate lifecycle events.

### `testRenderer.getInstance()`

```javascript
testRenderer.getInstance()
```

Return a root container instance.
Return the instance corresponding to the root element, if available. This will not work if the root element is a functional component because they don't have instances.

### `testRenderer.root`

```javascript
testRenderer.root
```

`root` is a testInstance, which has the following methods and properties.
Returns the root "test instance" object that is useful for making assertions about specific nodes in the tree. You can use it to find other "test instances" deeper below.

### `testInstance.find()`

```javascript
testInstance.find(test)
```

Find a descendant testInstance that `test(testInstance)` is `true`.
Find the first descendant test instance for which `test(testInstance)` returns `true`.

### `testInstance.findByType()`

```javascript
testInstance.findByType(type)
```

Find a descendant testInstance that matches the provided type.
Find the first descendant test instance with the provided `type`.

### `testInstance.findByProps()`

```javascript
testInstance.findByProps(props)
```

Find a descendant testInstance that matches the provided props.
Find the first descendant test instance with the provided `props`.

### `testInstance.findAll()`

```javascript
testInstance.findAll(test)
```

Find all descendant testInstances that `test(testInstance)` is `true`.
Find all descendant test instances for which `test(testInstance)` returns `true`.

### `testInstance.findAllByType()`

```javascript
testInstance.findAllByType(type)
```

Find all descendant testInstances that matches the provided type.
Find all descendant test instances with the provided `type`.

### `testInstance.findAllByProps()`

```javascript
testInstance.findAllByProps(props)
```

Find all descendant testInstances that matches the provided props.
Find all descendant test instances with the provided `props`.

### `testInstance.instance`

```javascript
testInstance.instance
```

`instance` is a component instance of the testInstance.
The component instance corresponding to this test instance. It is only available for class components, as functional components don't have instances. It matches the `this` value inside the given component.

### `testInstance.type`

```javascript
testInstance.type
```

`type` is a Component type of the testInstance.
The component type corresponding to this test instance. For example, a `<Button />` component has a type of `Button`.

### `testInstance.props`

```javascript
testInstance.props
```

`props` is a props object of the testInstance.
The props corresponding to this test instance. For example, a `<Button size="small />` component has `{size: 'small'}` as props.

### `testInstance.parent`

```javascript
testInstance.parent
```

`parent` is a parent testInstance.
The parent test instance of this test instance.

### `testInstance.children`

```javascript
testInstance.children
```

`children` is children of the testInstance.
The children test instances of this test instance.

## Ideas

Expand Down