chore: upgrade to Jest 27

.eslintrc.json

@@ -106,7 +106,6 @@
       "files": ["*.spec.ts"],
       "extends": ["plugin:jest/recommended"],
       "rules": {
-        "jest/no-done-callback": "off",
         "jest/expect-expect": "off"
       }
     },

angular.json

@@ -181,34 +181,34 @@
         }
       }
     },
-    "testing-library": {
-      "root": "projects/testing-library",
-      "sourceRoot": "projects/testing-library/src",
+    "jest-utils": {
+      "root": "projects/jest-utils",
+      "sourceRoot": "projects/jest-utils/src",
       "projectType": "library",
       "prefix": "lib",
       "architect": {
         "build-package": {
           "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
-            "tsConfig": "projects/testing-library/tsconfig.lib.json",
-            "project": "projects/testing-library/ng-package.json"
+            "tsConfig": "projects/jest-utils/tsconfig.lib.json",
+            "project": "projects/jest-utils/ng-package.json"
           },
           "configurations": {
             "production": {
-              "project": "projects/testing-library/ng-package.json",
-              "tsConfig": "projects/testing-library/tsconfig.lib.json"
+              "project": "projects/jest-utils/ng-package.json",
+              "tsConfig": "projects/jest-utils/tsconfig.lib.json"
             }
           }
         },
         "lint": {
           "builder": "@nrwl/linter:eslint",
           "options": {
             "lintFilePatterns": [
-              "projects/testing-library/**/*.ts",
-              "projects/testing-library/**/*.html",
-              "projects/testing-library/src/**/*.html",
-              "projects/testing-library/src/**/*.html",
-              "projects/testing-library/src/**/*.html"
+              "projects/jest-utils/**/*.ts",
+              "projects/jest-utils/**/*.html",
+              "projects/jest-utils/src/**/*.html",
+              "projects/jest-utils/src/**/*.html",
+              "projects/jest-utils/src/**/*.html"
             ]
           }
         },
@@ -218,55 +218,49 @@
             "parallel": false,
             "commands": [
               {
-                "command": "ng run testing-library:build-package"
-              },
-              {
-                "command": "npm run build:schematics"
-              },
-              {
-                "command": "cpy ./README.md ./dist/@testing-library/angular"
+                "command": "ng run jest-utils:build-package"
               }
             ]
           }
         },
         "test": {
           "builder": "@nrwl/jest:jest",
           "options": {
-            "jestConfig": "projects/testing-library/jest.config.js",
-            "setupFile": "projects/testing-library/test-setup.ts"
+            "jestConfig": "projects/jest-utils/jest.config.js",
+            "setupFile": "projects/jest-utils/test-setup.ts"
           },
-          "outputs": ["coverage/projects/testing-library"]
+          "outputs": ["coverage/projects/jest-utils"]
         }
       }
     },
-    "jest-utils": {
-      "root": "projects/jest-utils",
-      "sourceRoot": "projects/jest-utils/src",
+    "testing-library": {
+      "root": "projects/testing-library",
+      "sourceRoot": "projects/testing-library/src",
       "projectType": "library",
       "prefix": "lib",
       "architect": {
         "build-package": {
           "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
-            "tsConfig": "projects/jest-utils/tsconfig.lib.json",
-            "project": "projects/jest-utils/ng-package.json"
+            "tsConfig": "projects/testing-library/tsconfig.lib.json",
+            "project": "projects/testing-library/ng-package.json"
           },
           "configurations": {
             "production": {
-              "project": "projects/jest-utils/ng-package.json",
-              "tsConfig": "projects/jest-utils/tsconfig.lib.json"
+              "project": "projects/testing-library/ng-package.json",
+              "tsConfig": "projects/testing-library/tsconfig.lib.json"
             }
           }
         },
         "lint": {
           "builder": "@nrwl/linter:eslint",
           "options": {
             "lintFilePatterns": [
-              "projects/jest-utils/**/*.ts",
-              "projects/jest-utils/**/*.html",
-              "projects/jest-utils/src/**/*.html",
-              "projects/jest-utils/src/**/*.html",
-              "projects/jest-utils/src/**/*.html"
+              "projects/testing-library/**/*.ts",
+              "projects/testing-library/**/*.html",
+              "projects/testing-library/src/**/*.html",
+              "projects/testing-library/src/**/*.html",
+              "projects/testing-library/src/**/*.html"
             ]
           }
         },
@@ -276,18 +270,24 @@
             "parallel": false,
             "commands": [
               {
-                "command": "ng run jest-utils:build-package"
+                "command": "ng run testing-library:build-package"
+              },
+              {
+                "command": "npm run build:schematics"
+              },
+              {
+                "command": "cpy ./README.md ./dist/@testing-library/angular"
               }
             ]
           }
         },
         "test": {
           "builder": "@nrwl/jest:jest",
           "options": {
-            "jestConfig": "projects/jest-utils/jest.config.js",
-            "setupFile": "projects/jest-utils/test-setup.ts"
+            "jestConfig": "projects/testing-library/jest.config.js",
+            "setupFile": "projects/testing-library/test-setup.ts"
           },
-          "outputs": ["coverage/projects/jest-utils"]
+          "outputs": ["coverage/projects/testing-library"]
         }
       }
     }

