fix(config): set tsconfig target to ES2015 when target > ES2016 (#1118)

Closes #1058

Author: ahnpnl

e2e/async/__tests__/async-zone.test.ts

@@ -0,0 +1,61 @@
+import type { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonHarness } from '@angular/material/button/testing';
+import { MATERIAL_SANITY_CHECKS } from '@angular/material/core';
+
+@Component({
+  selector: 'snd-button-page',
+  template: `
+    <p>button-page works!</p>
+    <p>
+      <button mat-button (click)="click()">Click</button>
+    </p>
+  `,
+  styles: [],
+})
+class ButtonPageComponent {
+  r = 0;
+
+  click(): void {
+    this.r = 1;
+  }
+}
+
+describe('ButtonPageComponent', () => {
+  let component: ButtonPageComponent;
+  let fixture: ComponentFixture<ButtonPageComponent>;
+  let loader: HarnessLoader;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatButtonModule],
+      declarations: [ButtonPageComponent],
+      providers: [
+        {
+          provide: MATERIAL_SANITY_CHECKS,
+          useValue: false,
+        },
+      ],
+    }).compileComponents();
+    fixture = TestBed.createComponent(ButtonPageComponent);
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  beforeEach(() => {
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should click', async () => {
+    const button = await loader.getHarness(MatButtonHarness);
+    await button.click();
+    expect(component.r).toBe(1);
+  });
+});

e2e/async/jest-esm.config.js

@@ -1,13 +1,23 @@
+const jestCfg = require('./jest.config');
+
 /** @type {import('ts-jest/dist/types').ProjectConfigTsJest} */
 module.exports = {
-  displayName: 'async',
-  preset: '<rootDir>/../../node_modules/ts-jest/presets/default-esm',
+  ...jestCfg,
   globals: {
     'ts-jest': {
       useESM: true,
-      tsconfig: '<rootDir>/../tsconfig-esm.json',
+      tsconfig: {
+        ...require('../tsconfig-esm.json').compilerOptions,
+        /**
+         * Set at ES2018 to test Angular doesn't work with ES2017+
+         * see https://github.com/angular/components/issues/21632#issuecomment-764975917
+         */
+        target: 'ES2018',
+      },
     },
   },
-  setupFilesAfterEnv: ['<rootDir>/../../setup-jest.js'],
-  transform: { '^.+\\.(ts|js|html)$': '<rootDir>/../../build/index.js' },
+  moduleNameMapper: {
+    tslib: 'tslib/tslib.es6.js',
+  },
+  transformIgnorePatterns: ['node_modules/(?!tslib)'],
 };

e2e/async/jest.config.js

@@ -3,9 +3,17 @@ module.exports = {
   displayName: 'async',
   globals: {
     'ts-jest': {
-      tsconfig: '<rootDir>/../tsconfig.json',
+      tsconfig: {
+        ...require('../tsconfig.json').compilerOptions,
+        /**
+         * Set at ES2018 to test Angular doesn't work with ES2017+
+         * see https://github.com/angular/components/issues/21632#issuecomment-764975917
+         */
+        target: 'ES2018',
+      },
     },
   },
+  testEnvironment: 'jsdom',
   setupFilesAfterEnv: ['<rootDir>/../../setup-jest.js'],
   transform: { '^.+\\.(ts|js|html)$': '<rootDir>/../../build/index.js' },
 };

package.json

