From 5fabd4b4b27d85a40fd3e1b0e0c471f8ca5d4494 Mon Sep 17 00:00:00 2001
From: "Kent C. Dodds" <me+github@kentcdodds.com>
Date: Thu, 11 Jun 2020 16:10:12 -0600
Subject: [PATCH] test: rework snapshot tests

---
 jest.config.js                                |   1 +
 package.json                                  |   1 +
 src/user-event/__mocks__/utils.js             |  49 +++
 src/user-event/__tests__/clear.js             |  25 +-
 src/user-event/__tests__/click.js             | 103 +++--
 src/user-event/__tests__/dblclick.js          | 141 ++++---
 src/user-event/__tests__/helpers/utils.js     | 206 +++++-----
 src/user-event/__tests__/hover.js             |  12 +-
 src/user-event/__tests__/select-options.js    |  85 ++--
 .../__tests__/toggle-selectoptions.js         |  59 +--
 src/user-event/__tests__/type-modifiers.js    | 317 +++++++--------
 src/user-event/__tests__/type.js              | 366 ++++++++++--------
 src/user-event/__tests__/unhover.js           |  12 +-
 src/user-event/__tests__/upload.js            |  32 +-
 src/user-event/hover.js                       |   2 +
 tests/setup-env.js                            |   2 +
 16 files changed, 788 insertions(+), 625 deletions(-)
 create mode 100644 src/user-event/__mocks__/utils.js

diff --git a/jest.config.js b/jest.config.js
index 7a7a2b500..8d869c497 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -6,6 +6,7 @@ const {
 } = require('kcd-scripts/jest')
 
 module.exports = {
+  resetMocks: true,
   collectCoverageFrom,
   coveragePathIgnorePatterns: [
     ...coveragePathIgnorePatterns,
diff --git a/package.json b/package.json
index 9076ffe2c..b4f93502c 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "jest-watch-select-projects": "^2.0.0",
     "jsdom": "^16.2.2",
     "kcd-scripts": "^6.2.0",
+    "redent": "^3.0.0",
     "typescript": "^3.9.5"
   },
   "eslintConfig": {
diff --git a/src/user-event/__mocks__/utils.js b/src/user-event/__mocks__/utils.js
new file mode 100644
index 000000000..450cafc26
--- /dev/null
+++ b/src/user-event/__mocks__/utils.js
@@ -0,0 +1,49 @@
+const {getElementDisplayName} = require('../__tests__/helpers/utils')
+const actual = jest.requireActual('../utils')
+
+function getTrackedElementValues(element) {
+  return {
+    value: element.value,
+    checked: element.checked,
+    selectionStart: element.selectionStart,
+    selectionEnd: element.selectionEnd,
+    selectedOptions: element.selectedOptions
+      ? Array.from(element.selectedOptions).map(o => o.value)
+      : null,
+  }
+}
+
+function wrapWithTestData(fn) {
+  return async (element, init) => {
+    const before = getTrackedElementValues(element)
+    const testData = {
+      before,
+      elementDisplayName: getElementDisplayName(element),
+    }
+
+    // put it on the element so the event handler can grab it
+    element.testData = testData
+    const result = await fn(element, init)
+
+    const after = getTrackedElementValues(element)
+    Object.assign(testData, {after})
+
+    // elete the testData for the next event
+    delete element.testData
+    return result
+  }
+}
+
+const mockFireEvent = wrapWithTestData(actual.fireEvent)
+for (const key of Object.keys(actual.fireEvent)) {
+  if (typeof actual.fireEvent[key] === 'function') {
+    mockFireEvent[key] = wrapWithTestData(actual.fireEvent[key], key)
+  } else {
+    mockFireEvent[key] = actual.fireEvent[key]
+  }
+}
+
+module.exports = {
+  ...actual,
+  fireEvent: mockFireEvent,
+}
diff --git a/src/user-event/__tests__/clear.js b/src/user-event/__tests__/clear.js
index 64b06da99..40abe33fb 100644
--- a/src/user-event/__tests__/clear.js
+++ b/src/user-event/__tests__/clear.js
@@ -8,13 +8,14 @@ test('clears text', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value=""]
 
-    focus
-    select
-    select
-    keydown: Delete (46)
-    input: "{SELECTION}hello{/SELECTION}" -> ""
-    select
-    keyup: Delete (46)
+    input[value="hello"] - focus
+    input[value="hello"] - select
+    input[value="hello"] - select
+    input[value="hello"] - keydown: Delete (46)
+    input[value="hello"] - input
+      "{SELECTION}hello{/SELECTION}" -> "{CURSOR}"
+    input[value=""] - select
+    input[value=""] - keyup: Delete (46)
   `)
 })
 
@@ -40,11 +41,11 @@ test('does not clear text on readonly inputs', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="hello"]
 
-    focus
-    select
-    select
-    keydown: Delete (46)
-    keyup: Delete (46)
+    input[value="hello"] - focus
+    input[value="hello"] - select
+    input[value="hello"] - select
+    input[value="hello"] - keydown: Delete (46)
+    input[value="hello"] - keyup: Delete (46)
   `)
 })
 
diff --git a/src/user-event/__tests__/click.js b/src/user-event/__tests__/click.js
index 59a3271ea..fe7e17460 100644
--- a/src/user-event/__tests__/click.js
+++ b/src/user-event/__tests__/click.js
@@ -7,13 +7,13 @@ test('click in input', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value=""]
 
-    mouseover: Left (0)
-    mousemove: Left (0)
-    mousedown: Left (0)
-    focus
-    focusin
-    mouseup: Left (0)
-    click: Left (0)
+    input[value=""] - mouseover: Left (0)
+    input[value=""] - mousemove: Left (0)
+    input[value=""] - mousedown: Left (0)
+    input[value=""] - focus
+    input[value=""] - focusin
+    input[value=""] - mouseup: Left (0)
+    input[value=""] - click: Left (0)
   `)
 })
 
@@ -23,13 +23,13 @@ test('click in textarea', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: textarea[value=""]
 
-    mouseover: Left (0)
-    mousemove: Left (0)
-    mousedown: Left (0)
-    focus
-    focusin
-    mouseup: Left (0)
-    click: Left (0)
+    textarea[value=""] - mouseover: Left (0)
+    textarea[value=""] - mousemove: Left (0)
+    textarea[value=""] - mousedown: Left (0)
+    textarea[value=""] - focus
+    textarea[value=""] - focusin
+    textarea[value=""] - mouseup: Left (0)
+    textarea[value=""] - click: Left (0)
   `)
 })
 
@@ -40,14 +40,17 @@ test('should fire the correct events for <input type="checkbox">', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[checked=true]
 
-    mouseover: Left (0)
-    mousemove: Left (0)
-    mousedown: Left (0)
-    focus
-    mouseup: Left (0)
-    click: unchecked -> checked
-    input: checked
-    change
+    input[checked=false] - mouseover: Left (0)
+    input[checked=false] - mousemove: Left (0)
+    input[checked=false] - mousedown: Left (0)
+    input[checked=false] - focus
+    input[checked=false] - mouseup: Left (0)
+    input[checked=false] - click: Left (0)
+      unchecked -> checked
+    input[checked=false] - input
+      unchecked -> checked
+    input[checked=false] - change
+      unchecked -> checked
   `)
 })
 
@@ -70,14 +73,17 @@ test('should fire the correct events for <input type="radio">', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[checked=true]
 
-    mouseover: Left (0)
-    mousemove: Left (0)
-    mousedown: Left (0)
-    focus
-    mouseup: Left (0)
-    click: unchecked -> checked
-    input: checked
-    change
+    input[checked=false] - mouseover: Left (0)
+    input[checked=false] - mousemove: Left (0)
+    input[checked=false] - mousedown: Left (0)
+    input[checked=false] - focus
+    input[checked=false] - mouseup: Left (0)
+    input[checked=false] - click: Left (0)
+      unchecked -> checked
+    input[checked=false] - input
+      unchecked -> checked
+    input[checked=false] - change
+      unchecked -> checked
   `)
 
   expect(element).toHaveProperty('checked', true)
@@ -102,12 +108,12 @@ test('should fire the correct events for <div>', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: div
 
-    mouseover: Left (0)
-    mousemove: Left (0)
-    mousedown: Left (0)
-    focusin
-    mouseup: Left (0)
-    click: Left (0)
+    div - mouseover: Left (0)
+    div - mousemove: Left (0)
+    div - mousedown: Left (0)
+    div - focusin
+    div - mouseup: Left (0)
+    div - click: Left (0)
   `)
 })
 
@@ -143,8 +149,15 @@ test('should blur the previous element', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[name="a"][value=""]
 
-    blur
-    focusout (bubbled from input[name="a"][value=""])
+    input[name="a"][value=""] - mouseover: Left (0)
+    input[name="a"][value=""] - mousemove: Left (0)
+    input[name="a"][value=""] - mousedown: Left (0)
+    input[name="a"][value=""] - focus
+    input[name="a"][value=""] - focusin
+    input[name="a"][value=""] - mouseup: Left (0)
+    input[name="a"][value=""] - click: Left (0)
+    input[name="a"][value=""] - blur
+    input[name="a"][value=""] - focusout
   `)
 })
 
