Update dependencies (#63)

.changeset/many-carrots-join.md

@@ -0,0 +1,5 @@
+---
+'test-mule': patch
+---
+
+Update dependencies

.github/workflows/ci.yml

@@ -19,6 +19,7 @@ jobs:
       - run: npm test -- --colors
         env:
           CI: true
+          FORCE_COLOR: 1
 
   lint:
     runs-on: ubuntu-latest

jest.config.js

@@ -6,6 +6,10 @@ module.exports = {
   testRunner: 'jest-circus/runner',
   watchPathIgnorePatterns: ['<rootDir>/src/'],
   transform: {
-    '^.+\\.tsx?$': ['esbuild-jest', { sourcemap: true }],
+    '^.+\\.[jt]sx?$': ['esbuild-jest', { sourcemap: true }],
   },
+  // Don't transform node_modules, _except_ ansi-regex
+  // ansi-regex is ESM and since we are using Jest in CJS mode,
+  // it must be transpiled to CJS
+  transformIgnorePatterns: ['<rootDir>/node_modules/(?!ansi-regex)'],
 };

package.json

@@ -8,43 +8,43 @@
     "dist"
   ],
   "devDependencies": {
-    "@babel/core": "7.13.1",
-    "@babel/preset-env": "7.13.5",
+    "@babel/core": "7.14.3",
+    "@babel/preset-env": "7.14.2",
     "@babel/preset-typescript": "7.13.0",
-    "@changesets/changelog-github": "0.2.8",
-    "@changesets/cli": "2.14.1",
+    "@changesets/changelog-github": "0.4.0",
+    "@changesets/cli": "2.16.0",
     "@cloudfour/eslint-plugin": "16.0.0",
     "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-node-resolve": "11.2.0",
-    "@testing-library/dom": "7.29.4",
-    "@testing-library/jest-dom": "5.11.9",
-    "@types/jest": "26.0.20",
-    "@types/node": "14.14.31",
+    "@testing-library/dom": "7.31.0",
+    "@testing-library/jest-dom": "5.12.0",
+    "@types/jest": "26.0.23",
+    "@types/node": "15.6.0",
     "@types/puppeteer": "5.4.3",
-    "ansi-regex": "5.0.0",
+    "ansi-regex": "6.0.0",
     "aria-query": "*",
     "babel-plugin-un-cjs": "2.3.0",
-    "env-paths": "2.2.0",
-    "errorstacks": "2.3.0",
-    "esbuild": "0.11.21",
+    "env-paths": "2.2.1",
+    "errorstacks": "2.3.2",
+    "esbuild": "0.12.1",
     "esbuild-jest": "0.5.0",
-    "eslint": "7.22.0",
+    "eslint": "7.27.0",
     "jest": "26.6.3",
     "jest-circus": "26.6.3",
-    "kolorist": "1.2.10",
-    "liquidjs": "9.22.1",
-    "preact": "10.5.12",
-    "prettier": "2.2.1",
+    "kolorist": "1.4.1",
+    "liquidjs": "9.25.0",
+    "preact": "10.5.13",
+    "prettier": "2.3.0",
     "remark-cli": "9.0.0",
     "remark-lint-no-dead-urls": "1.1.0",
-    "remark-validate-links": "10.0.2",
+    "remark-validate-links": "10.0.4",
     "rollup": "2.39.1",
     "rollup-plugin-dts": "2.0.1",
     "rollup-plugin-prettier": "2.1.0",
     "rollup-plugin-terser": "7.0.2",
-    "sass": "1.32.6",
+    "sass": "1.34.0",
     "smoldash": "0.9.0",
-    "typescript": "4.2.2"
+    "typescript": "4.2.4"
   },
   "dependencies": {
     "@types/testing-library__jest-dom": "^5.9.5",

src/extend-expect.ts

@@ -150,16 +150,14 @@ Received ${this.utils.printReceived(arg)}`,
             : (matcherResult) => matcherResult.message(),
         );
         const deserializedMessage = runJestUtilsInNode(message, this as any);
-        const {
-          messageWithElementsRevived,
-          messageWithElementsStringified,
-        } = await elementHandle
-          .evaluateHandle(
-            // @ts-expect-error pptr's types don't like new Function
-            new Function(
-              'el',
-              'message',
-              `return import("http://localhost:${port}/@test-mule/jest-dom")
+        const { messageWithElementsRevived, messageWithElementsStringified } =
+          await elementHandle
+            .evaluateHandle(
+              // @ts-expect-error pptr's types don't like new Function
+              new Function(
+                'el',
+                'message',
+                `return import("http://localhost:${port}/@test-mule/jest-dom")
               .then(({ reviveElementsInString, printElement }) => {
                 const messageWithElementsRevived = reviveElementsInString(message)
                 const messageWithElementsStringified = messageWithElementsRevived
@@ -170,21 +168,22 @@ Received ${this.utils.printReceived(arg)}`,
                   .join('')
                 return { messageWithElementsRevived, messageWithElementsStringified }
               })`,
-            ),
-            deserializedMessage,
-          )
-          .then(async (returnHandle) => {
-            const {
-              messageWithElementsRevived,
-              messageWithElementsStringified,
-            } = Object.fromEntries(await returnHandle.getProperties());
-            return {
-              messageWithElementsStringified: await messageWithElementsStringified.jsonValue(),
-              messageWithElementsRevived: await jsHandleToArray(
-                messageWithElementsRevived,
               ),
-            };
-          });
+              deserializedMessage,
+            )
+            .then(async (returnHandle) => {
+              const {
+                messageWithElementsRevived,
+                messageWithElementsStringified,
+              } = Object.fromEntries(await returnHandle.getProperties());
+              return {
+                messageWithElementsStringified:
+                  await messageWithElementsStringified.jsonValue(),
+                messageWithElementsRevived: await jsHandleToArray(
+                  messageWithElementsRevived,
+                ),
+              };
+            });
         if (thrownError) {
           const error = new Error(messageWithElementsStringified as any);
           // @ts-expect-error messageForBrowser is a property we added to Error

src/pptr-testing-library.ts

@@ -113,16 +113,15 @@ export const getQueriesForElement = (
           throw error;
         };
 
-        const result: JSHandle<
-          Element | Element[] | DTLError | null
-        > = await page
-          .evaluateHandle(
-            // Using new Function to avoid babel transpiling the import
-            // @ts-expect-error pptr's types don't like new Function
-            new Function(
-              'argsString',
-              'element',
-              `return import("http://localhost:${port}/@test-mule/dom-testing-library")
+        const result: JSHandle<Element | Element[] | DTLError | null> =
+          await page
+            .evaluateHandle(
+              // Using new Function to avoid babel transpiling the import
+              // @ts-expect-error pptr's types don't like new Function
+              new Function(
+                'argsString',
+                'element',
+                `return import("http://localhost:${port}/@test-mule/dom-testing-library")
               .then(async ({ reviveElementsInString, printElement, addToElementCache, ...dtl }) => {
                 const deserializedArgs = JSON.parse(argsString, (key, value) => {
                   if (value.__serialized === 'RegExp')
@@ -148,14 +147,14 @@ export const getQueriesForElement = (
                   return { failed: true, messageWithElementsRevived, messageWithElementsStringified }
                 }
               })`,
-            ),
-            serializedArgs,
-            element?.asElement() ||
-              (await page
-                .evaluateHandle(() => document)
-                .catch(handleExecutionAfterTestFinished)),
-          )
-          .catch(handleExecutionAfterTestFinished);
+              ),
+              serializedArgs,
+              element?.asElement() ||
+                (await page
+                  .evaluateHandle(() => document)
+                  .catch(handleExecutionAfterTestFinished)),
+            )
+            .catch(handleExecutionAfterTestFinished);
 
         const failed = await result.evaluate(
           (r) => typeof r === 'object' && r !== null && (r as DTLError).failed,
@@ -164,7 +163,8 @@ export const getQueriesForElement = (
           const resultProperties = Object.fromEntries(
             await result.getProperties(),
           );
-          const messageWithElementsStringified = (await resultProperties.messageWithElementsStringified.jsonValue()) as any;
+          const messageWithElementsStringified =
+            (await resultProperties.messageWithElementsStringified.jsonValue()) as any;
           const messageWithElementsRevived = await jsHandleToArray(
             resultProperties.messageWithElementsRevived,
           );
@@ -186,7 +186,7 @@ export const getQueriesForElement = (
           });
           const props = await result.getProperties();
           for (const [key, value] of props.entries()) {
-            array[(key as any) as number] = value;
+            array[key as any as number] = value;
           }
 
           return array;

src/user-util/index.ts

@@ -29,7 +29,7 @@ ${el}`;
   let opacity = Number(style.opacity);
   let opacityEl: Element | null = el;
   while (opacity && (opacityEl = opacityEl.parentElement)) {
-    opacity *= (getComputedStyle(opacityEl).opacity as any) as number;
+    opacity *= getComputedStyle(opacityEl).opacity as any as number;
   }
 
   if (opacity < 0.05) {

src/user.ts

@@ -328,36 +328,39 @@ const runWithUtils = <Args extends any[], Return extends unknown>(
  * When code that is evaluated in the browser returns {error: ...}, this function causes an error to be thrown in Node.
  * This is better than just throwing directly from the browser code because that would cause the error to be wrapped by Puppeteer's EvaluationError, which causes a confusing stack trace.
  */
-const throwBrowserError = (func: (...params: any) => any) => async (
-  result: JSHandle,
-) => {
-  const resultJSON = (await result.jsonValue()) as any;
-  if (resultJSON?.error) {
-    let err;
-    if (typeof resultJSON.error === 'string') {
-      err = new Error(resultJSON.error);
-    } else {
-      const errorProp = await result.getProperty('error');
-      const errorProperties = Object.fromEntries(
-        await errorProp.getProperties(),
-      );
-      // eslint-disable-next-line @cloudfour/typescript-eslint/no-unnecessary-condition
-      if (errorProperties.msgWithStringEls && errorProperties.msgWithLiveEls) {
-        err = new Error(
-          (await errorProperties.msgWithStringEls.jsonValue()) as any,
-        );
-        // @ts-expect-error messageForBrowser is a custom thing
-        err.messageForBrowser = await jsHandleToArray(
-          errorProperties.msgWithLiveEls,
-        );
+const throwBrowserError =
+  (func: (...params: any) => any) => async (result: JSHandle) => {
+    const resultJSON = (await result.jsonValue()) as any;
+    if (resultJSON?.error) {
+      let err;
+      if (typeof resultJSON.error === 'string') {
+        err = new Error(resultJSON.error);
       } else {
-        err = new Error((await errorProp.jsonValue()) as any);
+        const errorProp = await result.getProperty('error');
+        const errorProperties = Object.fromEntries(
+          await errorProp.getProperties(),
+        );
+        if (
+          // eslint-disable-next-line @cloudfour/typescript-eslint/no-unnecessary-condition
+          errorProperties.msgWithStringEls &&
+          // eslint-disable-next-line @cloudfour/typescript-eslint/no-unnecessary-condition
+          errorProperties.msgWithLiveEls
+        ) {
+          err = new Error(
+            (await errorProperties.msgWithStringEls.jsonValue()) as any,
+          );
+          // @ts-expect-error messageForBrowser is a custom thing
+          err.messageForBrowser = await jsHandleToArray(
+            errorProperties.msgWithLiveEls,
+          );
+        } else {
+          err = new Error((await errorProp.jsonValue()) as any);
+        }
       }
-    }
 
-    removeFuncFromStackTrace(err, func);
-    throw err;
-  }
+      removeFuncFromStackTrace(err, func);
+      throw err;
+    }
 
-  return result;
-};
+    return result;
+  };