-
Notifications
You must be signed in to change notification settings - Fork 181
Translate testing #241
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
+18
−18
Merged
Translate testing #241
Changes from all commits
Commits
Show all changes
13 commits
Select commit
Hold shift + click to select a range
d82508c
Translate testing
taneba 08b89f1
use plainer word for considering
taneba 36a344e
Update content/docs/testing.md
taneba b6a5007
Update content/docs/testing.md
taneba b581f26
Update content/docs/testing.md
taneba 1fef1b0
Update content/docs/testing.md
taneba 0ae1541
Update content/docs/testing.md
taneba eca5968
Update content/docs/testing.md
taneba a4e63df
Update content/docs/testing.md
taneba 0b42aed
Update content/docs/testing.md
taneba 299278d
Update content/docs/testing.md
taneba 05bd182
Update content/docs/testing.md
taneba 1e547d1
Update content/docs/testing.md
taneba File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,40 +1,40 @@ | ||
--- | ||
id: testing | ||
title: Testing Overview | ||
title: テスト概要 | ||
permalink: docs/testing.html | ||
redirect_from: | ||
- "community/testing.html" | ||
next: testing-recipes.html | ||
--- | ||
|
||
You can test React components similar to testing other JavaScript code. | ||
React コンポーネントは他の JavaScript のコードと同じようにテストできます。 | ||
|
||
There are a few ways to test React components. Broadly, they divide into two categories: | ||
React コンポーネントをテストするのにはいくつか方法がありますが、大きく 2 つのカテゴリに分けられます。 | ||
|
||
* **Rendering component trees** in a simplified test environment and asserting on their output. | ||
* **Running a complete app** in a realistic browser environment (also known as “end-to-end” tests). | ||
* **コンポーネントツリーのレンダリング** をシンプルなテスト環境で行い、その結果を検証する | ||
* **アプリケーション全体の動作** をブラウザ同等の環境で検証する(end-to-end テストとして知られる) | ||
|
||
This documentation section focuses on testing strategies for the first case. While full end-to-end tests can be very useful to prevent regressions to important workflows, such tests are not concerned with React components in particular, and are out of scope of this section. | ||
このセクションでは、最初のケースにおけるテスト戦略にフォーカスします。end-to-end テストが重要な機能のリグレッションを防ぐのに有効である一方で、そのようなテストは React コンポーネントとは特に関係なく、このセクションのスコープ外です。 | ||
|
||
### Tradeoffs {#tradeoffs} | ||
### トレードオフ {#tradeoffs} | ||
|
||
|
||
When choosing testing tools, it is worth considering a few tradeoffs: | ||
テストツールを選定する時、いくつかのトレードオフを考慮することは価値があります。 | ||
|
||
* **Iteration speed vs Realistic environment:** Some tools offer a very quick feedback loop between making a change and seeing the result, but don't model the browser behavior precisely. Other tools might use a real browser environment, but reduce the iteration speed and are flakier on a continuous integration server. | ||
* **How much to mock:** With components, the distinction between a "unit" and "integration" test can be blurry. If you're testing a form, should its test also test the buttons inside of it? Or should a button component have its own test suite? Should refactoring a button ever break the form test? | ||
* **実行速度 vs 環境の現実度:** 変更を加えてから結果を見るまでのフィードバックが早いツールは、ブラウザでの動作を正確に模倣しません。一方実際のブラウザ環境を使うようなツールは、イテレーションの速度が落ちる上 CI サーバーでは壊れやすいです。 | ||
* **モックの粒度** コンポーネントのテストでは、ユニットテストとインテグレーションテストの区別は曖昧です。フォームをテストする時、そのテストはフォーム内のボタンもテストすべきでしょうか。それともボタンコンポーネント自体が自身のテストを持つべきでしょうか。ボタンのリファクタリングはフォームのテストを壊さないべきでしょうか。 | ||
|
||
Different answers may work for different teams and products. | ||
チームやプロダクトに応じて、答えは違ってきます。 | ||
|
||
### Recommended Tools {#tools} | ||
### 推奨ツール {#tools} | ||
|
||
**[Jest](https://facebook.github.io/jest/)** is a JavaScript test runner that lets you access the DOM via [`jsdom`](#mocking-a-rendering-surface). While jsdom is only an approximation of how the browser works, it is often good enough for testing React components. Jest provides a great iteration speed combined with powerful features like mocking [modules](#mocking-modules) and [timers](#mocking-timers) so you can have more control over how the code executes. | ||
**[Jest](https://facebook.github.io/jest/)** は [`jsdom`](#mocking-a-rendering-surface) を通じて DOM にアクセスできる JavaScript のテストランナーです。jsdom はブラウザの模倣環境にすぎませんが、React コンポーネントをテストするのには十分なことが多いです。Jest は [モジュール](#mocking-modules) や [タイマー](#mocking-timers) のモックのような機能を組み合わせて、高速にイテレーションを回すことができ、コードをどう実行するかをよりコントロールできます。 | ||
|
||
**[React Testing Library](https://testing-library.com/react)** is a set of helpers that let you test React components without relying on their implementation details. This approach makes refactoring a breeze and also nudges you towards best practices for accessibility. Although it doesn't provide a way to "shallowly" render a component without its children, a test runner like Jest lets you do this by [mocking](/docs/testing-recipes.html#mocking-modules). | ||
**[React Testing Library](https://testing-library.com/react)** は実装の詳細に依存せずに React コンポーネントをテストすることができるツールセットです。このアプローチはリファクタリングを容易にし、さらにアクセスビリティのベスト・プラクティスへと手向けてくれます。コンポーネントを children 抜きに「浅く」レンダリングする方法は提供していませんが、Jest のようなテストランナーで [モック](/docs/testing-recipes.html#mocking-modules) することで可能です。 | ||
|
||
### Learn More {#learn-more} | ||
### より詳しく {#learn-more} | ||
|
||
This section is divided in two pages: | ||
このセクションは 2 つのページに分かれます: | ||
|
||
- [Recipes](/docs/testing-recipes.html): Common patterns when writing tests for React components. | ||
- [Environments](/docs/testing-environments.html): What to consider when setting up a testing environment for React components. | ||
- [レシピ集](/docs/testing-recipes.html): React コンポーネントのテストを書く際の一般的なパターン集 | ||
- [Environments](/docs/testing-environments.html): React コンポーネントのためのテスト環境をセットアップする際に考えること |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.