From f77639b81f61c47b69f7a5df27648f36146ab25f Mon Sep 17 00:00:00 2001
From: Sam Huynh <samhwang2112.dev@gmail.com>
Date: Wed, 20 Oct 2021 09:34:38 +1100
Subject: [PATCH] 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:
https://github.com/snowpackjs/snowpack/issues/3398#issuecomment-887499318
https://github.com/facebook/jest/issues/11444#issuecomment-855989054

* 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         | 1 +
 create-snowpack-app/app-scripts-react/jest/babelTransform.js | 3 ++-
 create-snowpack-app/app-scripts-react/package.json           | 5 ++++-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/create-snowpack-app/app-scripts-react/jest.config.js b/create-snowpack-app/app-scripts-react/jest.config.js
index 5a4a80103a..58961ee080 100644
--- a/create-snowpack-app/app-scripts-react/jest.config.js
+++ b/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)$",
diff --git a/create-snowpack-app/app-scripts-react/jest/babelTransform.js b/create-snowpack-app/app-scripts-react/jest/babelTransform.js
index e0bbaa2e08..24b19da5d3 100644
--- a/create-snowpack-app/app-scripts-react/jest/babelTransform.js
+++ b/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'],
diff --git a/create-snowpack-app/app-scripts-react/package.json b/create-snowpack-app/app-scripts-react/package.json
index 66564a066b..edc7e6b3d8 100644
--- a/create-snowpack-app/app-scripts-react/package.json
+++ b/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"
 }