検索

ホームページ >ウェブフロントエンド >jsチュートリアル >機能的なJavaScriptのテストに関する初心者ガイド

機能的なJavaScriptのテストに関する初心者ガイド

Joseph Gordon-Levitt
Joseph Gordon-Levittオリジナル
2025-02-16 09:30:10355ブラウズ

A Beginner's Guide to Testing Functional JavaScript

キーポイント

  • 機能的なプログラミングとテストを組み合わせると、コードをより明確かつ容易に書くことができます。機能プログラミングにより、アプリケーション内の動作とデータの独立した処理が可能になり、より明確でより一貫したコードが得られます。
  • テストは、コードが予想どおりに実行され、コードが変更された後でも予想通り実行され続けることを確認することです。さまざまなタイプのテストには、単体テスト、統合テスト、機能テストが含まれます。
  • テスト駆動型開発（TDD）は、テスト対象の関数を書き込む前に、単体テストを作成する慣行です。これにより、コードを作成する前に、アプリケーション機能を分割し、予想される結果を決定することが促進されます。
  • 純粋な関数は、外部状態や変数に依存せず、副作用がなく、機能的なプログラミングの基礎である同じ入力に対して常に同じ結果を返します。ユニットテストを容易にし、将来のコードリファクタリングに自信を与えます。
  • Jasmineは、機能的なJavaScriptのテストに使用できる強力なテストフレームワークです。テスト駆動型の方法を使用して、ブラウザで純粋な関数を開発するために使用できます。テスト駆動型コードを作成する慣行は、テストと変更が容易なため、純粋な機能の作成を促進できます。

機能的なプログラミングとテスト。あなたはそれらを別々に試したかもしれませんが、どういうわけかあなたはあなたの定期的な練習に両方を組み込むことはありません。単純に聞こえるかもしれませんが、テストと機能的なプログラミングは、より明確で、よりコンパクトで、より保守可能なコードを書くことを強制する魅力的な誘惑を作成す​​る可能性があります。

A Beginner's Guide to Testing Functional JavaScript

良いニュースは、両方のテクノロジーを同時に使用することで、いくつかの実用的な利点が提供されることです。実際、この組み合わせの甘さを経験したら、あなたは私のように中毒になるかもしれません。

「純粋なコードを書くことは機能的なJavaScriptの原則に従う」コースをご覧ください。コードを分割し、維持しやすくします...なぜですか？この記事でこのコースをご覧ください。機能的JavaScriptのテストの原則を紹介します。ジャスミンフレームワークを使用し、テスト駆動型の方法を使用して純粋な機能を構築する方法を紹介します。

なぜそれをテストするのですか？

テストは、アプリケーション内のコードが予想どおりに実行され、変更を行ったときに予想どおりに実行され続けることを確認することで、作業を終了したときに利用可能な製品を入手することができます。定義された一連の状況で予想される機能を定義するテストを作成し、コードに対してテストを実行すると、結果がテストが示すものと一致しない場合は警告が表示されます。そして、コードを修正するまで、その警告を受け続けます。

それからあなたは報酬を得るでしょう。

はい、これは気分が良くなります。

テストには多くの種類があり、境界が分割されている場所について議論する余地がたくさんありますが、要するに：

    コードを分離する機能を検証するための単位テスト
    • 統合テストは、データフローとコンポーネントの間の相互作用を検証します
    • 関数テストは、アプリケーション全体の動作を表示
注：functionalテストと呼ばれるテストの種類に気を取られないでください。これは、機能的なJavaScriptのテストに関するこの記事で焦点を合わせたいものではありません。実際、JavaScriptで機能的なプログラミング手法を使用するかどうかにかかわらず、アプリケーションの全体的な動作をテストするために使用する機能テスト方法はあまり変わらない場合があります。機能的なプログラミングで本当に役立つのは、単体テストを構築するときです。

エンコードプロセス中はいつでもテストを作成できますが、テストを計画する機能を作成する前に、ユニットテストを作成するのが常に最も効果的です。テスト駆動型開発（TDD）として知られるこのプラクティスは、書き込みを開始する前にアプリケーションの機能を分解し、コードの各部分から必要な結果を決定し、最初にテストを書き、次にコードを書き込むことを奨励します。その結果を生成するため。

片側の利点は、TDDがしばしば、あなたが書いているプログラムが実際に探しているプログラムであることを確認するためにプログラムを書くためにあなたに支払う人々と詳細な議論をすることを強制することです。結局のところ、単一のテストを渡すのは簡単です。難しさは、遭遇する可能性のあるすべての可能な入力を処理するかどうかを判断し、何も壊すことなくすべての入力を正しく処理することです。

なぜ機能的なプログラミングを選択するのですか？

