feat: add an option to configure which file processed by esbuild (#1455)

Fixes #1413
Fixes #1437

BREAKING CHANGE
Previously, we always checked file extension `.mjs` and any files from `node_modules` excluding `tslib` to be processed with `esbuild`. With the new option `processWithEsbuild`, now we put default all `.mjs` files to be processed by `esbuild`.

Files like `lodash-es` default isn't processed by `esbuild`. If you wish to use `esbuild` to process such files, please configure in your Jest config like
```
// jest.config.js
module.exports = {
    //...
    globals: {
         ngJest: {
              processWithEsbuild: ['**/node_modules/lodash-es/*.js],
         }
    }
}
```

Author: ahnpnl

.eslintignore

@@ -1,7 +1,8 @@
-build/
-node_modules/
+build
+dist
+node_modules
 src/config/setup-jest.ts
-coverage/
+coverage
 website
 src/transformers/downlevel_decorators_transform
 src/ngtsc

.gitignore

@@ -14,6 +14,5 @@ website/.yarn/*
 !.yarn/versions
 !/e2e/full-ivy-lib/node_modules
 !/e2e/partial-ivy-lib/node_modules
-!/e2e/process-js-packages/node_modules
 src/transformers/downlevel_decorators_transform
 src/ngtsc

e2e/__tests__/process-js-packages.test.ts

@@ -1,27 +1,27 @@
-import fs from 'fs';
 import path from 'path';
 
-import { jsonNoCache as runWithJsonNoCache } from '../run-jest';
+import { onNodeVersions, jsonNoCache as runWithJsonNoCache } from '../run-jest';
+import { runYarnInstall } from '../utils';
 
-const TEST_DIR_NAME = 'process-js-packages';
-const TEST_DIR_PATH = path.join(__dirname, '..', TEST_DIR_NAME);
-const LOG_FILE_NAME = 'ng-jest.log';
-const LOG_FILE_PATH = path.join(TEST_DIR_PATH, LOG_FILE_NAME);
+const DIR = 'process-js-packages';
 
-test(`successfully runs the tests inside ${TEST_DIR_NAME}`, () => {
-  process.env.NG_JEST_LOG = LOG_FILE_NAME;
+beforeAll(() => {
+  runYarnInstall(path.join(__dirname, '..', DIR));
+});
 
-  const { json } = runWithJsonNoCache(TEST_DIR_NAME);
+test(`successfully run the tests inside ${DIR} with CommonJS mode`, () => {
+  const { json } = runWithJsonNoCache(DIR);
 
   expect(json.success).toBe(true);
-  expect(fs.existsSync(LOG_FILE_PATH)).toBe(true);
-
-  const logFileContent = fs.readFileSync(LOG_FILE_PATH, 'utf-8');
-  const logFileContentAsJson = JSON.parse(logFileContent);
+});
 
-  expect(/node_modules\/(.*.m?js$)/.test(logFileContentAsJson.context.filePath.replace(/\\/g, '/'))).toBe(true);
-  expect(logFileContentAsJson.message).toBe('process with esbuild');
+// The versions where vm.Module exists and commonjs with "exports" is not broken
+onNodeVersions('>=12.16.0', () => {
+  test(`successfully run the tests inside ${DIR} with ESM mode`, () => {
+    const { json } = runWithJsonNoCache(DIR, ['-c=jest-esm.config.mjs'], {
+      nodeOptions: '--experimental-vm-modules --no-warnings',
+    });
 
-  delete process.env.NG_JEST_LOG;
-  fs.unlinkSync(LOG_FILE_PATH);
+    expect(json.success).toBe(true);
+  });
 });

e2e/process-js-packages/__tests__/process-js-packages.spec.ts

@@ -1,5 +1,9 @@
-import { foo } from 'my-lib';
+import { MarkerClusterer } from '@googlemaps/markerclusterer';
+import camelCase from 'lodash-es/camelCase';
+import { __assign } from 'tslib';
 
 test('should pass', () => {
-  expect(foo).toBe(1);
+  expect(typeof MarkerClusterer).toBe('function');
+  expect(camelCase('foo-bar')).toBe('fooBar');
+  expect(typeof __assign).toBe('function');
 });

e2e/process-js-packages/jest-esm.config.mjs

@@ -0,0 +1,17 @@
+export default {
+  extensionsToTreatAsEsm: ['.ts'],
+  globals: {
+    'ts-jest': {
+      tsconfig: 'tsconfig-esm.spec.json',
+      useESM: true,
+      isolatedModules: true,
+    },
+  },
+  transform: {
+    '^.+\\.(ts|js)$': '<rootDir>/../../build/index.js',
+  },
+  moduleNameMapper: {
+    '@googlemaps/markerclusterer': '@googlemaps/markerclusterer/dist/index.esm.js',
+  },
+  transformIgnorePatterns: ['node_modules/(?!@googlemaps/markerclusterer)'],
+};

e2e/process-js-packages/jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  globals: {
+    'ts-jest': {
+      tsconfig: 'tsconfig.spec.json',
+      isolatedModules: true,
+    },
+    ngJest: {
+      processWithEsbuild: ['**/node_modules/lodash-es/*.js'],
+    },
+  },
+  transform: {
+    '^.+\\.(ts|js|mjs)$': '<rootDir>/../../build/index.js',
+  },
+  transformIgnorePatterns: ['node_modules/(?!lodash-es)'],
+};

e2e/process-js-packages/node_modules/my-lib/index.d.ts

@@ -1,15 +1,10 @@
 {
   "name": "process-js-packages",
-  "jest": {
-    "moduleFileExtensions": ["ts", "html", "js", "json", "mjs"],
-    "globals": {
-      "ts-jest": {
-        "isolatedModules": true
-      }
-    },
-    "transform": {
-      "^.+\\.(ts|js|mjs|html)$": "<rootDir>/../../build/index.js"
-    },
-    "transformIgnorePatterns": ["node_modules/(?!my-lib)"]
+  "private": true,
+  "devDependencies": {
+    "lodash-es": "^4.17.21",
+    "@types/lodash-es": "^4.17.6",
+    "tslib": "^2.4.0",
+    "@googlemaps/markerclusterer": "^2.0.6"
   }
 }