如何解决React-Jest RTL检查元素是否不可见
我有一个简单的react-comp。我想根据反应状态测试样式。该comp如下所示:
React-comp。
const Backdrop = ({ showBackdrop }) => {
const backdropRef = useRef();
function getBackdropHeight() {
if (typeof window !== 'undefined') {
return `calc(${document.body.clientHeight}px -
${backdropRef.current?.offsetTop || 0}px)`;
}
return 0;
}
return (
<div
data-testid="backdrop"
className={classNames(styles.backdrop,showBackdrop ? styles.show : styles.hide)}
ref={backdropRef}
style={{ height: getBackdropHeight() }}
/>
);
};
样式
.backdrop {
width: 100%;
position: absolute;
left: 0;
right: 0;
top: 156px;
background-color: rgba(0,0.7);
z-index: 3;
...
}
.show {
opacity: 0;
visibility: hidden;
transition: visibility 0.25s,opacity 0.25s ease-out;
}
.hide {
opacity: 1;
visibility: hidden;
transition: opacity 0.25s ease-in;
}
我总是从测试中得到的错误是,该元素可见:
Received element is visible:
<div class="backdrop hide" data-testid="backdrop" style="height: calc(0px -
0px);" />
21 | const { getByTestId } = renderWithIntl(<Backdrop showBackdrop={false} />);
22 |
> 23 | expect(getByTestId('backdrop')).not.toBeVisible();
| ^
24 | });
25 | });
26 |
测试
it("should not render visible backdrop on falsy state",() => {
const { getByTestId } = render(<Backdrop showBackdrop={false} />);
expect(getByTestId('backdrop')).not.toBeVisible();
});
在不使用内联样式的情况下如何使元素不可见的任何方法!?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。