Как проверить с помощью Jest / Enzyme, правильно ли применены встроенные стили

Question

Я пытаюсь проверить, применяются ли встроенные стили к div правильно. Как я могу сделать это с энзимом и / или JEST?

Я уже пробовал такие методы, как prop (" style ") и .toHaveProperty (" style ").

То, что я точно хочу проверить, это компонент всплывающей подсказки. Доступно здесь , строки от 48 до 55.

let style: ITooltipStyle = {};
if (node.current && node.current.offsetWidth) {
    if (position === 'top' || position === 'bottom') {
        style.left = `${String(node.current.offsetWidth / 2)}px`;
    } else {
        style.top = `-${String(node.current.offsetHeight / 1.5)}px`;
    }
}

return (
    <div className="Tooltip">
        <div
            className="Tooltip__toggler"
            onMouseOver={toggle}
            onMouseOut={toggle}
            ref={node}>
            {children}
        </div>
        <CSSTransition
            in={isVisible}
            timeout={200}
            classNames="Tooltip"
            unmountOnExit>
            <div
                className={`Tooltip__message Tooltip__message--${position}`}
                style={style}>
                {message}
            </div>
        </CSSTransition>
    </div>
);

Я хочу проверить, имеет ли встроенный стиль правильное значение, например, например. right добавлено свойство.

Тест:

    it('should display tooltip on right side:', () => {
        component = mount(
            <Tooltip position="right" message={message}>
                {children}
            </Tooltip>
        );

        expect(component.find('.Tooltip__message')).toHaveLength(0);
        expect(component.find('.Tooltip__message--right')).toHaveLength(0);
        component.find('.Tooltip__toggler').simulate('mouseover');
        expect(component.find('.Tooltip__message')).toHaveLength(1);
        expect(component.find('.Tooltip__message--right')).toHaveLength(1);
        /** This one, should test if inline style with right property has */
         expect(component.find('.Tooltip__message').get(0).props.style).toHaveProperty('top');
    });

Answer 1

Это потому, что ваш тест на самом деле провалился:)

Я добавил ваш тестовый файл в эту песочницу кода и специально добавил color: red в атрибут стиля, который регистрируется в тесте. Смотри https://codesandbox.io/s/94177j70po

Редактировать

Я обновил ваш всплывающую подсказку, чтобы исправить тест