こんにちは、みんな！

この記事を書くきっかけとなったのは、私の生徒や指導者たちでした。私はよく、 JavaScriptでのテスト自動化プロセスに慣れたらすぐにTypeScriptを学ぶことをお勧めします。 REST API テストの観点から、テスト自動化フレームワークで TypeScript を使用する場合の特徴を見てみましょう。

テスト プロジェクトの完全なコードはここにあります。

TypeScript

TypeScriptとは何か、 JavaScriptとどのように違うのかについてはあまり深入りせずに、重要なことを述べましょう。それはプログラミング言語です。ただし、これも非常に重要です。これはJavaScript ( Node.jsプラットフォーム) に直接依存します。

TypeScriptはNode.jsパッケージとして提供されるため、私はこれをいくつかの優れた機能を備えたJavaScriptと見なします。

この言語自体とその機能について詳しく知りたい場合は、公式 Web サイトにアクセスしてください。テスト自動化の観点からその機能について説明します。

プロジェクトのセットアップ

TypeScriptでのテスト自動化プロジェクトの作成プロセスを見てみましょう。

1. Node.jsプロジェクトを作成します。

   npm init -y

2. TypeScriptパッケージをインストールします。

   npm i typescript

3. プロジェクトのデフォルトのTypeScript構成tsconfig.jsonを生成します。

   npx tsc --init

上記のコマンドはデフォルトの設定ファイルを生成しますが、次のように大幅に短縮することをお勧めします。

 { "compilerOptions": { "baseUrl": "./", "module": "esnext", "target": "esnext", "sourceMap": false, "moduleResolution": "node", "allowJs": true, "skipLibCheck": true, "resolveJsonModule": true, "allowSyntheticDefaultImports": true, "paths": { "*": ["./*"] } } }

この構成には、必要な最小限のものが含まれています。

• 最新のEcmaScriptバージョンを使用します。
• JSON インポートを利用可能にします。
• インポートで絶対パスを使用できるようになります。

公式ドキュメントを使用して構成を拡張できます。

ツールの選択

Node.jsエコシステムが提供するあらゆるツールを使用できますが、私の経験では、 TypeScript を扱うエンジニアのほとんどは、次のような正当な理由からJestを選択します。

• 優れたコミュニティサポート (アップデート、回答、ドキュメント、コードサンプル)、
• 柔軟な構成。

以前は、 Mocha + Chai を使用してプロジェクトのコアをセットアップするのが楽しかったのですが、現在はテスト ランナーとアサーション ライブラリの両方が含まれているJestを使い続けています。

Axios は最も人気のある HTTP クライアントのようですので、これも選択することをお勧めします。

セットアップでこれを使用することが強制されているとは言えませんが、プロジェクトに目を通すとそれが通常のことであると言っています。

ここで、これらのパッケージを依存関係としてインストールするだけです。

npm i jest axios

型コレクション

一部のパッケージ ( Axiosなど) にはTypeScript型が含まれていますが、 JestとMochaには含まれていません。また、 Jest が正しく動作するには、 @types/jestとともにts-jestパッケージが必要です。最初のパッケージではTypeScript機能が有効になり、2 番目のパッケージではIntelliSenseが使用できるようになります。

したがって、一部のパッケージを使用しようとするときにオートコンプリート機能がない場合は、型宣言が欠落している可能性があることに注意してください。

TypeScript関連の拡張機能 (パッケージ) もインストールしましょう。

npm i ts-jest @types/jest

構成

Jest にはts-jest構成プリセットが必要なので、それを構成 (またはpackage.json ) ファイルで宣言する必要があります。

 { "jest": { "preset": "ts-jest" } }

プロジェクト内で絶対パスを使用する予定がある場合は、構成も調整する必要があります。

 { "jest": { "preset": "ts-jest", "moduleDirectories": [ "node_modules", "<rootDir>" ] } }

この構成を使用すると、単純なコマンド... jestでテストを実行できます。

したがって、 package.jsonでテストスクリプトを次のように構成します。

 { "scripts": { "test": "jest" } }

そして、 npm testまたはnpm run testコマンドを使用していつでもテストを実行できます。

また、Visual Studio Codeユーザーの場合は、Jest Runner 拡張機能をインストールすることをお勧めします。これにより、ワンクリックで必要なテスト/スイートを実行/デバッグできるようになります。 WebStorm では、これは組み込み機能です。

カスタムタイプ

TypeScriptが REST API テストに導入する主な機能は次のとおりです。種類、 もちろん！

リクエストとレスポンスの本文がどのようになるかを宣言できます。つまり、キー名、値の型や。。など。

Paysisサーバーを例に挙げてみましょう。/auth エンドポイントの/auth本文ペイロードをタイプとして書き留めることができます。

 export type AuthRequestBody = { login: string password: string }

応答本文についても同様です。どのサーバーがリクエストに送信する必要がありますか?

 export type AuthResponseBody = { token?: string message?: string }

成功/失敗のシナリオではペイロードが異なるため、「 ?」を使用してキーを「オプション」としてマークできます。キャラクター。

それが完了したら、これらのタイプを使用してテストでリクエストと検証を作成できます...

リクエスト

Axiosでは、リクエスト構成を介して送信する本文を指定できます。

 const payload: AxiosRequestConfig<AuthRequestBody> = { method: 'post', url: '/auth', data: { login: process.env.USERNAME, password: process.env.PASSWORD, }, }

AxiosRequestConfig<AuthRequestBody>のAuthRequestBody 、まさにそれを意味します ☝️

これは、 dataオブジェクトで指定されたタイプAuthRequestBodyに一致するペイロードを使用することが強制されることを意味します。必須フィールドの設定を忘れたり、過剰なフィールドを設定したりすると、エラーが表示されます。

応答

応答についても同じことができます。

 const response: AxiosResponse<AuthResponseBody> = await client.request(payload)

これにより、 response.dataオブジェクトにオートコンプリートが追加されるため、 response.data.tokenフィールドまたはresponse.data.messageフィールドにアクセスできるようになります。

高度なツール

上記の単純なものとは別に、カスタム タイプから JSON スキーマを生成することもできます。これにより、応答本文内のすべてのキーをチェックしてスキーマと一致するかどうかを確認するのではなく、ペイロード全体をチェックできます。

したがって、アイデアは次のとおりです。

1. カスタムタイプからJSON スキーマを生成します。
2. カスタム マッチャーtoMatchSchema を使用して、応答本文を検証します。

非常に素晴らしいことですが、これらの変更後はテストが不安定になる可能性があることに注意してください。これは追加のフィールドが表示されるときに発生するため、スキーマを定期的に更新する必要があります。

結論

TypeScript のセットアップは、特に初めての場合は難しいかもしれませんが、それだけの価値はあります。

入力データと出力データを型でカバーすれば、これらのオブジェクトを解析するときにタイプミスやその他の構文エラーが発生する可能性はありません。これにより、単純な間違いを防ぐことができ、コード内でリクエストの構造を直接確認できるため、 HTTPコレクション( Postmanなど) を開いて、リクエスト/応答する本文を確認するために必要なリクエストを探す必要がなくなります。と。

あなたの経験とそれについてどう思うか教えてください。