存在します。
構造
ディレクトリ構成を次のようにします。
.
├── 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");
});
});
参考