Basic info:
- Node.js version: >=8
- jsdom version: 13
Minimal reproduction case
Repl.it
const {JSDOM} = require('jsdom')
const {window, window: {MouseEvent, document}} = new JSDOM(`
<!doctype html>
<html>
<body>
<form>
<button type="submit">
<span>submit</span>
</button>
</form>
</body>
</html>
`)
const form = document.querySelector('form')
const submit = document.querySelector('span')
let calls = 0
form.addEventListener('submit', event => {
event.preventDefault()
console.log('submitted')
calls++
})
const clickEvent = new MouseEvent('click', {bubbles: true, cancelable: true, button: 0})
submit.dispatchEvent(clickEvent)
console.assert(calls === 1, 'the form was not submitted')How does similar code behave in browsers?
jsbin
In the browser, firing a click event on the span within a submit button will call the form's submit handler. In jsdom it does not.
Note that if I select the button instead of the span and fire the click event on the button then the form is submitted just fine. It's just when I select something within the button.
Real world situation: testing-library/react-testing-library#234
Thanks!
Basic info:
Minimal reproduction case
Repl.it
How does similar code behave in browsers?
jsbin
In the browser, firing a click event on the span within a submit button will call the form's submit handler. In jsdom it does not.
Note that if I select the button instead of the span and fire the click event on the button then the form is submitted just fine. It's just when I select something within the button.
Real world situation: testing-library/react-testing-library#234
Thanks!