Better manual mocks

Author: trurl-master

package.json

@@ -26,7 +26,7 @@
   "scripts": {
     "start": "tsdx watch",
     "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
+    "test": "tsdx test",
     "lint": "tsdx lint",
     "prepare": "tsdx build",
     "size": "size-limit",

src/mocks/resize-observer.ts

@@ -8,7 +8,7 @@ const state: State = {
   nodeObservers: new Map(),
 };
 
-class MockedResizeObserver {
+class MockedResizeObserver implements ResizeObserver {
   nodes: HTMLElement[] = [];
   callback: ResizeObserverCallback;
 
@@ -64,9 +64,12 @@ class MockedResizeObserver {
   };
 }
 
-function elementToEntry(element: HTMLElement) {
+function elementToEntry(element: HTMLElement): ResizeObserverEntry {
   const boundingClientRect = element.getBoundingClientRect();
 
+  // @ts-ignore
+  // for some reason, the typescript type definition for ResizeObserverEntry
+  // is mismatched between tsdx typecheck and vscode typecheck
   return {
     borderBoxSize: [
       {
@@ -81,14 +84,25 @@ function elementToEntry(element: HTMLElement) {
       },
     ],
     contentRect: boundingClientRect,
+    // devicePixelContentBoxSize: [
+    //   // assume device pixel ratio of 1
+    //   {
+    //     blockSize: boundingClientRect.width,
+    //     inlineSize: boundingClientRect.height,
+    //   },
+    // ],
     target: element,
   };
 }
 
 function mockResizeObserver() {
   const savedImplementation = window.ResizeObserver;
 
-  window.ResizeObserver = MockedResizeObserver;
+  Object.defineProperty(window, 'ResizeObserver', {
+    writable: true,
+    configurable: true,
+    value: MockedResizeObserver,
+  });
 
   afterAll(() => {
     window.ResizeObserver = savedImplementation;

src/mocks/viewport.ts

@@ -52,26 +52,29 @@ function mockViewport(desc: ViewportDescription): MockViewport {
     state.listenerHandlers.splice(index, 1);
   };
 
-  window.matchMedia = jest.fn().mockImplementation(query => ({
-    get matches() {
-      return mediaQuery.match(query, state.currentDesc);
-    },
-    media: query,
-    onchange: null,
-    addListener, // deprecated
-    removeListener, // deprecated
-    addEventListener: (eventType: string, handler: Handler) => {
-      if (eventType === 'change') {
-        addListener(handler);
-      }
-    },
-    removeEventListener: (eventType: string, handler: Handler) => {
-      if (eventType === 'change') {
-        removeListener(handler);
-      }
-    },
-    dispatchEvent: jest.fn(),
-  }));
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+      get matches() {
+        return mediaQuery.match(query, state.currentDesc);
+      },
+      media: query,
+      onchange: null,
+      addListener, // deprecated
+      removeListener, // deprecated
+      addEventListener: (eventType: string, handler: Handler) => {
+        if (eventType === 'change') {
+          addListener(handler);
+        }
+      },
+      removeEventListener: (eventType: string, handler: Handler) => {
+        if (eventType === 'change') {
+          removeListener(handler);
+        }
+      },
+      dispatchEvent: jest.fn(),
+    })),
+  });
 
   return {
     cleanup: () => {