How can I access inline style using React findDomNode function?

Question

I am currently Jest to test React component, component's inline style would be changed according to different props value.

this is an example about what I wanna do:

let firstChild = TestUtils.findRenderedDOMComponentWithTag(renderedComponent, 'div');
    expect(firstChild.getDOMNode().style).toEqual({
      fontSize: '20px'
    });

This is the component props:

let renderedComponent = TestUtils.renderIntoDocument(
      <CircleIcon
        size="small" />

And this is the component dom to test with:

return (
      <div className="circle-icon" style={boxStyle}>
        <span className={this.props.icon}></span>
      </div>
    );

If I can get what is inside boxStyle, I can assert the test result from it.

Thanks a lot!

Have you tried this? What is your result? – Max Bumaye Aug 25 '15 at 08:30 — Max Bumaye, Aug 25 '15 at 08:30
it works now, just having env problem – George Jor Aug 25 '15 at 09:30 — George Jor, Aug 25 '15 at 09:30

score 5 · Answer 1 · answered Aug 25 '15 at 09:31

5

actually it works.

usage:

firstChild.getDOMNode().style.backgroundColor

answered Aug 25 '15 at 09:31

George Jor

135
7

don't tell a lie – shinriyo Oct 25 '18 at 09:42
: Property 'style' does not exist on type 'Element'. – shinriyo Oct 25 '18 at 09:42

How can I access inline style using React findDomNode function?

1 Answers1