window.event != event when using fireEvent()

[adidottxt]

• react-testing-library version:
• react version: 9.4.0
• node version: 12.9.1
• npm (or yarn) version: 1.19.1 (yarn)

Relevant code or config:

This is how the MouseEvent is set up:

const cell = document.createElement('td')
const tdClass = document.createAttribute('class')
tdClass.value = 'jexcel_selectall'
cell.setAttributeNode(tdClass)


const proxyHandler = {
  get: (obj, prop) => {
    if (prop === 'x') {
      return 95
    }
    if (prop === 'y') {
      return 278
    }
    // any other properties that need to be added
    if (prop === 'target') {
      return cell
    }
    return obj[prop]
  },
}

export const getMouseEvent = () => {
  const mouseClick = new MouseEvent('mousedown', { button: 0 })
  return new Proxy(mouseClick, proxyHandler)
}

And this is how I'm calling the event. I've also added an event listener to console.log e and window.event:

function mouseTest(e) {
  console.log(e)
  console.log(window.event)
}
window.addEventListener('mousedown', mouseTest, false)
const mouseClick = getMouseEvent()
fireEvent(document.body.ownerDocument.defaultView, mouseClick)

What you did:

I'm currently working on testing an application that uses Jexcel with React testing library. Jexcel essentially uses a HTML table with Javascript to set up an Excel-like interface -- for example, the styling for a selected cell is set up via a global mousedown event handler.

To set up a click on a specific cell, I've created a MouseEvent that mocks all the information that is used by the mousedown event handler in JExcel -- but when using this MouseEvent with fireEvent() on document.body.ownerDocument.defaultView (based on a comment I saw here, I've noticed discrepancies in what e and window.event return.

What happened:

Within a regular browser, both return the mousedown event with the appropriate div/element being the target (so if I click on a cell, the <td> cell is the target). However, because I have to specify the window using document.body.ownerDocument.defaultView, the mock MouseEvent I set up loses its information. e returns a basic MouseEvent, and window.event is undefined.

Is there a way to fire the MouseEvent without specifying a target s.t. the target within my mock MouseEvent does not change?

[kentcdodds]

Hi @adidottxt,

I'm guessing this is an issue with JSDOM's implementation of dispatchEvent, but it may not be. I'm not sure. We'd need to investigate further and perhaps dispatchEvent doesn't set window.event properly even in the browser.

Either way, I don't think we have the bandwidth to investigate this further because it's probably not worthwhile. window.event is not recommended for use. From MDN:

You should avoid using this property in new code

So hopefully you can workaround this issue. Perhaps you could set it manually yourself using Object.defineProperty on window. Good luck!