Setting document selection in Jest

Question

I'm new to Jest, and I'm trying to test a behavior where if my cursor is at the end of the text in a contenteditable div, an action will be triggered.

The functionality is working fine in the browser, but in the test, the window selection is empty and the range keeps being empty as well.

I'm trying to use this helper function, which a close variant works fine in the browser:

function placeCursorAtPosition(element: HTMLDivElement, offset: number = 0): void {
  // https://stackoverflow.com/questions/6249095/how-to-set-caretcursor-position-in-contenteditable-element-div
  element.focus()
  let range = document.createRange()
  let selection = window.getSelection()
  range.setStart(element.childNodes[0], offset)
  range.collapse(false)
  console.log("range", range)
  if (selection){
    selection.removeAllRanges()
    selection.addRange(range)
  }
}

Any tips? Is this just a limitation of jest and I need to test this with Cypress or something?

Setting document selection in Jest

0 Answers0