是否可以使用 Jest testEnvironmentOptions 来更改初始 JSDOM HTML？答案

【问题标题】：Is it possible to use Jest testEnvironmentOptions to change initial JSDOM HTML?是否可以使用 Jest testEnvironmentOptions 来更改初始 JSDOM HTML？
【发布时间】：2018-07-29 15:08:53
【问题描述】：

在 Jest 中，我想将初始 JSDOM HTML 更改为

<head></head><body></body>

到

<head></head><body><div id="app"></div></body>

为了将enzymes mount 与attachTo 选项一起使用。

我了解testEnvironmentOptions 可用于将选项传递给JSDOM。是否有 HTML 字段？

【问题讨论】：

标签： jestjs enzyme jsdom

【解决方案1】：

根据jest source 似乎使用testEnvironmentOptions 是不可能的。

你可以扩展JSDOMEnvironment（见here）并实现你自己的dom。但是，我认为你走错了方向。如果从一开始就没有通过 jsdom 的 div，那么使用 mount 和 attachTo 应该不会有问题。

类似：

wrapper = mount(
  <App/>, {attachTo: document.createElement('div')}
);

编辑：

扩展 JSDOMEnvironment 应该是这样的：（你应该在你的 jest 配置中从 testEnvironment 指向这个文件）

const JSDOMEnvironment = require('jest-environment-jsdom');

module.exports = class CustomizedJSDomEnvironment extends JSDOMEnvironment {
  constructor(config) {
    super(config);
    this.global.jsdom = this.dom;// here you can try playing with JSDOM configurations
  }

  teardown() {
    this.global.jsdom = null;
    return super.teardown();
  }
};

【讨论】：

感谢您的回答！我在代码中有一些非反应逻辑，它直接与 DOM 交互（即document.getElementById(elementId)）。这就是为什么需要将节点附加到 DOM 的原因。目前我在做const app = document.createElement('div'); app.setAttribute('id', 'app'); document.body.appendChild(app);，然后再做mount。有用。但我认为可能会有一个更集中的地方。
你可以扩展JSDOMEnvironment，我用一个例子更新了答案