Enzyme: How do I get the correct width of my component?

[951565664]

I have a similar problem to https://github.com/airbnb/enzyme/issues/1525
but it is dosen't work https://github.com/airbnb/enzyme/issues/1525#issuecomment-373008462

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
• [x] mount
• [ ] render

Adapter

• [x] 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.