Update test.md

content/intro-to-storybook/react/ja/test.md

@@ -4,7 +4,7 @@ tocTitle: 'テスト'
 description: 'UI コンポーネントのテスト手法について学びましょう'
 ---
 
-Storybook のチュートリアルをテスト抜きには終われません。テストは高品質な UI を作成するのに必要なことです。疎結合なシステムにおいては、些細な変更で大きなリグレッション (手戻り) をもたらすことがあるのです。既に 3 種類のテストについて学びました:
+Storybook のチュートリアルをテスト抜きには終われません。テストは高品質な UI を作成するのに必要なことです。疎結合なシステムにおいては、些細な変更で大きなリグレッション (手戻り) をもたらすことがあるのです。このチュートリアルで、すでに 3 種類のテストについて学びました。
 
 - **手動テスト**では、コンポーネントの正しさを開発者が手動で確認します。コンポーネントを作成する際、見た目が問題ないかチェックするのに役立ちます。
 - **アクセシビリティテスト**では、a11y アドオンを使用し、コンポーネントがみなさんに受け入れやすいか検証します。これらは、どのように障害を持つ人々が私たちのコンポーネントを使うのかという情報を取得するのに大いに役立ちます。
@@ -27,23 +27,25 @@ Storybook のチュートリアルをテスト抜きには終われません。
 
 Storybook は視覚的なリグレッションテスト用の素晴らしいツールです。Storybook において、すべてのストーリーはテスト仕様となるからです。ストーリーを書くたび、仕様が無料でついてきます！
 
-視覚的なリグレッションテスト向けのツールは多々あります。Storybook のメンテナーが作成した無料のホスティングサービスである [**Chromatic**](https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook) がおすすめです。Chromatic はクラウド上でビジュアルテストを並列実行します。[前の章](/intro-to-storybook/react/ja/deploy/)と同じように Storybook をインターネット上に発行出来ます。
+視覚的なリグレッションテスト向けのツールは多々あります。Storybook のメンテナーが作成した無料のホスティングサービスである [**Chromatic**](https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook) がオススメです。Chromatic はクラウド環境上でビジュアルテストを光の速さで並列実行します。[前の章](/intro-to-storybook/react/ja/deploy/)で見てきたように、Storybook をインターネット上に公開することもできます。
 
 ## UI の変更を検知する
 
-視覚的なリグレッションテストでは UI コードにより描画されたイメージが基準となるイメージと比較されます。ツールが UI の変更が検知したら、教えてくれます。
+視覚的なリグレッションテストでは UI コードにより描画されたイメージが基準となるイメージと比較されます。ツールが UI の変更が検知したら、通知を受け取ることができます。
 
 それでは、`Task` コンポーネントの背景を変更し、どう動くのか見てみましょう。
 
-変更する前に新しいブランチを作成します:
+変更する前に新しいブランチを作成します。
 
 ```shell
 git checkout -b change-task-background
 ```
 
-`src/components/Task.js` を以下のように変更します:
+`src/components/Task.jsx` を以下のように変更します。
+
+```diff:title=src/components/Task.jsx
+import React from 'react';
 
-```diff:title=src/components/Task.js
 export default function Task({ task: { id, title, state }, onArchiveTask, onPinTask }) {
  return (
  <div className={`list-item ${state}`}>
@@ -94,35 +96,35 @@ export default function Task({ task: { id, title, state }, onArchiveTask, onPinT
 
 これでタスクの背景色が変更されます。
 
-![task background change](/intro-to-storybook/chromatic-task-change.png)
+![タスクの背景色の変更](/intro-to-storybook/chromatic-task-change.png)
 
-この変更をステージングします:
+この変更をステージングします。
 
 ```shell
 git add src/components/Task.js
 ```
 
-コミットします:
+コミットします。
 
 ```shell
 git commit -m “change task background to red”
 ```
 
-そして変更をリモートリポジトリーにプッシュします:
+そして変更をリモートリポジトリにプッシュします。
 
 ```shell
 git push -u origin change-task-background
 ```
 
-最後に、GitHub のリポジトリーを開き `change-task-background` ブランチのプルリクエストを作成します。
+最後に、ブラウザでGitHub のリポジトリを開き `change-task-background` ブランチのプルリクエストを作成します。
 
 ![GitHub にタスクの PR を作成する](/github/pull-request-background.png)
 
-プルリクエストに適切な説明を書き、`Create pull request` をクリックしてください。ページの下部に表示された「🟡 UI Tests」の PR チェックをクリックして下さい。
+プルリクエストに適切な説明を書き、`Create pull request` をクリックしてください。その後、ページの下部に表示された「🟡 UI Tests」の PR チェックをクリックしてください。
 
 ![GitHub にタスクの PR が作成された](/github/pull-request-background-ok.png)
 
-これで先のコミットによって検出された UI の変更が見られます。
+これで先のコミットによって検出された UI の変更を見られます。
 
 ![Chromatic が変更を検知した](/intro-to-storybook/chromatic-catch-changes.png)
 
@@ -151,6 +153,6 @@ UI の変更をレビューしたら、その変更で意図せずバグを混
 
 ![マージの準備ができた変更内容](/intro-to-storybook/chromatic-review-finished.png)
 
-Storybook はコンポーネントを**作る**のに役立ち、テストはコンポーネントを**保つ**のに役立ちます。手動テスト、スナップショットテスト、単体テスト、ビジュアルテストの 4 種類をこのチュートリアルで学びました。最後の 3 種類は、今設定したように、CI に追加することで自動化することができます。これによりコンポーネントのバグに気づかないことを心配をせずにリリースできます。このワークフロー全体は以下の図の通りです。
+Storybook はコンポーネントを**作る**のに役立ち、テストはコンポーネントを**保つ**のに役立ちます。手動テスト、スナップショットテスト、単体テスト、ビジュアルテストの 4 種類をこのチュートリアルで学びました。最後の 3 種類は、今設定したように、CI に追加することで自動化できます。これによりコンポーネントのバグに気づかないことを心配をせずにリリースできます。このワークフロー全体は以下の図の通りです。
 
 ![視覚的なリグレッションテストのワークフロー](/intro-to-storybook/cdd-review-workflow.png)