feat: support configuring zoneless test env for CJS

.editorconfig

@@ -19,7 +19,7 @@ tab_width = 4
 [*.{yml, yaml}]
 indent_size = 2
 
-[*.{js,jsx,ts,tsx}]
+[*.{js,jsx,ts,tsx,mjs,mjsx,tsx,mtsx}]
 indent_size = 4
 
 [*.html]

e2e/zoneless-env/__tests__/zoneless-env.spec.ts

@@ -0,0 +1,18 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FooComponent } from '../foo.component';
+
+describe('FooComponent', () => {
+    it('should trigger change detection without fixture.detectChanges', () => {
+        TestBed.configureTestingModule({
+            imports: [FooComponent],
+        });
+        const fixture = TestBed.createComponent(FooComponent);
+
+        expect(fixture.componentInstance.value1()).toBe('val1');
+
+        fixture.componentRef.setInput('value1', 'hello');
+
+        expect(fixture.componentInstance.value1()).toBe('hello');
+    });
+});

e2e/zoneless-env/foo.component.html

@@ -0,0 +1,10 @@
+<!-- SOMETHING -->
+<p>Line 1</p>
+<div>
+    <div *ngIf="condition1">
+        {{ value1() }}
+    </div>
+    <span *ngIf="condition2">
+        {{ value2() }}
+    </span>
+</div>

e2e/zoneless-env/foo.component.scss

@@ -0,0 +1,3 @@
+p {
+  font-size: 1.6rem;
+}

e2e/zoneless-env/foo.component.ts

@@ -0,0 +1,25 @@
+import { NgIf } from '@angular/common';
+import { Component, input } from '@angular/core';
+
+@Component({
+    selector: 'foo',
+    standalone: true,
+    templateUrl: './foo.component.html',
+    styleUrls: ['./foo.component.scss'],
+    // we have to setup styles this way, since simple styles/styleUrs properties will be removed (jest does not unit test styles)
+    styles: [
+        `
+            p {
+                color: red;
+            }
+        `,
+    ],
+    imports: [NgIf],
+})
+export class FooComponent {
+    readonly value1 = input('val1');
+    readonly value2 = input('val2');
+
+    protected readonly condition1 = true;
+    protected readonly condition2 = false;
+}

e2e/zoneless-env/jest-cjs.config.ts

