-
Notifications
You must be signed in to change notification settings - Fork 181
Translate reference-test-renderer #11
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
Changes from 3 commits
eda81db
e8fd43a
b10e237
fd8e369
291bb4c
5070397
c2ff638
540438d
bd7caf1
e1a390c
af30978
b2676a3
ba89695
73d71f2
e6f662e
1426fa1
ba52068
b718a3b
becc808
692ad0e
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,20 +6,20 @@ layout: docs | |
category: Reference | ||
--- | ||
|
||
**Importing** | ||
**インポート** | ||
|
||
```javascript | ||
import TestRenderer from 'react-test-renderer'; // ES6 | ||
const TestRenderer = require('react-test-renderer'); // ES5 with npm | ||
``` | ||
|
||
## 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. | ||
このパッケージは、DOM やネイティブのモバイル環境に依存せずに React コンポーネントをピュアな JavaScript オブジェクトにレンダーすることができる React レンダラを提供します。 | ||
|
||
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). | ||
本質的にこのパッケージは、ブラウザや [jsdom](https://github.com/tmpvar/jsdom) を利用しなくても、React DOM や React Native コンポーネントがレンダーする(DOM ツリーに似た)ビューの階層構造のスナップショットを容易に取得できるようにするためのものです。 | ||
|
||
Example: | ||
例: | ||
|
||
```javascript | ||
import TestRenderer from 'react-test-renderer'; | ||
|
@@ -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](http://facebook.github.io/jest/blog/2016/07/27/jest-14.html). | ||
JSON ツリーを自動的にファイルに保存し、変更が起こったかをテストで確認するには、Jest のスナップショットテスト機能が利用できます。[詳細について知る](http://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. | ||
出力を走査して特定のノードを検索し、それらに対してアサーションを行うこともできます。 | ||
|
||
```javascript | ||
import TestRenderer from 'react-test-renderer'; | ||
|
@@ -94,157 +94,155 @@ expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']); | |
* [`testInstance.parent`](#testinstanceparent) | ||
* [`testInstance.children`](#testinstancechildren) | ||
|
||
## Reference | ||
## リファレンス | ||
|
||
### `TestRenderer.create()` | ||
|
||
```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. | ||
渡された React 要素から `TestRenderer` のインスタンスを作成します。実際の DOM は使用しませんが、コンポーネントを完全な形でメモリにレンダーするので、アサーションを行うことができます。返されたインスタンスは、次のメソッドとプロパティを持ちます。 | ||
|
||
### `testRenderer.toJSON()` | ||
|
||
```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](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest). | ||
レンダーされたツリーを表すオブジェクトを返します。このツリーは `<div>` もしくは `<View>` のようなプラットフォーム固有のノードとそのプロパティを含みますが、ユーザー定義のコンポーネントは含まれません。[スナップショットテスト](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest)に便利です。 | ||
|
||
### `testRenderer.toTree()` | ||
|
||
```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. | ||
レンダリングされたツリーを表すオブジェクトを返します。`toJSON()` とは異なり、結果はより詳細なものであり、ユーザー定義のコンポーネントも含んでいます。テストレンダラを利用して自作のアサーションライブラリを作成している場合以外は、恐らくこのメソッドが必要となることはないでしょう。 | ||
queq1890 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
### `testRenderer.update()` | ||
|
||
```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. | ||
メモリ上のツリーを新規のルート要素で再レンダーします。ルートでの React の更新をシミュレートします。新しい要素が以前の要素と同じ型と key を持つ場合は、ツリーは更新されます。それ以外の場合は新しいツリーを再マウントします。 | ||
|
||
### `testRenderer.unmount()` | ||
|
||
```javascript | ||
testRenderer.unmount() | ||
``` | ||
|
||
Unmount the in-memory tree, triggering the appropriate lifecycle events. | ||
メモリ上のツリーをアンマウントし、適切なライフサイクルイベントを発生させます。 | ||
|
||
### `testRenderer.getInstance()` | ||
|
||
```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. | ||
存在する場合、ルート要素と対応したインスタンスを返します。関数コンポーネントはインスタンスを持たないため、ルート要素が関数コンポーネントの場合、このメソッドはうまく動作しません。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 「可能な場合」の方が条件が曖昧になる気がします。「ルート要素に対応したインスタンスがある場合はそれを返します」でもよいと思います There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 「可能な場合」の訳でも「存在する場合」の訳でも、読み手からすると具体的にどんな場合なのかを想像しにくいかもしれませんね。 条件の説明と、何を返すかの説明がはっきりしている「ルート要素に対応したインスタンスがある場合はそれを返します」が良いと思うのですが、いかがでしょうか? |
||
|
||
### `testRenderer.root` | ||
|
||
```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. | ||
ツリー上の特定のノードに対してアサーションを行う際に役立つ、ルート「テストインスタンス」を返します。これは、配下の他の「テストインスタンス」を検索する際に使用することができます。 | ||
|
||
### `testInstance.find()` | ||
|
||
```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. | ||
`test(testInstance)` が `true` を返す単一の子テストインスタンスを検索します。もし `test(testInstance)` に対して `true` を返すテストインスタンスの数がちょうど 1 でない場合は、エラーがスローされます。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. − IMO: 「エラーがスローされます」より「エラーが発生します」の方が分かりやすいと思います。ただ、日本語的には後者なんですが、エンジニアなら前者のほうが直感的かも知れないです。他の人の意見が欲しいです。 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. これはもうスローでいいと思います、「エラーが発生」だと原文にある情報が失われてしまうと思います There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ここは原文の |
||
|
||
### `testInstance.findByType()` | ||
|
||
```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. | ||
与えられた `type` を持つ単一の子テストインスタンスを検索します。もし与えられた `type` を持つテストインスタンスの数がちょうど 1 でない場合、エラーがスローされます。 | ||
|
||
### `testInstance.findByProps()` | ||
|
||
```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. | ||
与えられた `props` を持つ単一の子テストインスタンスを検索します。もし与えられた `props` を持つテストインスタンスの数がちょうど 1 でない場合、エラーがスローされます。 | ||
|
||
### `testInstance.findAll()` | ||
|
||
```javascript | ||
testInstance.findAll(test) | ||
``` | ||
|
||
Find all descendant test instances for which `test(testInstance)` returns `true`. | ||
`test(testInstance)` が `true` を返す全ての子テストインスタンスを検索します。 | ||
|
||
### `testInstance.findAllByType()` | ||
|
||
```javascript | ||
testInstance.findAllByType(type) | ||
``` | ||
|
||
Find all descendant test instances with the provided `type`. | ||
与えられた `type` を持つ全ての子テストインスタンスを検索します。 | ||
|
||
### `testInstance.findAllByProps()` | ||
|
||
```javascript | ||
testInstance.findAllByProps(props) | ||
``` | ||
|
||
Find all descendant test instances with the provided `props`. | ||
与えられた `props` を持つ全ての子テストインスタンスを検索します。 | ||
|
||
### `testInstance.instance` | ||
|
||
```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. | ||
当該テストインスタンスに対応するコンポーネントのインスタンスです。関数コンポーネントはインスタンスを持たないため、クラスコンポーネントでのみ使用することができます。与えられたコンポーネント内での `this` の値と一致します。 | ||
|
||
### `testInstance.type` | ||
|
||
```javascript | ||
testInstance.type | ||
``` | ||
|
||
The component type corresponding to this test instance. For example, a `<Button />` component has a type of `Button`. | ||
当該テストインスタンスに対応するコンポーネントの型です。例えば、`<Button />` コンポーネントは `Button` 型を持っています。 | ||
|
||
### `testInstance.props` | ||
|
||
```javascript | ||
testInstance.props | ||
``` | ||
|
||
The props corresponding to this test instance. For example, a `<Button size="small" />` component has `{size: 'small'}` as props. | ||
当該テストインスタンスに対応するコンポーネントの props です。例えば、`<Button size="small" />` コンポーネントは `{size: 'small'}` を props として持っています。 | ||
|
||
### `testInstance.parent` | ||
|
||
```javascript | ||
testInstance.parent | ||
``` | ||
|
||
The parent test instance of this test instance. | ||
当該テストインスタンスの親テストインスタンスです。 | ||
|
||
### `testInstance.children` | ||
|
||
```javascript | ||
testInstance.children | ||
``` | ||
|
||
The children test instances of this test instance. | ||
当該テストインスタンスの子テストインスタンスです。 | ||
|
||
## Ideas | ||
## 使い方のアイデア | ||
queq1890 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
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. | ||
オプションとして、`createNodeMock` 関数を `TestRenderer.create` に渡すことで、独自のモック refs を作成することができます。`createNodeMock` は現在の要素を受け取り、モックの ref オブジェクトを返す必要があります。refs に依存したコンポーネントのテストに便利です。 | ||
queq1890 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
```javascript | ||
import TestRenderer from 'react-test-renderer'; | ||
|
Uh oh!
There was an error while loading. Please reload this page.