Skip to content

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

Merged
merged 20 commits into from
Feb 2, 2019
Merged
Show file tree
Hide file tree
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
12 changes: 8 additions & 4 deletions TRANSLATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,21 @@

## 環境のセットアップ

README.md にある通りですが、さらなる簡略版は以下の通りです。

1. Git, Node, Yarn をそれぞれ準備して ja.reactjs.org (のフォーク)をクローン
2. `yarn` をして依存物をインストール(`yarn.lock` が更新された場合は適宜これをくり返す)
3. `npm run dev` でローカルウェブサーバーが立ち上がるのを確認
2. `yarn` で依存物をインストール(`yarn.lock` が更新された場合は適宜これをくり返す)
3. `yarn dev` でローカルウェブサーバーが立ち上がるのを確認
4. `content` の中身の Markdown ファイルをテキストエディタで編集
5. ブラウザで確認

## 作業の重複を防ぐための宣言

当面は https://github.com/reactjs/ja.reactjs.org/issues/4 を参照しつつ作業を行ってください
当面は https://github.com/reactjs/ja.reactjs.org/issues/4 を参照しつつ、他の人と被らないように配慮しながら作業を行ってください

## スタイルの自動チェック

`npm run text:lint` で、基本的な文法(全角英数を使わない、句読点の統一)チェックが走ります。
`yarn lint:text` で、基本的な文法(全角英数を使わない、句読点の統一)チェックが走ります。
コミット・PR作成の前にはエラーが出ないようにしてください。