@@ -0,0 +1,24 @@
+import type { JestConfigWithTsJest } from 'ts-jest';
+
+const config: JestConfigWithTsJest = {
+    displayName: 'e2e-zoneless-env',
+    testEnvironment: 'jsdom',
+    snapshotSerializers: [
+        '<rootDir>/../../build/serializers/html-comment',
+        '<rootDir>/../../build/serializers/ng-snapshot',
+        '<rootDir>/../../build/serializers/no-ng-attributes',
+    ],
+    setupFilesAfterEnv: ['./setup-zoneless-env.ts'],
+    transform: {
+        '^.+\\.(ts|js|mjs|html)$': [
+            '<rootDir>/../../build/index.js',
+            {
+                tsconfig: '<rootDir>/tsconfig-cjs.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+};
+
+export default config;

e2e/zoneless-env/jest-esm.config.ts

@@ -0,0 +1,28 @@
+import type { JestConfigWithTsJest } from 'ts-jest';
+
+const config: JestConfigWithTsJest = {
+    displayName: 'e2e-zoneless-env',
+    testEnvironment: 'jsdom',
+    snapshotSerializers: [
+        '<rootDir>/../../build/serializers/html-comment',
+        '<rootDir>/../../build/serializers/ng-snapshot',
+        '<rootDir>/../../build/serializers/no-ng-attributes',
+    ],
+    setupFilesAfterEnv: ['./setup-zoneless-env.mts'],
+    moduleNameMapper: {
+        rxjs: '<rootDir>/../../node_modules/rxjs/dist/bundles/rxjs.umd.js',
+    },
+    extensionsToTreatAsEsm: ['.ts', '.mts'],
+    transform: {
+        '^.+\\.(ts|mts|js|mjs|html)$': [
+            '<rootDir>/../../build/index.js',
+            {
+                useESM: true,
+                tsconfig: '<rootDir>/tsconfig-esm.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+};
+
+export default config;

e2e/zoneless-env/jest-transpile-cjs.config.ts

@@ -0,0 +1,25 @@
+import type { JestConfigWithTsJest } from 'ts-jest';
+
+const config: JestConfigWithTsJest = {
+    displayName: 'e2e-snapshot-serializers',
+    testEnvironment: 'jsdom',
+    snapshotSerializers: [
+        '<rootDir>/../../build/serializers/html-comment',
+        '<rootDir>/../../build/serializers/ng-snapshot',
+        '<rootDir>/../../build/serializers/no-ng-attributes',
+    ],
+    setupFilesAfterEnv: ['./setup-zoneless-env.ts'],
+    transform: {
+        '^.+\\.(ts|js|mjs|html)$': [
+            '<rootDir>/../../build/index.js',
+            {
+                tsconfig: '<rootDir>/tsconfig-cjs.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+                isolatedModules: true,
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+};
+
+export default config;

e2e/zoneless-env/jest-transpile-esm.config.ts

@@ -0,0 +1,29 @@
+import type { JestConfigWithTsJest } from 'ts-jest';
+
+const config: JestConfigWithTsJest = {
+    displayName: 'e2e-snapshot-serializers',
+    testEnvironment: 'jsdom',
+    snapshotSerializers: [
+        '<rootDir>/../../build/serializers/html-comment',
+        '<rootDir>/../../build/serializers/ng-snapshot',
+        '<rootDir>/../../build/serializers/no-ng-attributes',
+    ],
+    setupFilesAfterEnv: ['./setup-zoneless-env.mts'],
+    moduleNameMapper: {
+        rxjs: '<rootDir>/../../node_modules/rxjs/dist/bundles/rxjs.umd.js',
+    },
+    extensionsToTreatAsEsm: ['.ts', '.mts'],
+    transform: {
+        '^.+\\.(ts|mts|js|mjs|html)$': [
+            '<rootDir>/../../build/index.js',
+            {
+                useESM: true,
+                tsconfig: '<rootDir>/tsconfig-esm.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+                isolatedModules: true,
+            },
+        ],
+    },
+};
+
+export default config;

e2e/zoneless-env/setup-zoneless-env.mts

@@ -0,0 +1,3 @@
+import { setupZonelessTestEnv } from '../../setup-env/zoneless/index.mjs';
+
+setupZonelessTestEnv();

e2e/zoneless-env/setup-zoneless-env.ts

@@ -0,0 +1,3 @@
+import { setupZonelessTestEnv } from '../../setup-env/zoneless';
+
+setupZonelessTestEnv();

e2e/zoneless-env/tsconfig-cjs.spec.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig-base.spec.json"
+}

e2e/zoneless-env/tsconfig-esm.spec.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig-base.spec.json",
+  "compilerOptions": {
+    "module": "ES2022",
+    "esModuleInterop": true
+  }
+}

setup-env/utils.mjs → setup-env/utils.js

@@ -1,13 +1,13 @@
-import { TextDecoder, TextEncoder } from 'util';
+const { TextDecoder, TextEncoder } = require('util');
 
-export const polyfillEncoder = () => {
+const polyfillEncoder = () => {
     if (typeof globalThis.TextEncoder === 'undefined') {
         globalThis.TextEncoder = TextEncoder;
         globalThis.TextDecoder = TextDecoder;
     }
 };
 
-export const resolveTestEnvOptions = (options) => {
+const resolveTestEnvOptions = (options) => {
     const globalTestEnvOptions = globalThis.ngJest?.testEnvironmentOptions;
     if (globalTestEnvOptions) {
         console.warn(
@@ -17,3 +17,8 @@ export const resolveTestEnvOptions = (options) => {
 
     return globalTestEnvOptions ?? options;
 };
+
+module.exports = {
+    polyfillEncoder,
+    resolveTestEnvOptions,
+};

setup-env/zone/index.js

@@ -1,38 +1,20 @@
 require('zone.js');
 require('zone.js/testing');
 
-const { TextEncoder, TextDecoder } = require('util');
-
 const { getTestBed } = require('@angular/core/testing');
 const {
     BrowserDynamicTestingModule,
     platformBrowserDynamicTesting,
 } = require('@angular/platform-browser-dynamic/testing');
 
-const polyfillEncoder = () => {
-    if (typeof globalThis.TextEncoder === 'undefined') {
-        globalThis.TextEncoder = TextEncoder;
-        globalThis.TextDecoder = TextDecoder;
-    }
-};
-
-const resolveTestEnvOptions = (options) => {
-    const globalTestEnvOptions = globalThis.ngJest?.testEnvironmentOptions;
-    if (globalTestEnvOptions) {
-        console.warn(
-            'Setting testEnvironmentOptions via globalThis.ngJest is deprecated. Please provide testEnvironmentOptions via function argument',
-        );
-    }
-
-    return globalTestEnvOptions ?? options;
-};
+const { polyfillEncoder, resolveTestEnvOptions } = require('../utils');
 
 const setupZoneTestEnv = (options) => {
     polyfillEncoder();
     const testEnvironmentOptions = resolveTestEnvOptions(options);
 
     getTestBed().initTestEnvironment(
-        BrowserDynamicTestingModule,
+        [BrowserDynamicTestingModule],
         platformBrowserDynamicTesting(),
         testEnvironmentOptions,
     );

setup-env/zone/index.mjs

@@ -4,15 +4,19 @@ import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
-import { polyfillEncoder, resolveTestEnvOptions } from '../utils.mjs';
+import { polyfillEncoder, resolveTestEnvOptions } from '../utils';
 
-export const setupZoneTestEnv = (options) => {
+const setupZoneTestEnv = (options) => {
     polyfillEncoder();
     const testEnvironmentOptions = resolveTestEnvOptions(options);
 
     getTestBed().initTestEnvironment(
-        BrowserDynamicTestingModule,
+        [BrowserDynamicTestingModule],
         platformBrowserDynamicTesting(),
         testEnvironmentOptions,
     );
 };
+
+export {
+  	setupZoneTestEnv,
+}

setup-env/zoneless/index.js

@@ -1,8 +1,48 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const setupZonelessTestEnv = (_options) => {
+const { provideExperimentalZonelessChangeDetection, NgModule, ErrorHandler } = require('@angular/core');
+const { getTestBed } = require('@angular/core/testing');
+const {
+    BrowserDynamicTestingModule,
+    platformBrowserDynamicTesting,
+} = require('@angular/platform-browser-dynamic/testing');
+
+const { polyfillEncoder, resolveTestEnvOptions } = require('../utils');
+
+const provideZonelessConfig = () => {
+    class TestModule {}
+    NgModule({
+        providers: [
+            provideExperimentalZonelessChangeDetection(),
+            {
+                provide: ErrorHandler,
+                useValue: {
+                    handleError: (e) => {
+                        throw e;
+                    },
+                },
+            },
+        ],
+    })(TestModule);
+
+    return TestModule;
+};
+
+const setupZonelessTestEnv = (options) => {
+    polyfillEncoder();
+    if (typeof provideExperimentalZonelessChangeDetection !== 'undefined') {
+        const testEnvironmentOptions = resolveTestEnvOptions(options);
+
+        getTestBed().initTestEnvironment(
+            [BrowserDynamicTestingModule, provideZonelessConfig()],
+            platformBrowserDynamicTesting(),
+            testEnvironmentOptions,
+        );
+
+        return;
+    }
+
     throw Error(
-        'Zoneless testing environment only works when running Jest in ESM mode with Jest 29. ' +
-            'Jest 30+ will support to work with CommonJS mode.',
+        'Cannot find provideExperimentalZonelessChangeDetection() to setup zoneless testing environment. ' +
+            'Please use setupZoneTestEnv() from jest-preset-angular/setup-env/setup-zone-env.mjs instead.',
     );
 };