fix: remove jsdom so polyfills arent needed. (#37)

* fix: remove jsdom so polyfills arent needed. * fix: gh-actions issue * remove jsdom * remove jsdom
KonnorRogers · Nov 10, 2022 · a56bbb0 · a56bbb0
1 parent b82fb1e
commit a56bbb0
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 36 deletions.
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -26,4 +26,5 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'
       - run: npm ci
+      - run: npm run check
       - run: npm run test:ci
diff --git a/__tests__/screenDebug.test.tsx b/__tests__/screenDebug.test.tsx
@@ -8,25 +8,25 @@ import {
 import { prettyShadowDOM, screen } from "../src/index";
 
 beforeEach(() => {
-	// jest.spyOn(console, 'log').mockImplementation(() => {})
-})
+  // jest.spyOn(console, 'log').mockImplementation(() => {})
+});
 
 afterEach(() => {
   // // @ts-expect-error
   // console.log.mockRestore()
-})
+});
 
 /* @see https://github.com/KonnorRogers/shadow-dom-testing-library/issues/33#issuecomment-1306593757 */
 test("Should not modify the original dom", () => {
-	render(<Duplicates />)
-	const originalHTML = document.body.innerHTML
-	expect(document.querySelector("shadow-root")).toBe(null)
+  render(<Duplicates />);
+  const originalHTML = document.body.innerHTML;
+  expect(document.querySelector("shadow-root")).toBe(null);
 
-	prettyShadowDOM(document.body)
+  prettyShadowDOM(document.body);
 
-	expect(document.querySelector("shadow-root")).toBe(null)
-	expect(originalHTML).toEqual(document.body.innerHTML)
-})
+  expect(document.querySelector("shadow-root")).toBe(null);
+  expect(originalHTML).toEqual(document.body.innerHTML);
+});
 
 test.skip("Triple shadow roots", async () => {
   render(<TripleShadowRoots />);

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   "scripts": {
     "test": "vitest run",
     "format": "npx prettier ./src ./__tests__ ./README.md --write",
+    "check": "npx prettier ./src ./__tests__ ./README.md --check",
     "test:watch": "vitest",
     "test:ci": "npm run build && npm run test && npm run jest",
     "jest": "jest",
@@ -46,13 +47,12 @@
   "url": "https://github.com/konnorrogers/shadow-dom-testing-library/issues",
   "repository": "github:konnorrogers/shadow-dom-testing-library",
   "peerDependencies": {
-    "@testing-library/dom": ">= 8",
-    "jsdom": ">= 20"
+    "@testing-library/dom": ">= 8"
   },
   "devDependencies": {
     "@open-wc/testing-helpers": "^2.1.2",
-    "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/dom": ">= 8",
+    "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@types/jest": "^28.1.4",
     "@types/node": "^18.0.3",
@@ -63,7 +63,7 @@
     "jest": "^28.1.2",
     "jest-environment-jsdom": "^28.1.2",
     "jest-preview": "^0.2.6",
-    "jsdom": ">= 20",
+    "jsdom": "^20.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "standard-version": "^9.5.0",

diff --git a/src/index.ts b/src/index.ts
@@ -22,9 +22,9 @@ export * from "./types";
 export * from "./shadow-queries";
 
 export {
-	deepQuerySelector,
-	deepQuerySelectorAll
-} from "./deep-query-selectors"
+  deepQuerySelector,
+  deepQuerySelectorAll,
+} from "./deep-query-selectors";
 
 export {
   shadowScreen as screen,

diff --git a/src/jsdom-setup.ts b/src/jsdom-setup.ts
diff --git a/src/pretty-shadow-dom.ts b/src/pretty-shadow-dom.ts
@@ -1,6 +1,4 @@
-import "./jsdom-setup";
 import { prettyDOM } from "@testing-library/dom";
-import { JSDOM } from "jsdom";
 
 /**
  * This is an extension of prettyDOM / logDOM that provides proper printing of shadow roots.
@@ -29,17 +27,18 @@ export function toJSDOM(element?: Element | Document | undefined): HTMLElement {
   // Remove extraneous whitespace as it creates bloated printing
   htmlString = htmlString.replace(/>\s+</g, "><");
 
-  const dom = new JSDOM(htmlString);
+  const parser = new DOMParser();
+  const dom = parser.parseFromString(htmlString, "text/html");
 
   if (
     element instanceof Document ||
     element instanceof HTMLHtmlElement ||
     element instanceof HTMLBodyElement
   ) {
-    return dom.window.document.body;
+    return dom.body;
   }
 
-  return dom.window.document.body.firstElementChild as HTMLElement;
+  return dom.body.firstElementChild as HTMLElement;
 }
 
 function processNodes(
@@ -61,7 +60,7 @@ function processNodes(
       const shadowRootPseudoNode = document.createElement("shadow-root");
       shadowRootPseudoNode.innerHTML = node.shadowRoot.innerHTML;
 
-			const clonedNode = node.cloneNode(true) as Element
+      const clonedNode = node.cloneNode(true) as Element;
       clonedNode.insertAdjacentElement("afterbegin", shadowRootPseudoNode);
 
       stringBuffer = stringBuffer.replace(outerHTML, clonedNode.outerHTML);

diff --git a/src/shadow-queries.ts b/src/shadow-queries.ts
@@ -107,11 +107,13 @@ const [
   getByShadowLabelText,
   findAllByShadowLabelText,
   findByShadowLabelText,
-] = toShadowQueries(buildQueries<ScreenShadowSelectorMatcherParams>(
-  queryAllByShadowLabelText,
-  getMultipleLabelTextError,
-  getMissingLabelTextError
-))
+] = toShadowQueries(
+  buildQueries<ScreenShadowSelectorMatcherParams>(
+    queryAllByShadowLabelText,
+    getMultipleLabelTextError,
+    getMissingLabelTextError
+  )
+);
 
 // Placeholder Text
 function queryAllByShadowPlaceholderText<T extends HTMLElement = HTMLElement>(