Javascript 开玩笑+；样式化组件-.toHaveStyleRule对嵌套组件

我有一个组件，看起来像：

import React，{ReactElement，useState}来自“React”
从“样式化组件”导入样式化
export const ExpandedView=styled.div`
@介质（最大宽度：768px）{
显示：${（{isExpanded}）=>（isExpanded？'block'：'none'）；
}
`
常量卡（）=>{
常量[isExpanded，setExpanded]=useState（false）
返回(
setExpanded（！isExpanded）}data test=“卡按钮”>打开
扩展视图内容
)
}

我想测试

ExpandedView

上的

display

属性，但是如果我尝试执行以下测试：

description（'Card'，（）=>{
它（'更改显示'，异步（）=>{
const wrapper=mount（）
expect（wrapper.find（'[data test=“expanded view]'）.toHaveStyleRule(
“显示”，
“没有”，
{
介质：'（最大宽度：768px）'
}
)
包装纸
.find（“[data test=“卡按钮”]”）
.first（）
.childAt（0）
.simulate（'单击'）
expect（wrapper.find（'[data test=“expanded view]'）.toHaveStyleRule(
“显示”，
"积木",，
{
介质：'（最大宽度：768px）'
}
)
})
})

我得到一个错误

在传递的组件上找不到样式规则

，经过研究，我找不到使用

.toHaveStyleRule

测试嵌套组件的示例。如果我拿出

展开视图

，并将父视图制作成

，这样就可以了。但是，我必须运行一个案例来测试单击时的状态，然后在更改

isExpanded

属性时测试

样式是否正确。我宁愿在用户单击样式更改时进行测试，而不是进行多个测试。有没有办法做到这一点