想像できるように、コードを書く方法は、テストの難しさと密接に関連しています。ある関数の動作を別の関数にしっかりと結合したり、グローバル変数に大きく依存したりするなど、一部のコードパターンにより、コードの単体テストがより困難になります。場合によっては、テスト可能なパラメーターと結果を確立するために、外部データベースの動作を「シミュレート」したり、複雑なランタイム環境をシミュレートするなどの不便な手法を使用する必要がある場合があります。これらのケースは常に回避可能ではありませんが、コードの残りの部分をより簡単にテストできるように、コードのこれらのケースが必要な場所を分離することがよくあります。

機能的なプログラミングを使用すると、アプリケーションのデータと動作を個別に処理できます。独立して機能し、外部状態に依存しない個別の関数セットを作成することにより、アプリケーションを構築できます。その結果、コードはほぼ自己文書化されたコードになり、一貫して動作し、理解しやすい小さな明確に定義された機能を組み合わせます。

機能プログラミングは、通常、命令的なプログラミングとオブジェクト指向プログラミングとは対照的です。 JavaScriptは、これらすべてのテクノロジーをサポートし、それらを混合することもできます。機能プログラミングは、結果が返されるまでアプリケーションの状態を追跡する命令的なコードシーケンスを作成するためのもう1つの貴重な代替手段として機能します。または、特定のデータ構造に適用されるすべてのメソッドをカプセル化する複雑なオブジェクトを介した相互作用を通じてアプリケーションを構築します。

純粋な機能の作業方法機能的なプログラミングは、特定のことを1つだけ行い、毎回同じ入力に対して同じ値を返す、小さく、再利用可能な複合機能を使用してアプリケーションを構築することを奨励します。このような関数は純粋な関数と呼ばれます。純粋な機能は機能的なプログラミングの基礎であり、すべてに次の3つの特性があります。

    外部状態または変数に依存しない
    • 外部変数の副作用や変更はありません
    • 同じ入力に対して同じ結果を常に返します
機能コードを書くことのもう1つの利点は、ユニットテストを容易にすることです。ユニットテストが多いほど、基本的な機能を破ることなく、将来コードをリファクタリングする能力に依存することが簡単になります。

機能コードをテストしやすくするのはなぜですか？

私たちが議論した概念を考慮すると、機能コードがテストしやすい理由を既に理解できます。純粋な機能のテストの作成は、各入力に一貫した出力があるため、非常に簡単です。期待値を設定し、コードに対して実行するだけです。コンテキストを確立する必要はなく、関数間の依存関係を追跡する必要も、関数の外側の変更状態をシミュレートする必要も、変数の外部データソースをシミュレートする必要もありません。

完全なフレームワークからユーティリティライブラリや簡単なテストツールまで、多くのテストオプションがあります。これらには、ジャスミン、モカ、酵素、Jest、その他多くのツールが含まれます。各ツールには、長所と短所、最高のユースケース、忠実なフォローがあります。 Jasmineは、さまざまな状況で使用できる強力なフレームワークです。そのため、ブラウザでJasmineとTDDを使用して純粋な機能を開発する方法を簡単に説明します。

ローカルまたはCDNからジャスミンテストライブラリを抽出するHTMLドキュメントを作成できます。ジャスミンライブラリとテストランナーを含むページの例は、次のようになるかもしれません：

<code class="language-html"><!DOCTYPE html>


    <meta charset="utf-8">
    <title>Jasmine Test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.1/jasmine.min.css">


    
    
    

</code>
これは、ジャスミンライブラリ、およびジャスミンHTMLブートスクリプトとスタイルを紹介します。この場合、ドキュメントの本文は空で、JavaScriptがテストされ、ジャスミンテストがテストされるのを待っています。

機能的JavaScriptのテスト - 最初のテスト

最初に、最初のテストを書きましょう。これを別のドキュメントで行うか、ページ上の

要素に含めることでこれを行うことができます。 Jasmineライブラリによって定義された<script></script>関数を使用して、まだ書いていない新しい機能の望ましい動作を説明します。 describe

書く新しい関数は

と呼ばれ、渡された文字列が前後に同じ場合、isPalindromeに戻り、そうでなければtrueに戻ります。テストは次のようになります：false 

<code class="language-javascript">describe("isPalindrome", () => {
  it("returns true if the string is a palindrome", () => {
    expect(isPalindrome("abba")).toEqual(true);
  });
});</code>
これをページのスクリプトに追加してブラウザにロードすると、エラーを示すJasmineレポートページが表示されます。これが私たちがこの瞬間に望むものです。テストが実行されているかどうか、そしてそれが失敗したかどうかを知りたいです。このように、認識されたいと思っている私たちの脳は、私たちが何かを修正する必要があることを知っています。

