LoginSignup
1
0

More than 5 years have passed since last update.

@vue/cli-plugin-unit-mochaでHTMLをパースする

Last updated at Posted at 2019-01-09

HTMLをパースするW3C標準のAPIとしてDOMParser(仕様策定中)がある。Node.jsからこのようなブラウザでサポートされるAPIを使うためには、jsdom(グローバル変数を注入するのであればjsdom-global)がよく使われる。

Javascriptでjsdomを使う場合は以下のように読み込めばよい。

// JSDOMインスタンスからwindowオブジェクトを参照する。
const DOMParser = new (require('jsdom').JSDOM)().window.DOMParser;

// jsdom-globalを使う場合はwindowオブジェクトが注入される。
require('jsdom-global')();
const DOMParser = window.DOMParser;

@vue/cli-plugin-unit-mochaにもjsdom-globalが組み込まれているが、TypeScriptを使うとwindowの型がWindow型となり、DOMParserを参照できない。

ERROR in ... Property 'DOMParser' does not exist on type 'Window'.

おそらく型定義ファイルを整理すれば参照できるようになると推測するが、今回はHTMLのパースができればよかったため、Element.innerHTMLで代用した。

const html = "<p>test</p>";
const div = document.createElement('body');
div.innerHTML = html;
const doc = div.querySelector('body > *');

参考

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0