Skip to content

Commit 2d3dfeb

Browse files
tkowYutamaKotaro
andauthored
fix: apply feedback
Co-authored-by: YutamaKotaro <california.dreamin.never.die@gmail.com>
1 parent b2ce520 commit 2d3dfeb

File tree

1 file changed

+12
-12
lines changed

1 file changed

+12
-12
lines changed

docs/testing-overview.md

+12-12
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ id: testing-overview
33
title: Testing
44
author: Vojtech Novak
55
authorURL: 'https://twitter.com/vonovak'
6-
description: このガイドではReact Native開発者に良いテストの書き方やどのようなテストを取り入れるべきかという、テストのキーコンセプト概念を紹介します
6+
description: このガイドではReact Native開発者に良いテストの書き方やどのようなテストを取り入れるべきかという、キーコンセプトを紹介します
77
---
88

99
コードが大きくなるにつれて、予期しない小さなエラーやエッジケースが大きなエラーに繋がることがあります。バグは悪いユーザーエクスペリエンスとなり、究極的にはビジネス機会の損失になり得ます。脆弱なプログラミングを防ぐ方法の 1 つはリリースをする前にコードのテストを行うことです。
@@ -20,32 +20,32 @@ description: このガイドではReact Native開発者に良いテストの書
2020

2121
テストは新しくチームに入った人へドキュメントを提供する事にもなります。実際のコードを見た事がない人でもテストを読む事によって既存のコードがどのように動くか理解しやすくなります。
2222

23-
最後になりますが大事なことに、テストが自動化されるにつれて手動で<abbr title="Quality Assurance">QA</abbr>テストをする時間が少なくなり、貴重な時間を開放できます。
23+
最後になりますが大事なことに、テストが自動化されるにつれて手動で<abbr title="Quality Assurance">QA</abbr>テストをすることにかかる時間が少なくなり、貴重な時間を開放できます。
2424

2525
## 静的解析
2626

2727
コード品質改善の最初の一歩として、静的解析ツールを使いましょう。静的解析はコードを書くとコードを全く動かすことなくエラーを調べてくれます。
2828

2929
- **Linters** コードを解析すると使われていないコードを見つけたり、スペースの代わりに tab を使っている(設定次第ではその逆もあります)といった、スタイルガイドが禁止している書き方を見つけることができます。
30-
- **Type checking** は、number 型が渡されることを期待している counting 関数に対して string が渡されるのを防ぐといったように、関数に渡しているデータ構造が関数によってあらかじめ設計されているものと一致している事を保証します。
30+
- **Type checking**  number 型が渡されることを期待している counting 関数に対して string が渡されるのを防ぐといったように、関数に渡しているデータ構造が関数によってあらかじめ設計されているものと一致している事を保証します。
3131

