Add support for Jest@28

.circleci/config.yml

@@ -1,6 +1,6 @@
 version: 2.1
 
-supported-jest-versions: &supported-jest-versions ["local", "26", "27"]
+supported-jest-versions: &supported-jest-versions ["local", "26", "27", "28"]
 
 deploy_filters: &deploy_filters
   filters:
@@ -15,7 +15,7 @@ executors:
   node:
     working_directory: ~/lwc-test
     docker:
-      - image: circleci/node:14
+      - image: cimg/node:14.19
 
 
 commands:
@@ -59,7 +59,14 @@ jobs:
           steps:
             - run:
                 name: Override version of jest@<<parameters.jest-version>>
-                command: yarn add jest@<<parameters.jest-version>> -W --dev
+                command: |
+                  yarn remove jest jest-environment-jsdom -W --dev
+                  yarn add jest@<<parameters.jest-version>> -W --dev
+            - when:
+                condition: 
+                  equal: [<<parameters.jest-version>>, "28"]
+                steps:
+                  - run: yarn add jest-environment-jsdom@<<parameters.jest-version>> -W --dev
       - run:
           name: Run linter
           command: yarn lint

package.json

@@ -24,7 +24,8 @@
         "@lwc/wire-service": "^2.11.3",
         "@types/jest": "^27.5.0",
         "eslint": "^8.14.0",
-        "jest": "^27.5.1",
+        "jest": "^28.1.0",
+        "jest-environment-jsdom": "^28.1.0",
         "lerna": "^4.0.0",
         "prettier": "^2.6.2"
     }

packages/@lwc/jest-preset/README.md

@@ -10,6 +10,12 @@ Tools to assist with testing Lightning Web Components (LWC) with Jest. This proj
 yarn add --dev @lwc/jest-preset @lwc/compiler @lwc/engine-dom @lwc/synthetic-shadow
 ```
 
+If your project is using **Jest 28** and above, you will also need install `jest-environment-jsdom` separately:
+
+```
+yarn add --dev jest-environment-jsdom
+```
+
 ### Configuration
 
 Add the preset to your `jest.config.js` like so:

packages/@lwc/jest-preset/package.json

@@ -24,7 +24,7 @@
         "@lwc/compiler": "*",
         "@lwc/engine-dom": "*",
         "@lwc/synthetic-shadow": "*",
-        "jest": "^26 || ^27"
+        "jest": "^26 || ^27 || ^28"
     },
     "dependencies": {
         "@lwc/jest-resolver": "11.3.0",

packages/@lwc/jest-preset/src/setup.js

@@ -2,9 +2,15 @@ const config = global['lwc-jest'] || {};
 const { nativeShadow } = config;
 
 if (!nativeShadow) {
-    if (ShadowRoot.prototype.constructor.toString().includes('function SyntheticShadowRoot')
-        || EventTarget.prototype.addEventListener.toString().includes('function patchedAddEventListener')) {
-        throw new Error('@lwc/synthetic-shadow is being loaded twice. Please examine your jest/jsdom configuration.')
+    if (
+        ShadowRoot.prototype.constructor.toString().includes('function SyntheticShadowRoot') ||
+        EventTarget.prototype.addEventListener
+            .toString()
+            .includes('function patchedAddEventListener')
+    ) {
+        throw new Error(
+            '@lwc/synthetic-shadow is being loaded twice. Please examine your jest/jsdom configuration.'
+        );
     }
     require('@lwc/synthetic-shadow/dist/synthetic-shadow.js');
 }

packages/@lwc/jest-resolver/package.json

@@ -22,7 +22,7 @@
         "/src/index.js"
     ],
     "peerDependencies": {
-        "jest": "^26 || ^27"
+        "jest": "^26 || ^27 || ^28"
     },
     "engines": {
         "node": ">=10"

packages/@lwc/jest-resolver/src/index.js

@@ -40,7 +40,7 @@ function isImplicitHTMLImport(importee, { basedir }) {
 function getLwcPath(path, options) {
     if (path.endsWith('?scoped=true')) {
         // remove query param for scoped styles
-        path = path.substring(0, path.length - 12)
+        path = path.substring(0, path.length - 12);
     }
     // If is a special LWC package, resolve it from commonjs
     if (WHITELISTED_LWC_PACKAGES[path]) {

packages/@lwc/jest-serializer/package.json

@@ -18,10 +18,10 @@
         "lwc"
     ],
     "dependencies": {
-        "pretty-format": "^27.4.6"
+        "pretty-format": "^28.1.0"
     },
     "peerDependencies": {
-        "jest": "^26 || ^27"
+        "jest": "^26 || ^27 || ^28"
     },
     "engines": {
         "node": ">=10"

packages/@lwc/jest-transformer/package.json

@@ -32,7 +32,7 @@
     },
     "peerDependencies": {
         "@lwc/compiler": "*",
-        "jest": "^26 || ^27"
+        "jest": "^26 || ^27 || ^28"
     },
     "engines": {
         "node": ">=10"