0

JESTフレームワークでテストを実施したいです。
JESTドキュメントでは下のようにdocument.body.innerHTMLによってHTMLを書き込んでいます。
document.body.innerHTMLを使わずに、外部のHTMLファイルをそのまま参照する方法はないのでしょうか。

// Set up our document body
document.body.innerHTML =
  '<div>' +
  '  <span id="username" />' +
  '  <button id="button" />' +
  '</div>';

I'd like to find the way to read HTML file in JavaScript file.
For example, in https://jestjs.io/docs/ja/tutorial-jquery, we directly write some HTML contents like above.

But I'd like to read one HTML file, instead of document.body.innerHTML.

1 件の回答 1

1

存在します。

構造

ディレクトリ構成を次のようにします。

.
├── src/__tests__
│   ├── index.test.ts
│   └── index.html
└── jest.config.js

パッケージ類

yarn add -D jest jsdom jquery

jest.config.js

module.exports = {
  "automock": false,
  "unmockedModulePathPatterns": ["<rootDir>/node_modules/*"],
  "moduleDirectories": ["node_modules"],
  "moduleFileExtensions": ["js", "jsx", "node"],
  "testMatch": ["**/__tests__/*.test.+(js|jsx)"],
  "collectCoverage": true
};

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jest document</title>
</head>
<body>
  <h1 class="title">hello world</h1>
</body>
</html>

方法1

1つ目の方法は、fsライブラリを利用することです。

// index.test.ts
const fs = require("fs");

// もしbody要素だけであれば
document.body.innerHTML = fs.readFileSync(__dirname + "/index.html", { encoding: "utf-8" }); 

// <head>タグ内の要素も変更したい場合
document.querySelector("html").innerHTML = fs.readFileSync(__dirname + "/index.html", { encoding: "utf-8" });

とやればよいでしょう。ただし、今回の質問は明確に document.body.innerHTML を使わずにとあるので、方法2を紹介します。

方法2

ドキュメントの下部にあるように、Jest内部ではJSDOMを利用してDOMをManupulationしています。
つまり、JSDOMのAPIを利用すれば今回の質問に対する答えが見つかります。

fromeFileを利用する

例えば、fromFileというAPIを利用する場合次のように書けます。

// index.test.ts
const { JSDOM } = require("jsdom");
const { fromFile } = JSDOM;

describe("test suite", () => {
  beforeAll(async () => {
    console.log(__dirname + "/index.html");
    const jsdom = await fromFile(__dirname + "/index.html");
    // jestがglobalに定義してあるwindowのdocumentをoverrideする
    Object.defineProperty(window, "document", {
      writable: true,
      value: jsdom.window.document,
    });
  });

  it("test with fromFile", async () => {
    const $ = require("jquery"); // jQueryはdocumentがセットされた後に読み込む
    expect(document.querySelector(".title").textContent).toEqual("hello world");
    expect($("h1").text()).toEqual("hello world");
  });
});

内部的には方法1で紹介したようなfs.writeFileが走っていますが、fromFileの第2引数でvmの実行をある程度制御することが出来ます。

fromURLを利用する

HTMLをURLから取得することも出来ます。ただし、HTTP Requestが走ってしまうので叩き過ぎには気をつけましょう。

const { JSDOM } = require("jsdom");
const { fromURL } = JSDOM;

describe("test suite", () => {
  beforeAll(async () => {
    const jsdom = await fromURL("https://example.com/");
    // jestがglobalに定義してあるwindowのdocumentをoverrideする
    Object.defineProperty(window, "document", {
      writable: true,
      value: jsdom.window.document,
    });
  });
  it("test with fromURL", async () => {
    const $ = require("jquery"); // jQueryはdocumentがセットされた後に読み込む
    expect($("h1").text()).toEqual("Example Domain");
  });
});

参考

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。