diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index a6e06e1be..a7c16e44c 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -1,27 +1,27 @@ --- id: test-utils -title: Test Utilities +title: テストユーティリティ permalink: docs/test-utils.html layout: docs category: Reference --- -**Importing** +**インポート** ```javascript import ReactTestUtils from 'react-dom/test-utils'; // ES6 var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm ``` -## Overview {#overview} +## 概要 {#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](https://jestjs.io/docs/tutorial-react). +`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 の始め方を学んでください。 -> Note: +> 補足: > -> We recommend using [`react-testing-library`](https://git.io/react-testing-library) which is designed to enable and encourage writing tests that use your components as the end users do. +> [`react-testing-library`](https://git.io/react-testing-library) の使用をおすすめします。これは、エンドユーザーがコンポーネントを使用するのと同様の書き方でコンポーネントを使用するテストを書くことを可能にし、かつそれを促進するように設計されています。 > -> Alternatively, Airbnb has released a testing utility called [Enzyme](https://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output. +> また別の手段として、Airbnb が [Enzyme](http://airbnb.io/enzyme/) と呼ばれるテストユーティリティをリリースしています。Enzyme は React コンポーネントの出力のアサート、操作、そして横断的な処理を簡単にしてくれます。 - [`act()`](#act) - [`mockComponent()`](#mockcomponent) @@ -44,13 +44,13 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm ### `act()` {#act} -To prepare a component for assertions, wrap the code rendering it and performing updates inside an `act()` call. This makes your test run closer to how React works in the browser. +アサーション用のコンポーネントを準備するために、それをレンダーして更新を実行するコードを `act()` でラップします。これにより、テストはブラウザでの React の動作により近い状態で実行されます。 ->Note +>補足 > ->If you use `react-test-renderer`, it also provides an `act` export that behaves the same way. +>`react-test-renderer` を使っている場合、それはこのメソッドと同じように振舞う `act` エクスポートも提供します。 -For example, let's say we have this `Counter` component: +例えば、次のような `Counter` コンポーネントがあるとしましょう: ```js class App extends React.Component { @@ -83,7 +83,7 @@ class App extends React.Component { } ``` -Here is how we can test it: +これをテストするには次のように書きます: ```js{3,20-22,29-31} import React from 'react'; @@ -122,7 +122,7 @@ it('can render and update a counter', () => { }); ``` -Don't forget that dispatching DOM events only works when the DOM container is added to the `document`. You can use a helper like [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) to reduce the boilerplate code. +DOM イベントのディスパッチは、DOM コンテナが `document` に追加されたときだけ動作することを忘れないでください。[`react-testing-library`](https://github.com/kentcdodds/react-testing-library) のようなヘルパーを使えばボイラープレートのコードを減らせます。 * * * @@ -135,11 +135,11 @@ 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 `