@@ -161,9 +174,17 @@ test('should not blur the previous element when mousedown prevents default', asy
   await userEvent.click(a)
   clearEventCalls()
   await userEvent.click(b)
-  expect(getEventCalls()).toMatchInlineSnapshot(
-    `No events were fired on: input[name="a"][value=""]`,
-  )
+  expect(getEventCalls()).toMatchInlineSnapshot(`
+    Events fired on: input[name="a"][value=""]
+
+    input[name="a"][value=""] - mouseover: Left (0)
+    input[name="a"][value=""] - mousemove: Left (0)
+    input[name="a"][value=""] - mousedown: Left (0)
+    input[name="a"][value=""] - focus
+    input[name="a"][value=""] - focusin
+    input[name="a"][value=""] - mouseup: Left (0)
+    input[name="a"][value=""] - click: Left (0)
+  `)
 })
 
 test('does not lose focus when click updates focus', async () => {
diff --git a/src/user-event/__tests__/dblclick.js b/src/user-event/__tests__/dblclick.js
index 524bcb9ef..dca1dd337 100644
--- a/src/user-event/__tests__/dblclick.js
+++ b/src/user-event/__tests__/dblclick.js
@@ -7,16 +7,16 @@ test('fires the correct events on buttons', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: button
 
-    mouseover: Left (0)
-    mousemove: Left (0)
-    mousedown: Left (0)
-    focus
-    mouseup: Left (0)
-    click: Left (0)
-    mousedown: Left (0)
-    mouseup: Left (0)
-    click: Left (0)
-    dblclick: Left (0)
+    button - mouseover: Left (0)
+    button - mousemove: Left (0)
+    button - mousedown: Left (0)
+    button - focus
+    button - mouseup: Left (0)
+    button - click: Left (0)
+    button - mousedown: Left (0)
+    button - mouseup: Left (0)
+    button - click: Left (0)
+    button - dblclick: Left (0)
   `)
 })
 
@@ -26,19 +26,25 @@ test('fires the correct events on checkboxes', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[checked=false]
 
-    mouseover: Left (0)
-    mousemove: Left (0)
-    mousedown: Left (0)
-    focus
-    mouseup: Left (0)
-    click: unchecked -> checked
-    input: checked
-    change
-    mousedown: Left (0)
-    mouseup: Left (0)
-    click: checked -> unchecked
-    input: unchecked
-    change
+    input[checked=false] - mouseover: Left (0)
+    input[checked=false] - mousemove: Left (0)
+    input[checked=false] - mousedown: Left (0)
+    input[checked=false] - focus
+    input[checked=false] - mouseup: Left (0)
+    input[checked=false] - click: Left (0)
+      unchecked -> checked
+    input[checked=false] - input
+      unchecked -> checked
+    input[checked=false] - change
+      unchecked -> checked
+    input[checked=true] - mousedown: Left (0)
+    input[checked=true] - mouseup: Left (0)
+    input[checked=true] - click: Left (0)
+      checked -> unchecked
+    input[checked=true] - input
+      checked -> unchecked
+    input[checked=true] - change
+      checked -> unchecked
   `)
 })
 
@@ -48,16 +54,16 @@ test('fires the correct events on regular inputs', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value=""]
 
-    mouseover: Left (0)
-    mousemove: Left (0)
-    mousedown: Left (0)
-    focus
-    mouseup: Left (0)
-    click: Left (0)
-    mousedown: Left (0)
-    mouseup: Left (0)
-    click: Left (0)
-    dblclick: Left (0)
+    input[value=""] - mouseover: Left (0)
+    input[value=""] - mousemove: Left (0)
+    input[value=""] - mousedown: Left (0)
+    input[value=""] - focus
+    input[value=""] - mouseup: Left (0)
+    input[value=""] - click: Left (0)
+    input[value=""] - mousedown: Left (0)
+    input[value=""] - mouseup: Left (0)
+    input[value=""] - click: Left (0)
+    input[value=""] - dblclick: Left (0)
   `)
 })
 
@@ -67,15 +73,15 @@ test('fires the correct events on divs', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: div
 
-    mouseover: Left (0)
-    mousemove: Left (0)
-    mousedown: Left (0)
-    mouseup: Left (0)
-    click: Left (0)
-    mousedown: Left (0)
-    mouseup: Left (0)
-    click: Left (0)
-    dblclick: Left (0)
+    div - mouseover: Left (0)
+    div - mousemove: Left (0)
+    div - mousedown: Left (0)
+    div - mouseup: Left (0)
+    div - click: Left (0)
+    div - mousedown: Left (0)
+    div - mouseup: Left (0)
+    div - click: Left (0)
+    div - dblclick: Left (0)
   `)
 })
 
@@ -98,7 +104,17 @@ test('blurs the previous element', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: button#button-a
 
-    blur
+    button#button-a - mouseover: Left (0)
+    button#button-a - mousemove: Left (0)
+    button#button-a - mousedown: Left (0)
+    button#button-a - focus
+    button#button-a - mouseup: Left (0)
+    button#button-a - click: Left (0)
+    button#button-a - mousedown: Left (0)
+    button#button-a - mouseup: Left (0)
+    button#button-a - click: Left (0)
+    button#button-a - dblclick: Left (0)
+    button#button-a - blur
   `)
 })
 
@@ -123,17 +139,17 @@ test('clicking an element in a label gives the control focus', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: div
 
-    mouseover: Left (0) (bubbled from span)
-    mousemove: Left (0) (bubbled from span)
-    mousedown: Left (0) (bubbled from span)
-    mouseup: Left (0) (bubbled from span)
-    click: Left (0) (bubbled from span)
-    click: Left (0) (bubbled from input#nested-input[value=""])
-    mousedown: Left (0) (bubbled from span)
-    mouseup: Left (0) (bubbled from span)
-    click: Left (0) (bubbled from span)
-    click: Left (0) (bubbled from input#nested-input[value=""])
-    dblclick: Left (0) (bubbled from span)
+    span - mouseover: Left (0)
+    span - mousemove: Left (0)
+    span - mousedown: Left (0)
+    span - mouseup: Left (0)
+    span - click: Left (0)
+    input#nested-input[value=""] - click: Left (0)
+    span - mousedown: Left (0)
+    span - mouseup: Left (0)
+    span - click: Left (0)
+    input#nested-input[value=""] - click: Left (0)
+    span - dblclick: Left (0)
   `)
 })
 
