jsdom の HTMLDialogElement APIの対応状況について

結論

showModalは対応していますが、close,showは対応していないと思われます。
showModalが使える理由が不明です。

showModalも使えなかったです、という方いらっしゃいましたら教えて頂けますとありがたいです。。

1. 背景

jest-environment-jsdom version:29.5.0
                   |- jsdom version: 20.0.3

showModal()は使用できてclose()は使用できないので状況を一旦整理しようと思った為です。

const dialogElm = document.querySelector('dialog');
dialogElm.close();
// TypeError: dialogElm.close is not a function

2. jsdomのissue

jsdom version: 18.1.0

show,showModal,close全て対応していないことが伺えます。

3. jsdomのPull request

3. jsdom 20.0.3 で実際にAPIを呼び出してみる

jest-environment-jsdomの最新版もjsdomのバージョンは同じでした。

─┬ jest-environment-jsdom@29.7.0
│ ├── @jest/environment@29.7.0
│ ├── @jest/fake-timers@29.7.0
│ ├── @jest/types@29.6.3
│ ├── @types/jsdom@20.0.0
│ ├── @types/node@14.18.48 deduped
│ ├── canvas@2.11.2 deduped
│ ├── jest-mock@29.7.0
│ ├── jest-util@29.7.0
│ └── jsdom@20.0.3

• showModal
  • 対応済？
  • TypeErrorにならず、modalが開いているか確認するテストも通ってしまいました。

以下の処理を通してからテストを実行しました。

Dialog.ts

static openDialog() {
        const dialogElm = document.querySelector('dialog');
        dialogElm.showModal();
}

test

test('Dialogが見える', () => {
        const dialogElm = document.querySelector('dialog');
        expect(dialogElm.open).toBe(true);
});

• close
  未対応
• show
  未対応