3232
React Native はすぐに使える設定済みの二種類のツールがあります。: [ESLint](https://eslint.org/) `lint`のためのツールです。[Flow](https://flow.org/en/docs/) または、 [TypeScript](typescript)(JavaScript にトランスパイル可能な型付き言語)、`Type checking`のためのツールです。
3333

3434
## テストのしやすいコードを書くこと
3535

3636
テストを始めるにあたって、まず最初に必要なことはテストのしやすいコードを書くことです。航空機を作るプロセスを考えてみてください。 - いかなるモデルの機体でも、複雑なシステムが相互に全て正しく動いているかを確認するために飛ばしますが、それ以前に個々のパーツではテストが行われ安全であり正しく機能している事が保証されます。例えば翼は著しく重い負荷によって曲がるかをテストし、エンジンのパーツは耐久性をテストし、フロントガラスはバードインパクトをシミュレートしたテストがされます。
3737

38-
ソフトウェアも似ています。全体のプログラムをたくさんの行のコードを巨大な 1 つのファイルへ書く代わりに、組み立てられたコード全体をテストする事よりも徹底的にテストが可能な小さな複数のモジュールとしてコードを書きます。この意味で、テストのしやすいコードは簡潔かつモジュラーに組み合わされています
38+
ソフトウェアも似ています。全体のプログラムをたくさんの行からなる巨大な 1 つのファイルとして書く代わりに、全体をテストするよりもより徹底してテストを行える小さなモジュールとしてコードを書きます。このようにして、テストをしやすいコードを書くということは、簡潔かつもジューラーなコードを書くこととなります
3939

40-
アプリケーションをよりテストしやすくするには、React のコンポーネントのビューをロジックとステートに切り離すことから始めましょう。 (Redux, MobX その他どのようなソリューションを用いるとしてもです。) このようにして、ビジネスロジックに関するテストを主にアプリケーションの UI 描画が責務となる React コンポーネントから独立に保つことができます
40+
アプリケーションをよりテストしやすくするには、React のコンポーネントのビューをロジックとステートに切り離すことから始めましょう。 (Redux, MobX その他どのようなソリューションを用いるとしてもです。) このようにして、Reactコンポーネントに依存してはいけないビジネスロジックのテストと、主にアプリケーションのUIをレンダリングすることが責務となるコンポーネントの独立性を保つことができます
4141

4242
理論的には、全てのロジックとデータの取得をコンポーネントから移動させることができるはずです。こうすれば、コンポーネントは単独でレンダリングに注力されます。ステートは全体的にコンポーネントから独立するでしょう。アプリケーションのロジックはコンポーネントが一切存在しなくても動くはずです。
4343

4444
> 他の学習資料についてもテスタブルなコードについての話題をより深く調べてみることもお勧めします。
4545
4646
## テストを書く
4747

48-
テストを描きやすいコードを書いた次に、実際にいくつかテストを書いてみましょう。 React Native の初期状態のテンプレートは[Jest](https://jestjs.io)テストフレームワークを搭載しています。テンプレートは、モックや設定に悩まなくてもストレートな道筋であなたを生産的にするように、事前に環境が仕立てられたプリセットを含んでいます-[モックをより詳しく](#mocking)。このガイド上のあらゆる種類の機能テストは Jest を使います
48+
テストを描きやすいコードを書いた次に、実際にいくつかテストを書いてみましょう。 React Native の初期状態のテンプレートは[Jest](https://jestjs.io)テストフレームワークを搭載しています。これにはこの環境に適したプリセットが含まれているので、configやモックを調整ぜずに生産的なテストを行うことができます[more on mocks](#moching)。Jestを使用してこのガイドで取り上げられている全てのタイプのテストを行うことができます
4949

5050
> テスト駆動開発をするなら、テストを最初に書きます。そうすれば、テスタビリティがコードに与えられます。
5151
@@ -67,7 +67,7 @@ it('given a date in the past, colorForDueDate() returns red', () => {
6767

6868
これらはまた AAA(Arrange, Act, Assert)としても知られています。
6969

70-
Jest はテストを構成するのを助ける [`describe`](https://jestjs.io/docs/en/api#describename-fn) 関数を提供します。1 つの機能性に属する全てのテストをグループにまとめるのに `describe` を使用してください。describe 関数は必要であればネストして構いません。その他の関数でよく使われるものには[`beforeEach`](https://jestjs.io/docs/en/api#beforeeachfn-timeout)[`beforeAll`](https://jestjs.io/docs/en/api#beforeallfn-timeout) があり、あなたがテストしたいオブジェクトの設定をするために使えます。より詳しくは[Jest api reference](https://jestjs.io/docs/en/api)を読んでください。
70+
Jest はテストを構成するのを助ける [`describe`](https://jestjs.io/docs/en/api#describename-fn) 関数を提供します。1 つの機能性に属する全てのテストをグループにまとめるのに `describe` を使用してください。describe 関数は必要であればネストして構いません。その他の関数でよく使われるものには[`beforeEach`](https://jestjs.io/docs/en/api#beforeeachfn-timeout)[`beforeAll`](https://jestjs.io/docs/en/api#beforeallfn-timeout) があり、テストしたいオブジェクトの設定をするために使えます。詳細は[Jest api reference](https://jestjs.io/docs/en/api)を読んでください。
7171

7272
もしテストが多くのステップ、多くの結果をテストする時に、もっと小さくそれらを分けたくなるでしょう。そのようであれば、あなたのテストケースは他の機能から完全に独立することを保証してください。テストスイートの中のそれぞれのテストは他のテストケースが走り始めなくても、単体で実行できるようにしなければなりません。逆の見方をすると、全てのテストを一度に行う場合は、最初のテストが次のテストの結果に影響を与えてはいけません。
7373

@@ -101,11 +101,11 @@ Jest はテストを構成するのを助ける [`describe`](https://jestjs.io/d
101101
102102
## 統合テスト
103103

104-
大きなソフトウェアシステムを書く時、個々のプログラムが相互にやりとりする必要があります。単体テストではあるプログラムが他のプログラムに依存していても、たびたび、それらを最終的にフェイクに置き換えて依存をモックにします
104+
大きなソフトウェアシステムを書く時、個々のプログラムが相互にやりとりする必要があります。単体テストではあるプログラムが他のプログラムに依存していても、その依存をモックにしフェイクに置き換えることがありました
105105

106106
統合テストでは、実際の個々のユニットを組み合わせて(実際のアプリケーションと同じように)それらが期待通りに協調して動くことを保証するためのテストをまとめて行います。だからと言って、モッキングが必要でなくなるわけではありません。まだモック(例えば、天気情報の通信のモック)を必要とするかもしれませんが、単体テストの時より必要とする機会はずっと少ないでしょう。
107107

108-
> 統合テストに関する用語の意味は必ずしも一貫性があるものではないことに注意してください。また、単体テストと統合テストの境界はいつでも明確とは限りません。このガイドにとってあなたのテストが統合テストを意味する時はテストが以下のような時です
108+
> 統合テストに関する用語の意味は必ずしも一貫性があるものではないことに注意してください。また、単体テストと統合テストの境界はいつでも明確とは限りません。このガイドでは、テストが以下のような時に統合テストに分類することとします
109109
110110
> - 先に述べたようにアプリケーションにおける複数のモジュールが結合している時
111111
> - 外部のシステムを使っている時
@@ -172,7 +172,7 @@ function GroceryShoppingList() {
172172

173173
経験則としてユーザーが、見ることができるもの、聞くことができるものを使う事が好ましいです。
174174

175-
- 書かれている文字や[accessibility helpers](https://reactnative.dev/docs/accessibility#accessibility-properties)にアサーションを行う
175+
- 書かれている文字や[accessibility helpers](https://reactnative.dev/docs/accessibility#accessibility-properties)を使用してアサーションを作成する
176176

177177
逆に避けるべき事は以下の通りです。
178178

@@ -252,13 +252,13 @@ E2E テストはアプリケーションが部分的に動く事について最
252252

253253
E2E テストはアプリケーションにとって生命線となる機能で使ってください。: 認証のフロー、重要な機能、決済、などです。アプリケーションの死活にかかわらない機能はより速い JS のテストを使いましょう。テストを増やすに連れて信頼性は増しますが、メンテナンスやテストの実行により多くの時間をかけることにもなります。トレードオフを考えながらあなたにとって何がベストであるかを決めてください。
254254

255-
E2E テストに利用できるツールは複数あります。: React Native Community においては、[Detox](https://github.com/wix/detox/)が人気のフレームワークで React Native のアプリケーションのために利用できます。その他にも iOS や Android アプリケーションにおいて人気のあるライブラリとして[Appium](http://appium.io/)があります。
255+
E2E テストに利用できるツールは複数あります。: React Native Community においては、React Native用に調整されているので[Detox](https://github.com/wix/detox/)が人気のフレームワークです。その他にも iOS や Android アプリケーションにおいて人気のあるライブラリとして[Appium](http://appium.io/)があります。
256256

257257
<img src="/docs/assets/p_tests-e2e.svg" alt=" " />
258258

259259
## サマリー
260260

261-
私たちはあなたがこのガイドを読んで何かを学び楽しんでくれたことを願います。アプリケーションをテストできるたくさん方法があります。何を最初に使えばいいか決めるのは難しいこともあります。しかしながら、その全てがあなたの素晴らしい React Native のアプリケーションへ加わった途端に役に立つと信じています。何を待つことがあるでしょうか今すぐテストカバレッジを上げていきましょう。
261+
私たちはこのガイドを読んで何かを学び楽しんでくれたことを願います。アプリケーションをテストできるたくさん方法があります。何を最初に使えばいいか決めるのは難しいこともあります。しかしながら、ひとたびReact Nativeアプリケーションにテストが加わると、その全てが意味をなすようになると私たちは信じています。何を待つことがあるでしょうか今すぐテストカバレッジを上げていきましょう。
262262

263263
### Links
264264

0 commit comments

Comments
 (0)