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

Question

I have such react stateless component. I need to check if lowbandwidth icon exist when isSmallVideoView is 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>
);

How I can test LowBandwidthConnected? My test doesn't work

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

According to Enzyme documentation on selectors if you want to search by CSS class, you need to concat "." with the class name.

So your find method call should look like this:

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