reactjs - 测试工具提示的 onHover 事件

Question

我正在使用 React 测试库来测试这个组件:

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>
        );
    }
}

我想测试的是，当我将鼠标悬停在标题上时，会显示工具提示。为此，我编写了这个测试:

    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} />,
        );
    }

但是它不起作用。生成的快照不包含工具提示代码。我也尝试过使用 asFrament，结果相同。该组件在浏览器中运行良好。知道如何测试此 mouseOver 事件吗？

Answer 1

由于您依赖于显示工具提示之前的 setTimeout 延迟，因此您需要修改您的测试以使其在断言之前等待鼠标悬停时出现的任何元素:https://testing-library.com/docs/guide-disappearance/#waiting-for-appearance