Test onHover event of a tooltip

Question

I'm using React Testing library to test this component:

export default class A extends React.Component {
    constructor(props) {
        super(props);
        this.titleParagraphRef = React.createRef();
        this._tooltipTimer = null;
        this.state = { shouldPopupBeEnabled: false, isTooltipShown: false };

        this._showTooltip = this._showTooltip.bind(this);
        this._hideTooltip = this._hideTooltip.bind(this);
    }

    componentDidMount() {
        const { scrollWidth, clientWidth } = this.titleParagraphRef.current;
        const shouldPopupBeEnabled = scrollWidth > clientWidth;
        this.setState({ shouldPopupBeEnabled });
    }

    _showTooltip() {
        const { tooltipShowTime } = this.props;
        this._tooltipTimer = setTimeout(
            () => {
                this.setState({ isTooltipShown: true });
            }, tooltipShowTime,
        );
    }

    _hideTooltip() {
        clearTimeout(this._tooltipTimer);
        this.setState({ isTooltipShown: false });
    }

    render() {
        const { shouldPopupBeEnabled, isTooltipShown } = this.state;
        const { name, tooltipShowTime, ...rest } = this.props;

        return (
            <ToolTip
                message={name}
                toolTipPosition="top"
                messageStyleName="warning-tool-tip"
                popoverOpen={shouldPopupBeEnabled && isTooltipShown}
            >
                <div
                    ref={this.titleParagraphRef}
                    onMouseOver={this._showTooltip}
                    onMouseOut={this._hideTooltip}
                    onFocus={this._showTooltip}
                    onBlur={this._hideTooltip}
                    {...rest}
                    data-testid="title-tooltip"
                >
                    {name}
                </div>
            </ToolTip>
        );
    }
}

What I want to test is that when I hover over the title, the tooltip is shown. To do that, I have written this test:

    test('When on hover, tooltip should be displayed', async () => {
        const { getByTestId } = _renderToolTip();
        const titleElement = getByTestId('title-tooltip');
        fireEvent.mouseOver(titleElement);
        expect(titleElement).toMatchSnapshot();
    });

    function _renderToolTip() {
        return render(
            <A name="VERY VERY VERY VERY VERY LONG TEXT" tooltipShowTime={50} />,
        );
    }

But that it's not working. The resulting snapshot does not contain the tooltip code. I have also tried to use asFrament, with the same results. The component works nicely in the browser. Any idea how to test this mouseOver event?

score 0 · Accepted Answer · answered Nov 13 '20 at 11:04

0

As you're relying on a setTimeout delay before the tooltip is shown, you'll need to modify your test to get it to wait for whatever element appears on mouseover before asserting on it: https://testing-library.com/docs/guide-disappearance/#waiting-for-appearance

answered Nov 13 '20 at 11:04

ourmaninamsterdam

1,915
15
11

But my component uses `clientWidth` and `scrollWidth` to render the tooltip. They are always 0 in RTL. Is there a way to mock those values just for this test? – Antonio Gamiz Delgado Nov 16 '20 at 08:36
RTL uses Jest which uses js-dom which doesn't have a layout engine. See: https://stackoverflow.com/a/19916624/983178 – ourmaninamsterdam Nov 16 '20 at 09:27

Test onHover event of a tooltip

1 Answers1