无法检查Expect(elm).not.toBeVisible()的语义UI反应组件 [英] Cannot check expect(elm).not.toBeVisible() for semantic-ui react component
问题描述
我正在尝试测试React组件并使用expect(elm).not.toBeVisible()失败.
I'm trying to test a react component and use expect(elm).not.toBeVisible() without success.
更新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;
}
测试结果:
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:
Okay it's getting pretty weird because I got the test to pass on codesanbox but still find no luck on my local machine.
我的原始问题:
我使用React，语义UI反应和react-testing-library.
I use React, semantic-ui-react and 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>
)
}
我得到的是这里的结果:
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)
我试图查看组件在浏览器上的渲染结果，并且测试代码中的节点outOfStockNotice实际上是隐藏的，因为它的父级是类dimmer的div，其样式为display: none.
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.
根据jest-dom文档(testing-react-library使用的文档:
According to jest-dom doc (which is used by testing-react-library:
toBeVisible
toBeVisible
如果满足以下所有条件，则该元素可见:
An element is visible if all the following conditions are met:
- 它的css属性显示未设置为none
- 它的css属性可见性未设置为隐藏"或折叠"
- 它的css属性不透明度不设置为0
- 它的父元素也是可见的(依此类推，直到DOM树的顶部)
- it does not have its css property display set to none
- it does not have its css property visibility set to either hidden or collapse
- it does not have its css property opacity set to 0
- its parent element is also visible (and so on up to the top of the DOM tree)
请帮助.我真的不知道这里可能出什么问题.
Please help. I really don't know what could go wrong here.
更新:
我将debug()的结果包括在这里:
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>
推荐答案
这是答案据react-testing-library自己的作者说:
可能是JSDOM限制(在codeandbox中它在实际的浏览器中运行).实际上，问题在于css并未真正加载到JSDOM中的文档中.如果是这样，那将起作用.如果您想出一个自定义的笑话转换，可以在测试过程中将css文件插入文档中，那么您将被设置.
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.
因此，如果您使用的是CSS-in-JS，这将起作用.
So this would work if you were using CSS-in-JS.
所以基本上测试中的import './TestItem.css'部分将不起作用，因为JSDOM不会加载它，因此jest-dom无法理解类shouldHide的意思是display: none.
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.
更新:
根据此堆栈溢出线程，您可以插入CSS进入jsdom:
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()
})
然后测试应该通过.
这篇关于无法检查Expect(elm).not.toBeVisible()的语义UI反应组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
