开玩笑测试中未定义 innerText答案

【问题标题】：innerText is undefined in jest test开玩笑测试中未定义 innerText
【发布时间】：2018-06-02 19:05:16
【问题描述】：

在使用 jest 进行测试时，我看到属性 innerText 在未进行测试时未定义，但它具有正确的值。

  it('get text from div', () => {
    const div = document.createElement('DIV')
    div.innerHTML = '<br>a<br>b<br>c'
    console.log('innerText', div.innerText) // undefined
    console.log('textContent', div.textContent) // 'abc'
    // expect(getTextFromDiv(div).length).toMatchSnapshot()
  })

但是当使用相同的代码而不是开玩笑测试时，innerText 显示：

'a

b

c'

textContent 是'abc'。

为什么innerText in jest 是未定义的，而当它不在jest 中时，值是真实的？

这是它工作的代码（不是开玩笑）：

const addTextInRichTextToPdf = (doc, text, offsetY) => {
  const div = document.createElement('DIV')
  div.innerHTML = '<br>a<br>b<br>c'
  console.log('innerText', div.innerText) // print the real value
  console.log('textContent', div.textContent) // 'abc'
  ...

【问题讨论】：

标签： javascript reactjs jestjs

【解决方案1】：

如果你使用默认的testEnvironment，那么你使用的是jsdom。

你可以查看这个问题，看看为什么它没有在 jsdom 中实现： https://github.com/tmpvar/jsdom/issues/1245

主要问题是innerText依靠布局引擎来指导，而jsdom没有布局引擎

如果您想要“完整”的浏览器支持，您可以查看puppeteer

【讨论】：

那些寻找替代品的人应该考虑textContent而不是innerText。
textContent 帮助解决了我的问题。谢谢！
2021 年更喜欢 playwright.dev 而不是 puppeteer

【解决方案2】：

以 Matthew Souther 的回答为基础，这里是我想出的代码 sn-p 以一次性获取多个 dom 子元素的文本：

const getInnerText = (element) => element?.textContent
          ?.split('\n')
          .filter((text) => text && !text.match(/^\s+$/))
          .map((text) => text.trim());

textContent 会带来很多噪音，当 html 元素没有文本（或只有空格的字符串）时，它会返回一个空字符串。因此，我过滤空行和仅包含空格（或制表符）的行。我还修剪了结果条目。我到处使用问号（可选链接）的原因是，如果文本丢失，我宁愿得到“未定义”而不是抛出错误。

以下是该功能的使用方法：

const getInnerText = (element) => element?.textContent
          ?.split('\n')
          .filter((text) => text && !text.match(/^\s+$/))
          .map((text) => text.trim());

const div = document.createElement('DIV')
div.innerHTML = `
hello

world ?
`;

const result = getInnerText(div);

// will display "world ?"
console.log(result?.[1])

【讨论】：