CODEWITHSUNDEEP
javascriptreactjstestingjestjsenzyme
Dan Zawadzki
Dan Zawadzki

Reputation: 732

How to test with Jest/Enzyme if an inline styles has been applied correctly

I'm trying to test if inline styles are applied to a div corractly. How can I do it with Enzyme and/or JEST?

I've already tried methods like prop (" style ") and .toHaveProperty (" style ").

What I exactly want to test is a Tooltip component. It is available here, lines from 48 to 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>
);

I want to check if the inline style with the correct value for e.g. right property is added.

Test:

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

Upvotes: 0

Views: 1797

Answers (1)

antoinechalifour
antoinechalifour

Reputation: 495

It is because your test is actually failing :)

I added your test file in this code sandbox, and added a color: red on purpose onto the style attribute, which is logged in the test. See https://codesandbox.io/s/94177j70po

Edit

I updated your Tooltip component to fix the test

Upvotes: 1

Related Questions