@@ -155,9 +171,20 @@ test('does not blur the previous element when mousedown prevents default', async
   await userEvent.dblClick(a)
   clearEventCalls()
   await userEvent.dblClick(b)
-  expect(getEventCalls()).toMatchInlineSnapshot(
-    `No events were fired on: button#button-a`,
-  )
+  expect(getEventCalls()).toMatchInlineSnapshot(`
+    Events fired on: button#button-a
+
+    button#button-a - mouseover: Left (0)
+    button#button-a - mousemove: Left (0)
+    button#button-a - mousedown: Left (0)
+    button#button-a - focus
+    button#button-a - mouseup: Left (0)
+    button#button-a - click: Left (0)
+    button#button-a - mousedown: Left (0)
+    button#button-a - mouseup: Left (0)
+    button#button-a - click: Left (0)
+    button#button-a - dblclick: Left (0)
+  `)
 })
 
 test('fires mouse events with the correct properties', async () => {
diff --git a/src/user-event/__tests__/helpers/utils.js b/src/user-event/__tests__/helpers/utils.js
index 45cf2a034..4683d03c4 100644
--- a/src/user-event/__tests__/helpers/utils.js
+++ b/src/user-event/__tests__/helpers/utils.js
@@ -1,4 +1,6 @@
+import redent from 'redent'
 import {eventMap} from '../../../event-map'
+
 // this is pretty helpful:
 // https://codesandbox.io/s/quizzical-worker-eo909
 
@@ -42,37 +44,37 @@ function setupSelect({multiple = false} = {}) {
   }
 }
 
-let eventListeners = []
-
-function getTestData(element, event) {
-  return {
-    bubbledFrom:
-      event && event.eventPhase === event.BUBBLING_PHASE
-        ? getElementDisplayName(event.target)
-        : null,
-    value: element.value,
-    selectionStart: element.selectionStart,
-    selectionEnd: element.selectionEnd,
-    checked: element.checked,
-  }
+const eventLabelGetters = {
+  KeyboardEvent(event) {
+    return [
+      event.key,
+      typeof event.keyCode === 'undefined' ? null : `(${event.keyCode})`,
+    ]
+      .join(' ')
+      .trim()
+  },
+  MouseEvent(event) {
+    // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+    const mouseButtonMap = {
+      0: 'Left',
+      1: 'Middle',
+      2: 'Right',
+      3: 'Browser Back',
+      4: 'Browser Forward',
+    }
+    return `${mouseButtonMap[event.button]} (${event.button})`
+  },
 }
 
+let eventListeners = []
+
 // asside from the hijacked listener stuff here, it's also important to call
 // this function rather than simply calling addEventListener yourself
 // because it adds your listener to an eventListeners array which is cleaned
 // up automatically which will help use avoid memory leaks.
 function addEventListener(el, type, listener, options) {
-  el.previousTestData = getTestData(el)
-  const hijackedListener = e => {
-    e.testData = {previous: e.target.previousTestData}
-    const retVal = listener(e)
-    const next = getTestData(e.target, e)
-    e.testData.next = next
-    e.target.previousTestData = next
-    return retVal
-  }
-  eventListeners.push({el, type, listener: hijackedListener})
-  el.addEventListener(type, hijackedListener, options)
+  eventListeners.push({el, type, listener})
+  el.addEventListener(type, listener, options)
 }
 
 function getElementValue(element) {
@@ -105,7 +107,18 @@ function getElementDisplayName(element) {
 }
 
 function addListeners(element, {eventHandlers = {}} = {}) {
-  const generalListener = jest.fn().mockName('eventListener')
+  const eventHandlerCalls = []
+  const generalListener = jest
+    .fn(event => {
+      const testData = element.testData ?? {
+        elementDisplayName: getElementDisplayName(event.target),
+      }
+      eventHandlerCalls.push({
+        event,
+        testData,
+      })
+    })
+    .mockName('eventListener')
   const listeners = Object.keys(eventMap)
 
   for (const name of listeners) {
@@ -122,40 +135,30 @@ function addListeners(element, {eventHandlers = {}} = {}) {
   if (element.tagName === 'FORM') {
     addEventListener(element, 'submit', e => e.preventDefault())
   }
+
   function getEventCalls() {
-    const eventCalls = generalListener.mock.calls
-      .map(([event]) => {
-        const window = event.target?.ownerDocument.defaultView
+    const eventCalls = eventHandlerCalls
+      .map(({event, testData}) => {
+        const eventLabel =
+          eventLabelGetters[event.constructor.name]?.(event) ?? ''
         const modifiers = ['altKey', 'shiftKey', 'metaKey', 'ctrlKey']
           .filter(key => event[key])
           .map(k => `{${k.replace('Key', '')}}`)
           .join('')
 
-        let log = event.type
-        if (
-          event.type === 'click' &&
-          event.hasOwnProperty('testData') &&
-          (element.type === 'checkbox' || element.type === 'radio')
-        ) {
-          log = getCheckboxOrRadioClickedLine(event)
-        } else if (event.type === 'input' && event.hasOwnProperty('testData')) {
-          log = getInputLine(element, event)
-        } else if (window && event instanceof window.KeyboardEvent) {
-          log = getKeyboardEventLine(event)
-        } else if (window && event instanceof window.MouseEvent) {
-          log = getMouseEventLine(event)
-        }
+        const firstLine = [
+          `${testData.elementDisplayName} - ${event.type}`,
+          [eventLabel, modifiers].filter(Boolean).join(' '),
+        ]
+          .filter(Boolean)
+          .join(': ')
 
         return [
-          log,
-          event.testData && event.testData.next.bubbledFrom
-            ? `(bubbled from ${event.testData.next.bubbledFrom})`
-            : null,
-          modifiers,
+          firstLine,
+          testData.before ? redent(getChanges(testData), 2) : null,
         ]
           .filter(Boolean)
-          .join(' ')
-          .trim()
+          .join('\n')
       })
       .join('\n')
       .trim()
@@ -171,69 +174,56 @@ function addListeners(element, {eventHandlers = {}} = {}) {
   const clearEventCalls = () => generalListener.mockClear()
   const getEvents = () => generalListener.mock.calls.map(([e]) => e)
   const eventWasFired = eventType => getEvents().some(e => e.type === eventType)
-  return {getEventCalls, clearEventCalls, getEvents, eventWasFired}
-}
-
-// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
-const mouseButtonMap = {
-  0: 'Left',
-  1: 'Middle',
-  2: 'Right',
-  3: 'Browser Back',
-  4: 'Browser Forward',
-}
-function getMouseEventLine(event) {
-  return [`${event.type}:`, mouseButtonMap[event.button], `(${event.button})`]
-    .join(' ')
-    .trim()
+  return {
+    getEventCalls,
+    clearEventCalls,
+    getEvents,
+    eventWasFired,
+  }
 }
 
-function getKeyboardEventLine(event) {
+function getValueWithSelection({value, selectionStart, selectionEnd}) {
   return [
-    `${event.type}:`,
-    event.key,
-    typeof event.keyCode === 'undefined' ? null : `(${event.keyCode})`,
-  ]
-    .join(' ')
-    .trim()
+    value.slice(0, selectionStart),
+    ...(selectionStart === selectionEnd
+      ? ['{CURSOR}']
+      : [
+          '{SELECTION}',
+          value.slice(selectionStart, selectionEnd),
+          '{/SELECTION}',
+        ]),
+    value.slice(selectionEnd),
+  ].join('')
 }
 
-function getCheckboxOrRadioClickedLine(event) {
-  const {previous, next} = event.testData
-
-  return `${event.type}: ${previous.checked ? '' : 'un'}checked -> ${
-    next.checked ? '' : 'un'
-  }checked`
+const changeLabelGetter = {
+  value: ({before, after}) =>
+    [
+      JSON.stringify(getValueWithSelection(before)),
+      JSON.stringify(getValueWithSelection(after)),
+    ].join(' -> '),
+  checked: ({before, after}) =>
+    [
+      before.checked ? 'checked' : 'unchecked',
+      after.checked ? 'checked' : 'unchecked',
+    ].join(' -> '),
 }
-
-function getInputLine(element, event) {
-  if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
-    const {previous, next} = event.testData
-
-    if (element.type === 'checkbox' || element.type === 'radio') {
-      return `${event.type}: ${next.checked ? '' : 'un'}checked`
-    } else {
-      const prevVal = [
-        previous.value.slice(0, previous.selectionStart),
-        ...(previous.selectionStart === previous.selectionEnd
-          ? ['{CURSOR}']
-          : [
-              '{SELECTION}',
-              previous.value.slice(
-                previous.selectionStart,
-                previous.selectionEnd,
-              ),
-              '{/SELECTION}',
-            ]),
-        previous.value.slice(previous.selectionEnd),
-      ].join('')
-      return `${event.type}: "${prevVal}" -> "${next.value}"`
+changeLabelGetter.selectionStart = changeLabelGetter.value
+changeLabelGetter.selectionEnd = changeLabelGetter.value
+const getDefaultLabel = ({key, before, after}) =>
+  `${key}: ${JSON.stringify(before[key])} -> ${JSON.stringify(after[key])}`
+
+function getChanges({before, after}) {
+  const changes = new Set()
+  for (const key of Object.keys(before)) {
+    if (after[key] !== before[key]) {
+      changes.add(
+        (changeLabelGetter[key] ?? getDefaultLabel)({key, before, after}),
+      )
     }
-  } else {
-    throw new Error(
-      `fired ${event.type} event on a ${element.tagName} which probably doesn't make sense. Fix that, or handle it in the setup function`,
-    )
   }
+
+  return Array.from(changes).join('\n')
 }
 
 // eslint-disable-next-line jest/prefer-hooks-on-top
@@ -245,4 +235,10 @@ afterEach(() => {
   document.body.innerHTML = ''
 })
 
-export {setup, setupSelect, addEventListener, addListeners}
+export {
+  setup,
+  setupSelect,
+  addEventListener,
+  addListeners,
+  getElementDisplayName,
+}
diff --git a/src/user-event/__tests__/hover.js b/src/user-event/__tests__/hover.js
index e3a410206..8fa79c205 100644
--- a/src/user-event/__tests__/hover.js
+++ b/src/user-event/__tests__/hover.js
@@ -8,11 +8,11 @@ test('hover', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: button
 
-    pointerover
-    pointerenter
-    mouseover: Left (0)
-    mouseenter: Left (0)
-    pointermove
-    mousemove: Left (0)
+    button - pointerover
+    button - pointerenter
+    button - mouseover: Left (0)
+    button - mouseenter: Left (0)
+    button - pointermove
+    button - mousemove: Left (0)
   `)
 })
diff --git a/src/user-event/__tests__/select-options.js b/src/user-event/__tests__/select-options.js
index eb707121b..8ecf62d7f 100644
--- a/src/user-event/__tests__/select-options.js
+++ b/src/user-event/__tests__/select-options.js
@@ -7,19 +7,26 @@ test('fires correct events', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: select[name="select"][value="1"]
 
-    mouseover: Left (0)
-    mousemove: Left (0)
-    mousedown: Left (0)
-    focus
-    focusin
-    mouseup: Left (0)
-    click: Left (0)
-    mouseover: Left (0) (bubbled from option[value="1"])
-    mousemove: Left (0) (bubbled from option[value="1"])
-    mousedown: Left (0) (bubbled from option[value="1"])
-    mouseup: Left (0) (bubbled from option[value="1"])
-    click: Left (0) (bubbled from option[value="1"])
-    change
+    select[name="select"][value="1"] - mouseover: Left (0)
+      selectedOptions: ["1"] -> ["1"]
+    select[name="select"][value="1"] - mousemove: Left (0)
+      selectedOptions: ["1"] -> ["1"]
+    select[name="select"][value="1"] - mousedown: Left (0)
+      selectedOptions: ["1"] -> ["1"]
+    select[name="select"][value="1"] - focus
+    select[name="select"][value="1"] - focusin
+      selectedOptions: ["1"] -> ["1"]
+    select[name="select"][value="1"] - mouseup: Left (0)
+      selectedOptions: ["1"] -> ["1"]
+    select[name="select"][value="1"] - click: Left (0)
+      selectedOptions: ["1"] -> ["1"]
+    option[value="1"] - mouseover: Left (0)
+    option[value="1"] - mousemove: Left (0)
+    option[value="1"] - mousedown: Left (0)
+    option[value="1"] - mouseup: Left (0)
+    option[value="1"] - click: Left (0)
+    select[name="select"][value="1"] - change
+      selectedOptions: ["1"] -> ["1"]
   `)
   const [o1, o2, o3] = options
   expect(o1.selected).toBe(true)
@@ -33,25 +40,33 @@ test('fires correct events on multi-selects', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: select[name="select"][value=["1","3"]]
 
-    mouseover: Left (0)
-    mousemove: Left (0)
-    mousedown: Left (0)
-    focus
-    focusin
-    mouseup: Left (0)
-    click: Left (0)
-    mouseover: Left (0) (bubbled from option[value="1"])
-    mousemove: Left (0) (bubbled from option[value="1"])
-    mousedown: Left (0) (bubbled from option[value="1"])
-    mouseup: Left (0) (bubbled from option[value="1"])
-    click: Left (0) (bubbled from option[value="1"])
-    change
-    mouseover: Left (0) (bubbled from option[value="3"])
-    mousemove: Left (0) (bubbled from option[value="3"])
-    mousedown: Left (0) (bubbled from option[value="3"])
-    mouseup: Left (0) (bubbled from option[value="3"])
-    click: Left (0) (bubbled from option[value="3"])
-    change
+    select[name="select"][value=[]] - mouseover: Left (0)
+      selectedOptions: [] -> []
+    select[name="select"][value=[]] - mousemove: Left (0)
+      selectedOptions: [] -> []
+    select[name="select"][value=[]] - mousedown: Left (0)
+      selectedOptions: [] -> []
+    select[name="select"][value=[]] - focus
+    select[name="select"][value=[]] - focusin
+      selectedOptions: [] -> []
+    select[name="select"][value=[]] - mouseup: Left (0)
+      selectedOptions: [] -> []
+    select[name="select"][value=[]] - click: Left (0)
+      selectedOptions: [] -> []
+    option[value="1"] - mouseover: Left (0)
+    option[value="1"] - mousemove: Left (0)
+    option[value="1"] - mousedown: Left (0)
+    option[value="1"] - mouseup: Left (0)
+    option[value="1"] - click: Left (0)
+    select[name="select"][value=["1"]] - change
+      selectedOptions: ["1"] -> ["1"]
+    option[value="3"] - mouseover: Left (0)
+    option[value="3"] - mousemove: Left (0)
+    option[value="3"] - mousedown: Left (0)
+    option[value="3"] - mouseup: Left (0)
+    option[value="3"] - click: Left (0)
+    select[name="select"][value=["1","3"]] - change
+      selectedOptions: ["1","3"] -> ["1","3"]
   `)
   const [o1, o2, o3] = options
   expect(o1.selected).toBe(true)
@@ -59,7 +74,7 @@ test('fires correct events on multi-selects', async () => {
   expect(o3.selected).toBe(true)
 })
 
-test('sets the selected prop on the selected OPTION using option html elements', async () => {
+test('sets the selected prop on the selected option using option html elements', async () => {
   const {select, options} = setupSelect()
   const [o1, o2, o3] = options
   await userEvent.selectOptions(select, o1)
@@ -78,8 +93,8 @@ test('a previously focused input gets blurred', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: button
 
-    blur
-    focusout
+    button - blur
+    button - focusout
   `)
 })
 
diff --git a/src/user-event/__tests__/toggle-selectoptions.js b/src/user-event/__tests__/toggle-selectoptions.js
index 852855fc1..a991cdca8 100644
--- a/src/user-event/__tests__/toggle-selectoptions.js
+++ b/src/user-event/__tests__/toggle-selectoptions.js
@@ -9,19 +9,26 @@ test('should fire the correct events for multiple select', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: select[name="select"][value=["1"]]
 
-    mouseover: Left (0)
-    mousemove: Left (0)
-    mousedown: Left (0)
-    focus
-    focusin
-    mouseup: Left (0)
-    click: Left (0)
-    mouseover: Left (0) (bubbled from option[value="1"])
-    mousemove: Left (0) (bubbled from option[value="1"])
-    mousedown: Left (0) (bubbled from option[value="1"])
-    mouseup: Left (0) (bubbled from option[value="1"])
-    click: Left (0) (bubbled from option[value="1"])
-    change
+    select[name="select"][value=[]] - mouseover: Left (0)
+      selectedOptions: [] -> []
+    select[name="select"][value=[]] - mousemove: Left (0)
+      selectedOptions: [] -> []
+    select[name="select"][value=[]] - mousedown: Left (0)
+      selectedOptions: [] -> []
+    select[name="select"][value=[]] - focus
+    select[name="select"][value=[]] - focusin
+      selectedOptions: [] -> []
+    select[name="select"][value=[]] - mouseup: Left (0)
+      selectedOptions: [] -> []
+    select[name="select"][value=[]] - click: Left (0)
+      selectedOptions: [] -> []
+    option[value="1"] - mouseover: Left (0)
+    option[value="1"] - mousemove: Left (0)
+    option[value="1"] - mousedown: Left (0)
+    option[value="1"] - mouseup: Left (0)
+    option[value="1"] - click: Left (0)
+    select[name="select"][value=["1"]] - change
+      selectedOptions: ["1"] -> ["1"]
   `)
 
   expect(form).toHaveFormValues({select: ['1']})
@@ -41,19 +48,19 @@ test('should fire the correct events for multiple select when focus is in other
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: form
 
-    mouseover: Left (0) (bubbled from select[name="select"][value=[]])
-    mousemove: Left (0) (bubbled from select[name="select"][value=[]])
-    mousedown: Left (0) (bubbled from select[name="select"][value=[]])
-    focusout (bubbled from button)
-    focusin (bubbled from select[name="select"][value=[]])
-    mouseup: Left (0) (bubbled from select[name="select"][value=[]])
-    click: Left (0) (bubbled from select[name="select"][value=[]])
-    mouseover: Left (0) (bubbled from option[value="1"])
-    mousemove: Left (0) (bubbled from option[value="1"])
-    mousedown: Left (0) (bubbled from option[value="1"])
-    mouseup: Left (0) (bubbled from option[value="1"])
-    click: Left (0) (bubbled from option[value="1"])
-    change (bubbled from select[name="select"][value=["1"]])
+    select[name="select"][value=[]] - mouseover: Left (0)
+    select[name="select"][value=[]] - mousemove: Left (0)
+    select[name="select"][value=[]] - mousedown: Left (0)
+    button - focusout
+    select[name="select"][value=[]] - focusin
+    select[name="select"][value=[]] - mouseup: Left (0)
+    select[name="select"][value=[]] - click: Left (0)
+    option[value="1"] - mouseover: Left (0)
+    option[value="1"] - mousemove: Left (0)
+    option[value="1"] - mousedown: Left (0)
+    option[value="1"] - mouseup: Left (0)
+    option[value="1"] - click: Left (0)
+    select[name="select"][value=["1"]] - change
   `)
 })
 
diff --git a/src/user-event/__tests__/type-modifiers.js b/src/user-event/__tests__/type-modifiers.js
index a6b1a19ef..749b8a6d1 100644
--- a/src/user-event/__tests__/type-modifiers.js
+++ b/src/user-event/__tests__/type-modifiers.js
@@ -23,10 +23,10 @@ test('{esc} triggers typing the escape character', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value=""]
 
-    focus
-    select
-    keydown: Escape (27)
-    keyup: Escape (27)
+    input[value=""] - focus
+    input[value=""] - select
+    input[value=""] - keydown: Escape (27)
+    input[value=""] - keyup: Escape (27)
   `)
 })
 
@@ -36,17 +36,19 @@ test('a{backspace}', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value=""]
 
-    focus
-    select
-    keydown: a (97)
-    keypress: a (97)
-    input: "{CURSOR}" -> "a"
-    select
-    keyup: a (97)
-    keydown: Backspace (8)
-    input: "a{CURSOR}" -> ""
-    select
-    keyup: Backspace (8)
+    input[value=""] - focus
+    input[value=""] - select
+    input[value=""] - keydown: a (97)
+    input[value=""] - keypress: a (97)
+    input[value=""] - input
+      "{CURSOR}" -> "a{CURSOR}"
+    input[value="a"] - select
+    input[value="a"] - keyup: a (97)
+    input[value="a"] - keydown: Backspace (8)
+    input[value="a"] - input
+      "a{CURSOR}" -> "{CURSOR}"
+    input[value=""] - select
+    input[value=""] - keyup: Backspace (8)
   `)
 })
 
@@ -56,15 +58,16 @@ test('{backspace}a', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="a"]
 
-    focus
-    select
-    keydown: Backspace (8)
-    keyup: Backspace (8)
-    keydown: a (97)
-    keypress: a (97)
-    input: "{CURSOR}" -> "a"
-    select
-    keyup: a (97)
+    input[value=""] - focus
+    input[value=""] - select
+    input[value=""] - keydown: Backspace (8)
+    input[value=""] - keyup: Backspace (8)
+    input[value=""] - keydown: a (97)
+    input[value=""] - keypress: a (97)
+    input[value=""] - input
+      "{CURSOR}" -> "a{CURSOR}"
+    input[value="a"] - select
+    input[value="a"] - keyup: a (97)
   `)
 })
 
@@ -77,12 +80,13 @@ test('{backspace} triggers typing the backspace character and deletes the charac
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="o"]
 
-    select
-    focus
-    keydown: Backspace (8)
-    input: "y{CURSOR}o" -> "o"
-    select
-    keyup: Backspace (8)
+    input[value="yo"] - select
+    input[value="yo"] - focus
+    input[value="yo"] - keydown: Backspace (8)
+    input[value="yo"] - input
+      "y{CURSOR}o" -> "o{CURSOR}"
+    input[value="o"] - select
+    input[value="o"] - keyup: Backspace (8)
   `)
 })
 
@@ -95,10 +99,10 @@ test('{backspace} on a readOnly input', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="yo"]
 
-    select
-    focus
-    keydown: Backspace (8)
-    keyup: Backspace (8)
+    input[value="yo"] - select
+    input[value="yo"] - focus
+    input[value="yo"] - keydown: Backspace (8)
+    input[value="yo"] - keyup: Backspace (8)
   `)
 })
 
@@ -113,10 +117,10 @@ test('{backspace} does not fire input if keydown prevents default', async () =>
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="yo"]
 
-    select
-    focus
-    keydown: Backspace (8)
-    keyup: Backspace (8)
+    input[value="yo"] - select
+    input[value="yo"] - focus
+    input[value="yo"] - keydown: Backspace (8)
+    input[value="yo"] - keyup: Backspace (8)
   `)
 })
 
