Skip to content
This repository was archived by the owner on Jan 20, 2025. It is now read-only.
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions docs/docs/testing-react-components.md
Original file line number Diff line number Diff line change
@@ -1,42 +1,42 @@
---
title: Testing React Components
title: Reactコンポーネントのテスト
---

_The recommended testing framework is [Jest](https://jestjs.io/). This guide assumes that you followed the [Unit testing](/docs/unit-testing) guide to setup Jest._
_推奨されるテストレームワークは [Jest](https://jestjs.io/) です。このガイドでは、[ユニットテスト](/docs/unit-testing)のガイドに従って Jest がセットアップ済みであることを前提としています。_

The [@testing-library/react](https://github.com/testing-library/react-testing-library) by Kent C. Dodds has risen in popularity since its release and is a great replacement for [enzyme](https://github.com/airbnb/enzyme). You can write unit and integration tests and it encourages you to query the DOM in the same way the user would. Hence the guiding principle:
Kent C. Dodds により作成された [@testing-library/react](https://github.com/testing-library/react-testing-library) はリリース以降人気が高まっており、[enzyme](https://github.com/airbnb/enzyme) に代わる優れた代替ライブラリーです。ユニットテストと結合テストを作成できます。また、ユーザーと同じ方法で DOM 要素の指定をすることを推奨しています。したがって、指針となる原則は:

> The more your tests resemble the way your software is used, the more confidence they can give you.
> あなたのテストがソフトウェアの使用方法に似ているほど、テストの信頼性が高まる。

It provides light utility functions on top of `react-dom` and `react-dom/test-utils` and gives you the confidence that refactors of your component in regards to the implementation (but not functionality) don't break your tests.
`react-dom` `react-dom/test-utils` の上に軽量のユーティリティー関数を提供し、(機能ではなく)実装に関するコンポーネントのリファクタリングでテストが壊れないようにしてくれます。

## Installation
## インストール

Install the library as one of your project's `devDependencies`. Optionally you may install `jest-dom` to use its [custom jest matchers](https://github.com/testing-library/jest-dom#custom-matchers).
テストライブラリをプロジェクトの `devDependencies` の 1 つとしてインストールします。オプションで、`jest-dom` をインストールし、[カスタム jest マッチャー](https://github.com/testing-library/jest-dom#custom-matchers)として使用することもできます。

```shell
npm install --save-dev @testing-library/react @testing-library/jest-dom
```

Create the file `setup-test-env.js` at the root of your project. Insert this code into it:
プロジェクトのルートに `setup-test-env.js` ファイルを作成します。下記のコードを挿入します:

```js:title=setup-test-env.js
import "@testing-library/jest-dom/extend-expect"
```

This file gets run automatically by Jest before every test and therefore you don't need to add the imports to every single test file.
このファイルは、各テストが実行される前に Jest によって自動的に実行されるため、すべてのテストファイルに上記のインポートを追加する必要はありません。

Lastly you need to tell Jest where to find this file. Open your `jest.config.js` and add this entry to the bottom after 'setupFiles':
最後に、Jest にこのファイルの場所を設定する必要があります。`jest.config.js` を開き、`setupFiles` の下に設定を追加します。

```js:title=jest.config.js
module.exports = {
setupFilesAfterEnv: ["<rootDir>/setup-test-env.js"],
}
```

## Usage
## 使い方

Let's create a little example test using the newly added library. If you haven't done already read the [unit testing guide](/docs/unit-testing) — essentially you'll use `@testing-library/react` instead of `react-test-renderer` now. There are a lot of options when it comes to selectors, this example chooses `getByTestId` here. It also utilizes `toHaveTextContent` from `jest-dom`:
新しく追加されたライブラリーを使用して、小さなサンプルテストを作成しましょう。[ユニットテストのガイド](/docs/unit-testing)をまだ読んでいない場合は、原則的には `react-test-renderer` の代わりに `@testing-library/react` を使用するようにしましょう。セレクターに関しては多くのオプションがあります。この例では、`getByTestId` をセレクターとして選択します。また、`jest-dom` の `toHaveTextContent` を利用します。

```js
import React from "react"
Expand Down