javascript - 如何使用 jest 测试 React 组件

Question

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

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 上的 enzyme 文档如果要按 CSS 类搜索，则需要连接“.”与类名。

因此您的查找方法调用应如下所示:

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