Cannot run tests when having `import.meta.url`

Describe the Bug

Jest cannot compile when there is import.meta.url in the code, even in console.log.

The use of import.meta.url is obligatory in Angular 12 for new Worker(new URL('./app.worker', import.meta.url), ...)

https://angular.io/guide/updating-to-version-12#breaking-changes-in-angular-version-12 Angular 12 updates Webpack from version 4 to version 5.

• Webpack 5 now includes web worker support. However, the structure of the URL within the worker constructor must be in a specific format that differs from the current requirement. To update web worker usage, where ./app.worker is the actual worker name, change new Worker('./app.worker', ...) to new Worker(new URL('./app.worker', import.meta.url), ...). See PR #20466.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'my-app';

  ngOnChanges(): void {
    console.log(import.meta.url);
  }
}

$ ng test
 FAIL  src/app/app.component.spec.ts
  ● Test suite failed to run

    src/app/app.component.ts:17:17 - error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'esnext', or 'system'.

    17     console.log(import.meta.url);
                       ~~~~~~~~~~~

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        3.464 s
Ran all test suites.
error Command failed with exit code 1.

tsconfig.json: generated by Angular 12

{
  ...
  "compilerOptions": {
    ...
    "module": "es2020",
  },
  ...
}

Minimal Reproduction

Create a new app ng new my-app; Follow the guide https://www.npmjs.com/package/@angular-builders/jest to add @angular-builders/jest; Add import.meta.url in the code (wherever); Run the tests.

Expected Behavior

Run the tests successfully.

Screenshots

Environment

Libs

• @angular/core version: “~12.0.1”
• @angular-devkit/build-angular version: “~12.0.1”
• @angular-builders/jest version: “^12.1.0”

For Tooling issues:

• Node version: v14.16.1
• Platform: Windows 10

[just-jeb]

Hello @acalvo. Here is the fix to your minimal reproduction that will allow you to use import.meta.url:

diff --git a/jest.config.js b/jest.config.js
index 7c11975..40e59f4 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,8 +1,3 @@
 module.exports = {
-    "preset": "jest-preset-angular/presets/defaults-esm",
-    "globals": {
-        "ts-jest": {
-            "tsconfig": "<rootDir>/tsconfig.spec.json"
-        }
-    }
+  "preset": "jest-preset-angular/presets/defaults-esm",
 };
diff --git a/package.json b/package.json
index 3fd50b0..ce8124d 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "NODE_OPTIONS=--experimental-vm-modules ng test"
   },
   "private": true,
   "dependencies": {
diff --git a/tsconfig.spec.json b/tsconfig.spec.json
index 70dfb05..e29984c 100644
--- a/tsconfig.spec.json
+++ b/tsconfig.spec.json
@@ -6,6 +6,7 @@
     "target": "es5",
     "esModuleInterop": true,
     "allowJs": true,
+    "allowSyntheticDefaultImports": true,
     "types": [
       "jest",
       "node"

It might be worth encapsulating it inside the builder (certainly the preset part) but it shouldn’t block you.

[Avinash4243]

Great, it works! I had already run it with the NODE_OPTIONS=--experimental-vm-modules flag, but discarded it due to the errors it produced. But they’re gone with the TS allowSyntheticDefaultImports flag. Thank you for your help! 😄

Can you please help me fix the same issue for me. I am still facing the same issue.

Hey! See the minimal reproduction I linked above: https://github.com/acalvo/import-meta-url

And apply the git diff just-jeb gave me. With those changes, it won’t throw any errors.

Thank you for the reply - Do I need to add @angular-builders/jest dependency also in my project or it is not required. I added and checked also followed the diff changes still getting the same issue.