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

Translate Test Renderer #65

Merged
merged 14 commits into from
Jun 7, 2019
Merged
69 changes: 31 additions & 38 deletions content/docs/reference-test-renderer.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,20 @@ layout: docs
category: Reference
---

**Importing**
**Importieren**

```javascript
import TestRenderer from 'react-test-renderer'; // ES6
const TestRenderer = require('react-test-renderer'); // ES5 with npm
const TestRenderer = require('react-test-renderer'); // ES5 mit npm
```

## Overview {#overview}
## Überblick {#overview}

This package provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.
Dieses Paket stellt einen React-Renderer zu Verfügung, mit dem React Komponenten in reine Javascript-Objekte umgewandelt werden können, ohne dabei vom DOM oder einer nativen mobilen Umgebungen abhängig zu sein.

Essentially, this package makes it easy to grab a snapshot of the platform view hierarchy (similar to a DOM tree) rendered by a React DOM or React Native component without using a browser or [jsdom](https://github.com/tmpvar/jsdom).
Im Grunde macht es dieses Paket einfach, einen Snapshot der Plattform-Hierarchie (ähnlich eines DOM-Baums) zu erstellen, der von einer React DOM oder React Native Komponente erstellt wurde, ohne einen Browser oder [jsdom](https://github.com/tmpvar/jsdom) zu verwenden.

Example:
Beispiel:

```javascript
import TestRenderer from 'react-test-renderer';
Expand All @@ -38,9 +38,9 @@ console.log(testRenderer.toJSON());
// children: [ 'Facebook' ] }
```

You can use Jest's snapshot testing feature to automatically save a copy of the JSON tree to a file and check in your tests that it hasn't changed: [Learn more about it](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html).
Du kannst das Snapshot-Test-Feature von Jest nutzen, um automatisch eine Kopie des JSON-Baums in einer Datei zu speichern und deine Tests daraufhin zu überprüfen, ob sie sich nicht geändert hat: [Erfahre mehr darüber](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html).

You can also traverse the output to find specific nodes and make assertions about them.
Du kannst auch die Ausgabe durchlaufen, um bestimmte Knoten zu finden und über sie Aussagen zu treffen.

```javascript
import TestRenderer from 'react-test-renderer';
Expand All @@ -49,7 +49,7 @@ function MyComponent() {
return (
<div>
<SubComponent foo="bar" />
<p className="my">Hello</p>
<p className="my">Hallo</p>
</div>
)
}
Expand All @@ -71,7 +71,7 @@ expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);

* [`TestRenderer.create()`](#testrenderercreate)

### TestRenderer instance {#testrenderer-instance}
### TestRenderer Instanz {#testrenderer-instance}

* [`testRenderer.toJSON()`](#testrenderertojson)
* [`testRenderer.toTree()`](#testrenderertotree)
Expand All @@ -94,157 +94,150 @@ expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);
* [`testInstance.parent`](#testinstanceparent)
* [`testInstance.children`](#testinstancechildren)

## Reference {#reference}
## Referenz {#reference}

### `TestRenderer.create()` {#testrenderercreate}

```javascript
TestRenderer.create(element, options);
```

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.
Erstellt eine `TestRenderer`-Instanz mit dem übergebenem React-Element. Der echte DOM wird nicht verwendet, dennoch rendert es den gesamten Komponentenbaum in den Speicher, sodass du Aussagen darüber machen kannst. Die zurückgegebene Instanz hat folgende Methoden und Properties.

### `testRenderer.toJSON()` {#testrenderertojson}

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

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](https://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest).
Gibt ein Objekt, dass den gerenderten Baum darstellt, zurück. Dieser Baum enthält die plattformspezifischen Knoten wie `<div>` oder `<View>` und deren Props, enthält jedoch keine benutzergeschriebenen Komponenten. Das ist nützlich für das [Testen von Snapshots](https://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Gibt ein Objekt, dass den gerenderten Baum darstellt, zurück. Dieser Baum enthält die plattformspezifischen Knoten wie `<div>` oder `<View>` und deren Props, enthält jedoch keine benutzergeschriebenen Komponenten. Das ist nützlich für das [Testen von Snapshots](https://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest).
Gibt ein Objekt, dass den gerenderten Baum darstellt, zurück. Dieser Baum enthält die plattformspezifischen Knoten wie `<div>` oder `<View>` und deren Props. Enthält jedoch keine vom Benutzer geschriebenen Komponenten. Dies ist nützlich für [Snapshot-Tests](https://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest).


### `testRenderer.toTree()` {#testrenderertotree}

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

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 renderer.
Gibt ein Objekt, dass den gerenderten Baum darstellt, zurück. Im Gegensatz zu `toJSON()` ist diese Repräsentation detaillierter und beinhaltet benutzergeschriebene Komponenten. Wahrscheinlich wirst du diese Method nicht benötigen, außer du schreibst eine eigene Assertions-Bibliothek, welche auf Test Renderer aufbaut.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Gibt ein Objekt, dass den gerenderten Baum darstellt, zurück. Im Gegensatz zu `toJSON()` ist diese Repräsentation detaillierter und beinhaltet benutzergeschriebene Komponenten. Wahrscheinlich wirst du diese Method nicht benötigen, außer du schreibst eine eigene Assertions-Bibliothek, welche auf Test Renderer aufbaut.
Gibt ein Objekt, dass den gerenderten Baum darstellt, zurück. Im Gegensatz zu `toJSON()` ist diese Repräsentation detaillierter und beinhaltet die vom Benutzer geschriebenen Komponenten. Wahrscheinlich wirst du diese Methode nicht benötigen, außer du schreibst eine eigene Aussagen-Bibliothek (engl. assertion library), welche auf dem Test-Renderer aufbaut.


### `testRenderer.update()` {#testrendererupdate}

```javascript
testRenderer.update(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.
Rerendert den sich im Speicher befindenden Baum mit einem neuen Wurzelelement, das ein React Update im Wurzel simuliert. Falls das neue Element den gleichen Typ und Schlüssel (*type* und *key*) als das vorhergehende Element hat, wird der Baum sich updaten; andererweise wird ein neuer Baum remounten.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Rerendert den sich im Speicher befindenden Baum mit einem neuen Wurzelelement, das ein React Update im Wurzel simuliert. Falls das neue Element den gleichen Typ und Schlüssel (*type* und *key*) als das vorhergehende Element hat, wird der Baum sich updaten; andererweise wird ein neuer Baum remounten.
Rendert den sich im Speicher befindenden Baum mit einem neuen Root-Element neu. Dies simuliert ein React-Update im Root. Falls das neue Element den gleichen Typ und Schlüssel (*type* und *key*) als das vorhergehende Element hat, wird der Baum sich updaten; andernfalls wird ein neuer Baum neu gemounted.


### `testRenderer.unmount()` {#testrendererunmount}

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

Unmount the in-memory tree, triggering the appropriate lifecycle events.
Unmountet den sich im Speicher befindenden Baum und triggert die angemessenen Lifecycle-Events.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Unmountet den sich im Speicher befindenden Baum und triggert die angemessenen Lifecycle-Events.
Unmounted den sich im Speicher befindenden Baum und löst die entsprechenden Lifecycle-Events aus.


### `testRenderer.getInstance()` {#testrenderergetinstance}

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

Return the instance corresponding to the root element, if available. This will not work if the root element is a function component because they don't have instances.
Falls vorhanden, gibt die Instanz zurück, die mit dem Wurzelelement übereinstimmt. Wenn das Wurzelelement eine Funktionskomponente ist, funktioniert das nicht, da diese keine Instanzen haben.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Falls vorhanden, gibt die Instanz zurück, die mit dem Wurzelelement übereinstimmt. Wenn das Wurzelelement eine Funktionskomponente ist, funktioniert das nicht, da diese keine Instanzen haben.
Gibt die Instant, die dem Root-Element entspricht, falls diese vorhanden ist, zurück. Dies funktioniert nicht, wenn das Root-Element eine Funktionskomponente ist, da diese keine Instanzen haben.


### `testRenderer.root` {#testrendererroot}

```javascript
testRenderer.root
```

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.
Gibt das Wurzelobjekt der "Testinstanz" zurück, welches für das Erstellen von Behauptungen von spezifischen Knoten in dem Baum nützlich ist. Weiter unten siehst du, wie man andere "Testinstanzen" findet.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Gibt das Wurzelobjekt der "Testinstanz" zurück, welches für das Erstellen von Behauptungen von spezifischen Knoten in dem Baum nützlich ist. Weiter unten siehst du, wie man andere "Testinstanzen" findet.
Gibt das Root-Objekt der "Testinstanz" zurück, welches nützlich ist, um Aussagen über bestimmte Knoten im Baum zu treffen. Du kannst es verwenden, um tiefer im Objekt, weitere "Testinstanzen" zu finden.


### `testInstance.find()` {#testinstancefind}

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

Find a single descendant test instance for which `test(testInstance)` returns `true`. If `test(testInstance)` does not return `true` for exactly one test instance, it will throw an error.
Findet eine einzelne nachkommende Testinstanz, bei der `test(testInstance)` `true` zurückgibt. Falls `test(testInstance)` für genau eine Testinstanz nicht `true` zurückgibt, wird ein Fehler geworfen.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Findet eine einzelne nachkommende Testinstanz, bei der `test(testInstance)` `true` zurückgibt. Falls `test(testInstance)` für genau eine Testinstanz nicht `true` zurückgibt, wird ein Fehler geworfen.
Findet eine einzelne nachfolgende Testinstanz, bei der `test(testInstance)` `true` zurückgibt. Falls `test(testInstance)` für genau eine Testinstanz nicht `true` zurückgibt, wird ein Fehler geworfen.


### `testInstance.findByType()` {#testinstancefindbytype}

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

Find a single descendant test instance with the provided `type`. If there is not exactly one test instance with the provided `type`, it will throw an error.
Findet eine einzelne nachkommende Testinstanz mit dem bereitgestellten `type`. Falls es nicht genau eine Testinstanz mit dem bereitgestellten `type` gibt, wird ein Fehler geworfen.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Findet eine einzelne nachkommende Testinstanz mit dem bereitgestellten `type`. Falls es nicht genau eine Testinstanz mit dem bereitgestellten `type` gibt, wird ein Fehler geworfen.
Findet eine einzelne nachfolgende Testinstanz mit dem bereitgestellten `type`. Falls es nicht genau eine Testinstanz mit dem bereitgestellten `type` gibt, wird ein Fehler geworfen.


### `testInstance.findByProps()` {#testinstancefindbyprops}

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

Find a single descendant test instance with the provided `props`. If there is not exactly one test instance with the provided `props`, it will throw an error.
Findet eine einzelne nachkommende Testinstanz mit dem bereitgestellten `props`. Falls es nicht exact eine Testinstanz mit dem bereitgestellten `props` gibt, wird ein Fehler geworfen.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Findet eine einzelne nachkommende Testinstanz mit dem bereitgestellten `props`. Falls es nicht exact eine Testinstanz mit dem bereitgestellten `props` gibt, wird ein Fehler geworfen.
Findet eine einzelne nachfolgende Testinstanz mit den bereitgestellten `props`. Falls es nicht exakt eine Testinstanz mit den bereitgestellten `props` gibt, wird ein Fehler geworfen.


### `testInstance.findAll()` {#testinstancefindall}

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

Find all descendant test instances for which `test(testInstance)` returns `true`.
Findet alle nachkommenden Testinstanzen, bei der `test(testInstance)` `true` zurückgibt.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Findet alle nachkommenden Testinstanzen, bei der `test(testInstance)` `true` zurückgibt.
Findet alle nachfolgenden Testinstanzen, bei denen `test(testInstance)` `true` zurückgibt.


### `testInstance.findAllByType()` {#testinstancefindallbytype}

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

Find all descendant test instances with the provided `type`.
Findet alle nachkommenden Testinstanzen mit dem bereitgestellten `type`.

### `testInstance.findAllByProps()` {#testinstancefindallbyprops}

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

Find all descendant test instances with the provided `props`.
Findet alle nachkommenden Testinstanzen mit den bereitgestellten `props`.

### `testInstance.instance` {#testinstanceinstance}

```javascript
testInstance.instance
```

The component instance corresponding to this test instance. It is only available for class components, as function components don't have instances. It matches the `this` value inside the given component.
Die Komponenteninstanz welche mit der Testinstanz übereinstimmt. Dies ist nur bei Klassenkomponenten verfügbar, da Funktionskomponenten keine Instanzen besitzen. Der Wert von `this` stimmt mit dem der mitgegebenen Komponente überein.

### `testInstance.type` {#testinstancetype}

```javascript
testInstance.type
```

The component type corresponding to this test instance. For example, a `<Button />` component has a type of `Button`.
Der Komponententyp welcher mit der Testinstanz übereinstimmt. Eine `<Button />` Komponente hat zum Beispiel den Typ `Button`.

### `testInstance.props` {#testinstanceprops}

```javascript
testInstance.props
```

The props corresponding to this test instance. For example, a `<Button size="small" />` component has `{size: 'small'}` as props.
Die Props welche mit der Testinstanz übereinstimmen. Eine `<Button size="small" />` Komponente besitzt zum Beispiel folgende Props `{size: 'small'}`.

### `testInstance.parent` {#testinstanceparent}

```javascript
testInstance.parent
```

The parent test instance of this test instance.
Die Eltern-Testinstanz dieser Testinstanz.

### `testInstance.children` {#testinstancechildren}

```javascript
testInstance.children
```

The children test instances of this test instance.
Die Kind-Testinstanzen dieser Testinstanz.

## Ideas {#ideas}

You can pass `createNodeMock` function to `TestRenderer.create` as the option, which allows for custom mock refs.
`createNodeMock` accepts the current element and should return a mock ref object.
This is useful when you test a component that relies on refs.
Du kannst die `createNodeMock`-Funktion `TestRenderer.create` als Option mitgeben, welche speziell geschriebene Pseudoreferenzen (*custom mock refs*) ermöglicht. `createNodeMock` akzeptiert das aktuelle Element und sollte ein Pseudoreferenz-Objekt zurückgeben. Dies ist für das Testen von Komponenten nützlich, die von Referenzen abhängen.

```javascript
import TestRenderer from 'react-test-renderer';
Expand All @@ -268,7 +261,7 @@ TestRenderer.create(
{
createNodeMock: (element) => {
if (element.type === 'input') {
// mock a focus function
// erstellt eine pseudo Fokusfunktion
return {
focus: () => {
focused = true;
Expand Down