Qroon

DOMPurify + Vitest のエラー

2023/11/15

Happy DOMとDOMPurifyの相性が原因?

マークダウン変換のサニタイズにDOMPurifyを使用していたけど、テスト時のみ大量のエラーが吐かれた。
色々試していくとどうやらHappy DOMとの相性が悪いっぽい。
で、Happy DOMからJS DOMに変えようとしたら今度はcssのエラーが発生。
こっちはstyle-componentでコンテナクエリを使っているとJS DOMエラーを吐くっぽい??

解決策

とりあえずの解決策として、DOMPurifyを使用する時だけJS DOMを利用するようにした。

import { JSDOM } from 'jsdom'
import dompurify from 'dompurify'

export const sanitizeForTest = (source: string | Node) => {
  const window = new JSDOM('').window
  const purify = dompurify(window)
  return purify.sanitize(source, {
    ADD_ATTR: ['target'], 
  })
}

これをテスト時にmockで差しこんだら通った。
スマートじゃない気もするけど、そんなにこだわる部分じゃないからなぁ。