「本当にHTMLが反映されてる？」をテストしよう！Jestとjsdomでインライン要素を検証するコツ
こんにちは！フロントエンド開発の世界へようこそ。
Webサイトを作っているとき、「このテキストはちゃんと``タグで囲まれているかな？」「クラス名は正しいかな？」と不安になること、ありますよね。
ブラウザで見れば一発で分かることですが、開発の現場では「自動テスト」という仕組みを使って、プログラムに「ちゃんとHTMLが正しく書かれているか」を確認してもらうのが一般的です。
今回は、テストツール「Jest（ジェスト）」を使って、`span`や`strong`といったインライン要素が正しく配置されているかをチェックする方法を、一緒に紐解いていきましょう。大丈夫、少しずつ整理すれば怖くありませんよ！
—
なぜインライン要素のテストが必要なの？
例えば、お買い物サイトの価格表示を想像してみてください。
「税抜価格」を``で囲んでグレーにしたり、「重要なお知らせ」を``で太字にしたりしますよね。
もし、メンテナンス中にうっかり``タグを消してしまったり、クラス名を書き間違えたりしたらどうなるでしょう？ デザインが崩れるだけでなく、ユーザーに誤った情報を伝えてしまうかもしれません。
「プログラムが、HTMLの構造をちゃんと理解しているか」を自動で確認できれば、そんなヒヤリハットを未然に防げるんです。
—
準備はこれだけ！「jsdom」という魔法の道具
Jestは本来、JavaScriptの計算を確認する道具ですが、そこに「jsdom（ジェイエスドム）」という魔法をかけると、まるでブラウザがあるかのようにHTMLを扱えるようになります。
まずは、テストしたいHTMLをレンダリングする（ブラウザのように展開する）準備をしましょう。
/
- 準備：テスト用のHTMLをjsdomにセットするイメージ
/
document.body.innerHTML = `
この商品は1,000円です。
（税込）
`;
これだけで、テストの世界の中に「小さなWebページ」が誕生しました！
—
いざ検証！要素がそこに「いるか」を確認しよう
それでは、先ほどのHTMLが正しく構成されているか、Jestでテストを書いてみます。
「`strong`タグがちゃんとあるか？」「クラス名`price-highlight`が付いているか？」という2点を確認してみましょう。
test(‘商品価格が正しく装飾されているか確認する’, () => {
// 1. strongタグを探す（宝探しのようなものですね！）
const priceElement = document.querySelector(‘strong’);
// 2. 要素が存在するかチェック（もし見つからなければここでテスト失敗！）
expect(priceElement).not.toBeNull();
// 3. クラス名が期待通りかチェック
expect(priceElement.classList.contains(‘price-highlight’)).toBe(true);
// 4. 中身のテキストも正しいか確認（1,000円になってる？）
expect(priceElement.textContent).toBe(‘1,000円’);
});
ここがポイント：つまずきやすい「null」の壁
初心者の頃、よくあるのが「`querySelector`で見つからない」というエラーです。
もし`strong`タグを書き忘れていたら、`priceElement`は空っぽ（null）になります。`expect(priceElement).not.toBeNull()`と書いておくと、「見つからなかったよ！」とテストが優しく教えてくれるので、修正がすごく楽になりますよ。
—
インライン要素をテストする時の「コツ」
`span`や`em`、`time`といった要素も、考え方はすべて同じです。特に`time`タグなどは、機械可読性（プログラムが日時を理解できること）が大事なので、以下のようにチェックするのもおすすめです。
test(‘timeタグのdatetime属性が正しいか’, () => {
document.body.innerHTML = ‘‘;
const timeElement = document.querySelector(‘time’);
// 属性の中身が正しいか確認する
expect(timeElement.getAttribute(‘datetime’)).toBe(‘2023-10-27’);
});
このように、「タグ名」「クラスや属性」「中身のテキスト」の3セットを確認する癖をつけると、どんなHTMLのテストも怖くありません。
—
最後に：完璧を目指さなくていいんです
ここまで読んで、「テストって細かいことまでチェックしなきゃいけないの？」と感じた方もいるかもしれません。でも、安心してください。
最初からすべてをテストする必要はありません。まずは「一番間違えてほしくない場所」や「壊れると一番困る場所」から、少しずつテストを書いてみましょう。
「テストを書く」ということは、自分の書いたHTMLを客観的に見つめ直す最高のチャンスです。この記事を読み終えたら、ぜひ一度、自分の書いたコードにテストという名の「お墨付き」を与えてみてくださいね。
皆さんのWeb開発ライフが、より確実で、もっと楽しいものになりますように！
コメント