fix: support jest 27

Author: timdeschryver

apps/example-app/src/app/examples/14-async-component.spec.ts

@@ -1,4 +1,4 @@
-import { fakeAsync, tick } from '@angular/core/testing';
+import { fakeAsync, flush, tick } from '@angular/core/testing';
 import { render, screen, fireEvent } from '@testing-library/angular';
 
 import { AsyncComponent } from './14-async-component';
@@ -14,3 +14,16 @@ test('can use fakeAsync utilities', fakeAsync(async () => {
   const hello = await screen.findByText('Hello world');
   expect(hello).toBeInTheDocument();
 }));
+
+test('can use fakeTimer utilities', async () => {
+  jest.useFakeTimers();
+  await render(AsyncComponent);
+
+  const load = await screen.findByRole('button', { name: /load/i });
+  fireEvent.click(load);
+
+  jest.advanceTimersByTime(10_000);
+
+  const hello = await screen.findByText('Hello world');
+  expect(hello).toBeInTheDocument();
+});

apps/example-app/src/app/examples/15-dialog.component.spec.ts

@@ -1,5 +1,6 @@
 import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
-import { render, screen, fireEvent, waitForElementToBeRemoved } from '@testing-library/angular';
+import { render, screen, waitForElementToBeRemoved, fireEvent } from '@testing-library/angular';
+import userEvent from '@testing-library/user-event';
 
 import { DialogComponent, DialogContentComponent, DialogContentComponentModule } from './15-dialog.component';
 
@@ -18,44 +19,45 @@ test('dialog closes', async () => {
   });
 
   const cancelButton = await screen.findByRole('button', { name: /cancel/i });
-  fireEvent.click(cancelButton);
+  userEvent.click(cancelButton);
 
   expect(closeFn).toHaveBeenCalledTimes(1);
 });
 
-test('opens and closes the dialog with buttons', async () => {
+test('closes the dialog via the backdrop', async () => {
   await render(DialogComponent, {
     imports: [MatDialogModule, DialogContentComponentModule],
   });
 
   const openDialogButton = await screen.findByRole('button', { name: /open dialog/i });
-  fireEvent.click(openDialogButton);
+  userEvent.click(openDialogButton);
 
   await screen.findByRole('dialog');
   await screen.findByRole('heading', { name: /dialog title/i });
 
-  const cancelButton = await screen.findByRole('button', { name: /cancel/i });
-  fireEvent.click(cancelButton);
+  // using fireEvent because of:
+  // unable to click element as it has or inherits pointer-events set to "none"
+  fireEvent.click(document.querySelector('.cdk-overlay-backdrop'));
 
   await waitForElementToBeRemoved(() => screen.getByRole('dialog'));
 
   const dialogTitle = screen.queryByRole('heading', { name: /dialog title/i });
   expect(dialogTitle).not.toBeInTheDocument();
 });
 
-test('closes the dialog via the backdrop', async () => {
+test('opens and closes the dialog with buttons', async () => {
   await render(DialogComponent, {
     imports: [MatDialogModule, DialogContentComponentModule],
   });
 
   const openDialogButton = await screen.findByRole('button', { name: /open dialog/i });
-  fireEvent.click(openDialogButton);
+  userEvent.click(openDialogButton);
 
   await screen.findByRole('dialog');
   await screen.findByRole('heading', { name: /dialog title/i });
 
-  // eslint-disable-next-line testing-library/no-node-access
-  fireEvent.click(document.querySelector('.cdk-overlay-backdrop'));
+  const cancelButton = await screen.findByRole('button', { name: /cancel/i });
+  userEvent.click(cancelButton);
 
   await waitForElementToBeRemoved(() => screen.getByRole('dialog'));
 

jest.preset.js

@@ -17,12 +17,6 @@ module.exports = {
     'ts-jest': {
       tsconfig: '<rootDir>/tsconfig.spec.json',
       stringifyContentPathRegex: '\\.(html|svg)$',
-      astTransformers: {
-        before: [
-          'jest-preset-angular/build/InlineFilesTransformer',
-          'jest-preset-angular/build/StripStylesTransformer',
-        ],
-      },
     },
   },
 };

package.json

@@ -28,18 +28,18 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@angular/animations": "12.0.0",
-    "@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/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",
+    "@angular/animations": "12.1.1",
+    "@angular/cdk": "12.1.1",
+    "@angular/common": "12.1.1",
+    "@angular/compiler": "12.1.1",
+    "@angular/core": "12.1.1",
+    "@angular/forms": "12.1.1",
+    "@angular/material": "12.1.1",
+    "@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": "11.2.0",
     "@testing-library/dom": "^8.0.0",
     "@testing-library/user-event": "^13.1.9",
@@ -49,23 +49,23 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "12.0.0",
+    "@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.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/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",
+    "@types/jest": "^26.0.23",
     "@types/node": "14.14.37",
     "@typescript-eslint/eslint-plugin": "4.22.0",
     "@typescript-eslint/parser": "4.22.0",
@@ -79,9 +79,9 @@
     "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",
-    "karma": "~5.0.0",
+    "jest": "^27.0.6",
+    "jest-preset-angular": "9.0.4",
+    "karma": "~6.3.4",
     "karma-chrome-launcher": "~3.1.0",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
@@ -90,7 +90,7 @@
     "prettier": "^2.3.0",
     "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

@@ -39,14 +39,13 @@ it('provides a mock service', async () => {
   expect(service.print).toHaveBeenCalledTimes(1);
 });
 
-// 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());
 
   fireEvent.click(getByText('Print'));
+  expect(service.print).toHaveBeenCalled();
 });

projects/testing-library/src/lib/testing-library.ts

@@ -8,7 +8,7 @@ import {
   SimpleChanges,
   ApplicationInitStatus,
 } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { NavigationExtras, Router } from '@angular/router';
@@ -310,14 +310,21 @@ async function waitForWrapper<T>(
   callback: () => T extends Promise<any> ? never : T,
   options?: dtlWaitForOptions,
 ): Promise<T> {
+  let inFakeAsync = true;
+  try {
+    tick(0);
+  } catch (err) {
+    inFakeAsync = false;
+  }
+
   detectChanges();
+
   return await dtlWaitFor(() => {
-    try {
-      return callback();
-    } catch (error) {
-      setImmediate(() => detectChanges());
-      throw error;
+    setTimeout(() => detectChanges(), 0);
+    if (inFakeAsync) {
+      tick(0);
     }
+    return callback();
   }, options);
 }
 
@@ -345,10 +352,8 @@ async function waitForElementToBeRemovedWrapper<T>(
   }
 
   return await dtlWaitForElementToBeRemoved(() => {
-    const result = cb();
     detectChanges();
-    setImmediate(() => detectChanges());
-    return result;
+    return cb();
   }, options);
 }