[Bug]: Must use import to load ES Module

[CSchulz]

Version

13.1.1

Steps to reproduce

1. Checkout repository https://github.com/CSchulz/jest-preset-angular with branch esm-snapshot
2. Switch to examples/example-app-v15
3. Run npm i
4. Run npm run test-esm
5. See error in src/app/app.component.spec.ts

Expected behavior

Snapshot testing should work.

Actual behavior

Snapshot testing isn't working properly.

It seems that ng-snapshot.ts file is using the old require style resulting into the error:

jest-preset-angular/src/serializers/ng-snapshot.ts

Lines 42 to 51 in 2437b4a

	const ivyEnabled = (): boolean => {
	// eslint-disable-next-line @typescript-eslint/no-var-requires
	const { NgModule }: typeof import('@angular/core') = require('@angular/core');
	class IvyModule {}
	NgModule()(IvyModule);
	// eslint-disable-next-line @typescript-eslint/no-explicit-any
	return !!(IvyModule as ɵNgModuleType<unknown>).ɵmod;
	};

Removing it from the ivyEnabled function in the ng-snapshot.js works.

Must use import to load ES Module: C:\Users\Ich\Daten\huk\web-lib-angular\node_modules@angular\core\fesm2020\core.mjs

  46 |
  47 |   it('should create instance', () => {
> 48 |     expect(fixture).toMatchSnapshot();
     |                     ^
  49 |   });
  50 |
  51 |   it('should upload file', () => {

  at Runtime.requireModule (../../node_modules/jest-runtime/build/index.js:841:21)
  at printPlugin (../../node_modules/pretty-format/build/index.js:272:16)
  at format (../../node_modules/pretty-format/build/index.js:453:16)
  at __EXTERNAL_MATCHER_TRAP__ (../../node_modules/expect/build/index.js:317:30)
  at Object.throwingMatcher (../../node_modules/expect/build/index.js:318:15)
  at ....spec.ts:48:21
  at l.invoke (../../node_modules/zone.js/fesm2015/zone-testing-bundle.min.js:13:6400)
  at ProxyZoneSpec.onInvoke (../../node_modules/zone.js/fesm2015/zone-testing-bundle.min.js:110:2047)
  at l.invoke (../../node_modules/zone.js/fesm2015/zone-testing-bundle.min.js:13:6340)
  at a.run (../../node_modules/zone.js/fesm2015/zone-testing-bundle.min.js:13:1812)
  at Object.o (../../node_modules/zone.js/fesm2015/zone-testing-bundle.min.js:134:592)

Additional context

No response

Environment

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 AMD Ryzen 5 5600G with Radeon Graphics
  Binaries:
    Node: 16.15.0 - C:\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.5.5 - C:\nodejs\npm.CMD
  npmPackages:
    jest: ~29.5.0 => 29.5.0

[CSchulz]

Relates to #2016

[rubiesonthesky]

That file tries to be commonjs but it also uses import type. I’m not sure should it be written as commonjs or as esm. We should also check what tsconfig says about it. In current state it can cause problems

[eniomarku]

@CSchulz I am having the same problem, My architecture is a monorepo one, and I used more or less the same configuration as the one at examples/monorepo and I run in the same error as the one here but I am using fesm2022. Did you find a workaround for this problem

[CSchulz]

@CSchulz I am having the same problem, My architecture is a monorepo one, and I used more or less the same configuration as the one at examples/monorepo and I run in the same error as the one here but I am using fesm2022. Did you find a workaround for this problem

I am using patch-package or similar system to patch the condition in the file f.e. if you are using Angular 15+ there is ivy only, so you can just return true.

 const ivyEnabled = (): boolean => { 
   return true;
 };