Make App Scripts React compatible with Jest 27 (#3750)

* Upgrade babel-jest version

This is to match with the current version of Jest. Also Jest is added
as a peer dependency to reflect this.

* Change the babel jest transform script

This is done to reflect the new API changes in babel-jest.
The second line is done so that it can stay backwards compatible with
Jest 26 if needed.

References:
#3398 (comment)
jestjs/jest#11444 (comment)

* Use jsdom as a test environment to run jest

This is done so the react testing-library can render the DOM elements
in testing.

create-snowpack-app/app-scripts-react/jest.config.js

@@ -24,6 +24,7 @@ module.exports = function () {
       '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': path.resolve(__dirname, 'jest/fileTransform.js'),
     },
     transformIgnorePatterns: ['node_modules'],
+    testEnvironment: 'jsdom',
     // transformIgnorePatterns: [
     //   "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
     //   "^.+\\.module\\.(css|sass|scss)$",

create-snowpack-app/app-scripts-react/jest/babelTransform.js

@@ -7,8 +7,9 @@
  */
 'use strict';
 
-const babelJest = require('babel-jest');
 const importMetaBabelPlugin = require('./importMetaBabelPlugin');
+const babelJestModule = require('babel-jest');
+const babelJest = babelJestModule.__esModule ? babelJestModule.default : babelJestModule;
 
 module.exports = babelJest.createTransformer({
   presets: ['babel-preset-react-app', '@babel/preset-react', '@babel/preset-typescript'],

create-snowpack-app/app-scripts-react/package.json

@@ -20,9 +20,12 @@
     "@snowpack/plugin-dotenv": "^2.1.0",
     "@snowpack/plugin-react-refresh": "^2.5.0",
     "@snowpack/plugin-typescript": "^1.2.1",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^27.2.2",
     "babel-preset-react-app": "^10.0.0",
     "react-app-polyfill": "^2.0.0"
   },
+  "peerDependencies": {
+    "jest": "^27.2.2"
+  },
   "gitHead": "a01616bb0787d56cd782f94cecf2daa12c7594e4"
 }