Jest- JSDOM 在实例化 JSDOM 时将 HTML 传递给 Jest 中的 JSDOM 构造函数

Question

有没有办法将 HTML 传递给 jest 内置 JSDOM 中的构造函数，例如

const dom = new JSDOM('<!DOCTYPE html><p>Hello world</p>'); - in orginal JSDOM

我查看了 Jest 配置 API，JSDOM 有两个 testEnvironment [string] 和 testEnvironmentOptions，但是它看来他们不能满足我的要求。

谁能告诉我如何解决这个问题

Answer 1

JSDOM 实例创建 here 仅 '<!DOCTYPE html>'。

因此，使用在 jest-environment-jsdom.

中创建的内置 JSDOM 实例，使用自定义 HTML 初始化 JSDOM 是不可能的

但是，您可以将 document.body 设置为您想要的任何值：

test('change document body', () => {
  document.body.innerHTML = '<p>Hello world</p>';
  expect(document.body.innerHTML).toBe('<p>Hello world</p>');  // Success!
});

...并且您始终可以在 node 环境中运行并创建您自己的 JSDOM 实例：

/**
 * @jest-environment node
 */
const { JSDOM } = require("jsdom");
const { window } = new JSDOM('<!DOCTYPE html><p>Hello world</p>');
const { document } = window;

test('initialize JSDOM with custom HTML', () => {
  expect(document.body.innerHTML).toBe('<p>Hello world</p>');  // Success!
});

Jest- JSDOM 在实例化 JSDOM 时将 HTML 传递给 Jest 中的 JSDOM 构造函数

Jest- JSDOM Pass HTML to JSDOM constructor in Jest when instantiate JSDOM

javascript

unit-testing

jestjs

jsdom