@@ -129,12 +133,13 @@ test('{backspace} deletes the selected range', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="Here"]
 
-    select
-    focus
-    keydown: Backspace (8)
-    input: "H{SELECTION}i th{/SELECTION}ere" -> "Here"
-    select
-    keyup: Backspace (8)
+    input[value="Hi there"] - select
+    input[value="Hi there"] - focus
+    input[value="Hi there"] - keydown: Backspace (8)
+    input[value="Hi there"] - input
+      "H{SELECTION}i th{/SELECTION}ere" -> "Here{CURSOR}"
+    input[value="Here"] - select
+    input[value="Here"] - keyup: Backspace (8)
   `)
 })
 
@@ -154,15 +159,16 @@ test('{alt}a{/alt}', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="a"]
 
-    focus
-    select
-    keydown: Alt (18) {alt}
-    keydown: a (97) {alt}
-    keypress: a (97) {alt}
-    input: "{CURSOR}" -> "a"
-    select
-    keyup: a (97) {alt}
-    keyup: Alt (18)
+    input[value=""] - focus
+    input[value=""] - select
+    input[value=""] - keydown: Alt (18) {alt}
+    input[value=""] - keydown: a (97) {alt}
+    input[value=""] - keypress: a (97) {alt}
+    input[value=""] - input
+      "{CURSOR}" -> "a{CURSOR}"
+    input[value="a"] - select
+    input[value="a"] - keyup: a (97) {alt}
+    input[value="a"] - keyup: Alt (18)
   `)
 })
 
