无法检查Expect（elm）.not.toBeVisible（）的语义UI反应组件

有翰海

2023-03-14

问题内容：

我正在尝试测试React组件并使用expect(elm).not.toBeVisible()失败。

更新3

我将代码缩减为以下更简单的形式：

// ./TestItem.js
import React from 'react'
import './TestItem.css'

export default ({ hide }) => {
  return <div className={hide ? 'shouldHide' : ''}>Text</div>
}

// ./__tests__/TestItem.test.js
import React from 'react'
import { render } from 'react-testing-library'
import TestItem from '../TestItem'
import 'jest-dom/extend-expect'
import 'react-testing-library/cleanup-after-each'


test.only('TestItem should render correctly', async () => {
  const { getByText, debug } = render(<TestItem hide={true} />)
  const itemNode = getByText('Text')
  debug()
  expect(itemNode).not.toBeVisible()
})

// ./TestItem.css
.shouldHide {
  display: none;
}

测试结果：

 TestItem should render correctly

    expect(element).not.toBeVisible()

    Received element is visible:
      <div class="shouldHide" />

       7 |   const itemNode = getByText('Text')
       8 |   debug()
    >  9 |   expect(itemNode).not.toBeVisible()
         |                        ^
      10 | })
      11 |

debug() 日志：

console.log node_modules/react-testing-library/dist/index.js:58
    <body>
      <div>
        <div
          class="shouldHide"
        >
          Text
        </div>
      </div>
    </body>

更新2：

好的，这变得非常奇怪，因为我通过了测试以通过codesanbox，但是在本地计算机上仍然没有运气。

我原来的问题：

我使用React，语义UI反应和react-testing-library。

这是代码：

// ComboItem.test.js    
import React from 'react'
import ComboItem from '../ComboItem'
import { render } from 'react-testing-library'
import comboXoi from '../images/combo-xoi.jpg'
import 'path/to/semantic/semantic.min.css'

describe('ComboItem', () => {
  test('should render', async () => {
    const { getByText, debug } = render(
      <ComboItem image={comboXoi} outOfStock={false} />
    )
    const outOfStockNotice = getByText('Out of stock')
    debug()
    expect(outOfStockNotice).not.toBeVisible()
  })
})

// ComboItem.js
import React from 'react'
import { Card, Image } from 'semantic-ui-react'

export default ({ image, outOfStock = false }) => {
  return (
    <Card>
      <Image
        src={image}
        dimmer={{
          active: outOfStock,
          inverted: true,
          'data-testid': 'combo-item-dimmer',
          content: (
            <span style={{ marginTop: 'auto', color: 'black' }}>
               Out of stock
            </span>
          ),
        }}
      />
    </Card>
  )
}

我得到的是这里的结果：

ComboItem › should render

    expect(element).not.toBeVisible()

    Received element is visible:
      <span style="margin-top: auto; color: black;" />

      at Object.test (src/app/screens/App/screens/SaleEntries/screens/CreateSaleEntry/screens/StickyRiceComboSelect/__tests__/ComboItem.test.js:14:34)
      at process._tickCallback (internal/process/next_tick.js:68:7)

我试图查看组件在浏览器上的渲染结果，并且outOfStockNotice测试代码中的节点实际上是隐藏的，因为它的父级（dimmer具有类的div
具有style）display: none。

根据jest-domdoc（由testing-react-library：

可见

如果满足以下所有条件，则元素是可见的：

它没有将其css属性显示设置为none

它没有将其CSS属性可见性设置为隐藏或折叠

它没有将其CSS属性不透明度设置为0

其父元素也是可见的（依此类推直到DOM树的顶部）

请帮忙。我真的不知道这里可能出什么问题。

更新：

我将debug()这里的结果包括在内：

console.log node_modules/react-testing-library/dist/index.js:58
      <body>
        <div>
          <div
            class="ui card"
          >
            <div
              class="ui image"
            >
              <div
                class="ui inverted dimmer"
                data-testid="combo-item-dimmer"
              >
                <div
                  class="content"
                >
                  <span
                    style="margin-top: auto; color: black;"
                  >
                    Out of stock
                  </span>
                </div>
              </div>
              <img
                src="combo-xoi.jpg"
              />
            </div>
          </div>
        </div>
      </body>

问题答案：

根据他自己的作者，这是答案react- testing-library：

可能是JSDOM限制（在codeandbox中，它在实际的浏览器中运行）。实际上，问题在于css并未真正加载到JSDOM中的文档中。如果是这样，那将起作用。如果您想出一个自定义的笑话转换，可以在测试过程中将css文件插入文档中，那么您将被设置。

因此，如果您使用CSS-in-JS，这将起作用。

因此，基本上该import './TestItem.css'测试中的部分将无法正常工作，因为JSDOM不会加载它，因此jest- dom无法理解类的shouldHide均值display: none。

更新：

根据这个，您可以将CSS插入jsdom中：

import React from 'react'
import { render } from 'react-testing-library'
import TestItem from '../TestItem'

import fs from 'fs'
import path from 'path'

test.only('TestItem should render correctly', async () => {
  const cssFile = fs.readFileSync(
    path.resolve(__dirname, '../TestItem.css'),
    'utf8'
  )
  const { container, getByText, debug } = render(<TestItem hide={true} />)

  const style = document.createElement('style')
  style.type = 'text/css'
  style.innerHTML = cssFile
  container.append(style)

  const itemNode = getByText('Text')
  debug()
  expect(itemNode).not.toBeVisible()
})

然后测试应该通过。

无法检查Expect（elm）.not.toBeVisible（）的语义UI反应组件

相关阅读

相关文章

相关问答

相关工具

相关文档