Use @web/dev-server-import-maps to mock query-selector-shadow-dom

Author: markcellus

package-lock.json

@@ -47,6 +47,7 @@
     "@typescript-eslint/eslint-plugin": "^4.25.0",
     "@typescript-eslint/parser": "^4.25.0",
     "@web/dev-server-esbuild": "^0.2.12",
+    "@web/dev-server-import-maps": "0.0.5",
     "@web/test-runner": "^0.13.5",
     "banner-cli": "^0.14.1",
     "dotenv": "^10.0.0",

package.json

@@ -0,0 +1,2 @@
+import { stub } from 'sinon';
+export const querySelectorDeep = stub();

tests/mocks/query-selector-shadow-dom.ts

@@ -2,14 +2,18 @@ import sinon from 'sinon';
 import { expect, fixture, html, nextFrame } from '@open-wc/testing';
 // eslint-disable-next-line no-unused-vars
 import { extractPathParams, RouterComponent } from '../src/router-component';
+import { querySelectorDeep as realQuerySelectorDeep } from 'query-selector-shadow-dom';
 
 const origDocTitle = document.title;
 const originalPathName = document.location.pathname;
 
 describe('<router-component>', async () => {
     let consoleWarn;
+    let querySelectorDeep: sinon.SinonStub;
     beforeEach(() => {
+        querySelectorDeep = realQuerySelectorDeep as sinon.SinonStub;
         consoleWarn = sinon.stub(console, 'warn');
+        querySelectorDeep.reset();
     });
 
     afterEach(() => {
@@ -473,10 +477,9 @@ describe('<router-component>', async () => {
         });
 
         it('scrolls to the element on the route that matches the id of the hash after popstate has been called', async () => {
+            const hashedElement = document.createElement('div');
+            querySelectorDeep.returns(hashedElement);
             window.history.pushState({}, document.title, '/page1#test');
-            const hashedElement = router.querySelector(
-                'first-page div[id="test"]'
-            );
             const popstate = new PopStateEvent('popstate', { state: {} });
             const scrollIntoViewStub = sinon.spy(
                 hashedElement,

tests/router-component-tests.ts

@@ -1,7 +1,20 @@
 import { esbuildPlugin } from '@web/dev-server-esbuild';
+import { importMapsPlugin } from '@web/dev-server-import-maps';
 
 export default {
-    files: 'tests/**/*.ts',
-    plugins: [esbuildPlugin({ ts: true, target: 'auto' })],
+    files: 'tests/*.ts',
+    plugins: [
+        esbuildPlugin({ ts: true, target: 'auto' }),
+        importMapsPlugin({
+            inject: {
+                importMap: {
+                    imports: {
+                        'query-selector-shadow-dom':
+                            '/tests/mocks/query-selector-shadow-dom.ts',
+                    },
+                },
+            },
+        }),
+    ],
     nodeResolve: true,
 };