@@ -174,15 +180,16 @@ test('{meta}a{/meta}', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="a"]
 
-    focus
-    select
-    keydown: Meta (93) {meta}
-    keydown: a (97) {meta}
-    keypress: a (97) {meta}
-    input: "{CURSOR}" -> "a"
-    select
-    keyup: a (97) {meta}
-    keyup: Meta (93)
+    input[value=""] - focus
+    input[value=""] - select
+    input[value=""] - keydown: Meta (93) {meta}
+    input[value=""] - keydown: a (97) {meta}
+    input[value=""] - keypress: a (97) {meta}
+    input[value=""] - input
+      "{CURSOR}" -> "a{CURSOR}"
+    input[value="a"] - select
+    input[value="a"] - keyup: a (97) {meta}
+    input[value="a"] - keyup: Meta (93)
   `)
 })
 
@@ -194,15 +201,16 @@ test('{ctrl}a{/ctrl}', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="a"]
 
-    focus
-    select
-    keydown: Control (17) {ctrl}
-    keydown: a (97) {ctrl}
-    keypress: a (97) {ctrl}
-    input: "{CURSOR}" -> "a"
-    select
-    keyup: a (97) {ctrl}
-    keyup: Control (17)
+    input[value=""] - focus
+    input[value=""] - select
+    input[value=""] - keydown: Control (17) {ctrl}
+    input[value=""] - keydown: a (97) {ctrl}
+    input[value=""] - keypress: a (97) {ctrl}
+    input[value=""] - input
+      "{CURSOR}" -> "a{CURSOR}"
+    input[value="a"] - select
+    input[value="a"] - keyup: a (97) {ctrl}
+    input[value="a"] - keyup: Control (17)
   `)
 })
 
@@ -214,15 +222,16 @@ test('{shift}a{/shift}', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="a"]
 
-    focus
-    select
-    keydown: Shift (16) {shift}
-    keydown: a (97) {shift}
-    keypress: a (97) {shift}
-    input: "{CURSOR}" -> "a"
-    select
-    keyup: a (97) {shift}
-    keyup: Shift (16)
+    input[value=""] - focus
+    input[value=""] - select
+    input[value=""] - keydown: Shift (16) {shift}
+    input[value=""] - keydown: a (97) {shift}
+    input[value=""] - keypress: a (97) {shift}
+    input[value=""] - input
+      "{CURSOR}" -> "a{CURSOR}"
+    input[value="a"] - select
+    input[value="a"] - keyup: a (97) {shift}
+    input[value="a"] - keyup: Shift (16)
   `)
 })
 
@@ -234,16 +243,17 @@ test('a{enter}', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="a"]
 
-    focus
-    select
-    keydown: a (97)
-    keypress: a (97)
-    input: "{CURSOR}" -> "a"
-    select
-    keyup: a (97)
-    keydown: Enter (13)
-    keypress: Enter (13)
-    keyup: Enter (13)
+    input[value=""] - focus
+    input[value=""] - select
+    input[value=""] - keydown: a (97)
+    input[value=""] - keypress: a (97)
+    input[value=""] - input
+      "{CURSOR}" -> "a{CURSOR}"
+    input[value="a"] - select
+    input[value="a"] - keyup: a (97)
+    input[value="a"] - keydown: Enter (13)
+    input[value="a"] - keypress: Enter (13)
+    input[value="a"] - keyup: Enter (13)
   `)
 })
 
