JestでのjQueryコードのテスト

概要

「Jestでの非export関数のテスト | GNU social JP」で紹介した方法で、exportを使用していないレガシーなJavaScriptコードのJestでの試験方法を紹介しました。

これとは別で、jQueryを使用しているコードがあり、この場合のテストに困ったのでJestでのjQueryコードのテスト方法を紹介します。Jest v29.5で確認しました。

まず、jQueryを使うという時点で、WebブラウザーAPIの使用が前提となるため、「JestのWebブラウザーAPIでのテスト環境設定 | GNU social JP」の設定は必須です。

JestにjQueryのチュートリアルがあったのでこれを参考にしました。

設置

まず何もしていないと、script要素でjqueryを読み込む前提の作りになっているので、npm run testの実行時に以下のようなjQueryオブジェクトの参照でエラーが出ます。

 FAIL  js/misc-functions.test.js
  ● Test suite failed to run

    ReferenceError: jQuery is not defined

      2534 |    · · · · · · · · · · · · · */
      2535 |
    > 2536 | jQuery.fn.outerHTML = function(s) {

これの回避のために、まずテスト環境にjqueryをインストールします。

gnusocialjp

詳細プロフィール。SNS: X Twitter/GS=gnusocialjp@gnusocial.jp/WP=gnusocialjp@web.gnusocial.jp。2022-07-17からgnusocial.jpとweb.gnusocial.jpのサイトを運営しています。WordPressで分散SNSに参加しています。このアカウントの投稿に返信すると、サイトのコメント欄にも反映されます。