ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript の単体テストと自動テストについて学習します。

JavaScript の単体テストと自動テストについて学習します。

PHPz
PHPzオリジナル
2023-11-04 14:54:321156ブラウズ

JavaScript の単体テストと自動テストについて学習します。

JavaScript は広く使用されているプログラミング言語として、インターネット分野で非常に重要な役割を果たしています。ソフトウェア開発のプロセスにおいて、テストは不可欠な部分です。プロジェクトが大きくなり、コードが複雑になるにつれて、手動テストは時間がかかり、エラーが発生しやすくなるため、単体テストと自動テストがますます注目されています。この記事では、JavaScript での単体テストと自動テストについて、具体的なコード例とともに読者に紹介します。

1. 単体テスト

単体テストとは、ソフトウェア内のテスト可能な最小単位をチェックおよび検証するプロセスを指します。 JavaScript では、テスト可能な最小単位は関数、メソッド、クラスなどであることも、小さなコードであることもあります。単体テストの目的は、コードの正確性と安定性をチェックし、コード内の潜在的な問題を見つけることです。

Jest フレームワークを例として、JavaScript での単体テストを紹介しましょう。

  1. Jest のインストール

まず、プロジェクトに Jest をインストールする必要があります。

npm install jest --save-dev

このうち --save-dev で開発環境に Jest を追加します。依存関係。

  1. テスト ケースの作成

次に、テスト ケースを作成する必要があります。次の追加モジュールがあるとします。

function add(a, b) {
return a b;
}

これの正確さをテストするためのテスト ケースを作成する必要があります。モジュール。プロジェクトのルート ディレクトリに、次のコードを含む add.test.js というファイルを作成します。

const add = require('./add');

test('adds 1 2 を 3 に等しい', () => {
Expect(add(1, 2)).toBe(3);
});

test('adds -1 2 to 1 に等しい', () => {
Expect(add(-1, 2)).toBe(1);
});

test('0.1 0.2 を足して 0.3 に等しい', () => {
Expect(add(0.1, 0.2)).toBeCloseTo(0.3);
});

テスト ケースでは、test() ステートメントを使用します。定義するテスト ケースとテスト関数の名前。テスト関数では、expect() ステートメントと toBe() ステートメントを使用してコードの正確さを検証します。 toBe() ステートメントは等価性の比較に使用され、toBeCloseTo() ステートメントは近接性の比較に使用されます。テスト ケースを実行するコマンドは次のとおりです:

npm test

実行結果は次の図に示されています:

テスト ケースは正常に実行され、コードが表示されます。正しく実行できます。こうすることで、自信を持ってコードをリリースできます。

2. 自動テスト

自動テストとは、スクリプトやツールなどを使用してソフトウェアをテストするプロセスを指します。手動テストと比較して、自動テストには速度、精度、再現性という利点があり、テストの効率と品質を大幅に向上させることができます。 JavaScript では、自動テストも非常に重要です。

Selenium と ChromeDriver を例として、JavaScript での自動テストを紹介します。

  1. Selenium と ChromeDriver のインストール

まず、Selenium と ChromeDriver をプロジェクトにインストールする必要があります。

npm install selenium-webdriver chromedriver --save-dev

このうち、selenium-webdriver は JavaScript 実装です。 Selenium であり、chromedriver は ChromeDriver の JavaScript 実装です。

  1. テスト スクリプトを作成する

次に、テスト スクリプトを作成する必要があります。次のログイン モジュールがあるとします。

functionlogin(username,password) {
if (username === 'admin' &&password === 'admin') {

return true;

} else {

return false;

}
}

このモジュールの正しさをテストするためのテスト スクリプトを作成する必要があります。プロジェクトのルート ディレクトリに、次のコードを使用して、login.spec.js というファイルを作成します。

const { Builder, By, Key, until } = require('selenium-webdriver');

(async function loginTest() {
let driver = await new Builder().forBrowser('chrome').build();
try {

await driver.get('http://example.com/login');
await driver.findElement(By.name('username')).sendKeys('admin', Key.TAB);
await driver.findElement(By.name('password')).sendKeys('admin', Key.RETURN);
await driver.wait(until.titleIs('My Dashboard'), 1000);
console.log('Test passed!');

}finally {

await driver.quit();

}
})();

テスト スクリプトでは、自動テストに Selenium と ChromeDriver を使用します。まずブラウザ インスタンスを作成し、次にログイン ページを開き、ユーザー名とパスワードを入力してユーザー インターフェイスに移動し、最後にテスト パス情報を出力します。テスト スクリプトを実行するコマンドは次のとおりです。

node login.spec.js

実行結果は次のとおりです。

テスト スクリプトは正常に実行され、コードは正しく実行できます。こうすることで、自信を持ってコードをリリースできます。

概要

この記事では、JavaScript での単体テストと自動テストについて紹介します。単体テストはテスト可能な最小単位の検査と検証を指し、テスト ケースの作成とテストの実行には通常 Jest フレームワークが使用されます。自動テストはスクリプトやツールなどを使用してソフトウェアをテストすることを指し、通常は Selenium と ChromeDriver が使用されます。テストスクリプトを作成してテストを実施します。この記事が読者の JavaScript テストの理解に役立つことを願っています。

以上がJavaScript の単体テストと自動テストについて学習します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。