freeCodeCamp/docs/i18n/japanese/how-to-add-cypress-tests.md

Cypress テストを追加する方法

ページの機能やレイアウトを変更する可能性がある JavaScript、CSS、または HTML を変更する際には、対応する Cypress 統合テストを追加することが重要です。

Cypress テストもしくは「specs」の書き方については、Cypress の公式 ドキュメント をご覧ください。

テストを追加する場所

• Cypress テストは ./cypress ディレクトリにあります。

• カリキュラムモジュールの Cypress テストは、対応するカリキュラムディレクトリ、すなわち cypress/integration/learn/responsive-web-design/basic-css/index.js にあります。

テストを実行する方法

[!NOTE] GitPod を使用している場合は、Cypress と GitPod の設定 を参照してください。

1. MongoDB とクライアントアプリケーションが動作していることを確認する

• MongoDB を起動し、データベースをシードします。

• freeCodeCamp クライアントアプリケーションと API サーバーを起動します。

2. Cypress テストを実行する

dev を prd に置き換えて本番ビルドに対するテストを実行します。

• ./cypress ディレクトリで、すべてのテストを実行します。

  npm run cypress:dev:run
  

• 単一のテストを実行します。

  npm run cypress:dev:run -- --spec=cypress/pathToYourSpec/youSpecFileName.js
  

• 開発ビルドを作成するには、開発サーバーを起動し、既存の cypress エンドツーエンドテストをすべて実行します。

  npm run e2e:dev:run
  

Cypress と GitPod の設定

1. 開発環境が稼働していることを確認する

GitPod 環境を起動しても自動的に環境が構築されない場合は、以下を実行します。

• データベースを起動します。

mongod

• データベースをシードします。

npm run seed

• サーバーとクライアントを構築します。

npm run develop

2. Cypress ビルドツールをインストールする

npm run cypress:install-build-tools

• 端末でプロンプトが表示されたら、言語/エリアでキーボードのレイアウトを選択してください。

これで、Cypress を実行することができます。