2022-02-03 22:25:42 +00:00
|
|
|
# Cypress テストを追加する方法
|
2021-09-22 14:28:36 +00:00
|
|
|
|
2022-02-03 22:25:42 +00:00
|
|
|
ページの機能やレイアウトを変更する可能性がある JavaScript、CSS、または HTML を変更する際には、対応する [Cypress](https://docs.cypress.io) 統合テストを追加することが重要です。
|
2021-09-22 14:28:36 +00:00
|
|
|
|
2022-02-05 09:55:33 +00:00
|
|
|
Cypress テストもしくは「specs」の書き方については、Cypress の公式 [ドキュメント](https://docs.cypress.io/guides/getting-started/writing-your-first-test.html) をご覧ください。
|
2021-09-22 14:28:36 +00:00
|
|
|
|
2022-02-03 22:25:42 +00:00
|
|
|
## テストを追加する場所
|
2021-09-22 14:28:36 +00:00
|
|
|
|
2022-02-03 22:25:42 +00:00
|
|
|
- Cypress テストは `./cypress` ディレクトリにあります。
|
2021-09-22 14:28:36 +00:00
|
|
|
|
2022-02-03 22:25:42 +00:00
|
|
|
- カリキュラムモジュールの Cypress テストは、対応するカリキュラムディレクトリ、すなわち `cypress/integration/learn/responsive-web-design/basic-css/index.js` にあります。
|
2021-09-22 14:28:36 +00:00
|
|
|
|
2022-02-03 22:25:42 +00:00
|
|
|
## テストを実行する方法
|
2021-09-22 14:28:36 +00:00
|
|
|
|
2022-02-03 22:25:42 +00:00
|
|
|
> [!NOTE] GitPod を使用している場合は、[Cypress と GitPod の設定](/how-to-add-cypress-tests#cypress-gitpod-setup) を参照してください。
|
2021-09-22 14:28:36 +00:00
|
|
|
|
2022-02-03 22:25:42 +00:00
|
|
|
### 1. MongoDB とクライアントアプリケーションが動作していることを確認する
|
2021-09-22 14:28:36 +00:00
|
|
|
|
2022-02-03 22:25:42 +00:00
|
|
|
- [MongoDB を起動し、データベースをシードします。](/how-to-setup-freecodecamp-locally#step-3-start-mongodb-and-seed-the-database)
|
2021-09-22 14:28:36 +00:00
|
|
|
|
2022-02-03 22:25:42 +00:00
|
|
|
- [freeCodeCamp クライアントアプリケーションと API サーバーを起動します。](/how-to-setup-freecodecamp-locally#step-4-start-the-freecodecamp-client-application-and-api-server)
|
2021-09-22 14:28:36 +00:00
|
|
|
|
2022-02-03 22:25:42 +00:00
|
|
|
### 2. Cypress テストを実行する
|
2021-09-22 14:28:36 +00:00
|
|
|
|
2022-02-03 22:25:42 +00:00
|
|
|
`dev` を `prd` に置き換えて本番ビルドに対するテストを実行します。
|
2021-09-22 14:28:36 +00:00
|
|
|
|
2022-02-03 22:25:42 +00:00
|
|
|
- `./cypress` ディレクトリで、すべてのテストを実行します。
|
2021-09-22 14:28:36 +00:00
|
|
|
|
|
|
|
```console
|
|
|
|
npm run cypress:dev:run
|
|
|
|
```
|
|
|
|
|
2022-02-03 22:25:42 +00:00
|
|
|
- 単一のテストを実行します。
|
2021-09-22 14:28:36 +00:00
|
|
|
|
|
|
|
```console
|
|
|
|
npm run cypress:dev:run -- --spec=cypress/pathToYourSpec/youSpecFileName.js
|
|
|
|
```
|
|
|
|
|
2022-02-03 22:25:42 +00:00
|
|
|
- 開発ビルドを作成するには、開発サーバーを起動し、既存の cypress エンドツーエンドテストをすべて実行します。
|
2021-09-22 14:28:36 +00:00
|
|
|
|
|
|
|
```console
|
|
|
|
npm run e2e:dev:run
|
|
|
|
```
|
|
|
|
|
2022-02-03 22:25:42 +00:00
|
|
|
## Cypress と GitPod の設定
|
2021-09-22 14:28:36 +00:00
|
|
|
|
2022-02-03 22:25:42 +00:00
|
|
|
### 1. 開発環境が稼働していることを確認する
|
2021-09-22 14:28:36 +00:00
|
|
|
|
2022-02-03 22:25:42 +00:00
|
|
|
GitPod 環境を起動しても自動的に環境が構築されない場合は、以下を実行します。
|
2021-09-22 14:28:36 +00:00
|
|
|
|
2022-02-03 22:25:42 +00:00
|
|
|
- データベースを起動します。
|
2021-09-22 14:28:36 +00:00
|
|
|
|
|
|
|
```console
|
|
|
|
mongod
|
|
|
|
```
|
|
|
|
|
2022-02-03 22:25:42 +00:00
|
|
|
- データベースをシードします。
|
2021-09-22 14:28:36 +00:00
|
|
|
|
|
|
|
```console
|
|
|
|
npm run seed
|
|
|
|
```
|
|
|
|
|
2022-02-03 22:25:42 +00:00
|
|
|
- サーバーとクライアントを構築します。
|
2021-09-22 14:28:36 +00:00
|
|
|
|
|
|
|
```console
|
|
|
|
npm run develop
|
|
|
|
```
|
|
|
|
|
2022-02-03 22:25:42 +00:00
|
|
|
### 2. Cypress ビルドツールをインストールする
|
2021-09-22 14:28:36 +00:00
|
|
|
|
|
|
|
```console
|
|
|
|
npm run cypress:install-build-tools
|
|
|
|
```
|
|
|
|
|
2022-02-03 22:25:42 +00:00
|
|
|
- 端末でプロンプトが表示されたら、言語/エリアでキーボードのレイアウトを選択してください。
|
2021-09-22 14:28:36 +00:00
|
|
|
|
2022-02-05 09:55:33 +00:00
|
|
|
これで、[Cypress を実行することができます](/how-to-add-cypress-tests#_2-run-the-cypress-tests)。
|