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 (将#修改为@）