无法检查 expect(elm).not.toBeVisible() 的语义 UI 反应组件 | 无法检查
本文介绍了无法检查 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:
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:
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 反应组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-18 10:53