## 全般的なこと
Expand All @@ -38,6 +41,7 @@
- 英文から飛躍した意訳や表現の追加・改変を行わない。一方で分かりづらくなるような逐語訳もしない。
- ひとまず、リンク先の URL は変えない。(MDN などについては後でまとめて日本語版へのリンクに置換するかもしれませんが、まとめてやる方が間違いも少ないと思われるので、気にしないでいいです)
- `#` で始まる見出しを翻訳すると現時点では自動生成されるアンカー (`<a id="#...">`) が変わってしまい、ページ内の見出しへのリンクが壊れてしまうが、これもひとまず気にしないでおく。(これについては [こちら](https://github.com/reactjs/reactjs.org/issues/1608) で検討中です)
- 和文に対する `*強調*`(`<em>強調</em>` に変換される)がうまく表示されない(日本語フォントに斜体が適用されないため)が、ひとまず原文通りに強調を残す形で翻訳する。(恐らく CSS を弄って解決できるはず)
- ごく一般的な日本語表記に関して困ったら概ね公用文作成の要領などに準ずるが、カタカナ語の末尾の長音符については JIS Z 8301 の推奨に従う。そこまで目くじらを立てなくてよいが、基本は要するに以下の通り。
- 3音以上の場合のみ、片仮名語の末尾の長音符を原則省略。「エコー」「マナー」「ハンドラ」「プロパティ」
- ただし「レンダー」だけは例外で、常に「レンダー」と伸ばす。
Expand Down
16 changes: 8 additions & 8 deletions content/docs/cdn-links.md
Original file line number Diff line number Diff line change
@@ -1,37 +1,37 @@
---
id: cdn-links
title: CDN Links
title: CDN リンク
permalink: docs/cdn-links.html
prev: create-a-new-react-app.html
next: hello-world.html
---

Both React and ReactDOM are available over a CDN.
React および ReactDOM CDN を介して利用することができます。

```html
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
```

The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at:
上記のバージョンは開発のためだけのものであり、本番環境には適していません。圧縮・最適化された本番バージョンの React は下記のリンクから利用できます。

```html
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
```

To load a specific version of `react` and `react-dom`, replace `16` with the version number.
特定のバージョンの `react` `react-dom` をロードする場合は、`16` の部分をバージョン番号で置き換えてください。

### Why the `crossorigin` Attribute?
### なぜ `crossorigin` 属性が必要なのか?

If you serve React from a CDN, we recommend to keep the [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) attribute set:
CDN を使って React の機能を提供する場合、[`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) 属性を設定することをお勧めします。

```html
<script crossorigin src="..."></script>
```

We also recommend to verify that the CDN you are using sets the `Access-Control-Allow-Origin: *` HTTP header:
利用している CDN `Access-Control-Allow-Origin: *` という HTTP ヘッダを設定していることを確認することもお勧めします。

![Access-Control-Allow-Origin: *](../images/docs/cdn-cors-header.png)

This enables a better [error handling experience](/blog/2017/07/26/error-handling-in-react-16.html) in React 16 and later.
これにより React 16 以降でより優れた[エラーハンドリング](/blog/2017/07/26/error-handling-in-react-16.html)を利用できます。
10 changes: 5 additions & 5 deletions content/docs/reference-javascript-environment-requirements.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
id: javascript-environment-requirements
title: JavaScript Environment Requirements
title: JavaScript 環境の要件
layout: docs
category: Reference
permalink: docs/javascript-environment-requirements.html
---

React 16 depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). If you support older browsers and devices which may not yet provide these natively (e.g. IE &lt; 11) or which have non-compliant implementations (e.g. IE 11), consider including a global polyfill in your bundled application, such as [core-js](https://github.com/zloirock/core-js) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/).
React 16 はコレクション型 [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) および [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) に依存しています。これらの機能をネイティブに提供しない(IE 11 未満など)、または標準非準拠な挙動をする(IE 11 など)古いブラウザやデバイスをサポートする場合は、[core-js](https://github.com/zloirock/core-js) [babel-polyfill](https://babeljs.io/docs/en/babel-polyfill/) などのような、グローバル環境のポリフィルをバンドルしたアプリケーションに含めることを検討してください。

A polyfilled environment for React 16 using core-js to support older browsers might look like:
古いブラウザをサポートするため、core-js を利用してポリフィルを含めた React 16 向けの環境は次のようになります。

```js
import 'core-js/es6/map';
Expand All @@ -23,8 +23,8 @@ ReactDOM.render(
);
```

React also depends on `requestAnimationFrame` (even in test environments).
You can use the [raf](https://www.npmjs.com/package/raf) package to shim `requestAnimationFrame`:
React は(テスト環境であっても)`requestAnimationFrame` に依存します。
`requestAnimationFrame` の役割を補うため [raf](https://www.npmjs.com/package/raf) を使用します。

```js
import 'raf/polyfill';
Expand Down
58 changes: 28 additions & 30 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**
**インポート**

```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';
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](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';
Expand Down Expand Up @@ -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()` とは異なり、このツリーはより詳細なものであり、ユーザー定義のコンポーネントも含んでいます。テストレンダラを利用して自作のアサーションライブラリを作成している場合以外は、恐らくこのメソッドが必要となることはないでしょう。

### `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.
ルート要素に対応したインスタンスがある場合はそれを返します。関数コンポーネントはインスタンスを持たないため、ルート要素が関数コンポーネントの場合、このメソッドはうまく動作しません。

### `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 でない場合は、エラーがスローされます。
Copy link
Contributor

Choose a reason for hiding this comment

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

− IMO: 「エラーがスローされます」より「エラーが発生します」の方が分かりやすいと思います。ただ、日本語的には後者なんですが、エンジニアなら前者のほうが直感的かも知れないです。他の人の意見が欲しいです。

Copy link
Member

Choose a reason for hiding this comment

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

これはもうスローでいいと思います、「エラーが発生」だと原文にある情報が失われてしまうと思います

Copy link
Contributor Author

@queq1890 queq1890 Feb 2, 2019

Choose a reason for hiding this comment

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

ここは原文の throw an error を残すためにスローのままキープさせていただきます 👍


### `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
## 使い方の一例

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 に依存したコンポーネントのテストに便利です。

```javascript
import TestRenderer from 'react-test-renderer';
Expand Down