jest.preset.js

@@ -1,28 +1,10 @@
 const nxPreset = require('@nrwl/jest/preset');
 module.exports = {
   ...nxPreset,
-  testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
-  transform: {
-    '^.+\\.(ts|js|html)$': 'ts-jest',
-  },
-  resolver: '@nrwl/jest/plugins/resolver',
-  moduleFileExtensions: ['ts', 'js', 'html'],
-  coverageReporters: ['html'],
-  snapshotSerializers: [
-    'jest-preset-angular/build/serializers/no-ng-attributes',
-    'jest-preset-angular/build/serializers/ng-snapshot',
-    'jest-preset-angular/build/serializers/html-comment',
-  ],
   globals: {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
       stringifyContentPathRegex: '\\.(html|svg)$',
-      astTransformers: {
-        before: [
-          'jest-preset-angular/build/InlineFilesTransformer',
-          'jest-preset-angular/build/StripStylesTransformer',
-        ],
-      },
     },
   },
 };

nx.json

@@ -31,11 +31,19 @@
     "example-app-karma": {
       "tags": []
     },
-    "testing-library": {
+    "jest-utils": {
       "tags": []
     },
-    "jest-utils": {
+    "testing-library": {
       "tags": []
     }
+  },
+  "targetDependencies": {
+    "build": [
+      {
+        "target": "build",
+        "projects": "dependencies"
+      }
+    ]
   }
 }

package.json

@@ -28,41 +28,41 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@angular/animations": "12.0.0",
+    "@angular/animations": "12.1.1",
     "@angular/cdk": "12.0.0",
-    "@angular/common": "12.0.0",
-    "@angular/compiler": "12.0.0",
-    "@angular/core": "12.0.0",
-    "@angular/forms": "12.0.0",
+    "@angular/common": "12.1.1",
+    "@angular/compiler": "12.1.1",
+    "@angular/core": "12.1.1",
+    "@angular/forms": "12.1.1",
     "@angular/material": "12.0.0",
-    "@angular/platform-browser": "12.0.0",
-    "@angular/platform-browser-dynamic": "12.0.0",
-    "@angular/router": "12.0.0",
-    "@ngrx/store": "12.0.0",
-    "@nrwl/angular": "12.0.3",
-    "@nrwl/nx-cloud": "11.2.0",
+    "@angular/platform-browser": "12.1.1",
+    "@angular/platform-browser-dynamic": "12.1.1",
+    "@angular/router": "12.1.1",
+    "@ngrx/store": "12.2.0",
+    "@nrwl/angular": "12.5.1",
+    "@nrwl/nx-cloud": "12.2.7",
     "@testing-library/dom": "^8.0.0",
     "@testing-library/user-event": "^13.1.9",
     "core-js": "^3.6.5",
     "rxjs": "^6.5.5",
     "tslib": "^2.0.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "12.0.0",
