「dom」の記事 - Crieit

Jest で DOM 操作の試験、 console.error を無視

2022-04-23T01:06:29+09:00

Jest によるテストコードを書く上でいくつか嵌まったポイントをピックアップ。

DOM 操作の試験

まず引っかかったのは DOM 操作。今回はバリバリ DOM を操作したりある要素が存在しているかのチェックをする、といった完全に DOM ありきのコードを対象にしていました。

機能のユニットテストであれば直感的に分かるのですが、 DOM 操作って……。

sample/assert.js

const dom = `

`;

module.exports = dom;

sample/exception.js

const dom = `

`;

module.exports = dom;

tests/hoge.test.js

const hoge = require('../src/hoge');
const domAssert = require('../sample/assert');
const domException = require('../sample/exception');

test('method:hoge test:assert', () => {
    document.body.innerHTML = domAssert;
    const hogeDOM = document.querySelector('#hoge');
    const hogeInstance = new hoge();
    expect(hogeInstance.judge(hogeDOM)).toBe(true);
});
test('method:hoge test:exception', () => {
    document.body.innerHTML = domException;
    const hogeDOM = document.querySelector('#hoge');
    const hogeInstance = new hoge();
    expect(hogeInstance.judge(hogeDOM)).toBe(false);
});

例えば hoge という id属性が付与された DOM が存在するか否かのチェックをする hogeクラスに対して judge()メソッドをテストしたい場合。

DOM となるHTMLタグのコードを JS の文字列としてセット
それを module.exports
テストコードで　require() し、コード内の document.body.innerHTML へ代入する
後は通常の JS のように document.querySelector なり何なりで操作やチェックが可能。属性であれば getAttribute() してあげれば良い

……わりと素直にできることが分かりました。 Jest すごい。

The error below may be caused by using the wrong test environment

さて、上述でわりと直感的に DOM 操作した上でテストコードを記述できる、と記載しましたがいざテストをしようとすると以下のエラーが発生しました (Jest が 27系以上)。

The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
Consider using the "jsdom" test environment.

これは Jest に DOM 操作用の設定が必要なためのようです。

解決策としては2つ。

テストコード内に設定を記述

まずはテストコード内に設定を記述する方法。これはテストコードごとに設定を変更できる柔軟性がある一方、必要な場合は全てのテストコードで同じ記述をする必要があるため数が多いと面倒になる、というパターン。

/**
 * @jest-environment jsdom
 */

jest.config.js

もう1つは jest.config.js に記述する方法。こちらは一括指定ができるものの、テストコードごとの設定はできないので先程とは逆ですね。

module.exports = {
    testEnvironment: 'jsdom',     // 追加
    coverageDirectory: 'coverage'
};

console.error() を無視

テスト対象のコードで例外等の際に console.error() を使用していると、そのコードに入ったときに Jest が止まってしまいます。

そこで、 console.error() に遭遇しても Jest が止まらないようにする方法を。

const hoge = require('../src/hoge');
const domException = require('../sample/exception');

test('method:fuga test:exception', () => {
    jest.spyOn(console, 'error').mockImplementation((mes) => {
        console.log(mes);
    });
    document.body.innerHTML = domException;
    const hogeDOM = document.querySelector('#hoge');
    const hogeInstance = new hoge();
    expect(hogeInstance.fuga(hogeDOM)).toBe(false);
});

例えばこんな感じ。 jest.spyOn(console, 'error') ... を実際のコードを走らせる前に記述しておくことで console.error() で止まらなくなります。

参考

The error below may be caused by using the wrong test environment

Jestの「 The error below may be caused by using the wrong test environment」の解決方法 - Qiita

EventTargetとは

2021-01-06T02:05:48+09:00

EventTargetはイベントのターゲットとなるオブジェクトです。
イベントリスナーの登録や削除を行えます。

EventTargetのメソッド

addEventListener - イベントリスナの登録

addEventListenerの第1引数にイベントの名称、
第2引数にイベント発生時に実行する関数を指定する事でイベントの登録が行なえます。

例えば、クリックのイベントは以下のように登録できます。
buttonAをクリックするとdiv要素のクリックイベントも呼び出されます。

document.getElementById('outer').addEventListener('click',function(){console.log('outer');});
document.getElementById('inner').addEventListener('click',function(){console.log('inner');});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA');});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');});
//buttonAをクリックする => buttonA buttonA2 inner outer

第3引数としてbooleanを指定可能で、上記はfalseを指定した以下と同様です。

document.getElementById('outer').addEventListener('click',function(){console.log('outer');},false);
document.getElementById('inner').addEventListener('click',function(){console.log('inner');},false);
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA');},false);
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');},false);
//buttonAをクリックする => buttonA buttonA2 inner outer

第3引数としてtrueを指定すると、実行の順序が逆になります。

document.getElementById('outer').addEventListener('click',function(){console.log('outer');},true);
document.getElementById('inner').addEventListener('click',function(){console.log('inner');},true);
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA');},true);
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');},true);
//buttonAをクリックする => outer inner buttonA buttonA2

