为什么 jest 或 jsdom 不支持 contenteditable答案

【问题标题】：Why jest or jsdom does not support contenteditable为什么 jest 或 jsdom 不支持 contenteditable
【发布时间】：2021-02-17 20:46:28
【问题描述】：

我有一个测试用例：

test('get html element content editable value', () => {
  // arrange
  const id = 'foo';
  document.body.innerHTML = `<div id='${id}' contenteditable="true">1</div>`;

  // act
  const elem = document.getElementById(id);

  // assert
  expect(elem.isContentEditable).toBe(true);
  expect(elem.contentEditable).toBe('true');
});

预期：真实，真实
实际：未定义，未定义

如果我在 TypeScript 中使用 new DOMParser().parseFromString(html, 'text/html')，我会得到相同的输出。但它在 TypeScript 操场上运行良好。此外，如果我使用jsfiddle，它也可以工作。

这是否意味着jsdom 或jest 对contenteditable 属性的支持有限？

【问题讨论】：

标签： typescript jestjs jsdom

【解决方案1】：

这似乎是自 2016 年以来的一个已知问题：https://github.com/jsdom/jsdom/issues/1670

2020 年仍未实施。

【讨论】：

【解决方案2】：

正如 Maxim 所指出的，这是一个已知问题，无意修复。如果您只是对 contentEditable 属性感兴趣，您可以在测试设置中添加以下内容作为解决方法：

// JSDOM does not support Element.contentEditable
// https://github.com/jsdom/jsdom/issues/1670
const jsdom = new JSDOM(...)
Object.defineProperty(jsdom.window.HTMLElement.prototype, 'contentEditable', {
    get: function() {
        return this.getAttribute('contenteditable')
    }
})

【讨论】：