build(deps): bump jest and @types/jest (#835)

* build(deps): bump jest and @types/jest

Bumps [jest](https://github.com/facebook/jest/tree/HEAD/packages/jest) and [@types/jest](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jest). These dependencies needed to be updated together.

Updates `jest` from 27.5.1 to 28.1.0
- [Release notes](https://github.com/facebook/jest/releases)
- [Changelog](https://github.com/facebook/jest/blob/main/CHANGELOG.md)
- [Commits](https://github.com/facebook/jest/commits/v28.1.0/packages/jest)

Updates `@types/jest` from 27.4.1 to 28.1.0
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/jest)

---
updated-dependencies:
- dependency-name: jest
  dependency-type: direct:production
  update-type: version-update:semver-major
- dependency-name: "@types/jest"
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* fix breaking changes in jest 28

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: David Lechner <david@pybricks.com>

config/jest/cssTransform.js

@@ -5,7 +5,7 @@
 
 module.exports = {
   process() {
-    return 'module.exports = {};';
+    return { code : 'module.exports = {};' };
   },
   getCacheKey() {
     // The output is always the same.

config/jest/fileTransform.js

@@ -17,24 +17,26 @@ module.exports = {
         pascalCase: true,
       });
       const componentName = `Svg${pascalCaseFilename}`;
-      return `const React = require('react');
-      module.exports = {
-        __esModule: true,
-        default: ${assetFilename},
-        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
-          return {
-            $$typeof: Symbol.for('react.element'),
-            type: 'svg',
-            ref: ref,
-            key: null,
-            props: Object.assign({}, props, {
-              children: ${assetFilename}
-            })
-          };
-        }),
-      };`;
+      return {
+        code: `const React = require('react');
+        module.exports = {
+          __esModule: true,
+          default: ${assetFilename},
+          ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
+            return {
+              $$typeof: Symbol.for('react.element'),
+              type: 'svg',
+              ref: ref,
+              key: null,
+              props: Object.assign({}, props, {
+                children: ${assetFilename}
+              })
+            };
+          }),
+        };`,
+      }
     }
 
-    return `module.exports = ${assetFilename};`;
+    return { code: `module.exports = ${assetFilename};` };
   },
 };

package.json

@@ -22,7 +22,7 @@
         "@testing-library/react": "^12.1.4",
         "@testing-library/user-event": "^13.5.0",
         "@types/file-saver": "^2.0.5",
-        "@types/jest": "^27.4.1",
+        "@types/jest": "^28.1.0",
         "@types/node": "^16.11.7",
         "@types/react": "^16.14.24",
         "@types/react-dom": "^16.9.14",
@@ -57,7 +57,8 @@
         "fs-extra": "^10.0.0",
         "html-webpack-plugin": "^5.5.0",
         "identity-obj-proxy": "^3.0.0",
-        "jest": "^27.4.3",
+        "jest": "^28.1.0",
+        "jest-environment-jsdom": "^28.1.0",
         "jest-mock-extended": "^2.0.6",
         "jest-resolve": "^27.4.2",
         "jest-watch-typeahead": "^1.0.0",

test/env.js

@@ -1,11 +1,11 @@
-const Environment = require('jest-environment-jsdom');
+const JSDomEnvironment = require('jest-environment-jsdom').default;
 const { TextEncoder, TextDecoder } = require('util')
 
 /**
  * A custom environment to set TextEncoder/TextDecoder
  * Thanks https://stackoverflow.com/a/57713960/1976323
  */
-module.exports = class CustomTestEnvironment extends Environment {
+module.exports = class CustomTestEnvironment extends JSDomEnvironment {
     async setup() {
         await super.setup();
         if (this.global.TextEncoder === undefined) {
@@ -19,4 +19,10 @@ module.exports = class CustomTestEnvironment extends Environment {
         this.global.Uint8Array = Uint8Array;
         this.global.ArrayBuffer = ArrayBuffer;
     }
+
+    exportConditions() {
+        // JSDomEnvironment returns ['browser'] but tests run in node which
+        // has issues with some ESM modules.
+        return ['node'];
+    }
 };