イベントリスナーが登録されていると、イベント発生元となった要素を含む親の要素でもそのイベントが実行されます。
そのイベントの実行順序が3つ目の引数で制御できるようになっています。

イベントの伝播はwindowオブジェクトからイベント発生元まで下位へ辿っていくキャプチャーフェーズと、
イベント発生元から上位要素へと辿っていくバブリングフェーズがあります。
つまり、「ouuter -> inner -> buttonA -> inner -> outer」の順序でイベントが伝播し、
前半がキャプチャーフェーズ、後半がバブリングフェーズとなっています。
引数をtrueとするとキャプチャーフェーズでイベントが実行されるため順序が逆となったというわけです。

もちろん混在も可能で、次のようにすると「outer -> buttonA -> inner」と実行がされます。

document.getElementById('outer').addEventListener('click',function(){console.log('outer');},true);
document.getElementById('inner').addEventListener('click',function(){console.log('inner');},false);
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA');});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');});
//buttonAをクリックする => outer buttonA buttonA2 inner

イベントの伝播はstopPropagation()で止める事ができます。

document.getElementById('outer').addEventListener('click',function(){console.log('outer');});
document.getElementById('inner').addEventListener('click',function(e){console.log('inner');e.stopPropagation();});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA');});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');});
//buttonAをクリックする => buttonA buttonA2 inner

ただし、stopPropagation()だと同じ要素に登録したリスナーの実行は止められません。

document.getElementById('outer').addEventListener('click',function(){console.log('outer');});
document.getElementById('inner').addEventListener('click',function(){console.log('inner');});
document.getElementById('buttonA').addEventListener('click',function(e){console.log('buttonA');e.stopPropagation();});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');});
//buttonAをクリックする => buttonA buttonA2

同じ要素のリスナーも含め、イベントの実行を止めるには、stopImmediatePropagation()を使います。

document.getElementById('outer').addEventListener('click',function(){console.log('outer');});
document.getElementById('inner').addEventListener('click',function(){console.log('inner');});
document.getElementById('buttonA').addEventListener('click',function(e){console.log('buttonA');e.stopPropagation();});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');});
//buttonAをクリックする => buttonA

既定の動作、例えばチェックボックスクリック時のチェックを止めたい場合はpreventDefault()で処理を停止できます。

Check

document.getElementById('check').addEventListener('click',function(e){e.preventDefault();});

addEventListenerの第3引数には、より複雑なオブジェクトをオプションとして指定する事もできます。

document.getElementById('outer').addEventListener('click',function(e){console.log('outer');e.preventDefault();},{
  capture : true , once : true,　passive :false,
});
document.getElementById('inner').addEventListener('click',function(e){console.log('inner');e.preventDefault();},{
  capture : true , once : true,  passive :true,
});
document.getElementById('buttonA').addEventListener('click',function(e){console.log('buttonA');e.preventDefault();},{
  capture : true , once : false, passive :false,
});
//buttonAをクリックする(1回目) => outer inner (警告) buttonA
//buttonAをクリックする(2回目) => buttonA

「capture」は第3引数にbooleanを指定したときと同じものです。trueの場合にバブリングフェーズでのイベント実行が行われます。
「once」はtrueの場合、イベントの実行を1回行うとリスナは削除されます。
「passive」はtrueの場合、preventDefault()がリスナで呼ばれるとコンソールに警告が出力されます。

removeEventListener - イベントリスナの削除

removeEventListenerを使うと、指定したイベントからリスナを削除できます。

const clickListener1 = function(){console.log('buttonA1');};
const clickListener2 = function(){console.log('buttonA2');};
document.getElementById('buttonA').addEventListener('click',clickListener1);
document.getElementById('buttonA').addEventListener('click',clickListener2);
document.getElementById('buttonA').removeEventListener('click',clickListener1);
//buttonAをクリックする => buttonA2

第2引数を指定すると、キャプチャーフェーズで実行されるリスナであるかが一致する場合にだけ削除が行われます。

const clickListener1 = function(){console.log('buttonA1');};
const clickListener2 = function(){console.log('buttonA2');};
document.getElementById('buttonA').addEventListener('click',clickListener1,false);
document.getElementById('buttonA').addEventListener('click',clickListener2,true);
document.getElementById('buttonA').removeEventListener('click',clickListener1,false);
document.getElementById('buttonA').removeEventListener('click',clickListener2,false);
//buttonAをクリックする => buttonA2

「dom」の記事 - Crieit

Jest で DOM 操作の試験、 console.error を無視

DOM 操作の試験

sample/assert.js

sample/exception.js

tests/hoge.test.js

The error below may be caused by using the wrong test environment

テストコード内に設定を記述

jest.config.js

console.error() を無視

参考

DOM操作

The error below may be caused by using the wrong test environment

undefined 判定

null 判定

(未使用) 非同期

console.errorで止まらないように

EventTargetとは

EventTargetのメソッド

addEventListener - イベントリスナの登録

removeEventListener - イベントリスナの削除