Jest: テスト対象でDOM操作を含む場合のテストスクリプト
テスト対象関数: click.ts
code: typescript
export const clickRedoBtn = () => {
return document.querySelector('.comment_text')?.innerHTML;
};
テストスクリプト: click.spec.ts
code:typescript
import { clickRedoBtn } from '../../utils/click';
describe('clickRedoBtn', () => {
test('class="comment_text"内のテキストが取得できること', () => {
// document.bodyにテストしたい要素を埋め込み
document.body.innerHTML = '<div class="comment_text">hoge</div>';
expect(clickRedoBtn()).toBe('hoge');
});
});
単純に、テスト実行前にdocument.body.innerHTML でテストに使いたい要素を埋め込めばよかった
ちなみに、テストスクリプト上でdocument.body.innerHTMLした要素を、テストスクリプト内で参照することはできない模様
code: typescript
test('class="comment-text"内のテキストが取得できること', () => {
document.body.innerHTML = '<button id="target_btn">Click here</button>';
console.log(document.getElementById('target_btn')); // ここでエラー
});
code: linux
FAIL front/tests/utils/click.spec.ts
● Test suite failed to run
front/tests/utils/click.spec.ts:17:17 - error TS2531: Object is possibly 'null'.
17 console.log(document.getElementById('target_btn'));