Jsdom: set up js dom for getBoundingClientRect()

Created on 25 Aug 2016 · 4Comments · Source: jsdom/jsdom

screen shot 2016-08-25 at 4 57 33 pm

maybe somebody setups jsdom that it work with getBoundingClientRect() , i work with simulantjs and my console log back this->
screen shot 2016-08-25 at 5 03 42 pm

    const wrapper = mount(
      <Provider store={store}>
        <FullDecoratedBlock
          uid={'test'}
          setFocusedElement={setFocusedElement}/>
      </Provider>, {attachTo: document.getElementById('app')})
    expect(wrapper.find('.add-wrap').length).to.eql(0)
    simulant.fire(document.body.querySelector('.wrapper-resize-button'), 'mousedown')
    simulant.fire(document.body, 'mousemove', {target: {clientX: 51, clientY: 101}})

maybe someone has ideas??

Source

potapovDim

Most helpful comment

You can assume the .getBoundingClientRect() API works and do the following:

const p = document.createElement('p')

    p.getBoundingClientRect = jest.fn(() => ({
      x: 851.671875,
      y: 200.046875,
      width: 8.34375,
      height: 17,
      top: 967.046875,
      right: 860.015625,
      bottom: 984.046875,
      left: 851.671875,
    }))

clearyandzap on 25 Jan 2020

👍9 🎉3 🚀2

All 4 comments

I can't understand this issue very well. It seems like maybe it is a dupe of #1581, https://github.com/tmpvar/jsdom/issues/653, https://github.com/tmpvar/jsdom/issues/1322.

domenic on 25 Aug 2016

@domenic i have component , when i move mouse to bottom of component , i wait that my component show buttop , and it bount to const rect = node.getBoundingClientRect() frow this rect get coordinates of mouse , and in component write const showPlusButton = event.insideX && Math.abs(event.pos.y - event.componentRect.bottom) <= MOUSE_DISTANCE when i move mouse i always get second screenshot

potapovDim on 25 Aug 2016

jsdom doesn't do any rendering, so getBoundingClientRect() always returns 0,0,0,0. That won't change (even foreseeable long-term). You can try to mock the function to emulate the results you'd expect. Also see #653.

Sebmaster on 29 Aug 2016

👍2

You can assume the .getBoundingClientRect() API works and do the following:

const p = document.createElement('p')

    p.getBoundingClientRect = jest.fn(() => ({
      x: 851.671875,
      y: 200.046875,
      width: 8.34375,
      height: 17,
      top: 967.046875,
      right: 860.015625,
      bottom: 984.046875,
      left: 851.671875,
    }))

clearyandzap on 25 Jan 2020

👍9 🎉3 🚀2

Was this page helpful?

0 / 5 - 0 ratings