@@ -259,10 +269,10 @@ test('{enter} with preventDefault keydown', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value=""]
 
-    focus
-    select
-    keydown: Enter (13)
-    keyup: Enter (13)
+    input[value=""] - focus
+    input[value=""] - select
+    input[value=""] - keydown: Enter (13)
+    input[value=""] - keyup: Enter (13)
   `)
 })
 
@@ -274,11 +284,11 @@ test('{enter} on a button', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: button
 
-    focus
-    keydown: Enter (13)
-    keypress: Enter (13)
-    click: Left (0)
-    keyup: Enter (13)
+    button - focus
+    button - keydown: Enter (13)
+    button - keypress: Enter (13)
+    button - click: Left (0)
+    button - keyup: Enter (13)
   `)
 })
 
@@ -290,14 +300,14 @@ test('{enter} on a textarea', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: textarea[value="\\n"]
 
-    focus
-    select
-    keydown: Enter (13)
-    keypress: Enter (13)
-    input: "{CURSOR}" -> "
-    "
-    select
-    keyup: Enter (13)
+    textarea[value=""] - focus
+    textarea[value=""] - select
+    textarea[value=""] - keydown: Enter (13)
+    textarea[value=""] - keypress: Enter (13)
+    textarea[value=""] - input
+      "{CURSOR}" -> "\\n{CURSOR}"
+    textarea[value="\\n"] - select
+    textarea[value="\\n"] - keyup: Enter (13)
   `)
 })
 
@@ -309,13 +319,13 @@ test('{meta}{enter}{/meta} on a button', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: button
 
-    focus
-    keydown: Meta (93) {meta}
-    keydown: Enter (13) {meta}
-    keypress: Enter (13) {meta}
-    click: Left (0) {meta}
-    keyup: Enter (13) {meta}
-    keyup: Meta (93)
+    button - focus
+    button - keydown: Meta (93) {meta}
+    button - keydown: Enter (13) {meta}
+    button - keypress: Enter (13) {meta}
+    button - click: Left (0) {meta}
+    button - keyup: Enter (13) {meta}
+    button - keyup: Meta (93)
   `)
 })
 
@@ -327,19 +337,20 @@ test('{meta}{alt}{ctrl}a{/ctrl}{/alt}{/meta}', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="a"]
 
-    focus
-    select
-    keydown: Meta (93) {meta}
-    keydown: Alt (18) {alt}{meta}
-    keydown: Control (17) {alt}{meta}{ctrl}
-    keydown: a (97) {alt}{meta}{ctrl}
-    keypress: a (97) {alt}{meta}{ctrl}
-    input: "{CURSOR}" -> "a"
-    select
-    keyup: a (97) {alt}{meta}{ctrl}
-    keyup: Control (17) {alt}{meta}
-    keyup: Alt (18) {meta}
-    keyup: Meta (93)
+    input[value=""] - focus
+    input[value=""] - select
+    input[value=""] - keydown: Meta (93) {meta}
+    input[value=""] - keydown: Alt (18) {alt}{meta}
+    input[value=""] - keydown: Control (17) {alt}{meta}{ctrl}
+    input[value=""] - keydown: a (97) {alt}{meta}{ctrl}
+    input[value=""] - keypress: a (97) {alt}{meta}{ctrl}
+    input[value=""] - input
+      "{CURSOR}" -> "a{CURSOR}"
+    input[value="a"] - select
+    input[value="a"] - keyup: a (97) {alt}{meta}{ctrl}
+    input[value="a"] - keyup: Control (17) {alt}{meta}
+    input[value="a"] - keyup: Alt (18) {meta}
+    input[value="a"] - keyup: Meta (93)
   `)
 })
 
@@ -359,8 +370,9 @@ test('{selectall} selects all the text', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="abcdefg"]
 
-    focus
-    select
+    input[value="abcdefg"] - select
+    input[value="abcdefg"] - focus
+    input[value="abcdefg"] - select
   `)
 })
 
@@ -377,12 +389,13 @@ test('{del} at the start of the input', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="ello"]
 
-    focus
-    select
-    keydown: Delete (46)
-    input: "{CURSOR}hello" -> "ello"
-    select
-    keyup: Delete (46)
+    input[value="hello"] - focus
+    input[value="hello"] - select
+    input[value="hello"] - keydown: Delete (46)
+    input[value="hello"] - input
+      "{CURSOR}hello" -> "ello{CURSOR}"
+    input[value="ello"] - select
+    input[value="ello"] - keyup: Delete (46)
   `)
 })
 
@@ -396,10 +409,10 @@ test('{del} at end of the input', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="hello"]
 
-    focus
-    select
-    keydown: Delete (46)
-    keyup: Delete (46)
+    input[value="hello"] - focus
+    input[value="hello"] - select
+    input[value="hello"] - keydown: Delete (46)
+    input[value="hello"] - keyup: Delete (46)
   `)
 })
 
@@ -416,12 +429,13 @@ test('{del} in the middle of the input', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="helo"]
 
-    focus
-    select
-    keydown: Delete (46)
-    input: "he{CURSOR}llo" -> "helo"
-    select
-    keyup: Delete (46)
+    input[value="hello"] - focus
+    input[value="hello"] - select
+    input[value="hello"] - keydown: Delete (46)
+    input[value="hello"] - input
+      "he{CURSOR}llo" -> "helo{CURSOR}"
+    input[value="helo"] - select
+    input[value="helo"] - keyup: Delete (46)
   `)
 })
 
@@ -438,12 +452,13 @@ test('{del} with a selection range', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="hlo"]
 
-    focus
-    select
-    keydown: Delete (46)
-    input: "h{SELECTION}el{/SELECTION}lo" -> "hlo"
-    select
-    keyup: Delete (46)
+    input[value="hello"] - focus
+    input[value="hello"] - select
+    input[value="hello"] - keydown: Delete (46)
+    input[value="hello"] - input
+      "h{SELECTION}el{/SELECTION}lo" -> "hlo{CURSOR}"
+    input[value="hlo"] - select
+    input[value="hlo"] - keyup: Delete (46)
   `)
 })
 
diff --git a/src/user-event/__tests__/type.js b/src/user-event/__tests__/type.js
index bfd62590e..cbfc4a435 100644
--- a/src/user-event/__tests__/type.js
+++ b/src/user-event/__tests__/type.js
@@ -8,23 +8,26 @@ test('types text in input', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="Sup"]
 
-    focus
-    select
-    keydown: S (83)
-    keypress: S (83)
-    input: "{CURSOR}" -> "S"
-    select
-    keyup: S (83)
-    keydown: u (117)
-    keypress: u (117)
-    input: "S{CURSOR}" -> "Su"
-    select
-    keyup: u (117)
-    keydown: p (112)
-    keypress: p (112)
-    input: "Su{CURSOR}" -> "Sup"
-    select
-    keyup: p (112)
+    input[value=""] - focus
+    input[value=""] - select
+    input[value=""] - keydown: S (83)
+    input[value=""] - keypress: S (83)
+    input[value=""] - input
+      "{CURSOR}" -> "S{CURSOR}"
+    input[value="S"] - select
+    input[value="S"] - keyup: S (83)
+    input[value="S"] - keydown: u (117)
+    input[value="S"] - keypress: u (117)
+    input[value="S"] - input
+      "S{CURSOR}" -> "Su{CURSOR}"
+    input[value="Su"] - select
+    input[value="Su"] - keyup: u (117)
+    input[value="Su"] - keydown: p (112)
+    input[value="Su"] - keypress: p (112)
+    input[value="Su"] - input
+      "Su{CURSOR}" -> "Sup{CURSOR}"
+    input[value="Sup"] - select
+    input[value="Sup"] - keyup: p (112)
   `)
 })
 
@@ -34,10 +37,11 @@ test('types text in input with allAtOnce', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="Sup"]
 
-    focus
-    select
-    input: "{CURSOR}" -> "Sup"
-    select
+    input[value=""] - focus
+    input[value=""] - select
+    input[value=""] - input
+      "{CURSOR}" -> "Sup{CURSOR}"
+    input[value="Sup"] - select
   `)
 })
 
@@ -51,23 +55,26 @@ test('types text inside custom element', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="Sup"]
 
