Question

我有这样的无状态反应组件。当isSmallVideoView为true时，我需要检查是否存在低带宽图标

export const UnmountableVideoLayout: React.StatelessComponent<VideoLayoutProps> = ({
    isSmallVideoView,
    videoComponent,
    videoOverlayComponent,
}: VideoLayoutProps) => (
    <div className={vStyles.topCenterSeparate}>
        <div className={svStyles.box}>
            {isSmallVideoView && (
                <div className={svStyles.lowBandwidthIcon}>
                    <LowBandwidthConnected />
                </div>
            )}
        </div>
    </div>
);

如何测试LowBandwidthConnected？我的测试无效

it("should render lowBandwidthIcon if isSmallVideoView is true", () => {
    const props = {
        isSmallVideoView: true,
        videoComponent: dummyVideo,
    };
    const wrapper = shallow(<UnmountableVideoLayout {...props} />);
    expect(wrapper.find(svStyles.lowBandwidthIcon).length).toBe(1);
});

Answer 1

根据selectors上的酶文档，如果要按CSS类进行搜索，则需要连接“。”带有班级名称。

因此，您的find方法调用应如下所示：

wrapper.find('.' + svStyles.lowBandwidthIcon)

如何使用玩笑来测试React组件

1 个答案: