这里有类似的问题-无法检查语义UI响应组件的Expect（elm）.not.toBeVisible（）-但是答案表明这应该适用于CSS-in-JS，这是我正在使用的。
我正在使用Material-UI的
组件仅在sm屏幕尺寸及以上显示一些文本。这是代码（在生产环境中完美运行）：
<隐藏的实现=“ css” xsDown>
我正在将jest-dom与react-testing-library一起使用，并尝试测试包含此隐藏文本的导航栏的响应能力。
我有以下测试：
const initTest = width => {
Object.defineProperty（window，“ innerWidth”，{
可写：是的，
可配置：true，
值：宽度
}）;
window.matchMedia = jest.fn（）。mockImplementation（
查询=> {
返回{
匹配：width> = theme.breakpoints.values.sm吗？真假，
媒体：查询，
onchange：null，
addListener：jest.fn（），
removeListener：jest.fn（）
};
}
）;
const height = Math.round（（width * 9）/ 16）;
返回{width，height};
};
describe（“ Unit：
在xs屏幕上”，（）=> {
it（“以最小尺寸呈现为快照”，异步（）=> {
const {width，height} = initTest（320）;
const {asFragment，rerender} = render（
<导航栏/>
）;
重新提交
<导航栏/>
）;
Expect（asFragment（））。toMatchSnapshot（）;
const screenshot = await generateImage（{
视口：{宽度，高度}
}）;
Expect（screenshot）.toMatchImageSnapshot（）;
}）;
它（“以最大大小提供快照”，异步（）=> {
const {width，height} = initTest（theme.breakpoints.values.sm-1）;
const {asFragment，rerender} = render（
<导航栏/>
）;
重新提交
<导航栏/>
）;
Expect（asFragment（））。toMatchSnapshot（）;
const screenshot = await generateImage（{
视口：{宽度，高度}
}）;
Expect（screenshot）.toMatchImageSnapshot（）;
}）;
it（“隐藏徽标文字”，async（）=> {
initTest（theme.breakpoints.values.sm-1）;
const {rerender，getByText} = render（
<导航栏/>
）;
重新提交
<导航栏/>
）;
await wait（（）=> Expect（getByText（“ LOGO TEXT”））。not.toBeVisible（））;
}）;
}）;
前两个测试截取了屏幕截图，当我查看屏幕截图时，可以看到徽标文本不可见：
以最小尺寸呈现为快照：https：//i.imgur.com/qiDdA3p.png
以最大尺寸呈现为快照：https：//i.imgur.com/AaZKHGZ.png
当我在浏览器中以xs大小查看DOM时，我看到父组件确实被隐藏了：https://i.imgur.com/TfBpePV.png
但是，当我运行测试时，它失败并说该元素可见：
●单位：<导航栏>在xs屏幕上›隐藏徽标文本
Expect（element）.not.toBeVisible（）
收到的元素是可见的：
如果我在Expect（）之前添加console.log（innerWidth），那么它会返回正确的宽度，因此问题不在于jsdom呈现的屏幕宽度错误。
另外，如果我将组件的实现从CSS更改为JS，它也可以正常工作（因为使用JS将元素完全从文档中取出，而不仅仅是使用媒体查询将其隐藏）。
我该如何解决才能使其正常工作？