テストを実行したときに、ランダムに爆発することがないようにするためです...

初めてCypressを見たとき、私はすぐに Cypress に夢中になりました。Cypress では、統合テスト (統合テストだけではありません) を作成できます。統合テストとは、ブラウザーを制御し、ブラウザー アプリケーション内をクリックして実際のユーザーのように動作するテストです。Cypress には、ProtractorやSeleniumを使用する場合に比べて、統合テストの作成がはるかに簡単になる魅力的な機能が多数あります。これらの機能は、ドキュメントを実際に確認して、自分で試してみてください。

とにかく、私が最初にテストを書き始めたときに遭遇した唯一の本当に残念なことは、Typescriptを使用できないことです。私は 1 年以上 Typescript を使用しており、プレーンな Javascript を使用したときには得られない型チェックとオートコンプリートに慣れています。そのため、Cypress を使用して最初のテストを書いたときは、テストを実行すると何かが爆発するかもしれないという奇妙な不安感がありました。

最近、 Cypress の型付けを発見し、Typescript でテストを実行できるようになりました。この短い投稿では、現在テストに使用しているセットアップについて説明します。

型付けを取得する

Typescript でテストを書き始める前に、まず型付けをインストールする必要があります。Cypress には多数のツールがバンドルされているため、それらを使用する場合は、それらの型付けもインストールする必要があります。

yarn add @types/{cypress,chai,chai-jquery}

☝️ Cypress バージョン 1.1.3以降、Cypress の型指定はデフォルトでライブラリにバンドルされているため、別途追加する必要はありません@types/cypress。

ビルドの設定

Cypress はまだ Typescript ファイルをサポートしていないため、テスト ファイルをビルドして、生成された Javascript ファイルを Cypress で実行するためのシンプルなビルド システムを設定する必要があります。WebpackやGulpなどのより複雑なソリューションを使用することもできますが、私は Typescript をインストールするとインストールされると呼ばれるTypescript コンパイラを使用するという非常にシンプルなソリューションに落ち着きました。それでは、今すぐそれを実行してください。tsc

yarn add typescript

tsc --watch --project test/tsconfig.json

オプションを使用してコンパイルするファイルを指定しinclude、オプションを使用して出力を指定compilerOptions.outDirします。ソース マップ ファイルを無効にしていることに注意してください。これは、Cypress がテストとしてそれらを実行しようとするためです。

サイプレスの設定

さて、これでテスト ファイルがコンパイルされました。最後に、Cypress にテスト ファイルを探す場所を指示します。そのためには、cypress.json設定ファイルを変更する必要があります。

オプションを使用して、コンパイルされたテストへのパスを渡しますintegrationFolder。これで完了です。

まとめ

これで、テストをコンパイルし、Cypress を使用して実行するためのセットアップが完了しました。セットアップ全体を実行するために NPM スクリプトを使用しており、その様子は次のようになります。あと 1 つの依存関係をインストールするだけです。

yarn add npm-run-all
    
      

この投稿を読んでいただきありがとうございます。気に入っていただけましたら、ぜひを押して、もっと素敵な特典を受け取るために私をフォローしてください。良い一日を！