无法检查 expect(elm).not.toBeVisible() 的语义 UI 反应组件 [英] Cannot check expect(elm).not.toBeVisible() for semantic-ui react component

查看：19
本文介绍了无法检查 expect(elm).not.toBeVisible() 的语义 UI 反应组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试测试 React 组件并使用 expect(elm).not.toBeVisible() 没有成功.

更新 3

我已将代码缩减为更简单的形式:

//./TestItem.js从反应"导入反应导入'./TestItem.css'导出默认值({隐藏})=>{返回 <div 类名={隐藏 ?'shouldHide' : ''}>Text</div>}//./__tests__/TestItem.test.js从反应"导入反应从反应测试库"导入{渲染}从 '../TestItem' 导入 TestItem导入'玩笑-DOM/扩展-期望'导入'react-testing-library/cleanup-after-each'test.only('TestItem 应该正确呈现', async () => {const { getByText, debug } = render(<TestItem hide={true}/>)const itemNode = getByText('Text')调试()期望(itemNode).not.toBeVisible()})//./TestItem.css.应该隐藏{显示:无；}

测试结果:

 TestItem 应该正确呈现期望(元素).not.toBeVisible()接收到的元素可见:<div class="shouldHide"/>7 |const itemNode = getByText('Text')8 |调试()>9 |期望(itemNode).not.toBeVisible()|^10 |})11 |

debug() 日志:

console.log node_modules/react-testing-library/dist/index.js:58<身体><div>

更新 2:

好吧，这变得很奇怪，因为我让测试通过了 codesanbox 但在我的本地机器上仍然没有运气.

<小时>

我最初的问题:

我使用 React、semantic-ui-react 和 react-testing-library.

代码如下:

//ComboItem.test.js从反应"导入反应从 '../ComboItem' 导入 ComboItem从反应测试库"导入{渲染}从'../images/combo-xoi.jpg'导入comboXoi导入'path/to/semantic/semantic.min.css'描述('组合项'，()=> {测试('应该渲染'，异步()=> {const { getByText，调试 } = 渲染(<ComboItem image={comboXoi} outOfStock={false}/>)const outOfStockNotice = getByText('缺货')调试()期望(outOfStockNotice).not.toBeVisible()})})//ComboItem.js从反应"导入反应从 'semantic-ui-react' 导入 { Card, Image }导出默认值 ({ image, outOfStock = false }) =>{返回 (<卡片><图像源={图像}调光器={{活动:缺货，倒置:真实，'data-testid': 'combo-item-dimmer',内容: (<span style={{ marginTop: 'auto', color: 'black' }}>缺货</span>),}}/></卡片>)}

我得到的是这里的结果:

ComboItem › 应该呈现期望(元素).not.toBeVisible()接收到的元素可见:<span style="margin-top: auto; color: black;"/>在 Object.test (src/app/screens/App/screens/SaleEntries/screens/CreateSaleEntry/screens/StickyRiceComboSelect/__tests__/ComboItem.test.js:14:34)在 process._tickCallback (internal/process/next_tick.js:68:7)

我尝试在浏览器上查看组件渲染结果，测试代码中的节点outOfStockNotice实际上是隐藏的，因为它的父节点是一个带有dimmer 有样式 display: none.

根据 jest-dom 文档(由 testing-react-library 使用:

<块引用>

toBeVisible

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

  • 它的css属性显示没有设置为none
  • 它的 css 属性可见性未设置为隐藏或折叠
  • 它没有将其 css 属性 opacity 设置为 0
  • 它的父元素也是可见的(以此类推到 DOM 树的顶部)

请帮忙.我真的不知道这里会出现什么问题.

更新:

我在此处包含 debug() 的结果:

console.log node_modules/react-testing-library/dist/index.js:58<身体><div>

<imgsrc="combo-xoi.jpg"/>

解决方案

这里是答案根据 react-testing-library 的作者本人的说法:

<块引用>

可能是 JSDOM 的限制(在代码和盒子中它在真实浏览器中运行).实际上，问题在于 css 并没有真正加载到 JSDOM 中的文档中.如果是这样，那么这将起作用.如果您能想出一个自定义 Jest 转换，可以在测试期间将 css 文件插入到文档中，那么您就大功告成了.

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

所以基本上测试中的 import './TestItem.css' 部分将不起作用，因为 JSDOM 没有加载它，因此 jest-dom 无法理解类 shouldHide 表示 display: none.

更新:

根据这个Stack Overflow thread，可以插入css进入jsdom:

从 'react' 导入 React从反应测试库"导入{渲染}从 '../TestItem' 导入 TestItem从'fs'导入fs从路径"导入路径test.only('TestItem 应该正确呈现', 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 = '文本/css'style.innerHTML = cssFile容器.附加(样式)const itemNode = getByText('Text')调试()期望(itemNode).not.toBeVisible()})

然后测试应该通过.

I'm trying to test a react component and use expect(elm).not.toBeVisible() without success.

Update 3

I have cut down the code into this simpler form:

// ./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;
}

Test result:

 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() log:

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

Update 2:

Okay it's getting pretty weird because I got the test to pass on codesanbox but still find no luck on my local machine.

My original question:

I use React, semantic-ui-react and react-testing-library.

Here is the code:

// 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>
  )
}

What i get is the result here:

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)

I have tried to see the component render result on the browser and the node outOfStockNotice in the test code is actually hidden because its parent, which is a div with class dimmer has style display: none.

According to jest-dom doc (which is used by testing-react-library:

toBeVisible

An element is visible if all the following conditions are met:

Please help. I really don't know what could go wrong here.

Update:

I include the result of debug() here:

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>

解决方案

Here is the answer according to the author of react-testing-library himself:

Probably a JSDOM limitation (in codesandbox it runs in the real browser). Actually, the problem is that the css isn't actually loaded into the document in JSDOM. If it were, then that would work. If you can come up with a custom jest transform that could insert the css file into the document during tests, then you'd be set.

So this would work if you were using CSS-in-JS.

So basically the import './TestItem.css' part in the test will not works because JSDOM doesn't load it, therefore jest-dom could not understand the class shouldHide means display: none.

Update:

According to this Stack Overflow thread, you can insert css into 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()
})

And then the test should pass.

这篇关于无法检查 expect(elm).not.toBeVisible() 的语义 UI 反应组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