Node.jsでjQuery DOM操作テスト

Node.jsからjQueryを使ってHTMLやXMLのDOMを操作するサンプルコードです。

jsdomとjqueryをnpmインストール
サンプルコード
サンプルコードを実行

jsdomとjqueryをnpmインストール

Node.jsでjQuery DOM操作を行うために、まずはjsdomとjqueryモジュールをnpmインストールしておきます:

$ npm install --save jsdom jquery

サンプルコード

以下のサンプルコードでは、jQueryのDOM操作で正しく値が取得できているかをassertでテストしています。

nodejs-jquery-test.js

//
// Node.jsでjqueryのテスト
//
// 下準備:
// $ npm i --save jquery jsdom

const assert = require("assert");
const { JSDOM } = require("jsdom");
const jQuery = require("jquery");

//
// ** HTMLの場合
// 
(function() {
  // テストデータ:
  const testdata = `
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>タイトル</title>
</head>
<body>
    <div id="app">
        <span class="test">テスト1</span>
        <span class="test">テスト2</span>
        <span class="test">テスト3</span>
    </div>
</body>
</html>`;
  // or:
  // const testdata = fs.readFileSync("./test.html");
  const dom = new JSDOM(testdata.trim());
  const $ = jQuery(dom.window);
  const $doc = $(dom.window.document);
  // DOM操作テスト
  assert.equal($doc.find("title").text(), "タイトル");
  assert.equal($("#app .test").eq(0).text(), "テスト1");
  assert.equal($("#app .test").eq(1).text(), "テスト2");
  assert.equal($("#app .test").eq(2).text(), "テスト3");
  // HTML全体を比較:
  const html = '<!DOCTYPE html>' + $doc[0].documentElement.outerHTML;
  assert.equal(html.replace(/(\n|\t)/g, ''), testdata.replace(/(\n|\t)/g, ''));

  console.log("HTML tests all succeeded.");
}());

//
// ** XMLの場合
// 
(function() {
  // テストデータ:
  const testdata = `
<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
  <title>My Homepage</title>
  <link>https://www.example.com</link>
  <description>Free web building tutorials</description>
  <item>
    <title>RSS Tutorial</title>
    <link>https://www.example.com/xml/xml_rss.asp</link>
    <description>New RSS tutorial on My Homepage</description>
  </item>
  <item>
    <title>XML Tutorial</title>
    <link>https://www.example.com/xml</link>
    <description>New XML tutorial on My Homepage</description>
  </item>
</channel>
</rss>`;
  // or:
  // const testdata = fs.readFileSync("./test.xml");
  const { JSDOM } = require("jsdom");
  // NOTE: XMLの場合はJSDOM生成オプションに { contentType: "text/xml" } を指定します:
  const dom = new JSDOM(testdata.trim(), { contentType: "text/xml" }); 
  const $ = jQuery(dom.window);
  const $doc = $(dom.window.document);
  // DOM操作テスト
  assert.equal($doc.find("rss").attr("version"), "2.0");
  assert.equal($doc.find("channel > item > title").eq(0).text(), "RSS Tutorial");
  assert.equal($doc.find("channel > item > title").eq(1).text(), "XML Tutorial");
  // XML全体を比較:
  const xml = '<?xml version="1.0" encoding="UTF-8" ?>' + $doc[0].documentElement.outerHTML;
  assert.equal(xml.replace(/(\n|\t)/g, ''), testdata.replace(/(\n|\t)/g, ''));

  console.log("XML tests all succeeded.");
}());

HTML版もXML版もコードは殆ど同じですが、唯一異なる箇所は、XML版の場合にはJSDOMインスタンス生成時のオプションに{contentType:"text/html"}を指定しているところです。

サンプルコードを実行

$ node nodejs-jquery-test.js

HTML tests all succeeded.
XML tests all succeeded.

上記の通り、例外が発生すること無く処理が通っていることが分かります。

以上です。