From 2645649231dde91fa9d8267866a553defbd5de68 Mon Sep 17 00:00:00 2001 From: takanorip Date: Sun, 3 Feb 2019 22:23:52 +0900 Subject: [PATCH 01/15] add translation --- content/docs/addons-test-utils.md | 86 ++++++++++++++++++------------- 1 file changed, 50 insertions(+), 36 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index c7ef5c023..1a7c9c70a 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -1,27 +1,34 @@ --- id: test-utils -title: Test Utilities +title: テストユーティリティ permalink: docs/test-utils.html layout: docs -category: Reference +category: リファレンス --- -**Importing** +**インポート** ```javascript import ReactTestUtils from 'react-dom/test-utils'; // ES6 var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm ``` -## Overview +## 概要 `ReactTestUtils` makes it easy to test React components in the testing framework of your choice. At Facebook we use [Jest](https://facebook.github.io/jest/) for painless JavaScript testing. Learn how to get started with Jest through the Jest website's [React Tutorial](http://facebook.github.io/jest/docs/en/tutorial-react.html#content). -> Note: +`ReactTestUtils` はお好みのテストフレームワークで React コンポーネントをテストしやすくするものです。 +Facebook では快適に JavaScript をテストするために [Jest](https://facebook.github.io/jest/) を使用しています。 +Jest のウェブサイトにある [React Tutorial](http://facebook.github.io/jest/docs/en/tutorial-react.html#content) を通して Jest の始め方を学んでください。 + +> 補足: > -> Airbnb has released a testing utility called Enzyme, which makes it easy to assert, manipulate, and traverse your React Components' output. If you're deciding on a unit testing utility to use together with Jest, or any other test runner, it's worth checking out: [http://airbnb.io/enzyme/](http://airbnb.io/enzyme/) +> Airbnb が Enzyme と呼ばれるテストユーティリティをリリースしています。 Enzymeは React コンポーネントの出力のアサート、操作、そして横断的な処理をしやすくしてくれます。 +もしあなたが Jest や他のテストランナーを単体テストユーティリティと一緒に使用すると決めたなら、チェックしてみる価値があります: [http://airbnb.io/enzyme/](http://airbnb.io/enzyme/) > -> Alternatively, there is another testing utility called react-testing-library designed to enable and encourage writing tests that use your components as the end users use them. It also works with any test runner: [https://git.io/react-testing-library](https://git.io/react-testing-library) +> またその代替手段として、 `react-testing-library` と呼ばれる別のテストユーティリティがあります。 +これは、エンドユーザーがコンポーネントを使用するのと同様の書き方でコンポーネントを使用するテストを書くことを可能にし、かつそれを促進するように設計されています。 +このテストユーティリティはあらゆるテストランナーと一緒に動作します: [https://git.io/react-testing-library](https://git.io/react-testing-library) - [`Simulate`](#simulate) - [`renderIntoDocument()`](#renderintodocument) @@ -39,18 +46,22 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm - [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) - [`findRenderedComponentWithType()`](#findrenderedcomponentwithtype) -## Reference +## リファレンス ## Shallow Rendering When writing unit tests for React, shallow rendering can be helpful. Shallow rendering lets you render a component "one level deep" and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered. This does not require a DOM. -> Note: +Reactの単体テストを書くときには、 shallow rendering が役に立ちます。 +shallow rendering によって、インスタンス化またはレンダリングされていない子コンポーネントの動作を気にすることなく、コンポーネントを "1 階層深く" レンダリングしてその render メソッドが返す結果をアサートできます。 +これは DOM を必要としません。 + +> 補足: > -> The shallow renderer has moved to `react-test-renderer/shallow`.
-> [Learn more about shallow rendering on its reference page.](/docs/shallow-renderer.html) +> shallow renderer は `react-test-renderer/shallow` に移動されました
+> [シャローレンダリングの詳細についてはリファレンスページを参照してください。](/docs/shallow-renderer.html) -## Other Utilities +## その他のユーティリティ ### `Simulate` @@ -61,11 +72,11 @@ Simulate.{eventName}( ) ``` -Simulate an event dispatch on a DOM node with optional `eventData` event data. +省略可能な `eventData` イベントデータを使って DOM ノード上のイベントディスパッチをシミュレートします。 -`Simulate` has a method for [every event that React understands](/docs/events.html#supported-events). +`Simulate` は [React が理解している全てのイベント](/docs/events.html#supported-events)それぞれに対応するメソッドを持っています。 -**Clicking an element** +**要素をクリックする** ```javascript // @@ -73,7 +84,7 @@ const node = this.button; ReactTestUtils.Simulate.click(node); ``` -**Changing the value of an input field and then pressing ENTER.** +**入力フィールドの値を変更して ENTER キーを押す** ```javascript // this.textInput = node} /> @@ -83,9 +94,9 @@ ReactTestUtils.Simulate.change(node); ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13}); ``` -> Note +> 補足 > -> You will have to provide any event property that you're using in your component (e.g. keyCode, which, etc...) as React is not creating any of these for you. +> React はコンポーネントで使用しているイベントプロパティ(例えば keyCode 、 which など)を何も作成しないため、あなたはそれらをコンポーネントに与える必要があります。 * * * @@ -95,11 +106,12 @@ ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13}); renderIntoDocument(element) ``` -Render a React element into a detached DOM node in the document. **This function requires a DOM.** +React 要素をドキュメント内の独立したDOMノードにレンダリングします。**この関数を実行するには DOM が必要です。** -> Note: +> 補足: > -> You will need to have `window`, `window.document` and `window.document.createElement` globally available **before** you import `React`. Otherwise React will think it can't access the DOM and methods like `setState` won't work. +> React をインポートする**前**に `window`, `window.document` および `window.document.createElement` をグローバルスコープに持っている必要があります。 +そうでなければ React は DOM にアクセスできないものと判断し `setState` のようなメソッドが動作しなくなります。 * * * @@ -112,11 +124,12 @@ mockComponent( ) ``` -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 `
` (or other tag if `mockTagName` is provided) containing any provided children. +モック化されたコンポーネントモジュールをこのメソッドに渡すことで、ダミーの React コンポーネントとして使用できるようになる便利なメソッドを追加することができます。 +通常のレンダリングの代わりに、コンポーネントは、与えられた子要素を含んだシンプルな `
`(もしくは `mockTagName` が与えられていれば他のタグ)になります。 -> Note: +> 補足: > -> `mockComponent()` is a legacy API. We recommend using [shallow rendering](/docs/test-utils.html#shallow-rendering) or [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) instead. +> `mockComponent()` はレガシーな API です。その代わりとして [shallow rendering](/docs/test-utils.html#shallow-rendering) や [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) の使用をおすすめします。 * * * @@ -126,7 +139,7 @@ Pass a mocked component module to this method to augment it with useful methods isElement(element) ``` -Returns `true` if `element` is any React element. +`element` が任意の React 要素である場合 `true` を返します。 * * * @@ -139,7 +152,7 @@ isElementOfType( ) ``` -Returns `true` if `element` is a React element whose type is of a React `componentClass`. +`element` が `componentClass` 型の React 要素である場合 `true` を返します。 * * * @@ -150,6 +163,7 @@ isDOMComponent(instance) ``` Returns `true` if `instance` is a DOM component (such as a `
` or ``). +`instance` が DOM コンポーネント( `
` や `` など)である場合 `true` を返します。 * * * @@ -159,7 +173,7 @@ Returns `true` if `instance` is a DOM component (such as a `
` or ``). isCompositeComponent(instance) ``` -Returns `true` if `instance` is a user-defined component, such as a class or a function. +`instance` がクラスや関数のようなユーザ定義のコンポーネントである場合 `true` を返します。 * * * @@ -172,7 +186,7 @@ isCompositeComponentWithType( ) ``` -Returns `true` if `instance` is a component whose type is of a React `componentClass`. +`instance` がReactの `componentClass` 型のコンポーネントである場合 `true` を返します。 * * * @@ -185,7 +199,8 @@ findAllInRenderedTree( ) ``` -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. +`tree` 中のすべてのコンポーネントを横断して `test(component)` が `true` である全てのコンポーネントを集め、その結果を返します。 +このメソッド自身はそれほど有用ではありませんが、他のテストユーティリティのための基本メソッドとして使用されます。 * * * @@ -198,7 +213,7 @@ scryRenderedDOMComponentsWithClass( ) ``` -Finds all DOM elements of components in the rendered tree that are DOM components with the class name matching `className`. +レンダリングされたツリー内に存在する、クラス名が `className` に一致するDOMコンポーネントが持つ全てのDOM要素を探し、その結果を返します。。 * * * @@ -211,7 +226,7 @@ findRenderedDOMComponentWithClass( ) ``` -Like [`scryRenderedDOMComponentsWithClass()`](#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. +[`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass) と同様のメソッドですが、このメソッドは結果が1つだけであることを期待しており、その1つの結果を返すか、一致するものが1つでなかった場合には例外を返します。 * * * @@ -224,7 +239,7 @@ scryRenderedDOMComponentsWithTag( ) ``` -Finds all DOM elements of components in the rendered tree that are DOM components with the tag name matching `tagName`. +レンダリングされたツリー内に存在する、タグ名が `tagName` に一致するDOMコンポーネントが持つ全てのDOM要素を探し、その結果を返します。 * * * @@ -237,7 +252,7 @@ findRenderedDOMComponentWithTag( ) ``` -Like [`scryRenderedDOMComponentsWithTag()`](#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. +[`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag) と同様のメソッドですが、このメソッドは結果が1つだけであることを期待しており、その1つの結果を返すか、一致するものが1つでなかった場合には例外を返します。 * * * @@ -250,7 +265,7 @@ scryRenderedComponentsWithType( ) ``` -Finds all instances of components with type equal to `componentClass`. +型が `componentClass` と同じコンポーネントのインスタンスを全て探し、その結果を返します。 * * * @@ -263,7 +278,6 @@ findRenderedComponentWithType( ) ``` -Same as [`scryRenderedComponentsWithType()`](#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. +[`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) と同様のメソッドですが、このメソッドは結果が1つだけであることを期待しており、その1つの結果を返すか、一致するものが1つでなかった場合には例外を返します。 * * * - From b50f4d1c11b564c9ddf4e3281e9c2a81f51ddea7 Mon Sep 17 00:00:00 2001 From: takanorip Date: Sun, 3 Feb 2019 23:38:00 +0900 Subject: [PATCH 02/15] fix lint --- content/docs/addons-test-utils.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 1a7c9c70a..ca97a5ed4 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -162,8 +162,7 @@ isElementOfType( isDOMComponent(instance) ``` -Returns `true` if `instance` is a DOM component (such as a `
` or ``). -`instance` が DOM コンポーネント( `
` や `` など)である場合 `true` を返します。 +`instance` が DOM コンポーネント(`
` や `` など)である場合 `true` を返します。 * * * From d59fc27a790e7502ea1a6bb7082198c8d389a2d4 Mon Sep 17 00:00:00 2001 From: takanorip Date: Mon, 4 Feb 2019 13:41:46 +0900 Subject: [PATCH 03/15] Update translation --- content/docs/addons-test-utils.md | 26 +++++++++++--------------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index ca97a5ed4..fe5d5936a 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -15,8 +15,6 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm ## 概要 -`ReactTestUtils` makes it easy to test React components in the testing framework of your choice. At Facebook we use [Jest](https://facebook.github.io/jest/) for painless JavaScript testing. Learn how to get started with Jest through the Jest website's [React Tutorial](http://facebook.github.io/jest/docs/en/tutorial-react.html#content). - `ReactTestUtils` はお好みのテストフレームワークで React コンポーネントをテストしやすくするものです。 Facebook では快適に JavaScript をテストするために [Jest](https://facebook.github.io/jest/) を使用しています。 Jest のウェブサイトにある [React Tutorial](http://facebook.github.io/jest/docs/en/tutorial-react.html#content) を通して Jest の始め方を学んでください。 @@ -26,7 +24,7 @@ Jest のウェブサイトにある [React Tutorial](http://facebook.github.io/j > Airbnb が Enzyme と呼ばれるテストユーティリティをリリースしています。 Enzymeは React コンポーネントの出力のアサート、操作、そして横断的な処理をしやすくしてくれます。 もしあなたが Jest や他のテストランナーを単体テストユーティリティと一緒に使用すると決めたなら、チェックしてみる価値があります: [http://airbnb.io/enzyme/](http://airbnb.io/enzyme/) > -> またその代替手段として、 `react-testing-library` と呼ばれる別のテストユーティリティがあります。 +> また別の手段として、 `react-testing-library` と呼ばれる別のテストユーティリティがあります。 これは、エンドユーザーがコンポーネントを使用するのと同様の書き方でコンポーネントを使用するテストを書くことを可能にし、かつそれを促進するように設計されています。 このテストユーティリティはあらゆるテストランナーと一緒に動作します: [https://git.io/react-testing-library](https://git.io/react-testing-library) @@ -50,16 +48,14 @@ Jest のウェブサイトにある [React Tutorial](http://facebook.github.io/j ## Shallow Rendering -When writing unit tests for React, shallow rendering can be helpful. Shallow rendering lets you render a component "one level deep" and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered. This does not require a DOM. - Reactの単体テストを書くときには、 shallow rendering が役に立ちます。 -shallow rendering によって、インスタンス化またはレンダリングされていない子コンポーネントの動作を気にすることなく、コンポーネントを "1 階層深く" レンダリングしてその render メソッドが返す結果をアサートできます。 +shallow rendering によって、インスタンス化またはレンダーされていない子コンポーネントの動作を気にすることなく、コンポーネントを "1 階層深く" レンダーしてその render メソッドが返す結果をアサートできます。 これは DOM を必要としません。 > 補足: > -> shallow renderer は `react-test-renderer/shallow` に移動されました
-> [シャローレンダリングの詳細についてはリファレンスページを参照してください。](/docs/shallow-renderer.html) +> shallow renderer は `react-test-renderer/shallow` に移動されました。
+> [shallow rendererの詳細についてはリファレンスページを参照してください。](/docs/shallow-renderer.html) ## その他のユーティリティ @@ -106,7 +102,7 @@ ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13}); renderIntoDocument(element) ``` -React 要素をドキュメント内の独立したDOMノードにレンダリングします。**この関数を実行するには DOM が必要です。** +React 要素をドキュメント内の独立したDOMノードにレンダーします。**この関数を実行するには DOM が必要です。** > 補足: > @@ -125,7 +121,7 @@ mockComponent( ``` モック化されたコンポーネントモジュールをこのメソッドに渡すことで、ダミーの React コンポーネントとして使用できるようになる便利なメソッドを追加することができます。 -通常のレンダリングの代わりに、コンポーネントは、与えられた子要素を含んだシンプルな `
`(もしくは `mockTagName` が与えられていれば他のタグ)になります。 +通常のレンダーの代わりに、コンポーネントは、与えられた子要素を含んだシンプルな `
`(もしくは `mockTagName` が与えられていれば他のタグ)になります。 > 補足: > @@ -185,7 +181,7 @@ isCompositeComponentWithType( ) ``` -`instance` がReactの `componentClass` 型のコンポーネントである場合 `true` を返します。 +`instance` が React の `componentClass` 型のコンポーネントである場合 `true` を返します。 * * * @@ -212,7 +208,7 @@ scryRenderedDOMComponentsWithClass( ) ``` -レンダリングされたツリー内に存在する、クラス名が `className` に一致するDOMコンポーネントが持つ全てのDOM要素を探し、その結果を返します。。 +レンダーされたツリー内に存在する、クラス名が `className` に一致する DOM コンポーネントが持つ全ての DOM 要素を探し、その結果を返します。 * * * @@ -225,7 +221,7 @@ findRenderedDOMComponentWithClass( ) ``` -[`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass) と同様のメソッドですが、このメソッドは結果が1つだけであることを期待しており、その1つの結果を返すか、一致するものが1つでなかった場合には例外を返します。 +[`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass) と同様のメソッドですが、このメソッドは結果が 1 つだけであることを期待しており、その 1 つの結果を返すか、一致するものが 1 つでなかった場合には例外を返します。 * * * @@ -251,7 +247,7 @@ findRenderedDOMComponentWithTag( ) ``` -[`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag) と同様のメソッドですが、このメソッドは結果が1つだけであることを期待しており、その1つの結果を返すか、一致するものが1つでなかった場合には例外を返します。 +[`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag) と同様のメソッドですが、このメソッドは結果が 1 つだけであることを期待しており、その 1 つの結果を返すか、一致するものが 1 つでなかった場合には例外を返します。 * * * @@ -277,6 +273,6 @@ findRenderedComponentWithType( ) ``` -[`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) と同様のメソッドですが、このメソッドは結果が1つだけであることを期待しており、その1つの結果を返すか、一致するものが1つでなかった場合には例外を返します。 +[`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) と同様のメソッドですが、このメソッドは結果が 1 つだけであることを期待しており、その 1 つの結果を返すか、一致するものが 1 つでなかった場合には例外を返します。 * * * From c36f0f8ab8afa7b944bbb9f7d29065c91baf2486 Mon Sep 17 00:00:00 2001 From: takanorip Date: Mon, 4 Feb 2019 17:29:01 +0900 Subject: [PATCH 04/15] Update addons-test-utils.md --- content/docs/addons-test-utils.md | 26 ++++++++------------------ 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index fe5d5936a..d8b7d5edb 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -15,18 +15,13 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm ## 概要 -`ReactTestUtils` はお好みのテストフレームワークで React コンポーネントをテストしやすくするものです。 -Facebook では快適に JavaScript をテストするために [Jest](https://facebook.github.io/jest/) を使用しています。 -Jest のウェブサイトにある [React Tutorial](http://facebook.github.io/jest/docs/en/tutorial-react.html#content) を通して Jest の始め方を学んでください。 +`ReactTestUtils` はお好みのテストフレームワークで React コンポーネントをテストしやすくするものです。Facebook では快適に JavaScript をテストするために [Jest](https://facebook.github.io/jest/) を使用しています。Jest のウェブサイトにある [React Tutorial](http://facebook.github.io/jest/docs/en/tutorial-react.html#content) を通して Jest の始め方を学んでください。 > 補足: > -> Airbnb が Enzyme と呼ばれるテストユーティリティをリリースしています。 Enzymeは React コンポーネントの出力のアサート、操作、そして横断的な処理をしやすくしてくれます。 -もしあなたが Jest や他のテストランナーを単体テストユーティリティと一緒に使用すると決めたなら、チェックしてみる価値があります: [http://airbnb.io/enzyme/](http://airbnb.io/enzyme/) +> Airbnb が Enzyme と呼ばれるテストユーティリティをリリースしています。 Enzymeは React コンポーネントの出力のアサート、操作、そして横断的な処理をしやすくしてくれます。もしあなたが Jest や他のテストランナーを単体テストユーティリティと一緒に使用すると決めたなら、チェックしてみる価値があります: [http://airbnb.io/enzyme/](http://airbnb.io/enzyme/) > -> また別の手段として、 `react-testing-library` と呼ばれる別のテストユーティリティがあります。 -これは、エンドユーザーがコンポーネントを使用するのと同様の書き方でコンポーネントを使用するテストを書くことを可能にし、かつそれを促進するように設計されています。 -このテストユーティリティはあらゆるテストランナーと一緒に動作します: [https://git.io/react-testing-library](https://git.io/react-testing-library) +> また別の手段として、 `react-testing-library` と呼ばれる別のテストユーティリティがあります。これは、エンドユーザーがコンポーネントを使用するのと同様の書き方でコンポーネントを使用するテストを書くことを可能にし、かつそれを促進するように設計されています。このテストユーティリティはあらゆるテストランナーと一緒に動作します: [https://git.io/react-testing-library](https://git.io/react-testing-library) - [`Simulate`](#simulate) - [`renderIntoDocument()`](#renderintodocument) @@ -48,13 +43,11 @@ Jest のウェブサイトにある [React Tutorial](http://facebook.github.io/j ## Shallow Rendering -Reactの単体テストを書くときには、 shallow rendering が役に立ちます。 -shallow rendering によって、インスタンス化またはレンダーされていない子コンポーネントの動作を気にすることなく、コンポーネントを "1 階層深く" レンダーしてその render メソッドが返す結果をアサートできます。 -これは DOM を必要としません。 +Reactの単体テストを書くときには、 shallow rendering が役に立ちます。 shallow rendering によって、インスタンス化またはレンダーされていない子コンポーネントの動作を気にすることなく、コンポーネントを "1 階層深く" レンダーしてその render メソッドが返す結果をアサートできます。これは DOM を必要としません。 > 補足: > -> shallow renderer は `react-test-renderer/shallow` に移動されました。
+> shallow renderer は `react-test-renderer/shallow` に移動しました。
> [shallow rendererの詳細についてはリファレンスページを参照してください。](/docs/shallow-renderer.html) ## その他のユーティリティ @@ -106,8 +99,7 @@ React 要素をドキュメント内の独立したDOMノードにレンダー > 補足: > -> React をインポートする**前**に `window`, `window.document` および `window.document.createElement` をグローバルスコープに持っている必要があります。 -そうでなければ React は DOM にアクセスできないものと判断し `setState` のようなメソッドが動作しなくなります。 +> React をインポートする**前**に `window`, `window.document` および `window.document.createElement` をグローバルスコープに持っている必要があります。そうでなければ React は DOM にアクセスできないものと判断し `setState` のようなメソッドが動作しなくなります。 * * * @@ -120,8 +112,7 @@ mockComponent( ) ``` -モック化されたコンポーネントモジュールをこのメソッドに渡すことで、ダミーの React コンポーネントとして使用できるようになる便利なメソッドを追加することができます。 -通常のレンダーの代わりに、コンポーネントは、与えられた子要素を含んだシンプルな `
`(もしくは `mockTagName` が与えられていれば他のタグ)になります。 +モック化されたコンポーネントモジュールをこのメソッドに渡すことで、ダミーの React コンポーネントとして使用できるようになる便利なメソッドを追加することができます。通常のレンダーの代わりに、コンポーネントは、与えられた子要素を含んだシンプルな `
`(もしくは `mockTagName` が与えられていれば他のタグ)になります。 > 補足: > @@ -194,8 +185,7 @@ findAllInRenderedTree( ) ``` -`tree` 中のすべてのコンポーネントを横断して `test(component)` が `true` である全てのコンポーネントを集め、その結果を返します。 -このメソッド自身はそれほど有用ではありませんが、他のテストユーティリティのための基本メソッドとして使用されます。 +`tree` 中のすべてのコンポーネントを横断して `test(component)` が `true` である全てのコンポーネントを集め、その結果を返します。このメソッド自身はそれほど有用ではありませんが、他のテストユーティリティのための基本メソッドとして使用されます。 * * * From 9cac3d49ecd0d2fd4946eb325c6dc37b36033116 Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Fri, 8 Feb 2019 00:09:38 +0900 Subject: [PATCH 05/15] Update content/docs/addons-test-utils.md Co-Authored-By: takanorip --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index d8b7d5edb..3e80c0400 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -19,7 +19,7 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm > 補足: > -> Airbnb が Enzyme と呼ばれるテストユーティリティをリリースしています。 Enzymeは React コンポーネントの出力のアサート、操作、そして横断的な処理をしやすくしてくれます。もしあなたが Jest や他のテストランナーを単体テストユーティリティと一緒に使用すると決めたなら、チェックしてみる価値があります: [http://airbnb.io/enzyme/](http://airbnb.io/enzyme/) +> Airbnb が Enzyme と呼ばれるテストユーティリティをリリースしています。 Enzymeは React コンポーネントの出力のアサート、操作、そして横断的な処理を簡単にしてくれます。もしあなたが Jest や他のテストランナーを単体テストユーティリティと一緒に使用すると決めたなら、チェックしてみる価値があります: [http://airbnb.io/enzyme/](http://airbnb.io/enzyme/) > > また別の手段として、 `react-testing-library` と呼ばれる別のテストユーティリティがあります。これは、エンドユーザーがコンポーネントを使用するのと同様の書き方でコンポーネントを使用するテストを書くことを可能にし、かつそれを促進するように設計されています。このテストユーティリティはあらゆるテストランナーと一緒に動作します: [https://git.io/react-testing-library](https://git.io/react-testing-library) From 3730b69a4cf7ae9b02cd5d16dbb71f1ab46c724a Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Fri, 8 Feb 2019 00:15:13 +0900 Subject: [PATCH 06/15] Update content/docs/addons-test-utils.md Co-Authored-By: takanorip --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 3e80c0400..b1be00e73 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -95,7 +95,7 @@ ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13}); renderIntoDocument(element) ``` -React 要素をドキュメント内の独立したDOMノードにレンダーします。**この関数を実行するには DOM が必要です。** +React 要素をドキュメントから切り離されたDOMノードにレンダーします。**この関数を実行するには DOM が必要です。** > 補足: > From 2b00e1caca2cd4c8bd1d2f3c9568419b21934e9f Mon Sep 17 00:00:00 2001 From: takanorip Date: Fri, 8 Feb 2019 01:06:28 +0900 Subject: [PATCH 07/15] Update addons-test-utils.md --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index b1be00e73..91bb36199 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -85,7 +85,7 @@ ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13}); > 補足 > -> React はコンポーネントで使用しているイベントプロパティ(例えば keyCode 、 which など)を何も作成しないため、あなたはそれらをコンポーネントに与える必要があります。 +> React はコンポーネントで使用しているイベントプロパティ(例えば keyCode 、 which など)を何も作成しないため、あなたはそれらをSimulateが持つメソッドに渡す必要があります。 * * * From f1fa94f4d2314faa8b9780a63bd1bfef38435f9c Mon Sep 17 00:00:00 2001 From: takanorip Date: Sun, 17 Feb 2019 19:28:02 +0900 Subject: [PATCH 08/15] Update addons-test-utils.md --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 91bb36199..5c68cb202 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -43,7 +43,7 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm ## Shallow Rendering -Reactの単体テストを書くときには、 shallow rendering が役に立ちます。 shallow rendering によって、インスタンス化またはレンダーされていない子コンポーネントの動作を気にすることなく、コンポーネントを "1 階層深く" レンダーしてその render メソッドが返す結果をアサートできます。これは DOM を必要としません。 +React の単体テストを実装するとき、Shallow Renderer が役立つでしょう。浅いレンダー (shallow rendering) を使用すると、インスタンス化またはレンダーされていない子コンポーネントの振る舞いを心配することなく、「1 階層深く」レンダーしてレンダーメソッドが返すものを assert できます。これに DOM は必要ありません。 > 補足: > From b36b2111d11161a022e300b3b278de0d70e50538 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Mon, 25 Feb 2019 03:49:53 +0900 Subject: [PATCH 09/15] Update content/docs/addons-test-utils.md Co-Authored-By: takanorip --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 243a43d64..576620728 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -44,7 +44,7 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm ### `act()` {#act} -アサーション用のコンポーネントを準備するために、それをレンダーして更新を実行するコードを `act()` でラップします。 これにより、テストはブラウザでのReactの動作により近い状態で実行されます。 +アサーション用のコンポーネントを準備するために、それをレンダーして更新を実行するコードを `act()` でラップします。 これにより、テストはブラウザでの React の動作により近い状態で実行されます。 >補足 > From 13dd2d096458f2d2708e6b498fabdb59e72a5534 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Mon, 25 Feb 2019 03:50:13 +0900 Subject: [PATCH 10/15] Update content/docs/addons-test-utils.md Co-Authored-By: takanorip --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 576620728..c25889a48 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -3,7 +3,7 @@ id: test-utils title: テストユーティリティ permalink: docs/test-utils.html layout: docs -category: リファレンス +category: Reference --- **インポート** From 10ece8c14562d3224558c3b03038dc993122e9dd Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Mon, 25 Feb 2019 03:50:41 +0900 Subject: [PATCH 11/15] Update content/docs/addons-test-utils.md Co-Authored-By: takanorip --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index c25889a48..7e3677849 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -296,7 +296,7 @@ findRenderedComponentWithType( renderIntoDocument(element) ``` -React 要素をドキュメントから切り離されたDOMノードにレンダーします。**この関数を実行するには DOM が必要です。** +React 要素をドキュメントから切り離されたDOMノードにレンダーします。**この関数を実行するには DOM が必要です。**これは以下のコードと実質的に等価です: ```js const domContainer = document.createElement('div'); From 369bcf43e4a37693ac146b8335bdd6e5b5870ed1 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Mon, 25 Feb 2019 03:50:53 +0900 Subject: [PATCH 12/15] Update content/docs/addons-test-utils.md Co-Authored-By: takanorip --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 7e3677849..ff8c03404 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -343,6 +343,6 @@ ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13}); > 補足 > -> React はコンポーネントで使用しているイベントプロパティ(例えば keyCode 、 which など)を何も作成しないため、あなたはそれらをSimulateが持つメソッドに渡す必要があります。 +> React はコンポーネントで使用しているイベントプロパティ(例えば keyCode、which など)を何も作成しないため、あなたはそれらを Simulate が持つメソッドに渡す必要があります。 * * * From 84b952b57ac38060a4a1883920fa63fc067fa240 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Mon, 25 Feb 2019 03:51:00 +0900 Subject: [PATCH 13/15] Update content/docs/addons-test-utils.md Co-Authored-By: takanorip --- content/docs/addons-test-utils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index ff8c03404..4795a15be 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -234,7 +234,7 @@ findRenderedDOMComponentWithClass( ) ``` -[`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass) と同様のメソッドですが、このメソッドは結果が 1 つだけであることを期待しており、その 1 つの結果を返すか、一致するものが 1 つでなかった場合には例外を返します。 +[`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass) と同様のメソッドですが、このメソッドは結果が 1 つだけであることを期待しており、その 1 つの結果を返すか、一致するものが 1 つでなかった場合には例外をスローします。 * * * From 380dee84e25927131d04536e513b92b10a628497 Mon Sep 17 00:00:00 2001 From: takanorip Date: Mon, 25 Feb 2019 03:58:34 +0900 Subject: [PATCH 14/15] fix lint --- content/docs/addons-test-utils.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 4795a15be..3e0c37dd7 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -19,7 +19,7 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm > 補足: > -> Airbnb が [Enzyme](http://airbnb.io/enzyme/) と呼ばれるテストユーティリティをリリースしています。 Enzymeは React コンポーネントの出力のアサート、操作、そして横断的な処理を簡単にしてくれます。もしあなたが Jest や他のテストランナーを単体テストユーティリティと一緒に使用すると決めたなら、チェックしてみる価値があります。 +> Airbnb が [Enzyme](http://airbnb.io/enzyme/) と呼ばれるテストユーティリティをリリースしています。Enzyme は React コンポーネントの出力のアサート、操作、そして横断的な処理を簡単にしてくれます。もしあなたが Jest や他のテストランナーを単体テストユーティリティと一緒に使用すると決めたなら、チェックしてみる価値があります。 > > また別の手段として、[`react-testing-library`](https://git.io/react-testing-library) と呼ばれる別のテストユーティリティがあります。これは、エンドユーザーがコンポーネントを使用するのと同様の書き方でコンポーネントを使用するテストを書くことを可能にし、かつそれを促進するように設計されています。このテストユーティリティはあらゆるテストランナーと一緒に動作します。 @@ -40,17 +40,17 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm - [`renderIntoDocument()`](#renderintodocument) - [`Simulate`](#simulate) -## リファレンス {#reference} +## Reference {#reference} ### `act()` {#act} -アサーション用のコンポーネントを準備するために、それをレンダーして更新を実行するコードを `act()` でラップします。 これにより、テストはブラウザでの React の動作により近い状態で実行されます。 +アサーション用のコンポーネントを準備するために、それをレンダーして更新を実行するコードを `act()` でラップします。これにより、テストはブラウザでの React の動作により近い状態で実行されます。 >補足 > >`react-test-renderer` を使っている場合、それはこのメソッドと同じように振舞う `act` エクスポートも提供します。 -例えば、 次のような `Counter` コンポーネントがあるとしましょう: +例えば、次のような `Counter` コンポーネントがあるとしましょう: ```js class App extends React.Component { @@ -83,7 +83,7 @@ class App extends React.Component { } ``` -これをテストするには次のように書きます: +これをテストするには次のように書きます: ```js{3,20-22,29-31} import React from 'react'; @@ -247,7 +247,7 @@ scryRenderedDOMComponentsWithTag( ) ``` -レンダリングされたツリー内に存在する、タグ名が `tagName` に一致するDOMコンポーネントが持つ全てのDOM要素を探し、その結果を返します。 +レンダリングされたツリー内に存在する、タグ名が `tagName` に一致する DOM コンポーネントが持つ全ての DOM 要素を探し、その結果を返します。 * * * @@ -296,7 +296,7 @@ findRenderedComponentWithType( renderIntoDocument(element) ``` -React 要素をドキュメントから切り離されたDOMノードにレンダーします。**この関数を実行するには DOM が必要です。**これは以下のコードと実質的に等価です: +React 要素をドキュメントから切り離された DOM ノードにレンダーします。**この関数を実行するには DOM が必要です。**これは以下のコードと実質的に等価です: ```js const domContainer = document.createElement('div'); From 212ba50dfd29d0d5d9e07d5ffffe781b9bca86df Mon Sep 17 00:00:00 2001 From: takanorip Date: Mon, 25 Feb 2019 04:13:02 +0900 Subject: [PATCH 15/15] fix test utils --- content/docs/addons-test-utils.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index 3e0c37dd7..a7c16e44c 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -19,9 +19,9 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm > 補足: > -> Airbnb が [Enzyme](http://airbnb.io/enzyme/) と呼ばれるテストユーティリティをリリースしています。Enzyme は React コンポーネントの出力のアサート、操作、そして横断的な処理を簡単にしてくれます。もしあなたが Jest や他のテストランナーを単体テストユーティリティと一緒に使用すると決めたなら、チェックしてみる価値があります。 +> [`react-testing-library`](https://git.io/react-testing-library) の使用をおすすめします。これは、エンドユーザーがコンポーネントを使用するのと同様の書き方でコンポーネントを使用するテストを書くことを可能にし、かつそれを促進するように設計されています。 > -> また別の手段として、[`react-testing-library`](https://git.io/react-testing-library) と呼ばれる別のテストユーティリティがあります。これは、エンドユーザーがコンポーネントを使用するのと同様の書き方でコンポーネントを使用するテストを書くことを可能にし、かつそれを促進するように設計されています。このテストユーティリティはあらゆるテストランナーと一緒に動作します。 +> また別の手段として、Airbnb が [Enzyme](http://airbnb.io/enzyme/) と呼ばれるテストユーティリティをリリースしています。Enzyme は React コンポーネントの出力のアサート、操作、そして横断的な処理を簡単にしてくれます。 - [`act()`](#act) - [`mockComponent()`](#mockcomponent)