-    focus
-    select
-    keydown: S (83)
-    keypress: S (83)
-    input: "{CURSOR}" -> "S"
-    select
-    keyup: S (83)
-    keydown: u (117)
-    keypress: u (117)
-    input: "S{CURSOR}" -> "Su"
-    select
-    keyup: u (117)
-    keydown: p (112)
-    keypress: p (112)
-    input: "Su{CURSOR}" -> "Sup"
-    select
-    keyup: p (112)
+    input[value=""] - focus
+    input[value=""] - select
+    input[value=""] - keydown: S (83)
+    input[value=""] - keypress: S (83)
+    input[value=""] - input
+      "{CURSOR}" -> "S{CURSOR}"
+    input[value="S"] - select
+    input[value="S"] - keyup: S (83)
+    input[value="S"] - keydown: u (117)
+    input[value="S"] - keypress: u (117)
+    input[value="S"] - input
+      "S{CURSOR}" -> "Su{CURSOR}"
+    input[value="Su"] - select
+    input[value="Su"] - keyup: u (117)
+    input[value="Su"] - keydown: p (112)
+    input[value="Su"] - keypress: p (112)
+    input[value="Su"] - input
+      "Su{CURSOR}" -> "Sup{CURSOR}"
+    input[value="Sup"] - select
+    input[value="Sup"] - keyup: p (112)
   `)
 })
 
@@ -77,23 +84,26 @@ test('types text in textarea', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: textarea[value="Sup"]
 
-    focus
-    select
-    keydown: S (83)
-    keypress: S (83)
-    input: "{CURSOR}" -> "S"
-    select
-    keyup: S (83)
-    keydown: u (117)
-    keypress: u (117)
-    input: "S{CURSOR}" -> "Su"
-    select
-    keyup: u (117)
-    keydown: p (112)
-    keypress: p (112)
-    input: "Su{CURSOR}" -> "Sup"
-    select
-    keyup: p (112)
+    textarea[value=""] - focus
+    textarea[value=""] - select
+    textarea[value=""] - keydown: S (83)
+    textarea[value=""] - keypress: S (83)
+    textarea[value=""] - input
+      "{CURSOR}" -> "S{CURSOR}"
+    textarea[value="S"] - select
+    textarea[value="S"] - keyup: S (83)
+    textarea[value="S"] - keydown: u (117)
+    textarea[value="S"] - keypress: u (117)
+    textarea[value="S"] - input
+      "S{CURSOR}" -> "Su{CURSOR}"
+    textarea[value="Su"] - select
+    textarea[value="Su"] - keyup: u (117)
+    textarea[value="Su"] - keydown: p (112)
+    textarea[value="Su"] - keypress: p (112)
+    textarea[value="Su"] - input
+      "Su{CURSOR}" -> "Sup{CURSOR}"
+    textarea[value="Sup"] - select
+    textarea[value="Sup"] - keyup: p (112)
   `)
 })
 
@@ -103,10 +113,11 @@ test('should append text all at once', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="Sup"]
 
-    focus
-    select
-    input: "{CURSOR}" -> "Sup"
-    select
+    input[value=""] - focus
+    input[value=""] - select
+    input[value=""] - input
+      "{CURSOR}" -> "Sup{CURSOR}"
+    input[value="Sup"] - select
   `)
 })
 
@@ -119,11 +130,11 @@ test('does not fire input event when keypress calls prevent default', async () =
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value=""]
 
-    focus
-    select
-    keydown: a (97)
-    keypress: a (97)
-    keyup: a (97)
+    input[value=""] - focus
+    input[value=""] - select
+    input[value=""] - keydown: a (97)
+    input[value=""] - keypress: a (97)
+    input[value=""] - keyup: a (97)
   `)
 })
 
@@ -136,10 +147,10 @@ test('does not fire keypress or input events when keydown calls prevent default'
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value=""]
 
-    focus
-    select
-    keydown: a (97)
-    keyup: a (97)
+    input[value=""] - focus
+    input[value=""] - select
+    input[value=""] - keydown: a (97)
+    input[value=""] - keyup: a (97)
   `)
 })
 
@@ -159,11 +170,11 @@ test('does not fire input when readonly', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value=""]
 
-    focus
-    select
-    keydown: a (97)
-    keypress: a (97)
-    keyup: a (97)
+    input[value=""] - focus
+    input[value=""] - select
+    input[value=""] - keydown: a (97)
+    input[value=""] - keypress: a (97)
+    input[value=""] - keyup: a (97)
   `)
 })
 
@@ -174,8 +185,8 @@ test('does not fire input when readonly (with allAtOnce)', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value=""]
 
-    focus
-    select
+    input[value=""] - focus
+    input[value=""] - select
   `)
 })
 
@@ -218,21 +229,23 @@ test('honors maxlength', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="12"]
 
-    focus
-    select
-    keydown: 1 (49)
-    keypress: 1 (49)
-    input: "{CURSOR}" -> "1"
-    select
-    keyup: 1 (49)
-    keydown: 2 (50)
-    keypress: 2 (50)
-    input: "1{CURSOR}" -> "12"
-    select
-    keyup: 2 (50)
-    keydown: 3 (51)
-    keypress: 3 (51)
-    keyup: 3 (51)
+    input[value=""] - focus
+    input[value=""] - select
+    input[value=""] - keydown: 1 (49)
+    input[value=""] - keypress: 1 (49)
+    input[value=""] - input
+      "{CURSOR}" -> "1{CURSOR}"
+    input[value="1"] - select
+    input[value="1"] - keyup: 1 (49)
+    input[value="1"] - keydown: 2 (50)
+    input[value="1"] - keypress: 2 (50)
+    input[value="1"] - input
+      "1{CURSOR}" -> "12{CURSOR}"
+    input[value="12"] - select
+    input[value="12"] - keyup: 2 (50)
+    input[value="12"] - keydown: 3 (51)
+    input[value="12"] - keypress: 3 (51)
+    input[value="12"] - keyup: 3 (51)
   `)
 })
 
@@ -244,11 +257,11 @@ test('honors maxlength with existing text', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="12"]
 
-    focus
-    select
-    keydown: 3 (51)
-    keypress: 3 (51)
-    keyup: 3 (51)
+    input[value="12"] - focus
+    input[value="12"] - select
+    input[value="12"] - keydown: 3 (51)
+    input[value="12"] - keypress: 3 (51)
+    input[value="12"] - keyup: 3 (51)
   `)
 })
 
@@ -320,17 +333,19 @@ test('typing into a controlled input works', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="$23"]
 
-    focus
-    select
-    keydown: 2 (50)
-    keypress: 2 (50)
-    input: "{CURSOR}" -> "$2"
-    keyup: 2 (50)
-    keydown: 3 (51)
-    keypress: 3 (51)
-    input: "$2{CURSOR}" -> "$23"
-    select
-    keyup: 3 (51)
+    input[value=""] - focus
+    input[value=""] - select
+    input[value=""] - keydown: 2 (50)
+    input[value=""] - keypress: 2 (50)
+    input[value=""] - input
+      "{CURSOR}" -> "$2{CURSOR}"
+    input[value="$2"] - keyup: 2 (50)
+    input[value="$2"] - keydown: 3 (51)
+    input[value="$2"] - keypress: 3 (51)
+    input[value="$2"] - input
+      "$2{CURSOR}" -> "$23{CURSOR}"
+    input[value="$23"] - select
+    input[value="$23"] - keyup: 3 (51)
   `)
 })
 
@@ -344,13 +359,14 @@ test('typing in the middle of a controlled input works', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="$213"]
 
-    select
-    focus
-    keydown: 1 (49)
-    keypress: 1 (49)
-    input: "$2{CURSOR}3" -> "$213"
-    select
-    keyup: 1 (49)
+    input[value="$23"] - select
+    input[value="$23"] - focus
+    input[value="$23"] - keydown: 1 (49)
+    input[value="$23"] - keypress: 1 (49)
+    input[value="$23"] - input
+      "$2{CURSOR}3" -> "$213{CURSOR}"
+    input[value="$213"] - select
+    input[value="$213"] - keyup: 1 (49)
   `)
 })
 
@@ -374,16 +390,18 @@ test('ignored {backspace} in controlled input', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="$234"]
 
-    select
-    focus
-    keydown: Backspace (8)
-    input: "\${CURSOR}23" -> "$23"
-    keyup: Backspace (8)
-    keydown: 4 (52)
-    keypress: 4 (52)
-    input: "$23{CURSOR}" -> "$234"
-    select
-    keyup: 4 (52)
+    input[value="$23"] - select
+    input[value="$23"] - focus
+    input[value="$23"] - keydown: Backspace (8)
+    input[value="$23"] - input
+      "\${CURSOR}23" -> "$23{CURSOR}"
+    input[value="$23"] - keyup: Backspace (8)
+    input[value="$23"] - keydown: 4 (52)
+    input[value="$23"] - keypress: 4 (52)
+    input[value="$23"] - input
+      "$23{CURSOR}" -> "$234{CURSOR}"
+    input[value="$234"] - select
+    input[value="$234"] - keyup: 4 (52)
   `)
 })
 