javaScriptに単純な関数を書いてみましょう。ここでは、テストを実行するのに十分なロジックしかありません。この場合、それは期待値を返すことにより、テストの1つを渡すだけの関数です。 

<code class="language-html"><!DOCTYPE html>


    <meta charset="utf-8">
    <title>Jasmine Test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.1/jasmine.min.css">


    
    
    

</code>

はい、本当に。私はそれがばかげているように見えることを知っていますが、それに固執してください。

テスト実行プログラムを再度実行すると、合格します。確かに。しかし、明らかに、この単純なコードは、Palindromeテストプログラムに対する私たちの期待を満たしていません。今必要なのは、余分な期待です。それでは、私たちのdescribe関数に別のアサーションを追加しましょう：

<code class="language-javascript">describe("isPalindrome", () => {
  it("returns true if the string is a palindrome", () => {
    expect(isPalindrome("abba")).toEqual(true);
  });
});</code>

ページをリロードすると、テスト出力が赤くなり、失敗します。問題が何であるかを示すメッセージを受け取り、テスト結果が赤くなりました。

赤！

私たちの脳は何かが間違っていると感じています。

もちろん、

問題があります。今、私たちの単純なisPalindrome関数は毎回trueのみを返し、この新しいテストを効果的にターゲットにすることができないことが証明されています。それでは、isPalindromeを更新し、着信文字列の前後に関数を比較する機能を追加しましょう。 

<code class="language-javascript">const isPalindrome = (str) => true;</code>

テストは中毒性があります

もう一度緑になります。これは満足です。あなたがページをリロードするとき、あなたはその小さなドーパミンのサージを得ますか？

これらの変更により、テストは再び合格します。私たちの新しいコードは、文字列の前後を効果的に比較し、trueを返します。 false

このコードは純粋な機能です。なぜなら、副作用なしに一貫した入力値を考慮して一貫して実行されるため、このコードは純粋な機能です。この関数に文字列を渡すたびに、フロント文字列と背面の文字列を比較し、いつ、どのように呼び出されても結果を返します。

この一貫性がこの機能の単体テストがどれほど簡単になるかを見ることができます。実際、テスト駆動型のコードを作成すると、テストと変更が容易であるため、純粋な関数を書くことができます。

そして、あなたはテストに合格することに満足したいです。私はあなたがそうすることを知っています。

純粋な関数の再構築 この時点で、他の関数を追加するのは非常に簡単です（非弦の入力の処理、上記の文字と小文字の違いなど）。プロダクトオーナーにプログラムの実行方法を尋ねてください。文字列が一貫して処理されることを確認するためのテストが既にあるため、エラーチェックまたは文字列のキャスト、または弦楽を非弦の値に好む動作を追加できるようになりました。

たとえば、

番号1001のテストを追加した場合に何が起こるかを見てみましょう。

これを行うと、画面が再び赤くなり、現在の

関数が非ストリング入力を処理する方法がわからないため、テストが失敗します。 

<code class="language-javascript">describe("isPalindrome", () => {
  it("returns true if the string is a palindrome", () => {
    expect(isPalindrome("abba")).toEqual(true);
  });
  it("returns false if the string isn't a palindrome", () => {
    expect(isPalindrome("Bubba")).toEqual(false);
  });
});</code>
パニックが始まりました。赤が見えます。テストに失敗しました。

しかし、今度は安全に更新して、非弦の入力を処理し、文字列にキャストしてからチェックすることができます。このように見える関数を思いつくかもしれません：

<code class="language-html"><!DOCTYPE html>


    <meta charset="utf-8">
    <title>Jasmine Test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.1/jasmine.min.css">


    
    
    

</code>

すべてのテストに合格したので、緑の甘いドーパミンがテスト駆動型の脳に注がれているのが見えます。

評価チェーンにtoString()を追加することにより、テスト前に非弦の入力に適応して文字列に変換することができます。何よりも、他のテストは毎回実行されるため、この新しい機能を純粋な機能に追加することで、以前に取得した機能を破っていないことを確認できます。最終結果は次のとおりです

（Codepenコードはここに挿入する必要がありますが、外部Webサイトにアクセスできないため、CodePenリンクを提供できません。）

このテストを試して、ジャスミンまたはあなたに合ったその他のテストライブラリを使用して、独自のテストの書き込みを開始します。

コードデザインワークフローにテストを組み込み、ユニットテストのための純粋な機能の書き始めたら、過去の人生に戻るのが難しいかもしれません。しかし、あなたはそれをしたくないでしょう。

