テストツールの選定

数あるJavaScriptテストツールの中からjestを選んだのは、jest-puppeteer、jest-image-snapshotなどpuppeteer関連で使い勝手が良さそうだったからです。

jestのインストール

jestのセットアップは公式通りです。常に正しい手順でセットアップするため、下記は参考程度にしてセットアップは公式を参照してください。

Getting Started

以下は参考。npm initでpackage.jsonを作成してあとはjest公式の通り。yarn入れていない人はnpmで。

npm init
yarn add --dev jest
yarn add jquery

package.jsonの一部を変更 「echo “Error: no test specified” && exit 1」と書いている部分をjestに変えます。

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

この状態で公式の例をいくつかできたら次へ。

jest initをしている場合

下記のコマンドでjestのconfigファイルを作成している場合

yarn global add jest
jest --init

作成時にテスト環境としてnode.jsかjsdomを選択していると思います。node.j指定だとこれからのテストでdocument is not definedとエラーになるためjsdomを指定します。

  // testEnvironment: "node",
  testEnvironment: "jsdom",

DOMをコピペする

まずはテストということでテストするDOMを書き出します。例えば特定idの文字を書き換える処理をテストするなら

<div id="title">Sample Site</div>

テストする対象をコピペします。 そして適当なjs(今回はsample.jsとします)を作成して変数に入れてexportします。node.jsはブラウザ動作のJavaScriptとは流儀が違うので、module.exports?となってもそんなものなのか程度で進みます。

const dom = `
  <div id="title">Sample Site</div>
`
module.exports = dom;

sample.test.jsを作成します。

const sampleDom = require('./sample')
const $ = require('jquery');

function changeTitle() {
  $("#title").text("Sample Page")
}
test('change title', () => {
  document.body.innerHTML = sampleDom;
  changeTitle()
  expect($('#title').text()).toEqual('Sample Page');
})

テストする関数とテスト内容を書きます。

yarn test

これでテストができます。

大雑把にコピーして小さく関数に

PHPなどで動的にDOMが作成されるなら、そのページを開いてインスペクタからbody内全部を変数に入れてしまうのも手です。

触っているもののクオリティ次第ですが、ほとんど関数化されておらず、上から下につらつらと処理が続いている時は、小さな関数にしながらコピペしたdomでテストしていくと進歩を感じやすいです。全部をやるのは時間的にも厳しいでしょうから、まずは重要な部分から。

機能たくさんの関数はテストが難しいので、意識してテスト書きながら切り出すと自然と小さな関数になっていることが多いです。

保守

「jQuery　作者」で検索するとjQuery作者でさえReact！と表示されます。モダンな環境を切望するエンジニアの悲鳴のように感じてしまう今日この頃ですが、jQueryを避けて通れないなら少しでも良くできる方法を考えて行かないとあとが辛いです。

関数は小さく、テストをかく、コメント、ドキュメント、git、docker・・・言語やフレームワーク関係なく現代では当たり前になりつつあることを当たり前に。過去のものに（なるべく）適用できるのもまた大切なことかなと思います。