innerText在jest测试中未定义

ie3xauqp 于 2023-01-06 发布在 Jest

关注(0)|答案(3)|浏览(220)

在使用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()
  })

但是当使用相同的代码而不是在jest测试中时，innerText显示：

'a

b

c'

并且文本内容是'abc'。
为什么innerText在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'
  ...

jestjs

来源：https://stackoverflow.com/questions/47902335/innertext-is-undefined-in-jest-test

3条答案

按热度按时间

fdbelqdn1#

如果您使用的是默认的testEnvironment，那么您使用的是jsdom。
您可以检查此问题，以了解为什么它没有在jsdom中实现：https://github.com/tmpvar/jsdom/issues/1245
主要问题是innerText依赖于布局引擎作为指导，而jsdom没有布局引擎
如果你想要“全面”的浏览器支持，你可以检查 puppet

赞(0）回复(0）举报 2023-01-06

owfi6suc2#

基于Matthew Souther的回答，下面是我编写的代码片段，用于一次性获取多个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])

赞(0）回复(0）举报 2023-01-06

zdwk9cvp3#

尝试使用textContent而不是innerText

赞(0）回复(0）举报 2023-01-06