@@ -395,18 +413,20 @@ test('typing in a textarea with existing text', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: textarea[value="Hello, 12"]
 
-    focus
-    select
-    keydown: 1 (49)
-    keypress: 1 (49)
-    input: "Hello, {CURSOR}" -> "Hello, 1"
-    select
-    keyup: 1 (49)
-    keydown: 2 (50)
-    keypress: 2 (50)
-    input: "Hello, 1{CURSOR}" -> "Hello, 12"
-    select
-    keyup: 2 (50)
+    textarea[value="Hello, "] - focus
+    textarea[value="Hello, "] - select
+    textarea[value="Hello, "] - keydown: 1 (49)
+    textarea[value="Hello, "] - keypress: 1 (49)
+    textarea[value="Hello, "] - input
+      "Hello, {CURSOR}" -> "Hello, 1{CURSOR}"
+    textarea[value="Hello, 1"] - select
+    textarea[value="Hello, 1"] - keyup: 1 (49)
+    textarea[value="Hello, 1"] - keydown: 2 (50)
+    textarea[value="Hello, 1"] - keypress: 2 (50)
+    textarea[value="Hello, 1"] - input
+      "Hello, 1{CURSOR}" -> "Hello, 12{CURSOR}"
+    textarea[value="Hello, 12"] - select
+    textarea[value="Hello, 12"] - keyup: 2 (50)
   `)
   expect(element).toHaveValue('Hello, 12')
 })
@@ -423,19 +443,21 @@ test('accepts an initialSelectionStart and initialSelectionEnd', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: textarea[value="12Hello, "]
 
-    select
-    focus
-    select
-    keydown: 1 (49)
-    keypress: 1 (49)
-    input: "{CURSOR}Hello, " -> "1Hello, "
-    select
-    keyup: 1 (49)
-    keydown: 2 (50)
-    keypress: 2 (50)
-    input: "1{CURSOR}Hello, " -> "12Hello, "
-    select
-    keyup: 2 (50)
+    textarea[value="Hello, "] - select
+    textarea[value="Hello, "] - focus
+    textarea[value="Hello, "] - select
+    textarea[value="Hello, "] - keydown: 1 (49)
+    textarea[value="Hello, "] - keypress: 1 (49)
+    textarea[value="Hello, "] - input
+      "{CURSOR}Hello, " -> "1Hello, {CURSOR}"
+    textarea[value="1Hello, "] - select
+    textarea[value="1Hello, "] - keyup: 1 (49)
+    textarea[value="1Hello, "] - keydown: 2 (50)
+    textarea[value="1Hello, "] - keypress: 2 (50)
+    textarea[value="1Hello, "] - input
+      "1{CURSOR}Hello, " -> "12Hello, {CURSOR}"
+    textarea[value="12Hello, "] - select
+    textarea[value="12Hello, "] - keyup: 2 (50)
   `)
   expect(element).toHaveValue('12Hello, ')
 })
@@ -461,15 +483,16 @@ test('can type "-" into number inputs', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="-3"]
 
-    focus
-    keydown: - (45)
-    keypress: - (45)
-    input: "{CURSOR}" -> ""
-    keyup: - (45)
-    keydown: 3 (51)
-    keypress: 3 (51)
-    input: "{CURSOR}" -> "-3"
-    keyup: 3 (51)
+    input[value=""] - focus
+    input[value=""] - keydown: - (45)
+    input[value=""] - keypress: - (45)
+    input[value=""] - input
+    input[value=""] - keyup: - (45)
+    input[value=""] - keydown: 3 (51)
+    input[value=""] - keypress: 3 (51)
+    input[value=""] - input
+      "{CURSOR}" -> "{CURSOR}-3"
+    input[value="-3"] - keyup: 3 (51)
   `)
 })
 
@@ -482,19 +505,22 @@ test('can type "." into number inputs', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value=".3"]
 
-    focus
-    keydown: 0 (48)
-    keypress: 0 (48)
-    input: "{CURSOR}" -> "0"
-    keyup: 0 (48)
-    keydown: . (46)
-    keypress: . (46)
-    input: "{CURSOR}0" -> ""
-    keyup: . (46)
-    keydown: 3 (51)
-    keypress: 3 (51)
-    input: "{CURSOR}" -> ".3"
-    keyup: 3 (51)
+    input[value=""] - focus
+    input[value=""] - keydown: 0 (48)
+    input[value=""] - keypress: 0 (48)
+    input[value=""] - input
+      "{CURSOR}" -> "{CURSOR}0"
+    input[value="0"] - keyup: 0 (48)
+    input[value="0"] - keydown: . (46)
+    input[value="0"] - keypress: . (46)
+    input[value="0"] - input
+      "{CURSOR}0" -> "{CURSOR}"
+    input[value=""] - keyup: . (46)
+    input[value=""] - keydown: 3 (51)
+    input[value=""] - keypress: 3 (51)
+    input[value=""] - input
+      "{CURSOR}" -> "{CURSOR}.3"
+    input[value=".3"] - keyup: 3 (51)
   `)
 })
 
diff --git a/src/user-event/__tests__/unhover.js b/src/user-event/__tests__/unhover.js
index d5769fb99..43fc410fa 100644
--- a/src/user-event/__tests__/unhover.js
+++ b/src/user-event/__tests__/unhover.js
@@ -8,11 +8,11 @@ test('unhover', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: button
 
-    pointermove
-    mousemove: Left (0)
-    pointerout
-    pointerleave
-    mouseout: Left (0)
-    mouseleave: Left (0)
+    button - pointermove
+    button - mousemove: Left (0)
+    button - pointerout
+    button - pointerleave
+    button - mouseout: Left (0)
+    button - mouseleave: Left (0)
   `)
 })
diff --git a/src/user-event/__tests__/upload.js b/src/user-event/__tests__/upload.js
index 798241980..71c113469 100644
--- a/src/user-event/__tests__/upload.js
+++ b/src/user-event/__tests__/upload.js
@@ -10,14 +10,14 @@ test('should fire the correct events for input', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value=""]
 
-    mouseover: Left (0)
-    mousemove: Left (0)
-    mousedown: Left (0)
-    focus
-    focusin
-    mouseup: Left (0)
-    click: Left (0)
-    change
+    input[value=""] - mouseover: Left (0)
+    input[value=""] - mousemove: Left (0)
+    input[value=""] - mousedown: Left (0)
+    input[value=""] - focus
+    input[value=""] - focusin
+    input[value=""] - mouseup: Left (0)
+    input[value=""] - click: Left (0)
+    input[value=""] - change
   `)
 })
 
@@ -40,18 +40,18 @@ test('should fire the correct events with label', async () => {
   expect(getLabelEventCalls()).toMatchInlineSnapshot(`
     Events fired on: label[for="element"]
 
-    mouseover: Left (0)
-    mousemove: Left (0)
-    mousedown: Left (0)
-    mouseup: Left (0)
-    click: Left (0)
+    label[for="element"] - mouseover: Left (0)
+    label[for="element"] - mousemove: Left (0)
+    label[for="element"] - mousedown: Left (0)
+    label[for="element"] - mouseup: Left (0)
+    label[for="element"] - click: Left (0)
   `)
   expect(getInputEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input#element[value=""]
 
-    click: Left (0)
-    focus
-    change
+    input#element[value=""] - click: Left (0)
+    input#element[value=""] - focus
+    input#element[value=""] - change
   `)
 })
 
diff --git a/src/user-event/hover.js b/src/user-event/hover.js
index f521e5e05..d7d9b8480 100644
--- a/src/user-event/hover.js
+++ b/src/user-event/hover.js
@@ -1,6 +1,8 @@
 import {wrapAsync} from '../wrap-async'
 import {fireEvent, getMouseEventOptions} from './utils'
 
+jest.mock('./utils')
+
 async function hover(element, init) {
   await fireEvent.pointerOver(element, init)
   await fireEvent.pointerEnter(element, init)
diff --git a/tests/setup-env.js b/tests/setup-env.js
index 99b03bdba..6bb7bcfb3 100644
--- a/tests/setup-env.js
+++ b/tests/setup-env.js
@@ -1,6 +1,8 @@
 import '@testing-library/jest-dom/extend-expect'
 import jestSerializerAnsi from 'jest-serializer-ansi'
 
+jest.mock('../src/user-event/utils')
+
 expect.addSnapshotSerializer(jestSerializerAnsi)
 // add serializer for MutationRecord
 expect.addSnapshotSerializer({