（この記事はVildan Softicによって査読されました。すべてのSitePoint Peer Revenyersに感謝します。 機能的なJavaScriptテスト（FAQ）に関する FAQ 機能的JavaScriptテストとは何ですか？

functional JavaScriptテストは、コードのさまざまな部分（関数など）の関数をチェックして、予想どおりに機能することを確認するテストです。これには、異なる入力を使用して関数を通話するテストケースを作成し、出力を予想される結果と比較することが含まれます。これはソフトウェア開発の重要な部分であり、開発プロセスのエラーをできるだけ早く検出し、コードの品質と信頼性を保証します。

JavaScriptで機能テストを書く方法は？

JavaScriptで機能テストを作成するには、特定の入力を使用してテストする関数を呼び出すテストケースを作成し、出力が期待される結果と一致するかどうかをチェックすることが含まれます。これは、Jest、Mocha、Jasmineなどのさまざまなテストフレームワークを使用して実行できます。これらのフレームワークは、テストケースを定義し、実行し、結果を確認する機能を提供します。

JavaScriptのRegexpテスト方法は何ですか？

JavaScriptのRegexpテスト方法は、文字列で一致をテストする方法です。一致が見つかった場合、

を返します。この方法は、ユーザーの入力を検証したり、文字列のパターンを検索する必要がある場合に特に役立ちます。

javascriptでregexpテスト方法を使用する方法は？

javascriptでregexpテスト方法を使用するには、最初に一致するパターンを使用してregexpオブジェクトを作成する必要があります。次に、このオブジェクトのテスト方法を呼び出し、パラメーターとしてテストする文字列を渡します。一致が見つかった場合、メソッドはtrue、そうでない場合はfalseを返します。

JavaScriptの機能テストと単体テストの違いは何ですか？

機能テストと単体テストはどちらもテストプロセスの重要なコンポーネントですが、その目的は異なります。ユニットテストでは、テストコードのさまざまな部分（関数や方法など）の分離と、システムの残りの部分から分離することに焦点を当てています。一方、機能テストでは、システムの機能の大きなチャンク（モジュールやアプリケーション全体など）をテストして、統合されたときに期待どおりに機能するようにします。

JavaScriptの機能テストを改善する方法は？

JavaScriptの機能テストの改善には、通常、テストが極端な状況や潜在的なエラー条件を含むすべての可能な状況をカバーすることを保証することが含まれます。また、テストが独立しており、任意の順序で実行できることを確認することも重要です。テストフレームワークを使用すると、テストを構築し、結果を確認し、エラーを報告するための便利なツールを提供することもできます。

JavaScriptの機能テストの良い実践は何ですか？

JavaScriptの機能テストのためのいくつかの良いプラクティスには、明確で簡潔なテストケースの作成、肯定的および否定的なシナリオのテスト、テストが独立しており、任意の順序で実行できるようにすることが含まれます。テストフレームワークを使用することも、テストに便利なツールと構造を提供するため、良いアイデアです。

JavaScriptで機能テストをデバッグする方法は？

さまざまなツールと手法を使用して、JavaScriptの機能テストをデバッグできます。一般的な方法は、

ステートメントを使用して、テスト実行中に値を印刷することです。また、開発環境によって提供されるデバッグツールまたはテストフレームワークを使用して、さまざまな時点でコードを介して変数を確認できるようにすることもできます。

console.log JavaScriptの機能テストにおける一般的な課題は何ですか？

JavaScriptの機能テストにおけるいくつかの一般的な課題には、非同期コードの取り扱い、外部システムと相互作用するテストコード、大規模なテストスイートの複雑さの管理が含まれます。さまざまなテクノロジーとツールを使用して、非同期コードに約束や

、外部システムのシミュレーション、理解と維持のテストの構築など、これらの課題を解決するために使用できます。

JavaScriptで機能テストをさらに学習する方法は？ async/await

JavaScriptで機能テストについて詳しく知るための多くのリソースがあります。これには、オンラインチュートリアル、本、コースが含まれます。 W3Schools、Mozilla Developer Network、Geeks for GeeksなどのWebサイトは、このトピックに関する包括的なガイドとチュートリアルを提供します。また、YouTubeなどのプラットフォームで多くのビデオチュートリアルを見つけることができます。さらに、Jest、Mocha、Jasmineなどの多くのJavaScriptテストフレームワークは、公式Webサイトで詳細なドキュメントとガイダンスを提供しています。

以上が機能的なJavaScriptのテストに関する初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html for 面向对象 封装 全局变量 字符串 数据结构 console regexp 对象 promise 异步 数据库 tdd 重构
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：無料の印刷可能な機能的JavaScriptチートシートを入手します次の記事：無料の印刷可能な機能的JavaScriptチートシートを入手します

関連記事

続きを見る