How do I get the correct width of my component?

[951565664]

I have a similar problem to #1525
but it is dosen't work #1525 (comment)

my code:

describe('test', () => {
  it('test', async () => {
    document.body.innerHTML = '<div id="test"></div>'
    const wrapper1 = mount(<div style={{ height: '10px' }}>0</div>, {
      attachTo: document.querySelector('#test')
    })
    const dom1 = wrapper1.getDOMNode()
   //dom1 .clientHeight => 0
  })
})

Current behavior

dom1 .clientHeight = 0

Expected behavior

dom1 .clientHeight = 10

Your environment

windows

API

• shallow
• mount
• render

Adapter

• enzyme-adapter-react-16
• enzyme-adapter-react-16.3
• enzyme-adapter-react-16.2
• enzyme-adapter-react-16.1
• enzyme-adapter-react-15
• enzyme-adapter-react-15.4
• enzyme-adapter-react-14
• enzyme-adapter-react-13
• enzyme-adapter-react-helper
• others ( )

[ljharb]

Are you using jsdom? I believe this is a known limitation of jsdom - the clientHeight is zero because it's not actually visible.

[951565664]

I know , but in some scenarios, I just want to test the height of a node, for example, I have some image, the height of each image is fixed, I want to find the wrong size image when all pictures have same width .

[ljharb]

Then it seems like you'd need to test it in an actual browser, and not using jsdom - this doesn't seem related to enzyme.

[951565664]

All right，Maybe I should change the way to solve this problem.

[activescott]

FYI jsdom/jsdom#135 is the relevant issue in jsdom where offsetWidth/Height, etc. are not yet supported. There is a kludgy workaround presented in that thread that seems to have helped some people, but I say there be demons in that approach.