diff --git a/examples/example-app-monorepo/apps/app1/src/app/banner/__snapshots__/banner.component.spec.ts.snap b/examples/example-app-monorepo/apps/app1/src/app/banner/__snapshots__/banner.component.spec.ts.snap
new file mode 100644
index 0000000000..ea6d2a8d5d
--- /dev/null
+++ b/examples/example-app-monorepo/apps/app1/src/app/banner/__snapshots__/banner.component.spec.ts.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BannerComponent (inline template) should display the component 1`] = `
+
+
+ Test Tour of Heroes
+
+
+`;
diff --git a/examples/example-app-monorepo/apps/app1/src/app/banner/banner.component.spec.ts b/examples/example-app-monorepo/apps/app1/src/app/banner/banner.component.spec.ts
index 38ed502948..d097fde05e 100644
--- a/examples/example-app-monorepo/apps/app1/src/app/banner/banner.component.spec.ts
+++ b/examples/example-app-monorepo/apps/app1/src/app/banner/banner.component.spec.ts
@@ -20,14 +20,10 @@ describe('BannerComponent (inline template)', () => {
expect(h1.textContent).toEqual('');
});
- it('should display original title', () => {
+ it('should display the component', () => {
fixture.detectChanges();
- expect(h1.textContent).toContain(component.title);
- });
- it('should display original title after detectChanges()', () => {
- fixture.detectChanges();
- expect(h1.textContent).toContain(component.title);
+ expect(fixture.debugElement.nativeElement).toMatchSnapshot();
});
it('should display a different test title', () => {
diff --git a/examples/example-app-monorepo/package.json b/examples/example-app-monorepo/package.json
index 7b35713eea..4ebbd74824 100644
--- a/examples/example-app-monorepo/package.json
+++ b/examples/example-app-monorepo/package.json
@@ -1,6 +1,6 @@
{
"name": "example-app-monorepo",
- "version": "13.0.0",
+ "version": "17.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
diff --git a/examples/example-app-v15/jest-esm.config.mjs b/examples/example-app-v15/jest-esm.config.mjs
index 4dc972336c..9b2baed806 100644
--- a/examples/example-app-v15/jest-esm.config.mjs
+++ b/examples/example-app-v15/jest-esm.config.mjs
@@ -1,14 +1,8 @@
import ngPreset from 'jest-preset-angular/presets/index.js';
-globalThis.ngJest = {
- skipNgcc: false,
- tsconfig: 'tsconfig-esm.spec.json',
-};
-
/** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */
const jestConfig = {
...ngPreset.defaultsESM,
- globalSetup: 'jest-preset-angular/global-setup.mjs',
moduleNameMapper: {
tslib: 'tslib/tslib.es6.js',
rxjs: '/node_modules/rxjs/dist/bundles/rxjs.umd.js',
diff --git a/examples/example-app-v15/jest.config.js b/examples/example-app-v15/jest.config.js
index 4e0c21a84d..e12aaef9e8 100644
--- a/examples/example-app-v15/jest.config.js
+++ b/examples/example-app-v15/jest.config.js
@@ -1,16 +1,9 @@
const { pathsToModuleNameMapper } = require('ts-jest');
const { paths } = require('./tsconfig.json').compilerOptions;
-// eslint-disable-next-line no-undef
-globalThis.ngJest = {
- skipNgcc: false,
- tsconfig: 'tsconfig.spec.json',
-};
-
/** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */
module.exports = {
preset: 'jest-preset-angular',
- globalSetup: 'jest-preset-angular/global-setup',
moduleNameMapper: pathsToModuleNameMapper(paths, { prefix: '' }),
setupFilesAfterEnv: ['/setup-jest.ts'],
};
diff --git a/examples/example-app-v15/src/app/banner/__snapshots__/banner.component.spec.ts.snap b/examples/example-app-v15/src/app/banner/__snapshots__/banner.component.spec.ts.snap
new file mode 100644
index 0000000000..ea6d2a8d5d
--- /dev/null
+++ b/examples/example-app-v15/src/app/banner/__snapshots__/banner.component.spec.ts.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BannerComponent (inline template) should display the component 1`] = `
+
+
+ Test Tour of Heroes
+
+
+`;
diff --git a/examples/example-app-v15/src/app/banner/banner.component.spec.ts b/examples/example-app-v15/src/app/banner/banner.component.spec.ts
index 2a82b1702a..ffbd5f15bb 100644
--- a/examples/example-app-v15/src/app/banner/banner.component.spec.ts
+++ b/examples/example-app-v15/src/app/banner/banner.component.spec.ts
@@ -20,14 +20,10 @@ describe('BannerComponent (inline template)', () => {
expect(h1.textContent).toEqual('');
});
- it('should display original title', () => {
+ it('should display the component', () => {
fixture.detectChanges();
- expect(h1.textContent).toContain(component.title);
- });
- it('should display original title after detectChanges()', () => {
- fixture.detectChanges();
- expect(h1.textContent).toContain(component.title);
+ expect(fixture.debugElement.nativeElement).toMatchSnapshot();
});
it('should display a different test title', () => {
diff --git a/examples/example-app-v17/jest-esm.config.mjs b/examples/example-app-v17/jest-esm.config.mjs
index 4de5be9f24..9b2baed806 100644
--- a/examples/example-app-v17/jest-esm.config.mjs
+++ b/examples/example-app-v17/jest-esm.config.mjs
@@ -1,9 +1,5 @@
import ngPreset from 'jest-preset-angular/presets/index.js';
-globalThis.ngJest = {
- tsconfig: 'tsconfig-esm.spec.json',
-};
-
/** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */
const jestConfig = {
...ngPreset.defaultsESM,
diff --git a/examples/example-app-v17/jest.config.js b/examples/example-app-v17/jest.config.js
index a96aeb5470..e12aaef9e8 100644
--- a/examples/example-app-v17/jest.config.js
+++ b/examples/example-app-v17/jest.config.js
@@ -1,11 +1,6 @@
const { pathsToModuleNameMapper } = require('ts-jest');
const { paths } = require('./tsconfig.json').compilerOptions;
-// eslint-disable-next-line no-undef
-globalThis.ngJest = {
- tsconfig: 'tsconfig.spec.json',
-};
-
/** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */
module.exports = {
preset: 'jest-preset-angular',
diff --git a/examples/example-app-v17/src/app/banner/__snapshots__/banner.component.spec.ts.snap b/examples/example-app-v17/src/app/banner/__snapshots__/banner.component.spec.ts.snap
new file mode 100644
index 0000000000..ea6d2a8d5d
--- /dev/null
+++ b/examples/example-app-v17/src/app/banner/__snapshots__/banner.component.spec.ts.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BannerComponent (inline template) should display the component 1`] = `
+
+
+ Test Tour of Heroes
+
+
+`;
diff --git a/examples/example-app-v17/src/app/banner/banner.component.spec.ts b/examples/example-app-v17/src/app/banner/banner.component.spec.ts
index 38ed502948..d097fde05e 100644
--- a/examples/example-app-v17/src/app/banner/banner.component.spec.ts
+++ b/examples/example-app-v17/src/app/banner/banner.component.spec.ts
@@ -20,14 +20,10 @@ describe('BannerComponent (inline template)', () => {
expect(h1.textContent).toEqual('');
});
- it('should display original title', () => {
+ it('should display the component', () => {
fixture.detectChanges();
- expect(h1.textContent).toContain(component.title);
- });
- it('should display original title after detectChanges()', () => {
- fixture.detectChanges();
- expect(h1.textContent).toContain(component.title);
+ expect(fixture.debugElement.nativeElement).toMatchSnapshot();
});
it('should display a different test title', () => {
diff --git a/examples/example-app-yarn-workspace/packages/angular-app/jest.config.js b/examples/example-app-yarn-workspace/packages/angular-app/jest.config.js
index a96aeb5470..e12aaef9e8 100644
--- a/examples/example-app-yarn-workspace/packages/angular-app/jest.config.js
+++ b/examples/example-app-yarn-workspace/packages/angular-app/jest.config.js
@@ -1,11 +1,6 @@
const { pathsToModuleNameMapper } = require('ts-jest');
const { paths } = require('./tsconfig.json').compilerOptions;
-// eslint-disable-next-line no-undef
-globalThis.ngJest = {
- tsconfig: 'tsconfig.spec.json',
-};
-
/** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */
module.exports = {
preset: 'jest-preset-angular',
diff --git a/examples/example-app-yarn-workspace/packages/angular-app/src/app/banner/__snapshots__/banner.component.spec.ts.snap b/examples/example-app-yarn-workspace/packages/angular-app/src/app/banner/__snapshots__/banner.component.spec.ts.snap
new file mode 100644
index 0000000000..ea6d2a8d5d
--- /dev/null
+++ b/examples/example-app-yarn-workspace/packages/angular-app/src/app/banner/__snapshots__/banner.component.spec.ts.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BannerComponent (inline template) should display the component 1`] = `
+
+
+ Test Tour of Heroes
+
+
+`;
diff --git a/examples/example-app-yarn-workspace/packages/angular-app/src/app/banner/banner.component.spec.ts b/examples/example-app-yarn-workspace/packages/angular-app/src/app/banner/banner.component.spec.ts
index 38ed502948..d097fde05e 100644
--- a/examples/example-app-yarn-workspace/packages/angular-app/src/app/banner/banner.component.spec.ts
+++ b/examples/example-app-yarn-workspace/packages/angular-app/src/app/banner/banner.component.spec.ts
@@ -20,14 +20,10 @@ describe('BannerComponent (inline template)', () => {
expect(h1.textContent).toEqual('');
});
- it('should display original title', () => {
+ it('should display the component', () => {
fixture.detectChanges();
- expect(h1.textContent).toContain(component.title);
- });
- it('should display original title after detectChanges()', () => {
- fixture.detectChanges();
- expect(h1.textContent).toContain(component.title);
+ expect(fixture.debugElement.nativeElement).toMatchSnapshot();
});
it('should display a different test title', () => {
diff --git a/examples/example-app-yarn-workspace/packages/user/jest.config.js b/examples/example-app-yarn-workspace/packages/user/jest.config.js
index a96aeb5470..e12aaef9e8 100644
--- a/examples/example-app-yarn-workspace/packages/user/jest.config.js
+++ b/examples/example-app-yarn-workspace/packages/user/jest.config.js
@@ -1,11 +1,6 @@
const { pathsToModuleNameMapper } = require('ts-jest');
const { paths } = require('./tsconfig.json').compilerOptions;
-// eslint-disable-next-line no-undef
-globalThis.ngJest = {
- tsconfig: 'tsconfig.spec.json',
-};
-
/** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */
module.exports = {
preset: 'jest-preset-angular',
diff --git a/src/serializers/ng-snapshot.ts b/src/serializers/ng-snapshot.ts
index 93875f2a02..b1c5ae6687 100644
--- a/src/serializers/ng-snapshot.ts
+++ b/src/serializers/ng-snapshot.ts
@@ -1,4 +1,4 @@
-import type { ComponentRef, DebugNode, Type, ɵCssSelectorList, ɵNgModuleType } from '@angular/core';
+import type { ComponentRef, Type, ɵCssSelectorList } from '@angular/core';
import type { ComponentFixture } from '@angular/core/testing';
import type { Colors } from 'pretty-format';
@@ -21,11 +21,6 @@ interface NgComponentFixture extends ComponentFixture {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
componentInstance: Record;
}
-interface VEDebugNode {
- renderElement: {
- childNodes: DebugNode[];
- };
-}
/**
* The following types haven't been exported by jest so temporarily we copy typings from 'pretty-format'
@@ -39,36 +34,19 @@ type Indent = (indentSpaces: string) => string;
type Printer = (elementToSerialize: unknown) => string;
const attributesToRemovePatterns = ['__ngContext__'];
-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).ɵmod;
-};
-
-const print = (fixture: unknown, print: Printer, indent: Indent, opts: PluginOptions, colors: Colors): string => {
- let nodes = '';
+const print = (
+ fixture: NgComponentFixture,
+ print: Printer,
+ indent: Indent,
+ opts: PluginOptions,
+ colors: Colors,
+): string => {
let componentAttrs = '';
- let componentName = '';
- const componentRef = (fixture as NgComponentFixture).componentRef;
- const componentInstance = (fixture as NgComponentFixture).componentInstance;
-
- if (ivyEnabled()) {
- const componentDef = componentRef.componentType.ɵcmp;
- componentName = componentDef.selectors[0][0] as string;
- nodes = Array.from(componentRef.location.nativeElement.childNodes).map(print).join('');
- } else {
- componentName = componentRef._elDef.element?.name;
- nodes = (componentRef._view.nodes ?? [])
- // eslint-disable-next-line no-prototype-builtins
- .filter((node: VEDebugNode) => node?.hasOwnProperty('renderElement'))
- .map((node: VEDebugNode) => Array.from(node.renderElement.childNodes).map(print).join(''))
- .join(opts.edgeSpacing);
- }
+ const { componentRef, componentInstance } = fixture;
+ const componentDef = componentRef.componentType.ɵcmp;
+ const componentName = componentDef.selectors[0][0] as string;
+ const nodes = Array.from(componentRef.location.nativeElement.childNodes).map(print).join('');
const attributes = Object.keys(componentInstance).filter((key) => !attributesToRemovePatterns.includes(key));
if (attributes.length) {
componentAttrs += attributes