test(jsdom env): fix issue with missing TransitionEvent

Author: 100terres

test/setup/environment.ts

@@ -4,6 +4,7 @@ import JSDOMEnvironment from 'jest-environment-jsdom';
 import { TextDecoder, TextEncoder } from 'util';
 
 import attachRafStub from './attach-raf-stub';
+import transitionEventPolyfill from './transition-event-polyfill';
 
 declare global {
   interface ProcessEnv {
@@ -16,6 +17,7 @@ export default class MyJSDOMEnvironment extends JSDOMEnvironment {
     super(config, context);
 
     attachRafStub.call(this);
+    transitionEventPolyfill.call(this);
 
     // When importing jsdom in one of the test it throws an
     // error, because TextDecoder and TextEncoder are needed.

test/setup/transition-event-polyfill.ts

@@ -0,0 +1,33 @@
+import type JSDOMEnvironment from 'jest-environment-jsdom';
+
+/**
+ * @testing-library/dom and jsdom do not properly implement
+ * the TransitionEvent. So we are implementing our own polyfill.
+ *
+ * See:
+ *  - https://github.com/testing-library/dom-testing-library/pull/865
+ *  - https://github.com/jsdom/jsdom/issues/1781
+ *  - https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent/TransitionEvent
+ *
+ * Inspirated by: https://codesandbox.io/s/bgfz1?file=%2Fsrc%2Findex.test.js%3A70-363
+ */
+export default function transitionEventPolyfill(this: JSDOMEnvironment) {
+  class TransitionEvent extends this.global.Event {
+    readonly elapsedTime: number;
+    readonly propertyName: string;
+    readonly pseudoElement: string;
+
+    constructor(
+      type: string,
+      transitionEventInitDict: TransitionEventInit = {},
+    ) {
+      super(type, transitionEventInitDict);
+
+      this.elapsedTime = transitionEventInitDict.elapsedTime || 0.0;
+      this.propertyName = transitionEventInitDict.propertyName || '';
+      this.pseudoElement = transitionEventInitDict.pseudoElement || '';
+    }
+  }
+
+  this.global.TransitionEvent = TransitionEvent;
+}