メインコンテンツへスキップ
Version: Next

DOM 操作

しばしばテストするのが難しいとされる関数として挙げられるのが直接 DOM を操作するコードをもつものです。 以下の jQuery のコードスニペットをどうテストするのか見てみましょう。 displayUser.jsはクリックイベントをリッスンしてデータを非同期に取得し、 span のコンテンツにそのデータをセットします。

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).toBeCalled();
expect($('#username').text()).toEqual('Johnny Cash - Logged In');
});

我々はテストコード上で実ネットワーク経由でリクエストが発行されることなく、その代わりにモックデータをローカルで取得して解決するように fetchCurrentUser.js をモックしています。 これは我々のテストが秒単位でなくミリ秒単位で完了し、素早くユニットテストが繰り返されることを保証してくれます。

Also, the function being tested adds an event listener on the #button DOM element, so we need to set up our DOM correctly for the test. jsdom and the jest-environment-jsdom package simulate a DOM environment as if you were in the browser. これは我々が呼び出すあらゆる DOM API がブラウザで監視されているのと同じように監視されていることを意味します!

To get started with the JSDOM test environment, the jest-environment-jsdom package must be installed if it's not already:

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

The code for this example is available at examples/jquery.