时间戳

首页 > 解决方案 > Jest- JSDOM 在实例化 JSDOM 时将 HTML 传递给 Jest 中的 JSDOM 构造函数

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

问题描述

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

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

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

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

标签： javascriptunit-testingjestjsjsdom

解决方案

该JSDOM实例仅在此处'<!DOCTYPE html>'创建。

所以用自定义 HTML 初始化 JSDOM 是不可能JSDOM用jest-environment-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!
});

推荐阅读