How to Read External HTML Files in jest

I would like to conduct a test using the JEST framework.
The JEST document writes HTML using document.body.innerHTML as shown below.
Is there a way to view an external HTML file without using document.body.innerHTML?

//Set up your 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, install of document.body.innerHTML.

javascript html jestjs

2022-09-30 21:48

1 Answers

existing.

The directory configuration is as follows:

.
├-- src/___tests__
│   -- -- index.test.ts
│   ----index.html
└-- jest.config.js

Packages

 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>
  <metacharset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jest document</title>
</head>
<body>
  <h1class="title">hello world</h1>
</body>
</html>

The first method is to use the fs library.

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

// If it's just a body element,
document.body.innerHTML =fs.readFileSync(__dirname+"/index.html", {encoding:"utf-8"}); 

// <head> If you also want to change the elements in the tag
document.querySelector("html").innerHTML=fs.readFileSync(__dirname+"/index.html", {encoding:"utf-8"});

You can do it withHowever, this question is clearly stated without using document.body.innerHTML, so I will introduce method 2.

Inside Jest, we use JSDOM to manage DOMs, as shown at the bottom of the JSDOM.
In other words, JSDOM's API will help you find the answer to this question.

`fromFile`

For example, if you use the API fromFile, you can write:

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

describe("test suite",() = > {
  beforeAll(async()=>{
    console.log(__dirname+"/index.html");
    const jsdom = wait fromFile(__dirname+"/index.html");
    // override the document of the window defined by jest
    Object.defineProperty(window, "document", {
      writable —true,
      value —jsdom.window.document,
    });
  });

  it("test with fromFile", async()=>{
    const$=require("jquery"; // jQuery reads after document is set
    expect( document.querySelector(".title").textContent).toEqual("hello world");
    expect($("h1").text()) .toEqual("hello world");
  });
});

Internally, fs.writeFile runs as introduced in Method 1, but the second argument of fromFile has some control over vm.

`fromURL`

You can also retrieve HTML from the URL.However, be careful not to hit too many HTTP requests.

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

describe("test suite",() = > {
  beforeAll(async()=>{
    const jsdom = wait fromURL("https://example.com/");
    // override the document of the window defined by jest
    Object.defineProperty(window, "document", {
      writable —true,
      value —jsdom.window.document,
    });
  });
  it("test with fromURL", async()=>{
    const$=require("jquery"; // jQuery reads after document is set
    expect($("h1").text()) .toEqual("Example Domain");
  });
});

2022-09-30 21:48

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656