Page Not Found
We could not find what you were looking for.
Please contact the owner of the site that linked you to the original URL and let them know their link is broken.
We could not find what you were looking for.
Please contact the owner of the site that linked you to the original URL and let them know their link is broken.
ChangeDetectionStrategy.OnPush is used",id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",level:3},{value:"The animation trigger "transformMenu" has failed",id:"the-animation-trigger-transformmenu-has-failed",level:3},{value:"Unexpected token [import|export|other]",id:"unexpected-token-importexportother",level:3},{value:"Allow vendor libraries like jQuery, etc...",id:"allow-vendor-libraries-like-jquery-etc",level:3},{value:"Coverage fail but tests pass",id:"coverage-fail-but-tests-pass",level:3},{value:"Resolver needed for some javascript library or nested dependencies",id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",level:3},{value:"Javascript library",id:"javascript-library",level:4},{value:"Nested dependency (node_modules package within another package node_nodules)",id:"nested-dependency-node_modules-package-within-another-package-node_nodules",level:4},{value:"Resolution",id:"resolution",level:4},{value:"Inject dependencies with TypeScript interface or exported namespace",id:"inject-dependencies-with-typescript-interface-or-exported-namespace",level:3}];function c(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nrequire('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// jestGlobalMocks.ts\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.ChangeDetectionStrategy.OnPush is used",id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",level:3},{value:"The animation trigger "transformMenu" has failed",id:"the-animation-trigger-transformmenu-has-failed",level:3},{value:"Unexpected token [import|export|other]",id:"unexpected-token-importexportother",level:3},{value:"Allow vendor libraries like jQuery, etc...",id:"allow-vendor-libraries-like-jquery-etc",level:3},{value:"Coverage fail but tests pass",id:"coverage-fail-but-tests-pass",level:3},{value:"Resolver needed for some javascript library or nested dependencies",id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",level:3},{value:"Javascript library",id:"javascript-library",level:4},{value:"Nested dependency (node_modules package within another package node_nodules)",id:"nested-dependency-node_modules-package-within-another-package-node_nodules",level:4},{value:"Resolution",id:"resolution",level:4},{value:"Inject dependencies with TypeScript interface or exported namespace",id:"inject-dependencies-with-typescript-interface-or-exported-namespace",level:3}];function c(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nrequire('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// jestGlobalMocks.ts\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.ChangeDetectionStrategy.OnPush is used",id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",level:3},{value:"The animation trigger "transformMenu" has failed",id:"the-animation-trigger-transformmenu-has-failed",level:3},{value:"Unexpected token [import|export|other]",id:"unexpected-token-importexportother",level:3},{value:"Allow vendor libraries like jQuery, etc...",id:"allow-vendor-libraries-like-jquery-etc",level:3},{value:"Coverage fail but tests pass",id:"coverage-fail-but-tests-pass",level:3},{value:"Resolver needed for some javascript library or nested dependencies",id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",level:3},{value:"Javascript library",id:"javascript-library",level:4},{value:"Nested dependency (node_modules package within another package node_nodules)",id:"nested-dependency-node_modules-package-within-another-package-node_nodules",level:4},{value:"Resolution",id:"resolution",level:4}];function c(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"Object.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.ChangeDetectionStrategy.OnPush is used",id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",level:3},{value:"The animation trigger "transformMenu" has failed",id:"the-animation-trigger-transformmenu-has-failed",level:3},{value:"Unexpected token [import|export|other]",id:"unexpected-token-importexportother",level:3},{value:"Allow vendor libraries like jQuery, etc...",id:"allow-vendor-libraries-like-jquery-etc",level:3},{value:"Coverage fail but tests pass",id:"coverage-fail-but-tests-pass",level:3},{value:"Resolver needed for some javascript library or nested dependencies",id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",level:3},{value:"Javascript library",id:"javascript-library",level:4},{value:"Nested dependency (node_modules package within another package node_nodules)",id:"nested-dependency-node_modules-package-within-another-package-node_nodules",level:4},{value:"Resolution",id:"resolution",level:4}];function c(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"Object.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.html-comment)",id:"remove-html-comments-html-comment",level:3},{value:"In Jest config",id:"in-jest-config",level:4},{value:"Or in setup test environment file",id:"or-in-setup-test-environment-file",level:4},{value:"Or in individual test files",id:"or-in-individual-test-files",level:4},{value:"Display component HTML (ng-snapshot)",id:"display-component-html-ng-snapshot",level:3},{value:"Configuration options",id:"configuration-options",level:4},{value:"In Jest config",id:"in-jest-config-1",level:4},{value:"Or in setup test environment file",id:"or-in-setup-test-environment-file-1",level:4},{value:"Or in individual test files",id:"or-in-individual-test-files-1",level:4},{value:"With options",id:"with-options",level:4},{value:"Remove Angular attributes (no-ng-attributes)",id:"remove-angular-attributes-no-ng-attributes",level:3},{value:"In Jest config",id:"in-jest-config-2",level:4},{value:"Or in setup test environment file",id:"or-in-setup-test-environment-file-2",level:4},{value:"Or in individual test files",id:"or-in-individual-test-files-2",level:4}];function m(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," provides several snapshot serializers to generate clearer and more human-readable snapshot."]}),"\n",(0,s.jsx)(n.admonition,{type:"info",children:(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"BY DEFAULT"}),", the ",(0,s.jsx)(n.a,{href:"/jest-preset-angular/docs/getting-started/presets",children:"preset"})," provides all of the snapshot serializers below."]})}),"\n",(0,s.jsx)(n.h2,{id:"snapshot-serializers",children:"Snapshot serializers"}),"\n","\n",(0,s.jsx)(a.Z,{toc:h.slice(2)}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h2,{id:"reference",children:"Reference"}),"\n",(0,s.jsxs)(n.h3,{id:"remove-html-comments-html-comment",children:["Remove html comments (",(0,s.jsx)(n.code,{children:"html-comment"}),")"]}),"\n",(0,s.jsx)(n.p,{children:"Allow removing all the comments in the component HTML in snapshot."}),"\n",(0,s.jsx)(n.p,{children:"Examples:"}),"\n",(0,s.jsx)(n.h4,{id:"in-jest-config",children:"In Jest config"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/html-comment'],\n //[...]\n};\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/html-comment'],\n //[...]\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-setup-test-environment-file",children:"Or in setup test environment file"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="setup-jest.js"',children:"const removeHtmlCommentsSerializer = require('jest-preset-angular/build/serializers/html-comment');\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import removeHtmlCommentsSerializer from 'jest-preset-angular/build/serializers/html-comment';\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n"})})]})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-individual-test-files",children:"Or in individual test files"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const removeHtmlCommentsSerializer = require('jest-preset-angular/build/serializers/html-comment');\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import removeHtmlCommentsSerializer from 'jest-preset-angular/build/serializers/html-comment';\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})})]}),"\n",(0,s.jsxs)(n.h3,{id:"display-component-html-ng-snapshot",children:["Display component HTML (",(0,s.jsx)(n.code,{children:"ng-snapshot"}),")"]}),"\n",(0,s.jsx)(n.p,{children:"Allow displaying component HTML with data in snapshot."}),"\n",(0,s.jsx)(n.h4,{id:"configuration-options",children:"Configuration options"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"type NgSnapshotOptions = {\n omitAllCompAttrs?: boolean;\n};\n"})}),"\n",(0,s.jsx)(n.p,{children:"Configure snapshot behavior"}),"\n",(0,s.jsx)(n.p,{children:"Examples:"}),"\n",(0,s.jsx)(n.h4,{id:"in-jest-config-1",children:"In Jest config"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/ng-snapshot'],\n //[...]\n};\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/ng-snapshot'],\n //[...]\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-setup-test-environment-file-1",children:"Or in setup test environment file"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="setup-jest.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n"})})]})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-individual-test-files-1",children:"Or in individual test files"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"with-options",children:"With options"}),"\n",(0,s.jsxs)(n.admonition,{title:"Effective priority",type:"info",children:[(0,s.jsx)(n.p,{children:"The configured serializers will have affect in this order:"}),(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"Jest config"})," -> ",(0,s.jsx)(n.code,{children:"setup files"})," -> ",(0,s.jsx)(n.code,{children:"test files"})]}),(0,s.jsx)(n.p,{children:"The later the higher priority. This means that with the same serializer, the later one will override the configuration\nof the previous one in the chain."})]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"In setup files:"}),"\n"]}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="setup-jest.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="setup-jest.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n"})})]})]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"or in individual test files:"}),"\n"]}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n\nit('should work', () => {\n //[...]\n});\n"})})})]}),"\n",(0,s.jsxs)(n.h3,{id:"remove-angular-attributes-no-ng-attributes",children:["Remove Angular attributes (",(0,s.jsx)(n.code,{children:"no-ng-attributes"}),")"]}),"\n",(0,s.jsxs)(n.p,{children:["Allow removing attributes generated by Angular fixture, like ",(0,s.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,s.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,s.jsx)(n.code,{children:"_ngcontent-c*"})," etc., from component snapshot"]}),"\n",(0,s.jsx)(n.p,{children:"Examples:"}),"\n",(0,s.jsx)(n.h4,{id:"in-jest-config-2",children:"In Jest config"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/no-ng-attributes'],\n //[...]\n};\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/no-ng-attributes'],\n //[...]\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-setup-test-environment-file-2",children:"Or in setup test environment file"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="setup-jest.js"',children:"const removeNgAttributes = require('jest-preset-angular/build/serializers/no-ng-attributes');\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import removeNgAttributes from 'jest-preset-angular/build/serializers/no-ng-attributes';\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n"})})]})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-individual-test-files-2",children:"Or in individual test files"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const removeNgAttributes = require('jest-preset-angular/build/serializers/no-ng-attributes');\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import removeNgAttributes from 'jest-preset-angular/build/serializers/no-ng-attributes';\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n\nit('should work', () => {\n //[...]\n});\n"})})})]})]})}function j(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(m,{...e})}):m(e)}}}]);
\ No newline at end of file
diff --git a/assets/js/33a5adb4.fc17da8d.js b/assets/js/33a5adb4.fc17da8d.js
deleted file mode 100644
index bf904933c8..0000000000
--- a/assets/js/33a5adb4.fc17da8d.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1591],{2153:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>p,default:()=>j,frontMatter:()=>o,metadata:()=>c,toc:()=>h});var s=t(5893),i=t(1151),r=t(3992),l=t(425),a=t(8839);const o={id:"snapshot-testing",title:"Snapshot testing"},p=void 0,c={id:"guides/snapshot-testing",title:"Snapshot testing",description:"jest-preset-angular provides several snapshot serializers to generate clearer and more human-readable snapshot.",source:"@site/versioned_docs/version-14.2/guides/snapshot-testing.md",sourceDirName:"guides",slug:"/guides/snapshot-testing",permalink:"/jest-preset-angular/docs/guides/snapshot-testing",draft:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/guides/snapshot-testing.md",tags:[],version:"14.2",lastUpdatedBy:"renovate[bot]",lastUpdatedAt:1722322746e3,frontMatter:{id:"snapshot-testing",title:"Snapshot testing"},sidebar:"docs",previous:{title:"Configure other JSDOM versions",permalink:"/jest-preset-angular/docs/guides/jsdom-version"},next:{title:"Using with Babel",permalink:"/jest-preset-angular/docs/guides/using-with-babel"}},d={},h=[{value:"Snapshot serializers",id:"snapshot-serializers",level:2},{value:"Reference",id:"reference",level:2},{value:"Remove html comments (html-comment)",id:"remove-html-comments-html-comment",level:3},{value:"In Jest config",id:"in-jest-config",level:4},{value:"Or in setup test environment file",id:"or-in-setup-test-environment-file",level:4},{value:"Or in individual test files",id:"or-in-individual-test-files",level:4},{value:"Display component HTML (ng-snapshot)",id:"display-component-html-ng-snapshot",level:3},{value:"Configuration options",id:"configuration-options",level:4},{value:"In Jest config",id:"in-jest-config-1",level:4},{value:"Or in setup test environment file",id:"or-in-setup-test-environment-file-1",level:4},{value:"Or in individual test files",id:"or-in-individual-test-files-1",level:4},{value:"With options",id:"with-options",level:4},{value:"Remove Angular attributes (no-ng-attributes)",id:"remove-angular-attributes-no-ng-attributes",level:3},{value:"In Jest config",id:"in-jest-config-2",level:4},{value:"Or in setup test environment file",id:"or-in-setup-test-environment-file-2",level:4},{value:"Or in individual test files",id:"or-in-individual-test-files-2",level:4}];function m(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," provides several snapshot serializers to generate clearer and more human-readable snapshot."]}),"\n",(0,s.jsx)(n.admonition,{type:"info",children:(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"BY DEFAULT"}),", the ",(0,s.jsx)(n.a,{href:"/jest-preset-angular/docs/getting-started/presets",children:"preset"})," provides all of the snapshot serializers below."]})}),"\n",(0,s.jsx)(n.h2,{id:"snapshot-serializers",children:"Snapshot serializers"}),"\n","\n",(0,s.jsx)(a.Z,{toc:h.slice(2)}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h2,{id:"reference",children:"Reference"}),"\n",(0,s.jsxs)(n.h3,{id:"remove-html-comments-html-comment",children:["Remove html comments (",(0,s.jsx)(n.code,{children:"html-comment"}),")"]}),"\n",(0,s.jsx)(n.p,{children:"Allow removing all the comments in the component HTML in snapshot."}),"\n",(0,s.jsx)(n.p,{children:"Examples:"}),"\n",(0,s.jsx)(n.h4,{id:"in-jest-config",children:"In Jest config"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/html-comment'],\n //[...]\n};\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/html-comment'],\n //[...]\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-setup-test-environment-file",children:"Or in setup test environment file"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="setup-jest.js"',children:"const removeHtmlCommentsSerializer = require('jest-preset-angular/build/serializers/html-comment');\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import removeHtmlCommentsSerializer from 'jest-preset-angular/build/serializers/html-comment';\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n"})})]})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-individual-test-files",children:"Or in individual test files"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const removeHtmlCommentsSerializer = require('jest-preset-angular/build/serializers/html-comment');\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import removeHtmlCommentsSerializer from 'jest-preset-angular/build/serializers/html-comment';\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})})]}),"\n",(0,s.jsxs)(n.h3,{id:"display-component-html-ng-snapshot",children:["Display component HTML (",(0,s.jsx)(n.code,{children:"ng-snapshot"}),")"]}),"\n",(0,s.jsx)(n.p,{children:"Allow displaying component HTML with data in snapshot."}),"\n",(0,s.jsx)(n.h4,{id:"configuration-options",children:"Configuration options"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"type NgSnapshotOptions = {\n omitAllCompAttrs?: boolean;\n};\n"})}),"\n",(0,s.jsx)(n.p,{children:"Configure snapshot behavior"}),"\n",(0,s.jsx)(n.p,{children:"Examples:"}),"\n",(0,s.jsx)(n.h4,{id:"in-jest-config-1",children:"In Jest config"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/ng-snapshot'],\n //[...]\n};\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/ng-snapshot'],\n //[...]\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-setup-test-environment-file-1",children:"Or in setup test environment file"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="setup-jest.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n"})})]})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-individual-test-files-1",children:"Or in individual test files"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"with-options",children:"With options"}),"\n",(0,s.jsxs)(n.admonition,{title:"Effective priority",type:"info",children:[(0,s.jsx)(n.p,{children:"The configured serializers will have affect in this order:"}),(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"Jest config"})," -> ",(0,s.jsx)(n.code,{children:"setup files"})," -> ",(0,s.jsx)(n.code,{children:"test files"})]}),(0,s.jsx)(n.p,{children:"The later the higher priority. This means that with the same serializer, the later one will override the configuration\nof the previous one in the chain."})]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"In setup files:"}),"\n"]}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="setup-jest.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="setup-jest.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n"})})]})]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"or in individual test files:"}),"\n"]}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n\nit('should work', () => {\n //[...]\n});\n"})})})]}),"\n",(0,s.jsxs)(n.h3,{id:"remove-angular-attributes-no-ng-attributes",children:["Remove Angular attributes (",(0,s.jsx)(n.code,{children:"no-ng-attributes"}),")"]}),"\n",(0,s.jsxs)(n.p,{children:["Allow removing attributes generated by Angular fixture, like ",(0,s.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,s.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,s.jsx)(n.code,{children:"_ngcontent-c*"})," etc., from component snapshot"]}),"\n",(0,s.jsx)(n.p,{children:"Examples:"}),"\n",(0,s.jsx)(n.h4,{id:"in-jest-config-2",children:"In Jest config"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/no-ng-attributes'],\n //[...]\n};\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/no-ng-attributes'],\n //[...]\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-setup-test-environment-file-2",children:"Or in setup test environment file"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="setup-jest.js"',children:"const removeNgAttributes = require('jest-preset-angular/build/serializers/no-ng-attributes');\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import removeNgAttributes from 'jest-preset-angular/build/serializers/no-ng-attributes';\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n"})})]})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-individual-test-files-2",children:"Or in individual test files"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const removeNgAttributes = require('jest-preset-angular/build/serializers/no-ng-attributes');\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import removeNgAttributes from 'jest-preset-angular/build/serializers/no-ng-attributes';\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n\nit('should work', () => {\n //[...]\n});\n"})})})]})]})}function j(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(m,{...e})}):m(e)}}}]);
\ No newline at end of file
diff --git a/assets/js/388d3430.1a49bf41.js b/assets/js/388d3430.1a49bf41.js
deleted file mode 100644
index 1b30be64de..0000000000
--- a/assets/js/388d3430.1a49bf41.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[851],{1723:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>g,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var t=s(5893),r=s(1151),a=s(3992),o=s(425);const i={id:"angular-13+",title:"Angular >=13"},l=void 0,u={id:"guides/angular-13+",title:"Angular >=13",description:"Angular 13 introduces ESM package format for Angular packages. jest-preset-angular",source:"@site/versioned_docs/version-14.0/guides/angular-13+.md",sourceDirName:"guides",slug:"/guides/angular-13+",permalink:"/jest-preset-angular/docs/14.0/guides/angular-13+",draft:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/guides/angular-13+.md",tags:[],version:"14.0",lastUpdatedBy:"renovate[bot]",lastUpdatedAt:1722322746e3,frontMatter:{id:"angular-13+",title:"Angular >=13"},sidebar:"docs",previous:{title:"Angular Ivy",permalink:"/jest-preset-angular/docs/14.0/guides/angular-ivy"},next:{title:"ESM Support",permalink:"/jest-preset-angular/docs/14.0/guides/esm-support"}},c={},d=[{value:"Migration steps from Angular < 13",id:"migration-steps-from-angular--13",level:2},{value:"Using ES Modules",id:"using-es-modules",level:3},{value:"Potential issues with Angular 13 ESM package format and workaround",id:"potential-issues-with-angular-13-esm-package-format-and-workaround",level:2},{value:"Cannot find modules error when importing any deep paths from Angular ESM format packages",id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",level:3},{value:"Usage with Angular libraries which are built with Angular CLI 13",id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",level:3},{value:"Usage with Ionic 6 or 7",id:"usage-with-ionic-6-or-7",level:3}];function p(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,t.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,t.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,t.jsx)(n.strong,{children:"Angular 13"})," using ",(0,t.jsx)(n.a,{href:"/jest-preset-angular/docs/14.0/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,t.jsx)(n.admonition,{type:"important",children:(0,t.jsxs)(n.p,{children:["With Jest 28 and ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,t.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,t.jsx)(n.code,{children:"ng-jest-resolver"})," is no longer required to have in Jest config. This\nresolver is also excluded from our default and default ESM presets."]})}),"\n",(0,t.jsxs)(n.p,{children:["Starting from ",(0,t.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,t.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,t.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,t.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"transform"})," is updated to include ",(0,t.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,t.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Upgrade the project to ",(0,t.jsx)(n.strong,{children:"Angular 13"})," following ",(0,t.jsx)(n.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,t.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,t.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,t.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples/example-app-v13",children:"example-app-v13"})," for an example with tests that run using ESM, and using ESM + isolated."]}),"\n",(0,t.jsxs)(n.p,{children:["Your ",(0,t.jsx)(n.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst { pathsToModuleNameMapper } = require('ts-jest/utils');\nconst { paths } = require('./tsconfig.json').compilerOptions;\n\n/** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */\nmodule.exports = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '