test: write Jest tests with provideZoneChangeDetection

Author: timdeschryver

apps/example-app-jest/jest.config.js

@@ -3,11 +3,14 @@ module.exports = {
   setupFilesAfterEnv: ['<rootDir>/apps/example-app-jest/src/test-setup.ts'],
   modulePathIgnorePatterns: ['<rootDir>/dist'],
   testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/dist/'],
-  globals: {
-    'ts-jest': {
-      tsconfig: '<rootDir>/apps/example-app-jest/tsconfig.spec.json',
-      stringifyContentPathRegex: '\\.(html|svg)$',
-    },
+  transform: {
+    '^.+.ts?$': [
+      'ts-jest',
+      {
+        tsconfig: '<rootDir>/apps/example-app-jest/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
   },
   coverageDirectory: 'coverage/apps/example-app-jest',
   transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],

apps/example-app-jest/src/app/examples/00-single-component.spec.ts

@@ -1,11 +1,14 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
 import { SingleComponent } from './00-single-component';
 
 test('renders the current value and can increment and decrement', async () => {
   const user = userEvent.setup();
-  await render(SingleComponent);
+  await render(SingleComponent, {
+    providers: [provideZoneChangeDetection()],
+  });
 
   const incrementControl = screen.getByRole('button', { name: /increment/i });
   const decrementControl = screen.getByRole('button', { name: /decrement/i });

apps/example-app-jest/src/app/examples/01-nested-component.spec.ts

@@ -1,11 +1,14 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
 import { NestedContainerComponent } from './01-nested-component';
 
 test('renders the current value and can increment and decrement', async () => {
   const user = userEvent.setup();
-  await render(NestedContainerComponent);
+  await render(NestedContainerComponent, {
+    providers: [provideZoneChangeDetection()],
+  });
 
   const incrementControl = screen.getByRole('button', { name: /increment/i });
   const decrementControl = screen.getByRole('button', { name: /decrement/i });

apps/example-app-jest/src/app/examples/02-input-output.spec.ts

@@ -1,3 +1,4 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
@@ -14,6 +15,7 @@ test('is possible to set input and listen for output', async () => {
     on: {
       sendValue,
     },
+    providers: [provideZoneChangeDetection()],
   });
 
   const incrementControl = screen.getByRole('button', { name: /increment/i });
@@ -32,33 +34,6 @@ test('is possible to set input and listen for output', async () => {
   expect(sendValue).toHaveBeenCalledWith(50);
 });
 
-test.skip('is possible to set input and listen for output with the template syntax', async () => {
-  const user = userEvent.setup();
-  const sendSpy = jest.fn();
-
-  await render('<atl-fixture [value]="47" (sendValue)="sendValue($event)" />', {
-    imports: [InputOutputComponent],
-    on: {
-      sendValue: sendSpy,
-    },
-  });
-
-  const incrementControl = screen.getByRole('button', { name: /increment/i });
-  const sendControl = screen.getByRole('button', { name: /send/i });
-  const valueControl = screen.getByTestId('value');
-
-  expect(valueControl).toHaveTextContent('47');
-
-  await user.click(incrementControl);
-  await user.click(incrementControl);
-  await user.click(incrementControl);
-  expect(valueControl).toHaveTextContent('50');
-
-  await user.click(sendControl);
-  expect(sendSpy).toHaveBeenCalledTimes(1);
-  expect(sendSpy).toHaveBeenCalledWith(50);
-});
-
 test('is possible to set input and listen for output (deprecated)', async () => {
   const user = userEvent.setup();
   const sendValue = jest.fn();
@@ -72,6 +47,7 @@ test('is possible to set input and listen for output (deprecated)', async () =>
         emit: sendValue,
       } as any,
     },
+    providers: [provideZoneChangeDetection()],
   });
 
   const incrementControl = screen.getByRole('button', { name: /increment/i });
@@ -99,6 +75,7 @@ test('is possible to set input and listen for output with the template syntax (d
     componentProperties: {
       sendValue: sendSpy,
     },
+    providers: [provideZoneChangeDetection()],
   });
 
   const incrementControl = screen.getByRole('button', { name: /increment/i });

apps/example-app-jest/src/app/examples/03-forms.spec.ts

@@ -1,11 +1,14 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { render, screen, fireEvent } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
 import { FormsComponent } from './03-forms';
 
 test('is possible to fill in a form and verify error messages (with the help of jest-dom https://testing-library.com/docs/ecosystem-jest-dom)', async () => {
   const user = userEvent.setup();
-  await render(FormsComponent);
+  await render(FormsComponent, {
+    providers: [provideZoneChangeDetection()],
+  });
 
   const nameControl = screen.getByRole('textbox', { name: /name/i });
   const scoreControl = screen.getByRole('spinbutton', { name: /score/i });

apps/example-app-jest/src/app/examples/04-forms-with-material.spec.ts

@@ -1,3 +1,4 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
@@ -6,7 +7,9 @@ import { MaterialFormsComponent } from './04-forms-with-material';
 test('is possible to fill in a form and verify error messages (with the help of jest-dom https://testing-library.com/docs/ecosystem-jest-dom)', async () => {
   const user = userEvent.setup();
 
-  const { fixture } = await render(MaterialFormsComponent);
+  const { fixture } = await render(MaterialFormsComponent, {
+    providers: [provideZoneChangeDetection()],
+  });
 
   const nameControl = screen.getByLabelText(/name/i);
   const scoreControl = screen.getByRole('spinbutton', { name: /score/i });
@@ -66,7 +69,9 @@ test('is possible to fill in a form and verify error messages (with the help of
 test('set and show pre-set form values', async () => {
   const user = userEvent.setup();
 
-  const { fixture, detectChanges } = await render(MaterialFormsComponent);
+  const { fixture, detectChanges } = await render(MaterialFormsComponent, {
+    providers: [provideZoneChangeDetection()],
+  });
 
   fixture.componentInstance.form.setValue({
     name: 'Max',

apps/example-app-jest/src/app/examples/05-component-provider.spec.ts

@@ -1,3 +1,4 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { render, screen } from '@testing-library/angular';
 import { provideMock, Mock, createMock } from '@testing-library/angular/jest-utils';
@@ -15,6 +16,7 @@ test('renders the current value and can increment and decrement', async () => {
         useValue: new CounterService(),
       },
     ],
+    providers: [provideZoneChangeDetection()],
   });
 
   const incrementControl = screen.getByRole('button', { name: /increment/i });
@@ -47,6 +49,7 @@ test('renders the current value and can increment and decrement with a mocked je
         useValue: counter,
       },
     ],
+    providers: [provideZoneChangeDetection()],
   });
 
   const incrementControl = screen.getByRole('button', { name: /increment/i });
@@ -68,6 +71,7 @@ test('renders the current value and can increment and decrement with provideMock
 
   await render(ComponentWithProviderComponent, {
     componentProviders: [provideMock(CounterService)],
+    providers: [provideZoneChangeDetection()],
   });
 
   const incrementControl = screen.getByRole('button', { name: /increment/i });

apps/example-app-jest/src/app/examples/06-with-ngrx-store.spec.ts

@@ -3,6 +3,7 @@ import { StoreModule } from '@ngrx/store';
 import userEvent from '@testing-library/user-event';
 
 import { WithNgRxStoreComponent, reducer } from './06-with-ngrx-store';
+import { provideZoneChangeDetection } from '@angular/core';
 
 test('works with ngrx store', async () => {
   const user = userEvent.setup();
@@ -18,6 +19,7 @@ test('works with ngrx store', async () => {
         },
       ),
     ],
+    providers: [provideZoneChangeDetection()],
   });
 
   const incrementControl = screen.getByRole('button', { name: /increment/i });

apps/example-app-jest/src/app/examples/07-with-ngrx-mock-store.spec.ts

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
 import { WithNgRxMockStoreComponent, selectItems } from './07-with-ngrx-mock-store';
+import { provideZoneChangeDetection } from '@angular/core';
 
 test('works with provideMockStore', async () => {
   const user = userEvent.setup();
@@ -18,6 +19,7 @@ test('works with provideMockStore', async () => {
           },
         ],
       }),
+      provideZoneChangeDetection(),
     ],
   });
 

apps/example-app-jest/src/app/examples/08-directive.spec.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, provideZoneChangeDetection } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
@@ -34,6 +34,7 @@ test('it is possible to test directives', async () => {
 
   await render('<div atlSpoiler data-testid="dir"></div>', {
     imports: [SpoilerDirective],
+    providers: [provideZoneChangeDetection()],
   });
 
   const directive = screen.getByTestId('dir');
@@ -61,6 +62,7 @@ test('it is possible to test directives with props', async () => {
       hidden,
       visible,
     },
+    providers: [provideZoneChangeDetection()],
   });
 
   expect(screen.queryByText(visible)).not.toBeInTheDocument();
@@ -82,6 +84,7 @@ test('it is possible to test directives with props in template', async () => {
 
   await render(`<div atlSpoiler hidden="${hidden}" visible="${visible}"></div>`, {
     imports: [SpoilerDirective],
+    providers: [provideZoneChangeDetection()],
   });
 
   expect(screen.queryByText(visible)).not.toBeInTheDocument();