DOM操作

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →

DOMを直接操作するコードは、テストが難しいとされる機能の一つです。ここでは、クリックイベントを監視し、非同期でデータを取得してspan要素の内容を設定するjQueryコードのテスト方法を見てみましょう。

displayUser.js

'use strict';

const $ = require('jquery');
const fetchCurrentUser = require('./fetchCurrentUser.js');

$('#button').click(() => {
  fetchCurrentUser(user => {
    const loggedText = 'Logged ' + (user.loggedIn ? 'In' : 'Out');
    $('#username').text(user.fullName + ' - ' + loggedText);
  });
});

再び、__tests__/ディレクトリにテストファイルを作成します：

__tests__/displayUser-test.js

'use strict';

jest.mock('../fetchCurrentUser');

test('displays a user after a click', () => {
  // Set up our document body
  document.body.innerHTML =
    '<div>' +
    '  <span id="username" />' +
    '  <button id="button" />' +
    '</div>';

  // This module has a side-effect
  require('../displayUser');

  const $ = require('jquery');
  const fetchCurrentUser = require('../fetchCurrentUser');

  // Tell the fetchCurrentUser mock function to automatically invoke
  // its callback with some data
  fetchCurrentUser.mockImplementation(cb => {
    cb({
      fullName: 'Johnny Cash',
      loggedIn: true,
    });
  });

  // Use jquery to emulate a click on our button
  $('#button').click();

  // Assert that the fetchCurrentUser function was called, and that the
  // #username span's inner text was updated as we'd expect it to.
  expect(fetchCurrentUser).toHaveBeenCalled();
  expect($('#username').text()).toBe('Johnny Cash - Logged In');
});

fetchCurrentUser.jsをモック化することで、実際のネットワークリクエストを行わずローカルでモックデータを解決します。これによりテストは秒単位ではなくミリ秒単位で完了し、高速な単体テストの反復速度が保証されます。

また、テスト対象の関数は#button DOM要素にイベントリスナーを追加するため、テスト用にDOMを正しく設定する必要があります。jsdomとjest-environment-jsdomパッケージは、ブラウザ環境と同様のDOM環境をシミュレートします。つまり、呼び出すすべてのDOM APIは実際のブラウザと同様に観測可能です！

JSDOMのテスト環境を始めるには、jest-environment-jsdomパッケージが未インストールの場合にインストールする必要があります：

npm

npm install --save-dev jest-environment-jsdom

Yarn

yarn add --dev jest-environment-jsdom

pnpm

pnpm add --save-dev jest-environment-jsdom

Bun

bun add --dev jest-environment-jsdom

この例のコードはサンプルコード (jQuery)で確認できます。