-    "@angular-eslint/eslint-plugin": "~12.0.0",
-    "@angular-eslint/eslint-plugin-template": "~12.0.0",
-    "@angular-eslint/template-parser": "~12.0.0",
-    "@angular/cli": "12.0.0",
-    "@angular/compiler-cli": "12.0.0",
-    "@angular/language-service": "12.0.0",
-    "@nrwl/cli": "12.0.3",
-    "@nrwl/eslint-plugin-nx": "12.0.3",
-    "@nrwl/jest": "12.0.3",
-    "@nrwl/linter": "12.0.3",
-    "@nrwl/node": "12.0.3",
-    "@nrwl/nx-plugin": "12.0.3",
-    "@nrwl/workspace": "12.3.1",
+    "@angular-devkit/build-angular": "12.1.0",
+    "@angular-eslint/eslint-plugin": "12.0.0",
+    "@angular-eslint/eslint-plugin-template": "12.0.0",
+    "@angular-eslint/template-parser": "12.0.0",
+    "@angular/cli": "12.1.0",
+    "@angular/compiler-cli": "12.1.1",
+    "@angular/language-service": "12.1.1",
+    "@nrwl/cli": "12.5.1",
+    "@nrwl/eslint-plugin-nx": "12.5.1",
+    "@nrwl/jest": "12.5.1",
+    "@nrwl/linter": "12.5.1",
+    "@nrwl/node": "12.5.1",
+    "@nrwl/nx-plugin": "12.5.1",
+    "@nrwl/workspace": "12.5.1",
     "@testing-library/jest-dom": "^5.11.10",
     "@types/jasmine": "~3.5.0",
     "@types/jest": "~26.0.3",
@@ -79,18 +79,18 @@
     "husky": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "jest": "^26.1.0",
-    "jest-preset-angular": "8.4.0",
+    "jest": "27.0.3",
+    "jest-preset-angular": "9.0.3",
     "karma": "~5.0.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "lint-staged": "^10.2.11",
-    "ng-packagr": "12.0.0",
-    "prettier": "^2.3.0",
+    "ng-packagr": "12.1.0",
+    "prettier": "2.3.2",
     "rimraf": "^3.0.2",
     "semantic-release": "^17.1.1",
-    "ts-jest": "26.5.4",
+    "ts-jest": "27.0.3",
     "ts-node": "9.1.1",
     "typescript": "4.2.4"
   }

projects/jest-utils/tests/create-mock.spec.ts

@@ -40,13 +40,14 @@ it('provides a mock service', async () => {
 });
 
 // eslint-disable-next-line jest/expect-expect
-it('is possible to write a mock implementation', async (done) => {
+it('is possible to write a mock implementation', async () => {
   const { getByText } = await render(FixtureComponent, {
     providers: [provideMock(FixtureService)],
   });
 
   const service = TestBed.inject(FixtureService) as Mock<FixtureService>;
-  service.print.mockImplementation(() => done());
+  service.print = jest.fn();
 
   fireEvent.click(getByText('Print'));
+  expect(service.print).toHaveBeenCalled();
 });

projects/testing-library/tests/render.spec.ts

@@ -126,28 +126,19 @@ describe('Angular component life-cycle hooks', () => {
   });
 });
 
-test('Waits for angular app initialization before rendering components', (done) => {
-  let resolve;
+test('Waits for angular app initialization before rendering components', async () => {
+  const mock = jest.fn();
 
-  const promise = new Promise((res) => {
-    resolve = res;
-  });
-
-  render(FixtureComponent, {
+  await render(FixtureComponent, {
     providers: [
       {
         provide: APP_INITIALIZER,
-        useFactory: () => () => promise,
+        useFactory: () => mock,
         multi: true,
       },
     ],
-  })
-    .then(() => {
-      expect(TestBed.inject(ApplicationInitStatus).done).toEqual(true);
-      done();
-    })
-    .catch(done);
-
-  // Wait a bit so the test will fail if render completes without us resolving the promise
-  setTimeout(resolve, 1000);
+  });
+
+  expect(TestBed.inject(ApplicationInitStatus).done).toEqual(true);
+  expect(mock).toHaveBeenCalled();
 });