chore: use modern DOM APIs (#14797)

.eslintrc.cjs

@@ -688,16 +688,12 @@ module.exports = {
     'unicorn/no-useless-promise-resolve-reject': 'off',
     'unicorn/no-useless-undefined': 'off',
     'unicorn/number-literal-case': 'off',
-    'unicorn/prefer-add-event-listener': 'off',
     'unicorn/prefer-array-flat': 'off',
     'unicorn/prefer-array-flat-map': 'off',
     'unicorn/prefer-array-index-of': 'off',
     'unicorn/prefer-array-some': 'off',
     'unicorn/prefer-at': 'off',
     'unicorn/prefer-date-now': 'off',
-    'unicorn/prefer-dom-node-append': 'off',
-    'unicorn/prefer-dom-node-remove': 'off',
-    'unicorn/prefer-dom-node-text-content': 'off',
     'unicorn/prefer-export-from': 'off',
     'unicorn/prefer-logical-operator-over-ternary': 'off',
     'unicorn/prefer-math-trunc': 'off',
@@ -707,7 +703,6 @@ module.exports = {
     'unicorn/prefer-object-from-entries': 'off',
     'unicorn/prefer-optional-catch-binding': 'off',
     'unicorn/prefer-prototype-methods': 'off',
-    'unicorn/prefer-query-selector': 'off',
     'unicorn/prefer-regexp-test': 'off',
     'unicorn/prefer-set-has': 'off',
     'unicorn/prefer-spread': 'off',

e2e/browser-resolver/fake-pkg/main.js

@@ -11,6 +11,6 @@
 
 const div = document.createElement('div');
 
-div.innerText = 'Hello!';
+div.textContent = 'Hello!';
 
 module.exports = div;

e2e/custom-jsdom-html/__tests__/test.js

@@ -7,5 +7,5 @@
 
 test('jsdom custom html', () => {
   /* eslint-disable-next-line no-undef */
-  expect(document.getElementById('root')).toBeTruthy();
+  expect(document.querySelector('#root')).toBeTruthy();
 });

packages/expect-utils/src/__tests__/isError.test.ts

@@ -19,7 +19,7 @@ describe('isError', () => {
     createError: (win: Window | typeof globalThis) => Error | null,
   ) {
     const iframe = document.createElement('iframe');
-    document.body.appendChild(iframe);
+    document.body.append(iframe);
     try {
       const contentWindow = iframe.contentWindow;
 
@@ -32,7 +32,7 @@ describe('isError', () => {
       const error = createError(contentWindow);
       expect(isError(error)).toBe(true);
     } finally {
-      iframe.parentElement!.removeChild(iframe);
+      iframe.remove();
     }
   }
 

packages/expect/src/__tests__/toEqual-dom.test.ts

@@ -144,8 +144,8 @@ describe('toEqual', () => {
 
         const a = document.createElement(name);
         const b = document.createElement(name);
-        a.appendChild(document.createTextNode(data));
-        b.appendChild(document.createTextNode(data));
+        a.append(document.createTextNode(data));
+        b.append(document.createTextNode(data));
 
         expect(a).toEqual(b);
         expect(b).toEqual(a);
@@ -156,8 +156,8 @@ describe('toEqual', () => {
 
         const a = document.createElement('strong');
         const b = document.createElement('span');
-        a.appendChild(document.createTextNode(data));
-        b.appendChild(document.createTextNode(data));
+        a.append(document.createTextNode(data));
+        b.append(document.createTextNode(data));
 
         expect(a).not.toEqual(b);
         expect(b).not.toEqual(a);
@@ -173,20 +173,20 @@ describe('toEqual', () => {
 
         const aSpan1 = document.createElement(name1);
         const bSpan1 = document.createElement(name1);
-        aSpan1.appendChild(document.createTextNode(data1));
-        bSpan1.appendChild(document.createTextNode(data1));
+        aSpan1.append(document.createTextNode(data1));
+        bSpan1.append(document.createTextNode(data1));
 
         const aSpan2 = document.createElement(name2);
         const bSpan2 = document.createElement(name2);
-        aSpan2.appendChild(document.createTextNode(data2));
-        bSpan2.appendChild(document.createTextNode(data2));
+        aSpan2.append(document.createTextNode(data2));
+        bSpan2.append(document.createTextNode(data2));
 
         const a = document.createDocumentFragment();
         const b = document.createDocumentFragment();
-        a.appendChild(aSpan1);
-        a.appendChild(aSpan2);
-        b.appendChild(bSpan1);
-        b.appendChild(bSpan2);
+        a.append(aSpan1);
+        a.append(aSpan2);
+        b.append(bSpan1);
+        b.append(bSpan2);
 
         expect(a).toEqual(b);
         expect(b).toEqual(a);
@@ -199,20 +199,20 @@ describe('toEqual', () => {
 
         const aSpan1 = document.createElement('strong');
         const bSpan1 = document.createElement(name);
-        aSpan1.appendChild(document.createTextNode(data1));
-        bSpan1.appendChild(document.createTextNode(data1));
+        aSpan1.append(document.createTextNode(data1));
+        bSpan1.append(document.createTextNode(data1));
 
         const aSpan2 = document.createElement(name);
         const bSpan2 = document.createElement(name);
-        aSpan2.appendChild(document.createTextNode(data2));
-        bSpan2.appendChild(document.createTextNode(data2));
+        aSpan2.append(document.createTextNode(data2));
+        bSpan2.append(document.createTextNode(data2));
 
         const a = document.createDocumentFragment();
         const b = document.createDocumentFragment();
-        a.appendChild(aSpan1);
-        a.appendChild(aSpan2);
-        b.appendChild(bSpan1);
-        b.appendChild(bSpan2);
+        a.append(aSpan1);
+        a.append(aSpan2);
+        b.append(bSpan1);
+        b.append(bSpan2);
 
         expect(a).not.toEqual(b);
         expect(b).not.toEqual(a);

packages/jest-environment-jsdom/src/__tests__/jsdom_environment.test.ts

@@ -118,7 +118,7 @@ describe('JSDomEnvironment', () => {
     // append an instance of the custom element
     env.global.customElements.define('my-custom-element', MyCustomElement);
     const instance = env.global.document.createElement('my-custom-element');
-    env.global.document.body.appendChild(instance);
+    env.global.document.body.append(instance);
 
     // teardown will disconnect the custom elements
     env.teardown();

packages/jest-matcher-utils/src/__tests__/deepCyclicCopyReplaceableDom.test.ts

@@ -24,8 +24,8 @@ test('should copy complex element', () => {
   const div = document.createElement('div');
   const span = document.createElement('span');
   div.setAttribute('id', 'div');
-  div.innerText = 'this is div';
-  div.appendChild(span);
+  div.textContent = 'this is div';
+  div.append(span);
   const copied = deepCyclicCopyReplaceable(div);
   expect(copied).toEqual(div);
   expect(div === copied).toBe(false); //assert reference is not the same

packages/pretty-format/src/__tests__/DOMCollection.test.ts

@@ -54,7 +54,7 @@ describe('DOMCollection plugin for list items', () => {
   ].join('');
 
   const form = document.createElement('form');
-  form.appendChild(select);
+  form.append(select);
 
   const expectedOption1 = [
     '  <option',
@@ -87,6 +87,7 @@ describe('DOMCollection plugin for list items', () => {
   ].join('\n');
 
   it('supports HTMLCollection for getElementsByTagName', () => {
+    // eslint-disable-next-line unicorn/prefer-query-selector
     const options = form.getElementsByTagName('option');
     expect(options).toPrettyPrintTo(expectedHTMLCollection);
   });

packages/pretty-format/src/__tests__/DOMElement.test.ts

@@ -71,7 +71,7 @@ describe('DOMElement Plugin', () => {
     const parent = document.createElement('div');
     parent.setAttribute('style', 'color: #99424F');
     const text = document.createTextNode('Jest');
-    parent.appendChild(text);
+    parent.append(text);
 
     expect(parent).toPrettyPrintTo(
       '<div\n  style="color: #99424F"\n>\n  Jest\n</div>',
@@ -81,7 +81,7 @@ describe('DOMElement Plugin', () => {
   it('supports an element with text content', () => {
     const parent = document.createElement('div');
     const child = document.createTextNode('texty texty');
-    parent.appendChild(child);
+    parent.append(child);
 
     expect(parent).toPrettyPrintTo('<div>\n  texty texty\n</div>');
   });
@@ -89,14 +89,14 @@ describe('DOMElement Plugin', () => {
   it('supports nested elements', () => {
     const parent = document.createElement('div');
     const child = document.createElement('span');
-    parent.appendChild(child);
+    parent.append(child);
     expect(parent).toPrettyPrintTo('<div>\n  <span />\n</div>');
   });
 
   it('supports nested elements with attributes', () => {
     const parent = document.createElement('div');
     const child = document.createElement('span');
-    parent.appendChild(child);
+    parent.append(child);
 
     // set attributes in sorted order by name
     child.setAttribute('class', 'classy');
@@ -110,11 +110,11 @@ describe('DOMElement Plugin', () => {
   it('supports nested elements with attribute and text content', () => {
     const parent = document.createElement('div');
     const child = document.createElement('span');
-    parent.appendChild(child);
+    parent.append(child);
 
     child.setAttribute('style', 'color: #99424F');
     const text = document.createTextNode('Jest');
-    child.appendChild(text);
+    child.append(text);
 
     expect(parent).toPrettyPrintTo(
       '<div>\n  <span\n    style="color: #99424F"\n  >\n    Jest\n  </span>\n</div>',
@@ -124,7 +124,7 @@ describe('DOMElement Plugin', () => {
   it('supports nested elements with text content', () => {
     const parent = document.createElement('div');
     const child = document.createElement('span');
-    parent.appendChild(child);
+    parent.append(child);
     child.textContent = 'texty texty';
 
     expect(parent).toPrettyPrintTo(
@@ -228,11 +228,11 @@ Testing.`;
     // React 16 does not render text in comments (see below)
     const parent = document.createElement('span');
     const text = document.createTextNode('');
-    parent.appendChild(text);
+    parent.append(text);
     const abbr = document.createElement('abbr');
     abbr.setAttribute('title', 'meter');
     abbr.innerHTML = 'm';
-    parent.appendChild(abbr);
+    parent.append(abbr);
 
     expect(parent).toPrettyPrintTo(
       [
@@ -321,7 +321,7 @@ Testing.`;
     for (const browser of browsers) {
       const li = document.createElement('li');
       li.textContent = browser;
-      fragment.appendChild(li);
+      fragment.append(li);
     }
 
     expect(fragment).toPrettyPrintTo(
@@ -458,7 +458,7 @@ Testing.`;
     const namespace = 'http://www.w3.org/2000/svg';
 
     const title = document.createElementNS(namespace, 'title');
-    title.appendChild(document.createTextNode('JS community logo'));
+    title.append(document.createTextNode('JS community logo'));
 
     const rect = document.createElementNS(namespace, 'rect');
     // printProps sorts attributes in order by name
@@ -475,18 +475,18 @@ Testing.`;
     g.setAttribute('fill', 'none');
     g.setAttribute('stroke', '#000000');
     g.setAttribute('stroke-width', '0.095');
-    g.appendChild(polyline);
-    g.appendChild(comment);
+    g.append(polyline);
+    g.append(comment);
 
     const svg = document.createElementNS(namespace, 'svg');
     svg.setAttribute('viewBox', '0 0 1 1');
-    svg.appendChild(title);
-    svg.appendChild(rect);
-    svg.appendChild(g);
+    svg.append(title);
+    svg.append(rect);
+    svg.append(g);
 
     const parent = document.createElement('div');
     parent.setAttribute('id', 'JS');
-    parent.appendChild(svg);
+    parent.append(svg);
 
     expect(parent).toPrettyPrintTo(
       [
@@ -558,9 +558,9 @@ Testing.`;
     dd2.setAttribute('style', 'color: #99424F');
 
     const dl = document.createElement('dl');
-    dl.appendChild(dt);
-    dl.appendChild(dd1);
-    dl.appendChild(dd2);
+    dl.append(dt);
+    dl.append(dd1);
+    dl.append(dd2);
 
     expect(dl).toPrettyPrintTo(
       [

website/src/pages/animations/_landingAnimation.js

@@ -153,26 +153,26 @@ export function setupLandingAnimation() {
       },
     ];
 
-    screenshotImg.onload = () => {
+    screenshotImg.addEventListener('load', () => {
       screenshotImg.style.opacity = 1;
-    };
+    });
 
     for (const button of buttons) {
       const clickButton = document.createElement('a');
       clickButton.text = button.title;
       clickButton.className = 'button button--primary button--outline landing';
-      clickButton.onclick = () => {
+      clickButton.addEventListener('click', () => {
         for (const b of document.querySelectorAll('.matchers .button.landing'))
           b.className = 'button button--primary button--outline landing';
         clickButton.className =
           'button button--primary button--outline landing button--active';
         screenshotImg.style.opacity = 0.5;
         screenshotImg.src = button.url;
-      };
-      buttonWrapper.appendChild(clickButton);
+      });
+      buttonWrapper.append(clickButton);
     }
 
-    matcherSection.appendChild(buttonWrapper);
+    matcherSection.append(buttonWrapper);
 
     const firstButton = document.querySelector(
       '.matchers .blockContent .button'
@@ -186,9 +186,9 @@ export function setupLandingAnimation() {
   function makeScreenshotsClickable() {
     for (const img of document.querySelectorAll('.blockImage img')) {
       img.style.cursor = 'pointer';
-      img.onclick = () => {
+      img.addEventListener('click', () => {
         document.location = img.src;
-      };
+      });
     }
   }