@@ -53,39 +53,43 @@
     "@angular/platform-browser-dynamic": ">=10.0.0"
   },
   "devDependencies": {
-    "@angular/common": "^12.2.6",
-    "@angular/compiler": "^12.2.6",
-    "@angular/compiler-cli": "^12.2.6",
-    "@angular/core": "^12.2.6",
-    "@angular/platform-browser": "^12.2.6",
-    "@angular/platform-browser-dynamic": "^12.2.6",
+    "@angular/animations": "^12.2.11",
+    "@angular/cdk": "^12.2.11",
+    "@angular/common": "^12.2.11",
+    "@angular/compiler": "^12.2.11",
+    "@angular/compiler-cli": "^12.2.11",
+    "@angular/core": "^12.2.11",
+    "@angular/forms": "^12.2.11",
+    "@angular/material": "^12.2.11",
+    "@angular/platform-browser": "^12.2.11",
+    "@angular/platform-browser-dynamic": "^12.2.11",
     "@babel/core": "^7.15.5",
     "@babel/preset-env": "^7.15.6",
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-angular": "^13.1.0",
-    "@jest/globals": "^27.2.1",
-    "@jest/transform": "^27.2.1",
-    "@jest/types": "^27.1.1",
+    "@jest/globals": "^27.3.0",
+    "@jest/transform": "^27.3.0",
+    "@jest/types": "^27.2.5",
     "@types/jest": "^27.0.2",
     "@types/jquery": "^3.5.6",
     "@types/node": "^16.9.4",
     "@typescript-eslint/eslint-plugin": "^4.31.2",
     "@typescript-eslint/parser": "^4.31.2",
-    "babel-jest": "^27.2.1",
+    "babel-jest": "^27.3.1",
     "conventional-changelog-cli": "^2.1.1",
     "cross-env": "^7.0.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jest": "^24.4.0",
-    "eslint-plugin-jsdoc": "^36.1.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-jest": "^25.2.2",
+    "eslint-plugin-jsdoc": "^37.0.0",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^4.0.0",
     "execa": "^5.1.1",
     "fs-extra": "^10.0.0",
     "glob": "^7.1.7",
     "husky": "^7.0.2",
-    "jest": "^27.2.1",
+    "jest": "^27.3.1",
     "jest-snapshot-serializer-raw": "^1.2.0",
     "pinst": "^2.1.6",
     "prettier": "^2.4.1",

src/__tests__/ng-jest-config.spec.ts

@@ -1,3 +1,5 @@
+import ts from 'typescript';
+
 import { NgJestConfig } from '../config/ng-jest-config';
 
 describe('NgJestConfig', () => {
@@ -11,5 +13,21 @@ describe('NgJestConfig', () => {
     expect(compilerOptions.annotationsAs).toBe('decorators');
     expect(compilerOptions.enableResourceInlining).toBe(false);
     expect(compilerOptions.allowJs).toBe(true);
+    expect(compilerOptions.target).toBe(ts.ScriptTarget.ES2015);
+  });
+
+  test('should set typescript target to ES2015 if user is using target higher than ES2016', () => {
+    expect(
+      new NgJestConfig({
+        globals: {
+          'ts-jest': {
+            tsconfig: {
+              target: 'ES2017',
+            },
+          },
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } as any).parsedTsConfig.options.target,
+    ).toBe(ts.ScriptTarget.ES2015);
   });
 });

src/config/ng-jest-config.ts

@@ -7,7 +7,7 @@ export class NgJestConfig extends ConfigSet {
    * Override `ts-jest` behavior because we use `readConfiguration` which will read and resolve tsconfig.
    */
   protected _resolveTsConfig(compilerOptions?: RawCompilerOptions, resolvedConfigFile?: string): ParsedCommandLine {
-    const result = super._resolveTsConfig(compilerOptions, resolvedConfigFile);
+    const result = super._resolveTsConfig(compilerOptions, resolvedConfigFile) as ParsedCommandLine;
     result.options.enableIvy = true;
     result.options.noEmitOnError = false;
     result.options.suppressOutputPathCheck = true;
@@ -16,7 +16,13 @@ export class NgJestConfig extends ConfigSet {
     result.options.enableResourceInlining = false;
     // Since we define preset default also transform `js` so we need to set `allowJs` true
     result.options.allowJs = true;
+    const ts = this.compilerModule;
+    const scriptTarget = result.options.target ?? ts.ScriptTarget?.ES2015;
+    if (scriptTarget > ts.ScriptTarget?.ES2016) {
+      // See https://github.com/angular/components/issues/21632#issuecomment-764975917
+      result.options.target = ts.ScriptTarget?.ES2015;
+    }
 
-    return result as ParsedCommandLine;
+    return result;
   }
 }

tsconfig.json

@@ -11,7 +11,8 @@
     "skipLibCheck": true,
     "importHelpers": true,
     "esModuleInterop": true,
-    "target": "es2015",
+    "moduleResolution": "Node",
+    "target": "ES2015",
     "module": "CommonJS",
     "lib": ["esnext", "dom"],
     "types": ["node", "jest"]