diff --git a/404.html b/404.html index fcb032d00e..e8c7243b04 100644 --- a/404.html +++ b/404.html @@ -14,8 +14,8 @@ - - + +
Skip to main content

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.

diff --git a/assets/js/029bedf1.1f036dae.js b/assets/js/029bedf1.213f1484.js similarity index 98% rename from assets/js/029bedf1.1f036dae.js rename to assets/js/029bedf1.213f1484.js index 001bd732f3..de34739956 100644 --- a/assets/js/029bedf1.1f036dae.js +++ b/assets/js/029bedf1.213f1484.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1180],{1152:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>a,contentTitle:()=>l,default:()=>u,frontMatter:()=>r,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-11.1/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/11.1/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/guides/using-with-babel.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/11.1/guides/jsdom-version"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/11.1/guides/absolute-imports"}}');var i=n(4848),o=n(8453);const r={id:"using-with-babel",title:"Using with Babel"},l=void 0,a={},c=[];function d(e){const s={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(s.p,{children:["If you wish to use ",(0,i.jsx)(s.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Install dependencies required by the official Jest documentation for ",(0,i.jsx)(s.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Install ",(0,i.jsx)(s.code,{children:"@babel/preset-env"})," and add ",(0,i.jsx)(s.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsxs)(s.em,{children:["Note: do not use a ",(0,i.jsx)(s.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,i.jsx)(s.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,i.jsx)(s.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,i.jsxs)(s.ol,{start:"3",children:["\n",(0,i.jsx)(s.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"module.exports = {\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})]})}function u(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>r,x:()=>l});var t=n(6540);const i={},o=t.createContext(i);function r(e){const s=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1180],{1152:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>a,contentTitle:()=>l,default:()=>u,frontMatter:()=>r,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-11.1/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/11.1/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/guides/using-with-babel.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/11.1/guides/jsdom-version"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/11.1/guides/absolute-imports"}}');var i=n(4848),o=n(8453);const r={id:"using-with-babel",title:"Using with Babel"},l=void 0,a={},c=[];function d(e){const s={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(s.p,{children:["If you wish to use ",(0,i.jsx)(s.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Install dependencies required by the official Jest documentation for ",(0,i.jsx)(s.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Install ",(0,i.jsx)(s.code,{children:"@babel/preset-env"})," and add ",(0,i.jsx)(s.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsxs)(s.em,{children:["Note: do not use a ",(0,i.jsx)(s.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,i.jsx)(s.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,i.jsx)(s.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,i.jsxs)(s.ol,{start:"3",children:["\n",(0,i.jsx)(s.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"module.exports = {\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})]})}function u(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>r,x:()=>l});var t=n(6540);const i={},o=t.createContext(i);function r(e){const s=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/02a1e558.2c6abcfc.js b/assets/js/02a1e558.50403b0b.js similarity index 99% rename from assets/js/02a1e558.2c6abcfc.js rename to assets/js/02a1e558.50403b0b.js index 31454759e2..4ec75a4033 100644 --- a/assets/js/02a1e558.2c6abcfc.js +++ b/assets/js/02a1e558.50403b0b.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4026],{3937:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-8.x/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/8.x/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/getting-started/installation.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/8.x/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/8.x/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsxs)(t.p,{children:["In your project root, create ",(0,r.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(t.p,{children:"Add the following section:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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 setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "extends": "./tsconfig.json",\n "compilerOptions": {\n "outDir": "./out-tsc/spec",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// Assuming that your global setup file is setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function j(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=m({queryString:n,groupId:r}),[j,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??j;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4026],{3937:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-8.x/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/8.x/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/getting-started/installation.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/8.x/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/8.x/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsxs)(t.p,{children:["In your project root, create ",(0,r.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(t.p,{children:"Add the following section:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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 setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "extends": "./tsconfig.json",\n "compilerOptions": {\n "outDir": "./out-tsc/spec",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// Assuming that your global setup file is setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function j(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=m({queryString:n,groupId:r}),[j,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??j;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/03be7dae.80f2b674.js b/assets/js/03be7dae.a906e59d.js similarity index 99% rename from assets/js/03be7dae.80f2b674.js rename to assets/js/03be7dae.a906e59d.js index 71cb5bec85..073cd5d9f7 100644 --- a/assets/js/03be7dae.80f2b674.js +++ b/assets/js/03be7dae.a906e59d.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4768],{2152:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>p,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/docs/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/next/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/troubleshooting.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/next/guides/absolute-imports"}}');var r=t(4848),a=t(8453),o=t(1470),i=t(9365);const l={id:"troubleshooting",title:"Troubleshooting"},c=void 0,d={},u=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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 h(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...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,{className:"language-json",metastring:'title="tsconfig.spec.json"',children:'{\n "compilerOptions": {\n "emitDecoratorMetadata": true\n }\n}\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to ",(0,r.jsx)(n.code,{children:"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 ",(0,r.jsx)(n.code,{children:"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",metastring:'title="setup-jest.ts"',children:"import 'core-js/es/reflect';\nimport '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",metastring:'title="some.component.spec.ts"',children:"beforeEach(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.jsx)(n.p,{children:"Add this to your global mock file"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest-global-mocks.ts"',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,{className:"language-shell",children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n} satisfies Config;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,r.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,r.jsx)(n.code,{children:"@angular"}),", ",(0,r.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,r.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,r.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,r.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,r.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,r.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,r.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,r.jsx)(n.p,{children:"or"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,r.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,r.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,r.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,r.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Install ",(0,r.jsx)(n.code,{children:"babel-jest"}),", ",(0,r.jsx)(n.code,{children:"@babel/core"})," and ",(0,r.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,r.jsxs)(n.li,{children:["Create a ",(0,r.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,r.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-json",metastring:'title=".babelrc"',children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Define the usage of ",(0,r.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,r.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n //...\n babelConfig: true,\n //...\n },\n ],\n },\n} satisfies Config;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n //...\n babelConfig: true,\n //...\n },\n ],\n },\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,r.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,r.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,r.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,r.jsx)(n.code,{children:"firebase"})," and ",(0,r.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,r.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-shell",children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,r.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,r.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,r.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,r.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,r.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,r.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,r.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-shell",children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,r.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,r.jsxs)(n.p,{children:["In these cases, a ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,r.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,r.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,r.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.resolver.ts"',children:"import type { SyncResolver } from 'jest-resolve';\n\nconst myResolver: SyncResolver = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n\nexport = myResolver;\n"})}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n resolver: '/src/jest.resolver.ts',\n //...\n} satisfies Config;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n resolver: '/src/jest.resolver.js',\n //...\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"inject-dependencies-with-typescript-interface-or-exported-namespace",children:"Inject dependencies with TypeScript interface or exported namespace"}),"\n",(0,r.jsxs)(n.p,{children:["Please use Angular ",(0,r.jsx)(n.a,{href:"https://angular.dev/api/core/inject",children:"inject"})," instead of ",(0,r.jsx)(n.a,{href:"https://angular.dev/api/core/Inject",children:"@Inject"}),".\nThis is because ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," has caveat when working with class constructor and decorator."]})]})}function p(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>o});t(6540);var s=t(4164);const r={tabItem:"tabItem_Ymn6"};var a=t(4848);function o(e){let{children:n,hidden:t,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,o),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>w});var s=t(6540),r=t(4164),a=t(3104),o=t(6347),i=t(205),l=t(7485),c=t(1682),d=t(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:n,children:t}=e;return(0,s.useMemo)((()=>{const e=n??function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}}))}(t);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function p(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function m(e){let{queryString:n=!1,groupId:t}=e;const r=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(r.location.search);n.set(a,e),r.replace({...r.location,search:n.toString()})}),[a,r])]}function g(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,a=h(e),[o,l]=(0,s.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!p({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const s=t.find((e=>e.default))??t[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:a}))),[c,u]=m({queryString:t,groupId:r}),[g,f]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,a]=(0,d.Dv)(t);return[r,(0,s.useCallback)((e=>{t&&a.set(e)}),[t,a])]}({groupId:r}),j=(()=>{const e=c??g;return p({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{j&&l(j)}),[j]);return{selectedValue:o,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),f(e)}),[u,f,a]),tabValues:a}}var f=t(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=t(4848);function x(e){let{className:n,block:t,selectedValue:s,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),d=e=>{const n=e.currentTarget,t=l.indexOf(n),r=i[t].value;r!==s&&(c(n),o(r))},u=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":t},n),children:i.map((e=>{let{value:n,label:t,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===n?0:-1,"aria-selected":s===n,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:a}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function y(e){const n=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...n,...e}),(0,b.jsx)(v,{...n,...e})]})}function w(e){const n=(0,f.A)();return(0,b.jsx)(y,{...e,children:u(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>i});var s=t(6540);const r={},a=s.createContext(r);function o(e){const n=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4768],{2152:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>p,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/docs/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/next/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/troubleshooting.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/next/guides/absolute-imports"}}');var r=t(4848),a=t(8453),o=t(1470),i=t(9365);const l={id:"troubleshooting",title:"Troubleshooting"},c=void 0,d={},u=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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 h(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...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,{className:"language-json",metastring:'title="tsconfig.spec.json"',children:'{\n "compilerOptions": {\n "emitDecoratorMetadata": true\n }\n}\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to ",(0,r.jsx)(n.code,{children:"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 ",(0,r.jsx)(n.code,{children:"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",metastring:'title="setup-jest.ts"',children:"import 'core-js/es/reflect';\nimport '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",metastring:'title="some.component.spec.ts"',children:"beforeEach(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.jsx)(n.p,{children:"Add this to your global mock file"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest-global-mocks.ts"',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,{className:"language-shell",children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n} satisfies Config;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,r.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,r.jsx)(n.code,{children:"@angular"}),", ",(0,r.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,r.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,r.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,r.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,r.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,r.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,r.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,r.jsx)(n.p,{children:"or"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,r.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,r.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,r.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,r.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Install ",(0,r.jsx)(n.code,{children:"babel-jest"}),", ",(0,r.jsx)(n.code,{children:"@babel/core"})," and ",(0,r.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,r.jsxs)(n.li,{children:["Create a ",(0,r.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,r.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-json",metastring:'title=".babelrc"',children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Define the usage of ",(0,r.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,r.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n //...\n babelConfig: true,\n //...\n },\n ],\n },\n} satisfies Config;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n //...\n babelConfig: true,\n //...\n },\n ],\n },\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,r.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,r.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,r.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,r.jsx)(n.code,{children:"firebase"})," and ",(0,r.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,r.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-shell",children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,r.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,r.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,r.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,r.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,r.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,r.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,r.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-shell",children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,r.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,r.jsxs)(n.p,{children:["In these cases, a ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,r.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,r.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,r.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.resolver.ts"',children:"import type { SyncResolver } from 'jest-resolve';\n\nconst myResolver: SyncResolver = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n\nexport = myResolver;\n"})}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n resolver: '/src/jest.resolver.ts',\n //...\n} satisfies Config;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n resolver: '/src/jest.resolver.js',\n //...\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"inject-dependencies-with-typescript-interface-or-exported-namespace",children:"Inject dependencies with TypeScript interface or exported namespace"}),"\n",(0,r.jsxs)(n.p,{children:["Please use Angular ",(0,r.jsx)(n.a,{href:"https://angular.dev/api/core/inject",children:"inject"})," instead of ",(0,r.jsx)(n.a,{href:"https://angular.dev/api/core/Inject",children:"@Inject"}),".\nThis is because ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," has caveat when working with class constructor and decorator."]})]})}function p(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>o});t(6540);var s=t(4164);const r={tabItem:"tabItem_Ymn6"};var a=t(4848);function o(e){let{children:n,hidden:t,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,o),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>w});var s=t(6540),r=t(4164),a=t(3104),o=t(6347),i=t(205),l=t(7485),c=t(1682),d=t(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:n,children:t}=e;return(0,s.useMemo)((()=>{const e=n??function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}}))}(t);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function p(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function m(e){let{queryString:n=!1,groupId:t}=e;const r=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(r.location.search);n.set(a,e),r.replace({...r.location,search:n.toString()})}),[a,r])]}function g(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,a=h(e),[o,l]=(0,s.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!p({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const s=t.find((e=>e.default))??t[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:a}))),[c,u]=m({queryString:t,groupId:r}),[g,f]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,a]=(0,d.Dv)(t);return[r,(0,s.useCallback)((e=>{t&&a.set(e)}),[t,a])]}({groupId:r}),j=(()=>{const e=c??g;return p({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{j&&l(j)}),[j]);return{selectedValue:o,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),f(e)}),[u,f,a]),tabValues:a}}var f=t(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=t(4848);function x(e){let{className:n,block:t,selectedValue:s,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),d=e=>{const n=e.currentTarget,t=l.indexOf(n),r=i[t].value;r!==s&&(c(n),o(r))},u=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":t},n),children:i.map((e=>{let{value:n,label:t,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===n?0:-1,"aria-selected":s===n,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:a}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function y(e){const n=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...n,...e}),(0,b.jsx)(v,{...n,...e})]})}function w(e){const n=(0,f.A)();return(0,b.jsx)(y,{...e,children:u(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>i});var s=t(6540);const r={},a=s.createContext(r);function o(e){const n=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/04ae74d1.55613779.js b/assets/js/04ae74d1.0aa8d6e8.js similarity index 99% rename from assets/js/04ae74d1.55613779.js rename to assets/js/04ae74d1.0aa8d6e8.js index 44d580a936..122a6cb1aa 100644 --- a/assets/js/04ae74d1.55613779.js +++ b/assets/js/04ae74d1.0aa8d6e8.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8889],{8533:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"The presets","source":"@site/versioned_docs/version-12.0/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/12.0/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/getting-started/presets.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/12.0/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/12.0/getting-started/options"}}');var r=s(4848),a=s(8453),o=s(1470),l=s(9365);const i={id:"presets",title:"Presets"},c=void 0,u={},d=[{value:"The presets",id:"the-presets",level:3},{value:"Basic usage",id:"basic-usage",level:3},{value:"Advanced",id:"advanced",level:3}];function p(e){const t={admonition:"admonition",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Preset name"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,r.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,r.jsx)(t.code,{children:"preset"})," key to the desired preset name in your Jest config should be enough to start\nusing TypeScript with Jest (assuming you added ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,r.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.ts\nmodule.exports = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,r.jsxs)(t.p,{children:["All presets come with default ",(0,r.jsx)(t.code,{children:"ts-jest"})," config options.\nIf you want to override any of the options, you'll need to use the JavaScript version of Jest config,\ncopy the original options and override the options you need:"]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["If you choose to override ",(0,r.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,r.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,r.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst { defaults: jestNgPreset } = require('jest-preset-angular/presets');\n// const { defaultsESM: jestNgPreset } = require('jest-preset-angular/presets')\n\nmodule.exports = {\n // [...]\n globals: {\n 'ts-jest': {\n ...jestNgPreset.globals['ts-jest'],\n // [...your overriden options]\n },\n },\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nconst jestConfig: Config = {\n // [...]\n globals: {\n 'ts-jest': {\n ...presets.defaults.globals['ts-jest'],\n // [...your overriden options]\n },\n },\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,s)=>{s.d(t,{A:()=>o});s(6540);var n=s(4164);const r={tabItem:"tabItem_Ymn6"};var a=s(4848);function o(e){let{children:t,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.A)(r.tabItem,o),hidden:s,children:t})}},1470:(e,t,s)=>{s.d(t,{A:()=>w});var n=s(6540),r=s(4164),a=s(3104),o=s(6347),l=s(205),i=s(7485),c=s(1682),u=s(679);function d(e){return n.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,n.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:s}=e;return(0,n.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:s,attributes:n,default:r}}=e;return{value:t,label:s,attributes:n,default:r}}))}(s);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,s])}function h(e){let{value:t,tabValues:s}=e;return s.some((e=>e.value===t))}function g(e){let{queryString:t=!1,groupId:s}=e;const r=(0,o.W6)(),a=function(e){let{queryString:t=!1,groupId:s}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!s)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:t,groupId:s});return[(0,i.aZ)(a),(0,n.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:s=!1,groupId:r}=e,a=p(e),[o,i]=(0,n.useState)((()=>function(e){let{defaultValue:t,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const n=s.find((e=>e.default))??s[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:a}))),[c,d]=g({queryString:s,groupId:r}),[f,j]=function(e){let{groupId:t}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(s);return[r,(0,n.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),m=(()=>{const e=c??f;return h({value:e,tabValues:a})?e:null})();(0,l.A)((()=>{m&&i(m)}),[m]);return{selectedValue:o,selectValue:(0,n.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),j(e)}),[d,j,a]),tabValues:a}}var j=s(2303);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=s(4848);function x(e){let{className:t,block:s,selectedValue:n,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,s=i.indexOf(t),r=l[s].value;r!==n&&(c(t),o(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const s=i.indexOf(e.currentTarget)+1;t=i[s]??i[0];break}case"ArrowLeft":{const s=i.indexOf(e.currentTarget)-1;t=i[s]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},t),children:l.map((e=>{let{value:t,label:s,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:n===t?0:-1,"aria-selected":n===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",m.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:a}=e;const o=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===a));return e?(0,n.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",m.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,j.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,s)=>{s.d(t,{R:()=>o,x:()=>l});var n=s(6540);const r={},a=n.createContext(r);function o(e){const t=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),n.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8889],{8533:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"The presets","source":"@site/versioned_docs/version-12.0/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/12.0/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/getting-started/presets.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/12.0/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/12.0/getting-started/options"}}');var r=s(4848),a=s(8453),o=s(1470),l=s(9365);const i={id:"presets",title:"Presets"},c=void 0,u={},d=[{value:"The presets",id:"the-presets",level:3},{value:"Basic usage",id:"basic-usage",level:3},{value:"Advanced",id:"advanced",level:3}];function p(e){const t={admonition:"admonition",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Preset name"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,r.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,r.jsx)(t.code,{children:"preset"})," key to the desired preset name in your Jest config should be enough to start\nusing TypeScript with Jest (assuming you added ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,r.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.ts\nmodule.exports = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,r.jsxs)(t.p,{children:["All presets come with default ",(0,r.jsx)(t.code,{children:"ts-jest"})," config options.\nIf you want to override any of the options, you'll need to use the JavaScript version of Jest config,\ncopy the original options and override the options you need:"]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["If you choose to override ",(0,r.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,r.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,r.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst { defaults: jestNgPreset } = require('jest-preset-angular/presets');\n// const { defaultsESM: jestNgPreset } = require('jest-preset-angular/presets')\n\nmodule.exports = {\n // [...]\n globals: {\n 'ts-jest': {\n ...jestNgPreset.globals['ts-jest'],\n // [...your overriden options]\n },\n },\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nconst jestConfig: Config = {\n // [...]\n globals: {\n 'ts-jest': {\n ...presets.defaults.globals['ts-jest'],\n // [...your overriden options]\n },\n },\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,s)=>{s.d(t,{A:()=>o});s(6540);var n=s(4164);const r={tabItem:"tabItem_Ymn6"};var a=s(4848);function o(e){let{children:t,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.A)(r.tabItem,o),hidden:s,children:t})}},1470:(e,t,s)=>{s.d(t,{A:()=>w});var n=s(6540),r=s(4164),a=s(3104),o=s(6347),l=s(205),i=s(7485),c=s(1682),u=s(679);function d(e){return n.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,n.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:s}=e;return(0,n.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:s,attributes:n,default:r}}=e;return{value:t,label:s,attributes:n,default:r}}))}(s);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,s])}function h(e){let{value:t,tabValues:s}=e;return s.some((e=>e.value===t))}function g(e){let{queryString:t=!1,groupId:s}=e;const r=(0,o.W6)(),a=function(e){let{queryString:t=!1,groupId:s}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!s)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:t,groupId:s});return[(0,i.aZ)(a),(0,n.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:s=!1,groupId:r}=e,a=p(e),[o,i]=(0,n.useState)((()=>function(e){let{defaultValue:t,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const n=s.find((e=>e.default))??s[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:a}))),[c,d]=g({queryString:s,groupId:r}),[f,j]=function(e){let{groupId:t}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(s);return[r,(0,n.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),m=(()=>{const e=c??f;return h({value:e,tabValues:a})?e:null})();(0,l.A)((()=>{m&&i(m)}),[m]);return{selectedValue:o,selectValue:(0,n.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),j(e)}),[d,j,a]),tabValues:a}}var j=s(2303);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=s(4848);function x(e){let{className:t,block:s,selectedValue:n,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,s=i.indexOf(t),r=l[s].value;r!==n&&(c(t),o(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const s=i.indexOf(e.currentTarget)+1;t=i[s]??i[0];break}case"ArrowLeft":{const s=i.indexOf(e.currentTarget)-1;t=i[s]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},t),children:l.map((e=>{let{value:t,label:s,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:n===t?0:-1,"aria-selected":n===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",m.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:a}=e;const o=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===a));return e?(0,n.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",m.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,j.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,s)=>{s.d(t,{R:()=>o,x:()=>l});var n=s(6540);const r={},a=n.createContext(r);function o(e){const t=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),n.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/04b3fc6c.cb226855.js b/assets/js/04b3fc6c.b55371ba.js similarity index 98% rename from assets/js/04b3fc6c.cb226855.js rename to assets/js/04b3fc6c.b55371ba.js index 173a73e100..888982f9db 100644 --- a/assets/js/04b3fc6c.cb226855.js +++ b/assets/js/04b3fc6c.b55371ba.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8582],{7334:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>d,default:()=>p,frontMatter:()=>i,metadata:()=>n,toc:()=>l});const n=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"The presets","source":"@site/versioned_docs/version-10.x/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/10.x/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/getting-started/presets.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/10.x/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/10.x/getting-started/options"}}');var r=s(4848),o=s(8453);const i={id:"presets",title:"Presets"},d=void 0,a={},l=[{value:"The presets",id:"the-presets",level:3},{value:"Basic usage",id:"basic-usage",level:3},{value:"Advanced",id:"advanced",level:3}];function c(e){const t={admonition:"admonition",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Preset name"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,r.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,r.jsx)(t.code,{children:"preset"})," key to the desired preset name in your Jest config should be enough to start\nusing TypeScript with Jest (assuming you added ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,r.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n"})}),"\n",(0,r.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,r.jsxs)(t.p,{children:["All presets come with default ",(0,r.jsx)(t.code,{children:"ts-jest"})," config options.\nIf you want to override any of the options, you'll need to use the JavaScript version of Jest config,\ncopy the original options and override the options you need:"]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["If you choose to override ",(0,r.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,r.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,r.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nconst { defaults: jestNgPreset } = require('jest-preset-angular/presets');\n// const { defaultsESM: jestNgPreset } = require('jest-preset-angular/presets')\n\nmodule.exports = {\n // [...]\n globals: {\n 'ts-jest': {\n ...jestNgPreset.globals['ts-jest'],\n // [...your overriden options]\n },\n },\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:["Or through TypeScript (if ",(0,r.jsx)(t.code,{children:"ts-node"})," is installed):"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// jest.config.ts\nimport type { InitialOptionsTsJest } from 'ts-jest/dist/types';\nimport { defaults as jestNgPreset } from 'jest-preset-angular/presets';\n// import { defaultsESM as jestNgPreset } from 'jest-preset-angular/presets'\n\nconst config: InitialOptionsTsJest = {\n // [...]\n globals: {\n 'ts-jest': {\n ...jestNgPreset.globals['ts-jest'],\n // [...your overriden options]\n },\n },\n};\n\nexport default config;\n"})})]})}function p(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>d});var n=s(6540);const r={},o=n.createContext(r);function i(e){const t=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8582],{7334:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>d,default:()=>p,frontMatter:()=>i,metadata:()=>n,toc:()=>l});const n=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"The presets","source":"@site/versioned_docs/version-10.x/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/10.x/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/getting-started/presets.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/10.x/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/10.x/getting-started/options"}}');var r=s(4848),o=s(8453);const i={id:"presets",title:"Presets"},d=void 0,a={},l=[{value:"The presets",id:"the-presets",level:3},{value:"Basic usage",id:"basic-usage",level:3},{value:"Advanced",id:"advanced",level:3}];function c(e){const t={admonition:"admonition",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Preset name"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,r.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,r.jsx)(t.code,{children:"preset"})," key to the desired preset name in your Jest config should be enough to start\nusing TypeScript with Jest (assuming you added ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,r.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n"})}),"\n",(0,r.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,r.jsxs)(t.p,{children:["All presets come with default ",(0,r.jsx)(t.code,{children:"ts-jest"})," config options.\nIf you want to override any of the options, you'll need to use the JavaScript version of Jest config,\ncopy the original options and override the options you need:"]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["If you choose to override ",(0,r.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,r.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,r.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nconst { defaults: jestNgPreset } = require('jest-preset-angular/presets');\n// const { defaultsESM: jestNgPreset } = require('jest-preset-angular/presets')\n\nmodule.exports = {\n // [...]\n globals: {\n 'ts-jest': {\n ...jestNgPreset.globals['ts-jest'],\n // [...your overriden options]\n },\n },\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:["Or through TypeScript (if ",(0,r.jsx)(t.code,{children:"ts-node"})," is installed):"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// jest.config.ts\nimport type { InitialOptionsTsJest } from 'ts-jest/dist/types';\nimport { defaults as jestNgPreset } from 'jest-preset-angular/presets';\n// import { defaultsESM as jestNgPreset } from 'jest-preset-angular/presets'\n\nconst config: InitialOptionsTsJest = {\n // [...]\n globals: {\n 'ts-jest': {\n ...jestNgPreset.globals['ts-jest'],\n // [...your overriden options]\n },\n },\n};\n\nexport default config;\n"})})]})}function p(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>d});var n=s(6540);const r={},o=n.createContext(r);function i(e){const t=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/05916282.d1a25342.js b/assets/js/05916282.e71bd436.js similarity index 97% rename from assets/js/05916282.d1a25342.js rename to assets/js/05916282.e71bd436.js index c110e9d3af..1132abb6a3 100644 --- a/assets/js/05916282.d1a25342.js +++ b/assets/js/05916282.e71bd436.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2502],{9387:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/versioned_docs/version-14.0/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/14.0/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/guides/absolute-imports.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/14.0/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/14.0/guides/troubleshooting"}}');var i=s(4848),n=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,i.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,i.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,i.jsxs)(t.p,{children:["More information see ",(0,i.jsx)(t.code,{children:"ts-jest"})," ",(0,i.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const i={},n=o.createContext(i);function r(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2502],{9387:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/versioned_docs/version-14.0/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/14.0/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/guides/absolute-imports.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/14.0/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/14.0/guides/troubleshooting"}}');var i=s(4848),n=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,i.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,i.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,i.jsxs)(t.p,{children:["More information see ",(0,i.jsx)(t.code,{children:"ts-jest"})," ",(0,i.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const i={},n=o.createContext(i);function r(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/05feec41.25533d31.js b/assets/js/05feec41.f986fcf9.js similarity index 96% rename from assets/js/05feec41.25533d31.js rename to assets/js/05feec41.f986fcf9.js index a72f965697..95f5de1f09 100644 --- a/assets/js/05feec41.25533d31.js +++ b/assets/js/05feec41.f986fcf9.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2032],{5553:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-14.5/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/processing.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2032],{5553:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-14.5/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/processing.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/08804573.270fa811.js b/assets/js/08804573.0d8868ce.js similarity index 99% rename from assets/js/08804573.270fa811.js rename to assets/js/08804573.0d8868ce.js index 4f53dc8b92..785b06cbd4 100644 --- a/assets/js/08804573.270fa811.js +++ b/assets/js/08804573.0d8868ce.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[108],{175:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>p,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-14.3/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/14.3/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/guides/troubleshooting.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/14.3/guides/absolute-imports"}}');var r=t(4848),a=t(8453),o=t(1470),i=t(9365);const l={id:"troubleshooting",title:"Troubleshooting"},c=void 0,d={},u=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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 h(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...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,{className:"language-json",metastring:'title="tsconfig.spec.json"',children:'{\n "compilerOptions": {\n "emitDecoratorMetadata": true\n }\n}\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to ",(0,r.jsx)(n.code,{children:"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 ",(0,r.jsx)(n.code,{children:"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",metastring:'title="setup-jest.ts"',children:"import 'core-js/es/reflect';\nimport '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",metastring:'title="some.component.spec.ts"',children:"beforeEach(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.jsx)(n.p,{children:"Add this to your global mock file"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest-global-mocks.ts"',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,{className:"language-shell",children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,r.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,r.jsx)(n.code,{children:"@angular"}),", ",(0,r.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,r.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,r.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,r.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,r.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,r.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,r.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,r.jsx)(n.p,{children:"or"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,r.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,r.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,r.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,r.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Install ",(0,r.jsx)(n.code,{children:"babel-jest"}),", ",(0,r.jsx)(n.code,{children:"@babel/core"})," and ",(0,r.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,r.jsxs)(n.li,{children:["Create a ",(0,r.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,r.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-json",metastring:'title=".babelrc"',children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Define the usage of ",(0,r.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,r.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n //...\n babelConfig: true,\n //...\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n //...\n babelConfig: true,\n //...\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,r.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,r.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,r.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,r.jsx)(n.code,{children:"firebase"})," and ",(0,r.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,r.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-shell",children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,r.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,r.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,r.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,r.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,r.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,r.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,r.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-shell",children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,r.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,r.jsxs)(n.p,{children:["In these cases, a ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,r.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,r.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,r.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.resolver.ts"',children:"import type { SyncResolver } from 'jest-resolve';\n\nconst myResolver: SyncResolver = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n\nexport = myResolver;\n"})}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n resolver: '/src/jest.resolver.ts',\n //...\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n resolver: '/src/jest.resolver.js',\n //...\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"inject-dependencies-with-typescript-interface-or-exported-namespace",children:"Inject dependencies with TypeScript interface or exported namespace"}),"\n",(0,r.jsxs)(n.p,{children:["Please use Angular ",(0,r.jsx)(n.a,{href:"https://angular.dev/api/core/inject",children:"inject"})," instead of ",(0,r.jsx)(n.a,{href:"https://angular.dev/api/core/Inject",children:"@Inject"}),".\nThis is because ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," has caveat when working with class constructor and decorator."]})]})}function p(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>o});t(6540);var s=t(4164);const r={tabItem:"tabItem_Ymn6"};var a=t(4848);function o(e){let{children:n,hidden:t,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,o),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>w});var s=t(6540),r=t(4164),a=t(3104),o=t(6347),i=t(205),l=t(7485),c=t(1682),d=t(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:n,children:t}=e;return(0,s.useMemo)((()=>{const e=n??function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}}))}(t);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function p(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function m(e){let{queryString:n=!1,groupId:t}=e;const r=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(r.location.search);n.set(a,e),r.replace({...r.location,search:n.toString()})}),[a,r])]}function g(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,a=h(e),[o,l]=(0,s.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!p({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const s=t.find((e=>e.default))??t[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:a}))),[c,u]=m({queryString:t,groupId:r}),[g,f]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,a]=(0,d.Dv)(t);return[r,(0,s.useCallback)((e=>{t&&a.set(e)}),[t,a])]}({groupId:r}),j=(()=>{const e=c??g;return p({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{j&&l(j)}),[j]);return{selectedValue:o,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),f(e)}),[u,f,a]),tabValues:a}}var f=t(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=t(4848);function x(e){let{className:n,block:t,selectedValue:s,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),d=e=>{const n=e.currentTarget,t=l.indexOf(n),r=i[t].value;r!==s&&(c(n),o(r))},u=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":t},n),children:i.map((e=>{let{value:n,label:t,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===n?0:-1,"aria-selected":s===n,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:a}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function y(e){const n=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...n,...e}),(0,b.jsx)(v,{...n,...e})]})}function w(e){const n=(0,f.A)();return(0,b.jsx)(y,{...e,children:u(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>i});var s=t(6540);const r={},a=s.createContext(r);function o(e){const n=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[108],{175:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>p,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-14.3/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/14.3/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/guides/troubleshooting.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/14.3/guides/absolute-imports"}}');var r=t(4848),a=t(8453),o=t(1470),i=t(9365);const l={id:"troubleshooting",title:"Troubleshooting"},c=void 0,d={},u=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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 h(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...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,{className:"language-json",metastring:'title="tsconfig.spec.json"',children:'{\n "compilerOptions": {\n "emitDecoratorMetadata": true\n }\n}\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to ",(0,r.jsx)(n.code,{children:"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 ",(0,r.jsx)(n.code,{children:"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",metastring:'title="setup-jest.ts"',children:"import 'core-js/es/reflect';\nimport '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",metastring:'title="some.component.spec.ts"',children:"beforeEach(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.jsx)(n.p,{children:"Add this to your global mock file"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest-global-mocks.ts"',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,{className:"language-shell",children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,r.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,r.jsx)(n.code,{children:"@angular"}),", ",(0,r.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,r.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,r.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,r.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,r.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,r.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,r.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,r.jsx)(n.p,{children:"or"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,r.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,r.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,r.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,r.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Install ",(0,r.jsx)(n.code,{children:"babel-jest"}),", ",(0,r.jsx)(n.code,{children:"@babel/core"})," and ",(0,r.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,r.jsxs)(n.li,{children:["Create a ",(0,r.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,r.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-json",metastring:'title=".babelrc"',children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Define the usage of ",(0,r.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,r.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n //...\n babelConfig: true,\n //...\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n //...\n babelConfig: true,\n //...\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,r.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,r.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,r.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,r.jsx)(n.code,{children:"firebase"})," and ",(0,r.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,r.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-shell",children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,r.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,r.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,r.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,r.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,r.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,r.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,r.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-shell",children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,r.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,r.jsxs)(n.p,{children:["In these cases, a ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,r.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,r.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,r.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.resolver.ts"',children:"import type { SyncResolver } from 'jest-resolve';\n\nconst myResolver: SyncResolver = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n\nexport = myResolver;\n"})}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n resolver: '/src/jest.resolver.ts',\n //...\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n resolver: '/src/jest.resolver.js',\n //...\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"inject-dependencies-with-typescript-interface-or-exported-namespace",children:"Inject dependencies with TypeScript interface or exported namespace"}),"\n",(0,r.jsxs)(n.p,{children:["Please use Angular ",(0,r.jsx)(n.a,{href:"https://angular.dev/api/core/inject",children:"inject"})," instead of ",(0,r.jsx)(n.a,{href:"https://angular.dev/api/core/Inject",children:"@Inject"}),".\nThis is because ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," has caveat when working with class constructor and decorator."]})]})}function p(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>o});t(6540);var s=t(4164);const r={tabItem:"tabItem_Ymn6"};var a=t(4848);function o(e){let{children:n,hidden:t,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,o),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>w});var s=t(6540),r=t(4164),a=t(3104),o=t(6347),i=t(205),l=t(7485),c=t(1682),d=t(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:n,children:t}=e;return(0,s.useMemo)((()=>{const e=n??function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}}))}(t);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function p(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function m(e){let{queryString:n=!1,groupId:t}=e;const r=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(r.location.search);n.set(a,e),r.replace({...r.location,search:n.toString()})}),[a,r])]}function g(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,a=h(e),[o,l]=(0,s.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!p({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const s=t.find((e=>e.default))??t[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:a}))),[c,u]=m({queryString:t,groupId:r}),[g,f]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,a]=(0,d.Dv)(t);return[r,(0,s.useCallback)((e=>{t&&a.set(e)}),[t,a])]}({groupId:r}),j=(()=>{const e=c??g;return p({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{j&&l(j)}),[j]);return{selectedValue:o,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),f(e)}),[u,f,a]),tabValues:a}}var f=t(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=t(4848);function x(e){let{className:n,block:t,selectedValue:s,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),d=e=>{const n=e.currentTarget,t=l.indexOf(n),r=i[t].value;r!==s&&(c(n),o(r))},u=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":t},n),children:i.map((e=>{let{value:n,label:t,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===n?0:-1,"aria-selected":s===n,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:a}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function y(e){const n=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...n,...e}),(0,b.jsx)(v,{...n,...e})]})}function w(e){const n=(0,f.A)();return(0,b.jsx)(y,{...e,children:u(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>i});var s=t(6540);const r={},a=s.createContext(r);function o(e){const n=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/097bb47a.6c781273.js b/assets/js/097bb47a.d7c73ecb.js similarity index 96% rename from assets/js/097bb47a.6c781273.js rename to assets/js/097bb47a.d7c73ecb.js index 027bb553c0..61bb283a89 100644 --- a/assets/js/097bb47a.6c781273.js +++ b/assets/js/097bb47a.d7c73ecb.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3803],{1928:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-14.3/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/14.3/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/processing.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/14.3/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/14.3/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3803],{1928:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-14.3/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/14.3/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/processing.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/14.3/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/14.3/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/09df063d.88e587f0.js b/assets/js/09df063d.824ca40b.js similarity index 99% rename from assets/js/09df063d.88e587f0.js rename to assets/js/09df063d.824ca40b.js index 23a058a63d..929fe968ef 100644 --- a/assets/js/09df063d.88e587f0.js +++ b/assets/js/09df063d.824ca40b.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5027],{7646:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-14.4/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/14.4/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/getting-started/installation.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/14.4/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/14.4/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsx)(t.p,{children:"In your project root, create a setup file with following contents:"}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsx)(t.p,{children:"Add the following section to your root Jest config"}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label":"TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label":"TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"tsconfig-cjs",label:"Tsconfig CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json5",metastring:'title="tsconfig.spec.json" tab={"label": "Tsconfig CJS"}',children:"{\n //...\n extends: './tsconfig.json',\n compilerOptions: {\n //...\n module: 'CommonJS',\n types: ['jest'],\n },\n include: ['src/**/*.spec.ts', 'src/**/*.d.ts'],\n //...\n}\n"})})}),(0,r.jsx)(o.A,{value:"tsconfig-esm",label:"Tsconfig ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="tsconfig.spec.json" tab={"label": "Tsconfig ESM"}',children:'{\n //...\n "extends": "./tsconfig.json",\n "compilerOptions": {\n //...\n "module": "ES2022",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n //...\n}\n'})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="package.json"',children:'{\n //...\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n //...\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\nimport './jest-global-mocks';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\nimport './jest-global-mocks';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest-global-mocks.ts"',children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>S});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=m({queryString:n,groupId:r}),[g,j]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??g;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),j(e)}),[d,j,a]),tabValues:a}}var j=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function S(e){const t=(0,j.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5027],{7646:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-14.4/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/14.4/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/getting-started/installation.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/14.4/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/14.4/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsx)(t.p,{children:"In your project root, create a setup file with following contents:"}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsx)(t.p,{children:"Add the following section to your root Jest config"}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label":"TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label":"TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"tsconfig-cjs",label:"Tsconfig CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json5",metastring:'title="tsconfig.spec.json" tab={"label": "Tsconfig CJS"}',children:"{\n //...\n extends: './tsconfig.json',\n compilerOptions: {\n //...\n module: 'CommonJS',\n types: ['jest'],\n },\n include: ['src/**/*.spec.ts', 'src/**/*.d.ts'],\n //...\n}\n"})})}),(0,r.jsx)(o.A,{value:"tsconfig-esm",label:"Tsconfig ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="tsconfig.spec.json" tab={"label": "Tsconfig ESM"}',children:'{\n //...\n "extends": "./tsconfig.json",\n "compilerOptions": {\n //...\n "module": "ES2022",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n //...\n}\n'})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="package.json"',children:'{\n //...\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n //...\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\nimport './jest-global-mocks';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\nimport './jest-global-mocks';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest-global-mocks.ts"',children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>S});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=m({queryString:n,groupId:r}),[g,j]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??g;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),j(e)}),[d,j,a]),tabValues:a}}var j=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function S(e){const t=(0,j.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/0d71a3f1.f29086d0.js b/assets/js/0d71a3f1.5ed637d2.js similarity index 97% rename from assets/js/0d71a3f1.f29086d0.js rename to assets/js/0d71a3f1.5ed637d2.js index 5b0f2f0fa8..ccb0bab4f2 100644 --- a/assets/js/0d71a3f1.f29086d0.js +++ b/assets/js/0d71a3f1.5ed637d2.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3316],{3961:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"If you look at setup-jest.ts,","source":"@site/versioned_docs/version-9.x/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/9.x/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/getting-started/test-environment.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/9.x/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/9.x/guides/angular-ivy"}}');var r=n(4848),i=n(8453);const o={id:"test-environment",title:"Test environment"},a=void 0,c={},d=[];function l(e){const t={a:"a",code:"code",p:"p",...(0,i.R)(),...e.components};return(0,r.jsxs)(t.p,{children:["If you look at ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/src/config/setup-jest.ts",children:(0,r.jsx)(t.code,{children:"setup-jest.ts"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/src/zone-patch",children:"jest-zone-patch"}),"\nwe also make sure Jest test methods run in Zone context. Then we initialize the Angular testing environment like normal."]})}function u(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>a});var s=n(6540);const r={},i=s.createContext(r);function o(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3316],{3961:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"If you look at setup-jest.ts,","source":"@site/versioned_docs/version-9.x/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/9.x/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/getting-started/test-environment.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/9.x/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/9.x/guides/angular-ivy"}}');var r=n(4848),i=n(8453);const o={id:"test-environment",title:"Test environment"},a=void 0,c={},d=[];function l(e){const t={a:"a",code:"code",p:"p",...(0,i.R)(),...e.components};return(0,r.jsxs)(t.p,{children:["If you look at ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/src/config/setup-jest.ts",children:(0,r.jsx)(t.code,{children:"setup-jest.ts"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/src/zone-patch",children:"jest-zone-patch"}),"\nwe also make sure Jest test methods run in Zone context. Then we initialize the Angular testing environment like normal."]})}function u(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>a});var s=n(6540);const r={},i=s.createContext(r);function o(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/0dc350cc.75d064c1.js b/assets/js/0dc350cc.a1e040a8.js similarity index 99% rename from assets/js/0dc350cc.75d064c1.js rename to assets/js/0dc350cc.a1e040a8.js index a39908b441..5127ad5305 100644 --- a/assets/js/0dc350cc.75d064c1.js +++ b/assets/js/0dc350cc.a1e040a8.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9800],{2869:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"Configure other JSDOM versions","description":"Jest v26+ by default uses JSDOM 16 to support Node 10+.","source":"@site/versioned_docs/version-14.0/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/14.0/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/guides/jsdom-version.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/14.0/guides/esm-support"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/14.0/guides/using-with-babel"}}');var s=n(4848),o=n(8453),a=n(1470),i=n(9365);const l={id:"jsdom-version",title:"Configure other JSDOM versions"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,s.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,s.jsxs)(t.p,{children:["If you need a different JSDOM version than the one that ships with Jest, you can install a jsdom environment\npackage, e.g. ",(0,s.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,s.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,s.jsx)(t.code,{children:"localStorage"})," or ",(0,s.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,s.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Reference: ",(0,s.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200",children:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200"})]})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var o=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,a),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),o=n(3104),a=n(6347),i=n(205),l=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,a.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(s.location.search);t.set(o,e),s.replace({...s.location,search:t.toString()})}),[o,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,o=p(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[u,d]=h({queryString:n,groupId:s}),[f,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,o]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return m({value:e,tabValues:o})?e:null})();(0,i.A)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),b(e)}),[d,b,o]),tabValues:o}}var b=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),c=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==r&&(u(t),a(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...o,className:(0,s.A)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9800],{2869:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"Configure other JSDOM versions","description":"Jest v26+ by default uses JSDOM 16 to support Node 10+.","source":"@site/versioned_docs/version-14.0/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/14.0/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/guides/jsdom-version.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/14.0/guides/esm-support"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/14.0/guides/using-with-babel"}}');var s=n(4848),o=n(8453),a=n(1470),i=n(9365);const l={id:"jsdom-version",title:"Configure other JSDOM versions"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,s.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,s.jsxs)(t.p,{children:["If you need a different JSDOM version than the one that ships with Jest, you can install a jsdom environment\npackage, e.g. ",(0,s.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,s.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,s.jsx)(t.code,{children:"localStorage"})," or ",(0,s.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,s.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Reference: ",(0,s.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200",children:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200"})]})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var o=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,a),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),o=n(3104),a=n(6347),i=n(205),l=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,a.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(s.location.search);t.set(o,e),s.replace({...s.location,search:t.toString()})}),[o,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,o=p(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[u,d]=h({queryString:n,groupId:s}),[f,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,o]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return m({value:e,tabValues:o})?e:null})();(0,i.A)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),b(e)}),[d,b,o]),tabValues:o}}var b=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),c=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==r&&(u(t),a(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...o,className:(0,s.A)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/0e35f71d.52fd6b39.js b/assets/js/0e35f71d.84e781ae.js similarity index 99% rename from assets/js/0e35f71d.52fd6b39.js rename to assets/js/0e35f71d.84e781ae.js index bdcf6bf2d5..16990ab3dc 100644 --- a/assets/js/0e35f71d.52fd6b39.js +++ b/assets/js/0e35f71d.84e781ae.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1672],{3230:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-12.0/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/12.0/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/guides/using-with-babel.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/12.0/guides/jsdom-version"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/12.0/guides/absolute-imports"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"using-with-babel",title:"Using with Babel"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you wish to use ",(0,r.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,r.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install ",(0,r.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,r.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsxs)(t.em,{children:["Note: do not use a ",(0,r.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,r.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,r.jsxs)(t.ol,{start:"3",children:["\n",(0,r.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function b(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[u,d]=b({queryString:n,groupId:r}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),g=(()=>{const e=u??f;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{g&&i(g)}),[g]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(4848);function v(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(u(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.A)("tabs-container",g.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1672],{3230:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-12.0/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/12.0/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/guides/using-with-babel.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/12.0/guides/jsdom-version"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/12.0/guides/absolute-imports"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"using-with-babel",title:"Using with Babel"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you wish to use ",(0,r.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,r.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install ",(0,r.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,r.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsxs)(t.em,{children:["Note: do not use a ",(0,r.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,r.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,r.jsxs)(t.ol,{start:"3",children:["\n",(0,r.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function b(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[u,d]=b({queryString:n,groupId:r}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),g=(()=>{const e=u??f;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{g&&i(g)}),[g]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(4848);function v(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(u(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.A)("tabs-container",g.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/13973f06.2d724068.js b/assets/js/13973f06.56ecd31f.js similarity index 96% rename from assets/js/13973f06.2d724068.js rename to assets/js/13973f06.56ecd31f.js index d577a23f9c..e10d42bf6a 100644 --- a/assets/js/13973f06.2d724068.js +++ b/assets/js/13973f06.56ecd31f.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1446],{5842:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-12.0/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/12.0/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/processing.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/12.0/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/12.0/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1446],{5842:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-12.0/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/12.0/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/processing.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/12.0/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/12.0/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/1438ea8f.ec08043f.js b/assets/js/1438ea8f.5371d7cf.js similarity index 99% rename from assets/js/1438ea8f.ec08043f.js rename to assets/js/1438ea8f.5371d7cf.js index e9ce06190d..c9c5e7edb3 100644 --- a/assets/js/1438ea8f.ec08043f.js +++ b/assets/js/1438ea8f.5371d7cf.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[853],{5959:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"Configure other JSDOM versions","description":"Jest v26+ by default uses JSDOM 16 to support Node 10+.","source":"@site/versioned_docs/version-14.2/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/14.2/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/guides/jsdom-version.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/14.2/guides/esm-support"},"next":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/14.2/guides/snapshot-testing"}}');var s=n(4848),o=n(8453),a=n(1470),i=n(9365);const l={id:"jsdom-version",title:"Configure other JSDOM versions"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,s.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,s.jsxs)(t.p,{children:["If you need a different JSDOM version than the one that ships with Jest, you can install a jsdom environment\npackage, e.g. ",(0,s.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,s.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,s.jsx)(t.code,{children:"localStorage"})," or ",(0,s.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,s.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Reference: ",(0,s.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200",children:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200"})]})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var o=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,a),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),o=n(3104),a=n(6347),i=n(205),l=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,a.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(s.location.search);t.set(o,e),s.replace({...s.location,search:t.toString()})}),[o,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,o=p(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[u,d]=h({queryString:n,groupId:s}),[f,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,o]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),b=(()=>{const e=u??f;return m({value:e,tabValues:o})?e:null})();(0,i.A)((()=>{b&&l(b)}),[b]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),g(e)}),[d,g,o]),tabValues:o}}var g=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),c=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==r&&(u(t),a(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...o,className:(0,s.A)("tabs__item",b.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[853],{5959:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"Configure other JSDOM versions","description":"Jest v26+ by default uses JSDOM 16 to support Node 10+.","source":"@site/versioned_docs/version-14.2/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/14.2/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/guides/jsdom-version.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/14.2/guides/esm-support"},"next":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/14.2/guides/snapshot-testing"}}');var s=n(4848),o=n(8453),a=n(1470),i=n(9365);const l={id:"jsdom-version",title:"Configure other JSDOM versions"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,s.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,s.jsxs)(t.p,{children:["If you need a different JSDOM version than the one that ships with Jest, you can install a jsdom environment\npackage, e.g. ",(0,s.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,s.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,s.jsx)(t.code,{children:"localStorage"})," or ",(0,s.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,s.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Reference: ",(0,s.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200",children:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200"})]})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var o=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,a),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),o=n(3104),a=n(6347),i=n(205),l=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,a.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(s.location.search);t.set(o,e),s.replace({...s.location,search:t.toString()})}),[o,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,o=p(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[u,d]=h({queryString:n,groupId:s}),[f,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,o]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),b=(()=>{const e=u??f;return m({value:e,tabValues:o})?e:null})();(0,i.A)((()=>{b&&l(b)}),[b]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),g(e)}),[d,g,o]),tabValues:o}}var g=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),c=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==r&&(u(t),a(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...o,className:(0,s.A)("tabs__item",b.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/14b133ce.cfede345.js b/assets/js/14b133ce.cf826a23.js similarity index 99% rename from assets/js/14b133ce.cfede345.js rename to assets/js/14b133ce.cf826a23.js index 88c0fcf2b6..cba1ffac8f 100644 --- a/assets/js/14b133ce.cfede345.js +++ b/assets/js/14b133ce.cf826a23.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1653],{1772:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>g,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"This guide is now DEPRECATED and will be removed in the next major release together with the below APIs.","source":"@site/docs/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/next/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/angular-ivy.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"TestBed environment","permalink":"/jest-preset-angular/docs/next/getting-started/testbed-environment"},"next":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/next/guides/angular-13+"}}');var s=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"angular-ivy",title:"Angular Ivy"},u=void 0,c={},d=[{value:"Control ngcc processing",id:"control-ngcc-processing",level:2}];function p(e){const t={admonition:"admonition",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.admonition,{title:"DEPRECATED",type:"warning",children:(0,s.jsxs)(t.p,{children:["This guide is now ",(0,s.jsx)(t.strong,{children:"DEPRECATED"})," and will be removed in the next major release together with the below APIs."]})}),"\n",(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,s.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,s.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," also provides a Jest global setup file to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest. Add to the following section:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n} satisfies Config;\n"})})}),(0,s.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n} satisfies Config;\n"})})})]}),"\n",(0,s.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,s.jsxs)(t.p,{children:["Since ",(0,s.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,s.jsx)(t.code,{children:"ngcc"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})}),(0,s.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nexport default {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n} satisfies Config;\n"})})})]})]})}function g(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function g(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,a=p(e),[l,i]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!g({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:s}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),b=(()=>{const e=u??f;return g({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{b&&i(b)}),[b]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),s=o[n].value;s!==r&&(u(t),l(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,s.A)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var r=n(6540);const s={},a=r.createContext(s);function l(e){const t=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1653],{1772:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>g,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"This guide is now DEPRECATED and will be removed in the next major release together with the below APIs.","source":"@site/docs/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/next/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/angular-ivy.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"TestBed environment","permalink":"/jest-preset-angular/docs/next/getting-started/testbed-environment"},"next":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/next/guides/angular-13+"}}');var s=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"angular-ivy",title:"Angular Ivy"},u=void 0,c={},d=[{value:"Control ngcc processing",id:"control-ngcc-processing",level:2}];function p(e){const t={admonition:"admonition",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.admonition,{title:"DEPRECATED",type:"warning",children:(0,s.jsxs)(t.p,{children:["This guide is now ",(0,s.jsx)(t.strong,{children:"DEPRECATED"})," and will be removed in the next major release together with the below APIs."]})}),"\n",(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,s.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,s.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," also provides a Jest global setup file to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest. Add to the following section:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n} satisfies Config;\n"})})}),(0,s.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n} satisfies Config;\n"})})})]}),"\n",(0,s.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,s.jsxs)(t.p,{children:["Since ",(0,s.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,s.jsx)(t.code,{children:"ngcc"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})}),(0,s.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nexport default {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n} satisfies Config;\n"})})})]})]})}function g(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function g(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,a=p(e),[l,i]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!g({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:s}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),b=(()=>{const e=u??f;return g({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{b&&i(b)}),[b]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),s=o[n].value;s!==r&&(u(t),l(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,s.A)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var r=n(6540);const s={},a=r.createContext(s);function l(e){const t=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/151633a5.e237ac69.js b/assets/js/151633a5.9962d109.js similarity index 95% rename from assets/js/151633a5.e237ac69.js rename to assets/js/151633a5.9962d109.js index 7e1c723875..03e85f8834 100644 --- a/assets/js/151633a5.e237ac69.js +++ b/assets/js/151633a5.9962d109.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4528],{5571:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-11.0/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/11.0/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/introduction.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/11.0/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(t.p,{children:["This is a part of the article: ",(0,o.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Starting from ",(0,o.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,o.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,o.jsx)(t.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4528],{5571:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-11.0/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/11.0/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/introduction.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/11.0/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(t.p,{children:["This is a part of the article: ",(0,o.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Starting from ",(0,o.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,o.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,o.jsx)(t.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/15a051c9.0812a68b.js b/assets/js/15a051c9.19736ee0.js similarity index 99% rename from assets/js/15a051c9.0812a68b.js rename to assets/js/15a051c9.19736ee0.js index bef7e6022f..83af7e395a 100644 --- a/assets/js/15a051c9.0812a68b.js +++ b/assets/js/15a051c9.19736ee0.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1116],{8583:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>b,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-14.3/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/14.3/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/guides/using-with-babel.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/14.3/guides/snapshot-testing"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/14.3/guides/absolute-imports"}}');var r=n(4848),a=n(8453),l=n(1470),i=n(9365);const o={id:"using-with-babel",title:"Using with Babel"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you wish to use ",(0,r.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,r.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install ",(0,r.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,r.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:'title="babel.config.js"',children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsxs)(t.em,{children:["Note: do not use a ",(0,r.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,r.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,r.jsxs)(t.ol,{start:"3",children:["\n",(0,r.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n\nexport default jestConfig;\n"})})})]})]})}function b(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),i=n(205),o=n(7485),u=n(1682),c=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function b(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,o.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,o]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!b({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:r}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),g=(()=>{const e=u??f;return b({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{g&&o(g)}),[g]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!b({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);o(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(4848);function v(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:i}=e;const o=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=o.indexOf(t),r=i[n].value;r!==s&&(u(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=o.indexOf(e.currentTarget)+1;t=o[n]??o[0];break}case"ArrowLeft":{const n=o.indexOf(e.currentTarget)-1;t=o[n]??o[o.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{o.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.A)("tabs-container",g.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>i});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1116],{8583:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>b,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-14.3/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/14.3/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/guides/using-with-babel.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/14.3/guides/snapshot-testing"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/14.3/guides/absolute-imports"}}');var r=n(4848),a=n(8453),l=n(1470),i=n(9365);const o={id:"using-with-babel",title:"Using with Babel"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you wish to use ",(0,r.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,r.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install ",(0,r.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,r.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:'title="babel.config.js"',children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsxs)(t.em,{children:["Note: do not use a ",(0,r.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,r.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,r.jsxs)(t.ol,{start:"3",children:["\n",(0,r.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n\nexport default jestConfig;\n"})})})]})]})}function b(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),i=n(205),o=n(7485),u=n(1682),c=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function b(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,o.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,o]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!b({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:r}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),g=(()=>{const e=u??f;return b({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{g&&o(g)}),[g]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!b({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);o(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(4848);function v(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:i}=e;const o=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=o.indexOf(t),r=i[n].value;r!==s&&(u(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=o.indexOf(e.currentTarget)+1;t=o[n]??o[0];break}case"ArrowLeft":{const n=o.indexOf(e.currentTarget)-1;t=o[n]??o[o.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{o.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.A)("tabs-container",g.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>i});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/164a8de7.34d2b127.js b/assets/js/164a8de7.22df287d.js similarity index 99% rename from assets/js/164a8de7.34d2b127.js rename to assets/js/164a8de7.22df287d.js index 0fdd421e9f..512547e555 100644 --- a/assets/js/164a8de7.34d2b127.js +++ b/assets/js/164a8de7.22df287d.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1795],{905:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"Configure other JSDOM versions","description":"Jest v26+ by default uses JSDOM 16 to support Node 10+.","source":"@site/versioned_docs/version-14.3/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/14.3/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/guides/jsdom-version.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/14.3/guides/esm-support"},"next":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/14.3/guides/snapshot-testing"}}');var s=n(4848),o=n(8453),a=n(1470),i=n(9365);const l={id:"jsdom-version",title:"Configure other JSDOM versions"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,s.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,s.jsxs)(t.p,{children:["If you need a different JSDOM version than the one that ships with Jest, you can install a jsdom environment\npackage, e.g. ",(0,s.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})}),(0,s.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,s.jsx)(t.code,{children:"localStorage"})," or ",(0,s.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,s.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Reference: ",(0,s.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200",children:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200"})]})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var o=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,a),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>S});var r=n(6540),s=n(4164),o=n(3104),a=n(6347),i=n(205),l=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const s=(0,a.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(s.location.search);t.set(o,e),s.replace({...s.location,search:t.toString()})}),[o,s])]}function h(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,o=p(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[u,d]=f({queryString:n,groupId:s}),[h,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,o]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),b=(()=>{const e=u??h;return m({value:e,tabValues:o})?e:null})();(0,i.A)((()=>{b&&l(b)}),[b]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),g(e)}),[d,g,o]),tabValues:o}}var g=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),c=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==r&&(u(t),a(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...o,className:(0,s.A)("tabs__item",b.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=h(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function S(e){const t=(0,g.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1795],{905:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"Configure other JSDOM versions","description":"Jest v26+ by default uses JSDOM 16 to support Node 10+.","source":"@site/versioned_docs/version-14.3/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/14.3/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/guides/jsdom-version.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/14.3/guides/esm-support"},"next":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/14.3/guides/snapshot-testing"}}');var s=n(4848),o=n(8453),a=n(1470),i=n(9365);const l={id:"jsdom-version",title:"Configure other JSDOM versions"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,s.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,s.jsxs)(t.p,{children:["If you need a different JSDOM version than the one that ships with Jest, you can install a jsdom environment\npackage, e.g. ",(0,s.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})}),(0,s.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,s.jsx)(t.code,{children:"localStorage"})," or ",(0,s.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,s.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Reference: ",(0,s.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200",children:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200"})]})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var o=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,a),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>S});var r=n(6540),s=n(4164),o=n(3104),a=n(6347),i=n(205),l=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const s=(0,a.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(s.location.search);t.set(o,e),s.replace({...s.location,search:t.toString()})}),[o,s])]}function h(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,o=p(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[u,d]=f({queryString:n,groupId:s}),[h,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,o]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),b=(()=>{const e=u??h;return m({value:e,tabValues:o})?e:null})();(0,i.A)((()=>{b&&l(b)}),[b]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),g(e)}),[d,g,o]),tabValues:o}}var g=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),c=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==r&&(u(t),a(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...o,className:(0,s.A)("tabs__item",b.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=h(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function S(e){const t=(0,g.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/1a421168.d84d8e33.js b/assets/js/1a421168.c2250fa1.js similarity index 99% rename from assets/js/1a421168.d84d8e33.js rename to assets/js/1a421168.c2250fa1.js index b36dafdba5..906ab40242 100644 --- a/assets/js/1a421168.d84d8e33.js +++ b/assets/js/1a421168.c2250fa1.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9631],{7723:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>p,default:()=>m,frontMatter:()=>c,metadata:()=>n,toc:()=>u});const n=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"This page is now DEPRECATED and will be removed in the next major release. Please visit TestBed environment configuration","source":"@site/docs/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/next/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/getting-started/test-environment.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/next/getting-started/options"},"next":{"title":"TestBed environment","permalink":"/jest-preset-angular/docs/next/getting-started/testbed-environment"}}');var i=s(4848),r=s(8453),o=s(1470),a=s(9365),l=s(4252);const c={id:"test-environment",title:"Test environment"},p=void 0,d={},u=[{value:"Functions",id:"functions",level:2},{value:"setupZoneTestEnv(options)",id:"setupzonetestenvoptions",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Example:",id:"example",level:4},{value:"setupZonelessTestEnv(options)",id:"setupzonelesstestenvoptions",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Example:",id:"example-1",level:4}];function h(e){const t={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,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.admonition,{title:"DEPRECATED",type:"warning",children:(0,i.jsxs)(t.p,{children:["This page is now ",(0,i.jsx)(t.strong,{children:"DEPRECATED"})," and will be removed in the next major release. Please visit ",(0,i.jsx)(t.a,{href:"/jest-preset-angular/docs/next/getting-started/testbed-environment",children:"TestBed environment configuration"})]})}),"\n",(0,i.jsx)(t.p,{children:"In Jest, a test environment defines the sandbox context in which your tests run.\nFor Angular projects, setting up the correct test environment is essential to ensure compatibility with the\nframework-specific features, such as dependency injection and change detection."}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"jest-preset-angular"})," provides utility functions to simplify setting up a Jest test environment tailored for Angular projects.\nThese functions support both ",(0,i.jsx)(t.strong,{children:"zone-based"})," and ",(0,i.jsx)(t.strong,{children:"zoneless"})," environments, catering to different testing needs."]}),"\n",(0,i.jsx)(t.h2,{id:"functions",children:"Functions"}),"\n","\n",(0,i.jsx)(l.A,{toc:u.slice(1)}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.h3,{id:"setupzonetestenvoptions",children:(0,i.jsx)(t.code,{children:"setupZoneTestEnv(options)"})}),"\n",(0,i.jsxs)(t.p,{children:["Configures a test environment that uses ",(0,i.jsx)(t.code,{children:"zone.js"}),", which is the mechanism for tracking asynchronous operations.\nIt is suitable for most Angular applications that rely on ",(0,i.jsx)(t.code,{children:"zone.js"})," for change detection and other framework features."]}),"\n",(0,i.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,i.jsx)(t.h4,{id:"parameters",children:"Parameters"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"options"}),(0,i.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,i.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"example",children:"Example:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsx)(t.h3,{id:"setupzonelesstestenvoptions",children:(0,i.jsx)(t.code,{children:"setupZonelessTestEnv(options)"})}),"\n",(0,i.jsxs)(t.p,{children:["Configures a test environment that ",(0,i.jsx)(t.strong,{children:"DOESN'T"})," use ",(0,i.jsx)(t.code,{children:"zone.js"}),", as described in ",(0,i.jsx)(t.a,{href:"https://angular.dev/guide/experimental/zoneless",children:"Angular experimental zoneless guide"}),".\nIt is designed for projects that have disabled ",(0,i.jsx)(t.code,{children:"zone.js"}),", which can lead to improved performance and simplified testing."]}),"\n",(0,i.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,i.jsx)(t.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"options"}),(0,i.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,i.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"example-1",children:"Example:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless/index.mjs';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]})]})}function m(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9631],{7723:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>p,default:()=>m,frontMatter:()=>c,metadata:()=>n,toc:()=>u});const n=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"This page is now DEPRECATED and will be removed in the next major release. Please visit TestBed environment configuration","source":"@site/docs/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/next/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/getting-started/test-environment.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/next/getting-started/options"},"next":{"title":"TestBed environment","permalink":"/jest-preset-angular/docs/next/getting-started/testbed-environment"}}');var i=s(4848),r=s(8453),o=s(1470),a=s(9365),l=s(4252);const c={id:"test-environment",title:"Test environment"},p=void 0,d={},u=[{value:"Functions",id:"functions",level:2},{value:"setupZoneTestEnv(options)",id:"setupzonetestenvoptions",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Example:",id:"example",level:4},{value:"setupZonelessTestEnv(options)",id:"setupzonelesstestenvoptions",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Example:",id:"example-1",level:4}];function h(e){const t={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,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.admonition,{title:"DEPRECATED",type:"warning",children:(0,i.jsxs)(t.p,{children:["This page is now ",(0,i.jsx)(t.strong,{children:"DEPRECATED"})," and will be removed in the next major release. Please visit ",(0,i.jsx)(t.a,{href:"/jest-preset-angular/docs/next/getting-started/testbed-environment",children:"TestBed environment configuration"})]})}),"\n",(0,i.jsx)(t.p,{children:"In Jest, a test environment defines the sandbox context in which your tests run.\nFor Angular projects, setting up the correct test environment is essential to ensure compatibility with the\nframework-specific features, such as dependency injection and change detection."}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"jest-preset-angular"})," provides utility functions to simplify setting up a Jest test environment tailored for Angular projects.\nThese functions support both ",(0,i.jsx)(t.strong,{children:"zone-based"})," and ",(0,i.jsx)(t.strong,{children:"zoneless"})," environments, catering to different testing needs."]}),"\n",(0,i.jsx)(t.h2,{id:"functions",children:"Functions"}),"\n","\n",(0,i.jsx)(l.A,{toc:u.slice(1)}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.h3,{id:"setupzonetestenvoptions",children:(0,i.jsx)(t.code,{children:"setupZoneTestEnv(options)"})}),"\n",(0,i.jsxs)(t.p,{children:["Configures a test environment that uses ",(0,i.jsx)(t.code,{children:"zone.js"}),", which is the mechanism for tracking asynchronous operations.\nIt is suitable for most Angular applications that rely on ",(0,i.jsx)(t.code,{children:"zone.js"})," for change detection and other framework features."]}),"\n",(0,i.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,i.jsx)(t.h4,{id:"parameters",children:"Parameters"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"options"}),(0,i.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,i.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"example",children:"Example:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsx)(t.h3,{id:"setupzonelesstestenvoptions",children:(0,i.jsx)(t.code,{children:"setupZonelessTestEnv(options)"})}),"\n",(0,i.jsxs)(t.p,{children:["Configures a test environment that ",(0,i.jsx)(t.strong,{children:"DOESN'T"})," use ",(0,i.jsx)(t.code,{children:"zone.js"}),", as described in ",(0,i.jsx)(t.a,{href:"https://angular.dev/guide/experimental/zoneless",children:"Angular experimental zoneless guide"}),".\nIt is designed for projects that have disabled ",(0,i.jsx)(t.code,{children:"zone.js"}),", which can lead to improved performance and simplified testing."]}),"\n",(0,i.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,i.jsx)(t.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"options"}),(0,i.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,i.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"example-1",children:"Example:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless/index.mjs';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]})]})}function m(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}}}]); \ No newline at end of file diff --git a/assets/js/1a5572f6.2eb030f1.js b/assets/js/1a5572f6.0276c3f4.js similarity index 99% rename from assets/js/1a5572f6.2eb030f1.js rename to assets/js/1a5572f6.0276c3f4.js index 788623fc2b..ce84f892e6 100644 --- a/assets/js/1a5572f6.2eb030f1.js +++ b/assets/js/1a5572f6.0276c3f4.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3676],{1037:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>g,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"This step is OPTIONAL","source":"@site/versioned_docs/version-14.0/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/14.0/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/guides/angular-ivy.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/14.0/getting-started/test-environment"},"next":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/14.0/guides/angular-13+"}}');var s=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"angular-ivy",title:"Angular Ivy"},u=void 0,c={},d=[{value:"Control ngcc processing",id:"control-ngcc-processing",level:2}];function p(e){const t={admonition:"admonition",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["This step is ",(0,s.jsx)(t.strong,{children:"OPTIONAL"})]})}),"\n",(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,s.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,s.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," also provides a Jest global setup file to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest. Add to the following section:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,s.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,s.jsxs)(t.p,{children:["Since ",(0,s.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,s.jsx)(t.code,{children:"ngcc"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nmodule.exports = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,s.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function g(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,a=p(e),[l,i]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!g({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:s}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),b=(()=>{const e=u??f;return g({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{b&&i(b)}),[b]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),s=o[n].value;s!==r&&(u(t),l(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,s.A)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var r=n(6540);const s={},a=r.createContext(s);function l(e){const t=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3676],{1037:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>g,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"This step is OPTIONAL","source":"@site/versioned_docs/version-14.0/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/14.0/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/guides/angular-ivy.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/14.0/getting-started/test-environment"},"next":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/14.0/guides/angular-13+"}}');var s=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"angular-ivy",title:"Angular Ivy"},u=void 0,c={},d=[{value:"Control ngcc processing",id:"control-ngcc-processing",level:2}];function p(e){const t={admonition:"admonition",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["This step is ",(0,s.jsx)(t.strong,{children:"OPTIONAL"})]})}),"\n",(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,s.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,s.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," also provides a Jest global setup file to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest. Add to the following section:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,s.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,s.jsxs)(t.p,{children:["Since ",(0,s.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,s.jsx)(t.code,{children:"ngcc"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nmodule.exports = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,s.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function g(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,a=p(e),[l,i]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!g({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:s}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),b=(()=>{const e=u??f;return g({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{b&&i(b)}),[b]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),s=o[n].value;s!==r&&(u(t),l(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,s.A)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var r=n(6540);const s={},a=r.createContext(s);function l(e){const t=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/1d8e39f8.7f45f7b4.js b/assets/js/1d8e39f8.43776967.js similarity index 99% rename from assets/js/1d8e39f8.7f45f7b4.js rename to assets/js/1d8e39f8.43776967.js index 6e2983dbe9..4e46d82d4e 100644 --- a/assets/js/1d8e39f8.7f45f7b4.js +++ b/assets/js/1d8e39f8.43776967.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4611],{365:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"Configure other JSDOM versions","description":"Jest v26+ by default uses JSDOM 16 to support Node 10+.","source":"@site/versioned_docs/version-14.4/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/14.4/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/guides/jsdom-version.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/14.4/guides/esm-support"},"next":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/14.4/guides/snapshot-testing"}}');var s=n(4848),o=n(8453),a=n(1470),i=n(9365);const l={id:"jsdom-version",title:"Configure other JSDOM versions"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,s.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,s.jsxs)(t.p,{children:["If you need a different JSDOM version than the one that ships with Jest, you can install a jsdom environment\npackage, e.g. ",(0,s.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})}),(0,s.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,s.jsx)(t.code,{children:"localStorage"})," or ",(0,s.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,s.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Reference: ",(0,s.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200",children:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200"})]})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var o=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,a),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>S});var r=n(6540),s=n(4164),o=n(3104),a=n(6347),i=n(205),l=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const s=(0,a.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(s.location.search);t.set(o,e),s.replace({...s.location,search:t.toString()})}),[o,s])]}function h(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,o=p(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[u,d]=f({queryString:n,groupId:s}),[h,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,o]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),b=(()=>{const e=u??h;return m({value:e,tabValues:o})?e:null})();(0,i.A)((()=>{b&&l(b)}),[b]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),g(e)}),[d,g,o]),tabValues:o}}var g=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),c=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==r&&(u(t),a(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...o,className:(0,s.A)("tabs__item",b.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=h(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function S(e){const t=(0,g.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4611],{365:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"Configure other JSDOM versions","description":"Jest v26+ by default uses JSDOM 16 to support Node 10+.","source":"@site/versioned_docs/version-14.4/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/14.4/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/guides/jsdom-version.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/14.4/guides/esm-support"},"next":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/14.4/guides/snapshot-testing"}}');var s=n(4848),o=n(8453),a=n(1470),i=n(9365);const l={id:"jsdom-version",title:"Configure other JSDOM versions"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,s.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,s.jsxs)(t.p,{children:["If you need a different JSDOM version than the one that ships with Jest, you can install a jsdom environment\npackage, e.g. ",(0,s.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})}),(0,s.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,s.jsx)(t.code,{children:"localStorage"})," or ",(0,s.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,s.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Reference: ",(0,s.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200",children:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200"})]})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var o=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,a),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>S});var r=n(6540),s=n(4164),o=n(3104),a=n(6347),i=n(205),l=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const s=(0,a.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(s.location.search);t.set(o,e),s.replace({...s.location,search:t.toString()})}),[o,s])]}function h(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,o=p(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[u,d]=f({queryString:n,groupId:s}),[h,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,o]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),b=(()=>{const e=u??h;return m({value:e,tabValues:o})?e:null})();(0,i.A)((()=>{b&&l(b)}),[b]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),g(e)}),[d,g,o]),tabValues:o}}var g=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),c=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==r&&(u(t),a(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...o,className:(0,s.A)("tabs__item",b.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=h(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function S(e){const t=(0,g.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/1e388ac9.d911c443.js b/assets/js/1e388ac9.cb4b8608.js similarity index 99% rename from assets/js/1e388ac9.d911c443.js rename to assets/js/1e388ac9.cb4b8608.js index 883bd00e33..6ec9b3ed2e 100644 --- a/assets/js/1e388ac9.d911c443.js +++ b/assets/js/1e388ac9.cb4b8608.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6969],{8449:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"The presets","source":"@site/versioned_docs/version-14.2/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/14.2/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/getting-started/presets.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/14.2/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/14.2/getting-started/options"}}');var r=n(4848),a=n(8453),o=n(1470),l=n(9365);const i={id:"presets",title:"Presets"},c=void 0,u={},d=[{value:"The presets",id:"the-presets",level:3},{value:"Basic usage",id:"basic-usage",level:3},{value:"Advanced",id:"advanced",level:3}];function p(e){const t={admonition:"admonition",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Preset name"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,r.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,r.jsx)(t.code,{children:"preset"})," key to the desired preset name in your Jest config should be enough to start\nusing TypeScript with Jest (assuming you added ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,r.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,r.jsxs)(t.p,{children:["All presets come with default ",(0,r.jsx)(t.code,{children:"ts-jest"})," config options.\nIf you want to override any of the options, you'll need to use the JavaScript version of Jest config,\ncopy the original options and override the options you need:"]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["If you choose to override ",(0,r.jsx)(t.code,{children:"transform"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,r.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,r.jsx)(t.code,{children:"transform"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst { defaultTransformerOptions } = require('jest-preset-angular/presets');\n// const { defaultTransformerOptions } = require('jest-preset-angular/presets')\n\nmodule.exports = {\n // [...]\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n ...defaultTransformerOptions,\n // [...your overriden options]\n },\n ],\n },\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nconst jestConfig: Config = {\n // [...]\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n ...presets.defaultTransformerOptions,\n // [...your overriden options]\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>o});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function o(e){let{children:t,hidden:n,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,o),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),o=n(6347),l=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const r=(0,o.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[o,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=f({queryString:n,groupId:r}),[g,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),j=(()=>{const e=c??g;return h({value:e,tabValues:a})?e:null})();(0,l.A)((()=>{j&&i(j)}),[j]);return{selectedValue:o,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=l[n].value;r!==s&&(c(t),o(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:l.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>l});var s=n(6540);const r={},a=s.createContext(r);function o(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6969],{8449:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"The presets","source":"@site/versioned_docs/version-14.2/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/14.2/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/getting-started/presets.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/14.2/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/14.2/getting-started/options"}}');var r=n(4848),a=n(8453),o=n(1470),l=n(9365);const i={id:"presets",title:"Presets"},c=void 0,u={},d=[{value:"The presets",id:"the-presets",level:3},{value:"Basic usage",id:"basic-usage",level:3},{value:"Advanced",id:"advanced",level:3}];function p(e){const t={admonition:"admonition",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Preset name"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,r.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,r.jsx)(t.code,{children:"preset"})," key to the desired preset name in your Jest config should be enough to start\nusing TypeScript with Jest (assuming you added ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,r.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,r.jsxs)(t.p,{children:["All presets come with default ",(0,r.jsx)(t.code,{children:"ts-jest"})," config options.\nIf you want to override any of the options, you'll need to use the JavaScript version of Jest config,\ncopy the original options and override the options you need:"]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["If you choose to override ",(0,r.jsx)(t.code,{children:"transform"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,r.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,r.jsx)(t.code,{children:"transform"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst { defaultTransformerOptions } = require('jest-preset-angular/presets');\n// const { defaultTransformerOptions } = require('jest-preset-angular/presets')\n\nmodule.exports = {\n // [...]\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n ...defaultTransformerOptions,\n // [...your overriden options]\n },\n ],\n },\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nconst jestConfig: Config = {\n // [...]\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n ...presets.defaultTransformerOptions,\n // [...your overriden options]\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>o});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function o(e){let{children:t,hidden:n,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,o),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),o=n(6347),l=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const r=(0,o.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[o,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=f({queryString:n,groupId:r}),[g,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),j=(()=>{const e=c??g;return h({value:e,tabValues:a})?e:null})();(0,l.A)((()=>{j&&i(j)}),[j]);return{selectedValue:o,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=l[n].value;r!==s&&(c(t),o(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:l.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>l});var s=n(6540);const r={},a=s.createContext(r);function o(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/203fc93e.8fee14fe.js b/assets/js/203fc93e.bc6bd409.js similarity index 99% rename from assets/js/203fc93e.8fee14fe.js rename to assets/js/203fc93e.bc6bd409.js index 67830efeba..cb331c4d3c 100644 --- a/assets/js/203fc93e.8fee14fe.js +++ b/assets/js/203fc93e.bc6bd409.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6038],{647:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>g,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"This step is OPTIONAL","source":"@site/versioned_docs/version-14.2/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/14.2/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/guides/angular-ivy.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/14.2/getting-started/test-environment"},"next":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/14.2/guides/angular-13+"}}');var s=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"angular-ivy",title:"Angular Ivy"},u=void 0,c={},d=[{value:"Control ngcc processing",id:"control-ngcc-processing",level:2}];function p(e){const t={admonition:"admonition",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["This step is ",(0,s.jsx)(t.strong,{children:"OPTIONAL"})]})}),"\n",(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,s.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,s.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," also provides a Jest global setup file to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest. Add to the following section:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["to your root ",(0,s.jsx)(t.code,{children:"jest.config.js"})]}),"\n"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,s.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,s.jsxs)(t.p,{children:["Since ",(0,s.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,s.jsx)(t.code,{children:"ngcc"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nmodule.exports = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,s.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function g(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,a=p(e),[l,i]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!g({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:s}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),b=(()=>{const e=u??f;return g({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{b&&i(b)}),[b]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),s=o[n].value;s!==r&&(u(t),l(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,s.A)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var r=n(6540);const s={},a=r.createContext(s);function l(e){const t=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6038],{647:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>g,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"This step is OPTIONAL","source":"@site/versioned_docs/version-14.2/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/14.2/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/guides/angular-ivy.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/14.2/getting-started/test-environment"},"next":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/14.2/guides/angular-13+"}}');var s=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"angular-ivy",title:"Angular Ivy"},u=void 0,c={},d=[{value:"Control ngcc processing",id:"control-ngcc-processing",level:2}];function p(e){const t={admonition:"admonition",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["This step is ",(0,s.jsx)(t.strong,{children:"OPTIONAL"})]})}),"\n",(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,s.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,s.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," also provides a Jest global setup file to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest. Add to the following section:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["to your root ",(0,s.jsx)(t.code,{children:"jest.config.js"})]}),"\n"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,s.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,s.jsxs)(t.p,{children:["Since ",(0,s.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,s.jsx)(t.code,{children:"ngcc"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nmodule.exports = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,s.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function g(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,a=p(e),[l,i]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!g({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:s}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),b=(()=>{const e=u??f;return g({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{b&&i(b)}),[b]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),s=o[n].value;s!==r&&(u(t),l(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,s.A)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var r=n(6540);const s={},a=r.createContext(s);function l(e){const t=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/22e4d634.9f29c4ef.js b/assets/js/22e4d634.3983e4b1.js similarity index 99% rename from assets/js/22e4d634.9f29c4ef.js rename to assets/js/22e4d634.3983e4b1.js index 7a424c2c3a..5410e7b41a 100644 --- a/assets/js/22e4d634.9f29c4ef.js +++ b/assets/js/22e4d634.3983e4b1.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5559],{9153:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-10.x/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/10.x/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/guides/troubleshooting.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/10.x/guides/absolute-imports"}}');var t=s(4848),o=s(8453);const i={id:"troubleshooting",title:"Troubleshooting"},a=void 0,l={},d=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["You can check Jest ",(0,t.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,t.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,t.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,t.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,t.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,t.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,t.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,t.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,t.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,t.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,t.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,t.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,t.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,t.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,t.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,t.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Add this to your ",(0,t.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,t.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,t.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,t.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,t.jsx)(n.code,{children:"JS"})," file with ",(0,t.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,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,t.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,t.jsx)(n.code,{children:"@angular"}),", ",(0,t.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,t.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,t.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,t.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,t.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,t.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,t.jsx)(n.p,{children:"or"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,t.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,t.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,t.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,t.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Install ",(0,t.jsx)(n.code,{children:"babel-jest"}),", ",(0,t.jsx)(n.code,{children:"@babel/core"})," and ",(0,t.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,t.jsxs)(n.li,{children:["Create a ",(0,t.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,t.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Define the usage of ",(0,t.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,t.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,t.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,t.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,t.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,t.jsx)(n.code,{children:"firebase"})," and ",(0,t.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,t.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,t.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,t.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,t.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,t.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,t.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,t.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,t.jsxs)(n.p,{children:["In these cases, a ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,t.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,t.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,t.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.resolver.js\nmodule.exports = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\n...\nresolver: '/src/jest.resolver.js',\n...\n"})})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>a});var r=s(6540);const t={},o=r.createContext(t);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5559],{9153:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-10.x/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/10.x/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/guides/troubleshooting.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/10.x/guides/absolute-imports"}}');var t=s(4848),o=s(8453);const i={id:"troubleshooting",title:"Troubleshooting"},a=void 0,l={},d=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["You can check Jest ",(0,t.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,t.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,t.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,t.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,t.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,t.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,t.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,t.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,t.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,t.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,t.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,t.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,t.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,t.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,t.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,t.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Add this to your ",(0,t.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,t.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,t.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,t.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,t.jsx)(n.code,{children:"JS"})," file with ",(0,t.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,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,t.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,t.jsx)(n.code,{children:"@angular"}),", ",(0,t.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,t.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,t.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,t.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,t.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,t.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,t.jsx)(n.p,{children:"or"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,t.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,t.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,t.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,t.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Install ",(0,t.jsx)(n.code,{children:"babel-jest"}),", ",(0,t.jsx)(n.code,{children:"@babel/core"})," and ",(0,t.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,t.jsxs)(n.li,{children:["Create a ",(0,t.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,t.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Define the usage of ",(0,t.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,t.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,t.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,t.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,t.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,t.jsx)(n.code,{children:"firebase"})," and ",(0,t.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,t.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,t.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,t.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,t.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,t.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,t.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,t.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,t.jsxs)(n.p,{children:["In these cases, a ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,t.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,t.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,t.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.resolver.js\nmodule.exports = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\n...\nresolver: '/src/jest.resolver.js',\n...\n"})})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>a});var r=s(6540);const t={},o=r.createContext(t);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/23a80e44.b5b01396.js b/assets/js/23a80e44.a583346a.js similarity index 99% rename from assets/js/23a80e44.b5b01396.js rename to assets/js/23a80e44.a583346a.js index 73f5a66fb4..1e359e8fe1 100644 --- a/assets/js/23a80e44.b5b01396.js +++ b/assets/js/23a80e44.a583346a.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3588],{4893:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-environment","title":"JSDOM environment","description":"jest-preset-angular provides a way to configure a different version of JSDOM than the one ships with Jest","source":"@site/versioned_docs/version-14.5/guides/jsdom-environment.md","sourceDirName":"guides","slug":"/guides/jsdom-environment","permalink":"/jest-preset-angular/docs/guides/jsdom-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/guides/jsdom-environment.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"jsdom-environment","title":"JSDOM environment"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/guides/esm-support"},"next":{"title":"JSDOM version","permalink":"/jest-preset-angular/docs/guides/jsdom-version"}}');var s=n(4848),a=n(8453),o=n(1470),l=n(9365);const i={id:"jsdom-environment",title:"JSDOM environment"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," provides a way to configure a different version of ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom",children:"JSDOM"})," than the one ships with ",(0,s.jsx)(t.code,{children:"Jest"}),"\nvia a custom ",(0,s.jsx)(t.code,{children:"JSDOM"})," environment. One can follow the below steps to configure a different ",(0,s.jsx)(t.code,{children:"JSDOM"})," version:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Install the desired JSDOM version"}),"\n"]}),"\n",(0,s.jsxs)(o.A,{groupId:"npm2yarn",children:[(0,s.jsx)(l.A,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jsdom@\n"})})}),(0,s.jsx)(l.A,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jsdom@\n"})})}),(0,s.jsx)(l.A,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jsdom@\n"})})})]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["In Jest config, set the ",(0,s.jsx)(t.code,{children:"testEnvironment"})," like following"]}),"\n"]}),"\n",(0,s.jsxs)(o.A,{groupId:"code-examples",children:[(0,s.jsx)(l.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n testEnvironment: 'jest-preset-angular/environments/jest-jsdom-env',\n} satisfies Config;\n"})})}),(0,s.jsx)(l.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n testEnvironment: 'jest-preset-angular/environments/jest-jsdom-env',\n} satisfies Config;\n"})})})]})]})}function m(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>o});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var a=n(4848);function o(e){let{children:t,hidden:n,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,o),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),a=n(3104),o=n(6347),l=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,o.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,a=p(e),[o,i]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:s}),[f,v]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),b=(()=>{const e=u??f;return m({value:e,tabValues:a})?e:null})();(0,l.A)((()=>{b&&i(b)}),[b]);return{selectedValue:o,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),v(e)}),[d,v,a]),tabValues:a}}var v=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var g=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),s=l[n].value;s!==r&&(u(t),o(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,g.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:l.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,g.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,s.A)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,g.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,g.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,g.jsx)(j,{...t,...e}),(0,g.jsx)(x,{...t,...e})]})}function w(e){const t=(0,v.A)();return(0,g.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>l});var r=n(6540);const s={},a=r.createContext(s);function o(e){const t=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3588],{4893:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-environment","title":"JSDOM environment","description":"jest-preset-angular provides a way to configure a different version of JSDOM than the one ships with Jest","source":"@site/versioned_docs/version-14.5/guides/jsdom-environment.md","sourceDirName":"guides","slug":"/guides/jsdom-environment","permalink":"/jest-preset-angular/docs/guides/jsdom-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/guides/jsdom-environment.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"jsdom-environment","title":"JSDOM environment"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/guides/esm-support"},"next":{"title":"JSDOM version","permalink":"/jest-preset-angular/docs/guides/jsdom-version"}}');var s=n(4848),a=n(8453),o=n(1470),l=n(9365);const i={id:"jsdom-environment",title:"JSDOM environment"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," provides a way to configure a different version of ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom",children:"JSDOM"})," than the one ships with ",(0,s.jsx)(t.code,{children:"Jest"}),"\nvia a custom ",(0,s.jsx)(t.code,{children:"JSDOM"})," environment. One can follow the below steps to configure a different ",(0,s.jsx)(t.code,{children:"JSDOM"})," version:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Install the desired JSDOM version"}),"\n"]}),"\n",(0,s.jsxs)(o.A,{groupId:"npm2yarn",children:[(0,s.jsx)(l.A,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jsdom@\n"})})}),(0,s.jsx)(l.A,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jsdom@\n"})})}),(0,s.jsx)(l.A,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jsdom@\n"})})})]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["In Jest config, set the ",(0,s.jsx)(t.code,{children:"testEnvironment"})," like following"]}),"\n"]}),"\n",(0,s.jsxs)(o.A,{groupId:"code-examples",children:[(0,s.jsx)(l.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n testEnvironment: 'jest-preset-angular/environments/jest-jsdom-env',\n} satisfies Config;\n"})})}),(0,s.jsx)(l.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n testEnvironment: 'jest-preset-angular/environments/jest-jsdom-env',\n} satisfies Config;\n"})})})]})]})}function m(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>o});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var a=n(4848);function o(e){let{children:t,hidden:n,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,o),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),a=n(3104),o=n(6347),l=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,o.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,a=p(e),[o,i]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:s}),[f,v]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),b=(()=>{const e=u??f;return m({value:e,tabValues:a})?e:null})();(0,l.A)((()=>{b&&i(b)}),[b]);return{selectedValue:o,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),v(e)}),[d,v,a]),tabValues:a}}var v=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var g=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),s=l[n].value;s!==r&&(u(t),o(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,g.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:l.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,g.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,s.A)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,g.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,g.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,g.jsx)(j,{...t,...e}),(0,g.jsx)(x,{...t,...e})]})}function w(e){const t=(0,v.A)();return(0,g.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>l});var r=n(6540);const s={},a=r.createContext(s);function o(e){const t=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/252e2b80.e5fd8787.js b/assets/js/252e2b80.4d053ab9.js similarity index 99% rename from assets/js/252e2b80.e5fd8787.js rename to assets/js/252e2b80.4d053ab9.js index 8450633261..4cea639284 100644 --- a/assets/js/252e2b80.e5fd8787.js +++ b/assets/js/252e2b80.4d053ab9.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8955],{8227:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>t,toc:()=>a});const t=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the globals of Jest config object","source":"@site/versioned_docs/version-10.x/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/10.x/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/getting-started/options.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/10.x/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/10.x/getting-started/test-environment"}}');var o=s(4848),r=s(8453);const i={id:"options",title:"Options"},c=void 0,d={},a=[{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function l(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,o.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,o.jsx)(n.code,{children:"globals"})," of Jest config object\nin the ",(0,o.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,o.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,o.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,o.jsxs)(n.p,{children:["More information about ",(0,o.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,o.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,o.jsxs)(n.admonition,{type:"important",children:[(0,o.jsxs)(n.p,{children:["Since ",(0,o.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,o.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,o.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,o.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config"]}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n"})})]}),"\n",(0,o.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const snapshotSerializers = require('jest-preset-angular/build/serializers');\n\nmodule.exports = {\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n },\n testEnvironment: 'jsdom',\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': 'jest-preset-angular',\n },\n moduleFileExtensions: ['ts', 'html', 'js', 'json'],\n snapshotSerializers,\n};\n"})}),"\n",(0,o.jsx)(n.admonition,{type:"important",children:(0,o.jsxs)(n.p,{children:["Jest runs with ",(0,o.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,o.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,o.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,o.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["we're using some ",(0,o.jsx)(n.code,{children:'"globals"'})," to pass information about where our tsconfig.json file is that we'd like to be able to transform HTML files through ",(0,o.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,o.jsx)(n.code,{children:"TS"}),", ",(0,o.jsx)(n.code,{children:"JS"}),", ",(0,o.jsx)(n.code,{children:"MJS"}),", ",(0,o.jsx)(n.code,{children:"HTML"}),", or ",(0,o.jsx)(n.code,{children:"SVG"})," file through so called ",(0,o.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,o.jsx)(n.code,{children:"ts"}),"), HTML (",(0,o.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,o.jsx)(n.code,{children:"js"}),") and JSON (",(0,o.jsx)(n.code,{children:"json"}),") files."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses regex."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. Note: by default angular adds\nsome angular-specific attributes to the code (like ",(0,o.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,o.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,o.jsx)(n.code,{children:"_ngcontent-c*"})," etc).\nThis package provides serializer to remove such attributes. This makes snapshots cleaner and more human-readable.\nTo remove such specific attributes use ",(0,o.jsx)(n.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,o.jsx)(n.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>c});var t=s(6540);const o={},r=t.createContext(o);function i(e){const n=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8955],{8227:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>t,toc:()=>a});const t=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the globals of Jest config object","source":"@site/versioned_docs/version-10.x/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/10.x/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/getting-started/options.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/10.x/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/10.x/getting-started/test-environment"}}');var o=s(4848),r=s(8453);const i={id:"options",title:"Options"},c=void 0,d={},a=[{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function l(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,o.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,o.jsx)(n.code,{children:"globals"})," of Jest config object\nin the ",(0,o.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,o.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,o.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,o.jsxs)(n.p,{children:["More information about ",(0,o.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,o.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,o.jsxs)(n.admonition,{type:"important",children:[(0,o.jsxs)(n.p,{children:["Since ",(0,o.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,o.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,o.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,o.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config"]}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n"})})]}),"\n",(0,o.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const snapshotSerializers = require('jest-preset-angular/build/serializers');\n\nmodule.exports = {\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n },\n testEnvironment: 'jsdom',\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': 'jest-preset-angular',\n },\n moduleFileExtensions: ['ts', 'html', 'js', 'json'],\n snapshotSerializers,\n};\n"})}),"\n",(0,o.jsx)(n.admonition,{type:"important",children:(0,o.jsxs)(n.p,{children:["Jest runs with ",(0,o.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,o.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,o.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,o.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["we're using some ",(0,o.jsx)(n.code,{children:'"globals"'})," to pass information about where our tsconfig.json file is that we'd like to be able to transform HTML files through ",(0,o.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,o.jsx)(n.code,{children:"TS"}),", ",(0,o.jsx)(n.code,{children:"JS"}),", ",(0,o.jsx)(n.code,{children:"MJS"}),", ",(0,o.jsx)(n.code,{children:"HTML"}),", or ",(0,o.jsx)(n.code,{children:"SVG"})," file through so called ",(0,o.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,o.jsx)(n.code,{children:"ts"}),"), HTML (",(0,o.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,o.jsx)(n.code,{children:"js"}),") and JSON (",(0,o.jsx)(n.code,{children:"json"}),") files."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses regex."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. Note: by default angular adds\nsome angular-specific attributes to the code (like ",(0,o.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,o.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,o.jsx)(n.code,{children:"_ngcontent-c*"})," etc).\nThis package provides serializer to remove such attributes. This makes snapshots cleaner and more human-readable.\nTo remove such specific attributes use ",(0,o.jsx)(n.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,o.jsx)(n.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>c});var t=s(6540);const o={},r=t.createContext(o);function i(e){const n=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/26cb42b7.f7ee64dd.js b/assets/js/26cb42b7.ec062a06.js similarity index 99% rename from assets/js/26cb42b7.f7ee64dd.js rename to assets/js/26cb42b7.ec062a06.js index d73693a3f4..c0b12269ba 100644 --- a/assets/js/26cb42b7.f7ee64dd.js +++ b/assets/js/26cb42b7.ec062a06.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[179],{477:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>h,frontMatter:()=>l,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/versioned_docs/version-14.0/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/14.0/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/guides/esm-support.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/14.0/guides/angular-13+"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/14.0/guides/jsdom-version"}}');var r=s(4848),a=s(8453),o=s(1470),i=s(9365);const l={id:"esm-support",title:"ESM Support"},u=void 0,c={},d=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["To use ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,r.jsx)(t.code,{children:"ts-jest"})," config option ",(0,r.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["There is also a ",(0,r.jsx)(t.a,{href:"/jest-preset-angular/docs/14.0/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,r.jsx)(t.admonition,{type:"tip",children:(0,r.jsxs)(t.p,{children:["We have ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example apps"})," which contains base ESM setup to work with Jest and Angular."]})}),"\n",(0,r.jsxs)(t.p,{children:["Besides, there is ",(0,r.jsx)(t.code,{children:"setup-jest.mjs"})," to add to Jest setup file to ensure that Jest can set up test environment properly."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,r.jsx)(t.h3,{id:"examples",children:"Examples"}),"\n",(0,r.jsx)(t.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n transform: {\n '^.+\\\\.(ts|js|html)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html)$',\n useESM: true,\n },\n ],\n },\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n useESM: true,\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["Jest will attempt to load ",(0,r.jsx)(t.strong,{children:"ESM"})," files from ",(0,r.jsx)(t.code,{children:"node_modules"})," with default ",(0,r.jsx)(t.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,r.jsx)(t.strong,{children:"ESM"})," built files or ",(0,r.jsx)(t.strong,{children:"ESM"})," files which are outside ",(0,r.jsx)(t.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,r.jsxs)(t.p,{children:["To fix that, one can use ",(0,r.jsx)(t.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,r.jsx)(t.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig = {\n //...\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,s)=>{s.d(t,{A:()=>o});s(6540);var n=s(4164);const r={tabItem:"tabItem_Ymn6"};var a=s(4848);function o(e){let{children:t,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.A)(r.tabItem,o),hidden:s,children:t})}},1470:(e,t,s)=>{s.d(t,{A:()=>S});var n=s(6540),r=s(4164),a=s(3104),o=s(6347),i=s(205),l=s(7485),u=s(1682),c=s(679);function d(e){return n.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,n.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:s}=e;return(0,n.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:s,attributes:n,default:r}}=e;return{value:t,label:s,attributes:n,default:r}}))}(s);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,s])}function h(e){let{value:t,tabValues:s}=e;return s.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:s}=e;const r=(0,o.W6)(),a=function(e){let{queryString:t=!1,groupId:s}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!s)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:t,groupId:s});return[(0,l.aZ)(a),(0,n.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:s=!1,groupId:r}=e,a=p(e),[o,l]=(0,n.useState)((()=>function(e){let{defaultValue:t,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const n=s.find((e=>e.default))??s[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:a}))),[u,d]=m({queryString:s,groupId:r}),[f,g]=function(e){let{groupId:t}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(s);return[r,(0,n.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),j=(()=>{const e=u??f;return h({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{j&&l(j)}),[j]);return{selectedValue:o,selectValue:(0,n.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=s(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(4848);function b(e){let{className:t,block:s,selectedValue:n,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,s=l.indexOf(t),r=i[s].value;r!==n&&(u(t),o(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const s=l.indexOf(e.currentTarget)+1;t=l[s]??l[0];break}case"ArrowLeft":{const s=l.indexOf(e.currentTarget)-1;t=l[s]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},t),children:i.map((e=>{let{value:t,label:s,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:n===t?0:-1,"aria-selected":n===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:a}=e;const o=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===a));return e?(0,n.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function S(e){const t=(0,g.A)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,s)=>{s.d(t,{R:()=>o,x:()=>i});var n=s(6540);const r={},a=n.createContext(r);function o(e){const t=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),n.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[179],{477:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>h,frontMatter:()=>l,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/versioned_docs/version-14.0/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/14.0/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/guides/esm-support.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/14.0/guides/angular-13+"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/14.0/guides/jsdom-version"}}');var r=s(4848),a=s(8453),o=s(1470),i=s(9365);const l={id:"esm-support",title:"ESM Support"},u=void 0,c={},d=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["To use ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,r.jsx)(t.code,{children:"ts-jest"})," config option ",(0,r.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["There is also a ",(0,r.jsx)(t.a,{href:"/jest-preset-angular/docs/14.0/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,r.jsx)(t.admonition,{type:"tip",children:(0,r.jsxs)(t.p,{children:["We have ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example apps"})," which contains base ESM setup to work with Jest and Angular."]})}),"\n",(0,r.jsxs)(t.p,{children:["Besides, there is ",(0,r.jsx)(t.code,{children:"setup-jest.mjs"})," to add to Jest setup file to ensure that Jest can set up test environment properly."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,r.jsx)(t.h3,{id:"examples",children:"Examples"}),"\n",(0,r.jsx)(t.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n transform: {\n '^.+\\\\.(ts|js|html)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html)$',\n useESM: true,\n },\n ],\n },\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n useESM: true,\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["Jest will attempt to load ",(0,r.jsx)(t.strong,{children:"ESM"})," files from ",(0,r.jsx)(t.code,{children:"node_modules"})," with default ",(0,r.jsx)(t.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,r.jsx)(t.strong,{children:"ESM"})," built files or ",(0,r.jsx)(t.strong,{children:"ESM"})," files which are outside ",(0,r.jsx)(t.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,r.jsxs)(t.p,{children:["To fix that, one can use ",(0,r.jsx)(t.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,r.jsx)(t.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig = {\n //...\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,s)=>{s.d(t,{A:()=>o});s(6540);var n=s(4164);const r={tabItem:"tabItem_Ymn6"};var a=s(4848);function o(e){let{children:t,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.A)(r.tabItem,o),hidden:s,children:t})}},1470:(e,t,s)=>{s.d(t,{A:()=>S});var n=s(6540),r=s(4164),a=s(3104),o=s(6347),i=s(205),l=s(7485),u=s(1682),c=s(679);function d(e){return n.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,n.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:s}=e;return(0,n.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:s,attributes:n,default:r}}=e;return{value:t,label:s,attributes:n,default:r}}))}(s);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,s])}function h(e){let{value:t,tabValues:s}=e;return s.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:s}=e;const r=(0,o.W6)(),a=function(e){let{queryString:t=!1,groupId:s}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!s)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:t,groupId:s});return[(0,l.aZ)(a),(0,n.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:s=!1,groupId:r}=e,a=p(e),[o,l]=(0,n.useState)((()=>function(e){let{defaultValue:t,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const n=s.find((e=>e.default))??s[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:a}))),[u,d]=m({queryString:s,groupId:r}),[f,g]=function(e){let{groupId:t}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(s);return[r,(0,n.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),j=(()=>{const e=u??f;return h({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{j&&l(j)}),[j]);return{selectedValue:o,selectValue:(0,n.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=s(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(4848);function b(e){let{className:t,block:s,selectedValue:n,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,s=l.indexOf(t),r=i[s].value;r!==n&&(u(t),o(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const s=l.indexOf(e.currentTarget)+1;t=l[s]??l[0];break}case"ArrowLeft":{const s=l.indexOf(e.currentTarget)-1;t=l[s]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},t),children:i.map((e=>{let{value:t,label:s,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:n===t?0:-1,"aria-selected":n===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:a}=e;const o=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===a));return e?(0,n.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function S(e){const t=(0,g.A)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,s)=>{s.d(t,{R:()=>o,x:()=>i});var n=s(6540);const r={},a=n.createContext(r);function o(e){const t=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),n.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/27299a3b.4269f976.js b/assets/js/27299a3b.b549b5cb.js similarity index 99% rename from assets/js/27299a3b.4269f976.js rename to assets/js/27299a3b.b549b5cb.js index fdf5f89e45..bbe8ed69a9 100644 --- a/assets/js/27299a3b.4269f976.js +++ b/assets/js/27299a3b.b549b5cb.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7036],{7536:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-9.x/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/9.x/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/getting-started/installation.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/9.x/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/9.x/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsxs)(t.p,{children:["In your project root, create ",(0,r.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(t.p,{children:"Add the following section:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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 setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "extends": "./tsconfig.json",\n "compilerOptions": {\n "outDir": "./out-tsc/spec",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// Assuming that your global setup file is setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function j(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=m({queryString:n,groupId:r}),[j,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??j;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7036],{7536:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-9.x/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/9.x/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/getting-started/installation.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/9.x/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/9.x/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsxs)(t.p,{children:["In your project root, create ",(0,r.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(t.p,{children:"Add the following section:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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 setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "extends": "./tsconfig.json",\n "compilerOptions": {\n "outDir": "./out-tsc/spec",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// Assuming that your global setup file is setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function j(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=m({queryString:n,groupId:r}),[j,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??j;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/27af8d7b.435667d4.js b/assets/js/27af8d7b.cc8e448b.js similarity index 98% rename from assets/js/27af8d7b.435667d4.js rename to assets/js/27af8d7b.cc8e448b.js index 7bef92d407..6a3759ffc8 100644 --- a/assets/js/27af8d7b.435667d4.js +++ b/assets/js/27af8d7b.cc8e448b.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4868],{337:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>i,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/versioned_docs/version-14.3/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/14.3/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/guides/esm-support.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/14.3/guides/angular-13+"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/14.3/guides/jsdom-version"}}');var r=t(4848),o=t(8453);const i={id:"esm-support",title:"ESM Support"},a=void 0,l={},c=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:["To use ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,r.jsx)(s.code,{children:"ts-jest"})," config option ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["There is also a ",(0,r.jsx)(s.a,{href:"/jest-preset-angular/docs/14.3/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,r.jsx)(s.admonition,{type:"tip",children:(0,r.jsxs)(s.p,{children:["We have ",(0,r.jsx)(s.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example apps"})," which contains base ESM setup to work with Jest and Angular."]})}),"\n",(0,r.jsx)(s.p,{children:"Besides, there is utility function to ensure that Jest can set up test environment properly."}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})}),"\n",(0,r.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,r.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n useESM: true,\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})}),"\n",(0,r.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,r.jsxs)(s.admonition,{type:"tip",children:[(0,r.jsxs)(s.p,{children:["Jest will attempt to load ",(0,r.jsx)(s.strong,{children:"ESM"})," files from ",(0,r.jsx)(s.code,{children:"node_modules"})," with default ",(0,r.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,r.jsx)(s.strong,{children:"ESM"})," built files or ",(0,r.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,r.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,r.jsxs)(s.p,{children:["To fix that, one can use ",(0,r.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,r.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts"',children:"import type { Config } from 'jest';\n\nconst jestConfig = {\n //...\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n\nexport default jestConfig;\n"})})]})}function p(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>i,x:()=>a});var n=t(6540);const r={},o=n.createContext(r);function i(e){const s=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4868],{337:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>i,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/versioned_docs/version-14.3/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/14.3/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/guides/esm-support.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/14.3/guides/angular-13+"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/14.3/guides/jsdom-version"}}');var r=t(4848),o=t(8453);const i={id:"esm-support",title:"ESM Support"},a=void 0,l={},c=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:["To use ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,r.jsx)(s.code,{children:"ts-jest"})," config option ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["There is also a ",(0,r.jsx)(s.a,{href:"/jest-preset-angular/docs/14.3/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,r.jsx)(s.admonition,{type:"tip",children:(0,r.jsxs)(s.p,{children:["We have ",(0,r.jsx)(s.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example apps"})," which contains base ESM setup to work with Jest and Angular."]})}),"\n",(0,r.jsx)(s.p,{children:"Besides, there is utility function to ensure that Jest can set up test environment properly."}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})}),"\n",(0,r.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,r.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n useESM: true,\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})}),"\n",(0,r.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,r.jsxs)(s.admonition,{type:"tip",children:[(0,r.jsxs)(s.p,{children:["Jest will attempt to load ",(0,r.jsx)(s.strong,{children:"ESM"})," files from ",(0,r.jsx)(s.code,{children:"node_modules"})," with default ",(0,r.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,r.jsx)(s.strong,{children:"ESM"})," built files or ",(0,r.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,r.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,r.jsxs)(s.p,{children:["To fix that, one can use ",(0,r.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,r.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts"',children:"import type { Config } from 'jest';\n\nconst jestConfig = {\n //...\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n\nexport default jestConfig;\n"})})]})}function p(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>i,x:()=>a});var n=t(6540);const r={},o=n.createContext(r);function i(e){const s=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/296cbb95.c274a291.js b/assets/js/296cbb95.fb928b02.js similarity index 98% rename from assets/js/296cbb95.c274a291.js rename to assets/js/296cbb95.fb928b02.js index 68e21d361f..c836040234 100644 --- a/assets/js/296cbb95.c274a291.js +++ b/assets/js/296cbb95.fb928b02.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[143],{9297:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>i,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/versioned_docs/version-14.5/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/guides/esm-support.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/guides/angular-13+"},"next":{"title":"JSDOM environment","permalink":"/jest-preset-angular/docs/guides/jsdom-environment"}}');var r=t(4848),o=t(8453);const i={id:"esm-support",title:"ESM Support"},a=void 0,l={},d=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function c(e){const s={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:["To use ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,r.jsx)(s.code,{children:"ts-jest"})," config option ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["There is also a ",(0,r.jsx)(s.a,{href:"/jest-preset-angular/docs/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,r.jsx)(s.admonition,{type:"tip",children:(0,r.jsxs)(s.p,{children:["We have ",(0,r.jsx)(s.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example apps"})," which contains base ESM setup to work with Jest and Angular."]})}),"\n",(0,r.jsx)(s.p,{children:"Besides, there is utility function to ensure that Jest can set up test environment properly."}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})}),"\n",(0,r.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,r.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts"',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n moduleNameMapper: {\n tslib: 'tslib/tslib.es6.js',\n '^rxjs': '/node_modules/rxjs/dist/bundles/rxjs.umd.js',\n },\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n useESM: true,\n },\n ],\n },\n} satisfies Config;\n"})}),"\n",(0,r.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,r.jsxs)(s.admonition,{type:"tip",children:[(0,r.jsxs)(s.p,{children:["Jest will attempt to load ",(0,r.jsx)(s.strong,{children:"ESM"})," files from ",(0,r.jsx)(s.code,{children:"node_modules"})," with default ",(0,r.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,r.jsx)(s.strong,{children:"ESM"})," built files or ",(0,r.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,r.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,r.jsxs)(s.p,{children:["To fix that, one can use ",(0,r.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,r.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts"',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n //...\n ...presets.createEsmPreset(),\n moduleNameMapper: {\n tslib: 'tslib/tslib.es6.js',\n '^rxjs': '/node_modules/rxjs/dist/bundles/rxjs.umd.js',\n },\n} satisfies Config;\n"})})]})}function p(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>i,x:()=>a});var n=t(6540);const r={},o=n.createContext(r);function i(e){const s=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[143],{9297:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>i,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/versioned_docs/version-14.5/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/guides/esm-support.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/guides/angular-13+"},"next":{"title":"JSDOM environment","permalink":"/jest-preset-angular/docs/guides/jsdom-environment"}}');var r=t(4848),o=t(8453);const i={id:"esm-support",title:"ESM Support"},a=void 0,l={},d=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function c(e){const s={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:["To use ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,r.jsx)(s.code,{children:"ts-jest"})," config option ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["There is also a ",(0,r.jsx)(s.a,{href:"/jest-preset-angular/docs/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,r.jsx)(s.admonition,{type:"tip",children:(0,r.jsxs)(s.p,{children:["We have ",(0,r.jsx)(s.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example apps"})," which contains base ESM setup to work with Jest and Angular."]})}),"\n",(0,r.jsx)(s.p,{children:"Besides, there is utility function to ensure that Jest can set up test environment properly."}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})}),"\n",(0,r.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,r.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts"',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n moduleNameMapper: {\n tslib: 'tslib/tslib.es6.js',\n '^rxjs': '/node_modules/rxjs/dist/bundles/rxjs.umd.js',\n },\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n useESM: true,\n },\n ],\n },\n} satisfies Config;\n"})}),"\n",(0,r.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,r.jsxs)(s.admonition,{type:"tip",children:[(0,r.jsxs)(s.p,{children:["Jest will attempt to load ",(0,r.jsx)(s.strong,{children:"ESM"})," files from ",(0,r.jsx)(s.code,{children:"node_modules"})," with default ",(0,r.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,r.jsx)(s.strong,{children:"ESM"})," built files or ",(0,r.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,r.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,r.jsxs)(s.p,{children:["To fix that, one can use ",(0,r.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,r.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts"',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n //...\n ...presets.createEsmPreset(),\n moduleNameMapper: {\n tslib: 'tslib/tslib.es6.js',\n '^rxjs': '/node_modules/rxjs/dist/bundles/rxjs.umd.js',\n },\n} satisfies Config;\n"})})]})}function p(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>i,x:()=>a});var n=t(6540);const r={},o=n.createContext(r);function i(e){const s=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/29d26392.231eb4b2.js b/assets/js/29d26392.97759240.js similarity index 98% rename from assets/js/29d26392.231eb4b2.js rename to assets/js/29d26392.97759240.js index b3de636b44..c4ecdcbe79 100644 --- a/assets/js/29d26392.231eb4b2.js +++ b/assets/js/29d26392.97759240.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8626],{4736:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>d,default:()=>p,frontMatter:()=>i,metadata:()=>n,toc:()=>l});const n=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"The presets","source":"@site/versioned_docs/version-11.1/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/11.1/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/getting-started/presets.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/11.1/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/11.1/getting-started/options"}}');var r=s(4848),o=s(8453);const i={id:"presets",title:"Presets"},d=void 0,a={},l=[{value:"The presets",id:"the-presets",level:3},{value:"Basic usage",id:"basic-usage",level:3},{value:"Advanced",id:"advanced",level:3}];function c(e){const t={admonition:"admonition",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Preset name"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,r.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,r.jsx)(t.code,{children:"preset"})," key to the desired preset name in your Jest config should be enough to start\nusing TypeScript with Jest (assuming you added ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,r.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n"})}),"\n",(0,r.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,r.jsxs)(t.p,{children:["All presets come with default ",(0,r.jsx)(t.code,{children:"ts-jest"})," config options.\nIf you want to override any of the options, you'll need to use the JavaScript version of Jest config,\ncopy the original options and override the options you need:"]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["If you choose to override ",(0,r.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,r.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,r.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nconst { defaults: jestNgPreset } = require('jest-preset-angular/presets');\n// const { defaultsESM: jestNgPreset } = require('jest-preset-angular/presets')\n\nmodule.exports = {\n // [...]\n globals: {\n 'ts-jest': {\n ...jestNgPreset.globals['ts-jest'],\n // [...your overriden options]\n },\n },\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:["Or through TypeScript (if ",(0,r.jsx)(t.code,{children:"ts-node"})," is installed):"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// jest.config.ts\nimport type { InitialOptionsTsJest } from 'ts-jest/dist/types';\nimport { defaults as jestNgPreset } from 'jest-preset-angular/presets';\n// import { defaultsESM as jestNgPreset } from 'jest-preset-angular/presets'\n\nconst config: InitialOptionsTsJest = {\n // [...]\n globals: {\n 'ts-jest': {\n ...jestNgPreset.globals['ts-jest'],\n // [...your overriden options]\n },\n },\n};\n\nexport default config;\n"})})]})}function p(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>d});var n=s(6540);const r={},o=n.createContext(r);function i(e){const t=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8626],{4736:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>d,default:()=>p,frontMatter:()=>i,metadata:()=>n,toc:()=>l});const n=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"The presets","source":"@site/versioned_docs/version-11.1/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/11.1/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/getting-started/presets.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/11.1/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/11.1/getting-started/options"}}');var r=s(4848),o=s(8453);const i={id:"presets",title:"Presets"},d=void 0,a={},l=[{value:"The presets",id:"the-presets",level:3},{value:"Basic usage",id:"basic-usage",level:3},{value:"Advanced",id:"advanced",level:3}];function c(e){const t={admonition:"admonition",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Preset name"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,r.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,r.jsx)(t.code,{children:"preset"})," key to the desired preset name in your Jest config should be enough to start\nusing TypeScript with Jest (assuming you added ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,r.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n"})}),"\n",(0,r.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,r.jsxs)(t.p,{children:["All presets come with default ",(0,r.jsx)(t.code,{children:"ts-jest"})," config options.\nIf you want to override any of the options, you'll need to use the JavaScript version of Jest config,\ncopy the original options and override the options you need:"]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["If you choose to override ",(0,r.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,r.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,r.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nconst { defaults: jestNgPreset } = require('jest-preset-angular/presets');\n// const { defaultsESM: jestNgPreset } = require('jest-preset-angular/presets')\n\nmodule.exports = {\n // [...]\n globals: {\n 'ts-jest': {\n ...jestNgPreset.globals['ts-jest'],\n // [...your overriden options]\n },\n },\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:["Or through TypeScript (if ",(0,r.jsx)(t.code,{children:"ts-node"})," is installed):"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// jest.config.ts\nimport type { InitialOptionsTsJest } from 'ts-jest/dist/types';\nimport { defaults as jestNgPreset } from 'jest-preset-angular/presets';\n// import { defaultsESM as jestNgPreset } from 'jest-preset-angular/presets'\n\nconst config: InitialOptionsTsJest = {\n // [...]\n globals: {\n 'ts-jest': {\n ...jestNgPreset.globals['ts-jest'],\n // [...your overriden options]\n },\n },\n};\n\nexport default config;\n"})})]})}function p(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>d});var n=s(6540);const r={},o=n.createContext(r);function i(e){const t=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/2a474b18.bf078f99.js b/assets/js/2a474b18.a3357707.js similarity index 99% rename from assets/js/2a474b18.bf078f99.js rename to assets/js/2a474b18.a3357707.js index dcc294ad46..bdb2eb31f8 100644 --- a/assets/js/2a474b18.bf078f99.js +++ b/assets/js/2a474b18.a3357707.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2822],{1898:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>p,default:()=>j,frontMatter:()=>c,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"In Jest, a test environment defines the sandbox context in which your tests run.","source":"@site/versioned_docs/version-14.3/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/14.3/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/getting-started/test-environment.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/14.3/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/14.3/guides/angular-ivy"}}');var i=n(4848),r=n(8453),o=n(1470),l=n(9365),a=n(4252);const c={id:"test-environment",title:"Test environment"},p=void 0,d={},u=[{value:"Functions",id:"functions",level:2},{value:"setupZoneTestEnv(options)",id:"setupzonetestenvoptions",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Example:",id:"example",level:4},{value:"setupZonelessTestEnv(options)",id:"setupzonelesstestenvoptions",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Example:",id:"example-1",level:4}];function h(e){const t={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:"In Jest, a test environment defines the sandbox context in which your tests run.\nFor Angular projects, setting up the correct test environment is essential to ensure compatibility with the\nframework-specific features, such as dependency injection and change detection."}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"jest-preset-angular"})," provides utility functions to simplify setting up a Jest test environment tailored for Angular projects.\nThese functions support both ",(0,i.jsx)(t.strong,{children:"zone-based"})," and ",(0,i.jsx)(t.strong,{children:"zoneless"})," environments, catering to different testing needs."]}),"\n",(0,i.jsx)(t.h2,{id:"functions",children:"Functions"}),"\n","\n",(0,i.jsx)(a.A,{toc:u.slice(1)}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.h3,{id:"setupzonetestenvoptions",children:(0,i.jsx)(t.code,{children:"setupZoneTestEnv(options)"})}),"\n",(0,i.jsxs)(t.p,{children:["Configures a test environment that uses ",(0,i.jsx)(t.code,{children:"zone.js"}),", which is the mechanism for tracking asynchronous operations.\nIt is suitable for most Angular applications that rely on ",(0,i.jsx)(t.code,{children:"zone.js"})," for change detection and other framework features."]}),"\n",(0,i.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,i.jsx)(t.h4,{id:"parameters",children:"Parameters"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"options"}),(0,i.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,i.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"example",children:"Example:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(l.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})}),(0,i.jsx)(l.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(l.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})}),(0,i.jsx)(l.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,i.jsx)(t.h3,{id:"setupzonelesstestenvoptions",children:(0,i.jsx)(t.code,{children:"setupZonelessTestEnv(options)"})}),"\n",(0,i.jsxs)(t.p,{children:["Configures a test environment that ",(0,i.jsx)(t.strong,{children:"DOESN'T"})," use ",(0,i.jsx)(t.code,{children:"zone.js"}),", as described in ",(0,i.jsx)(t.a,{href:"https://angular.dev/guide/experimental/zoneless",children:"Angular experimental zoneless guide"}),".\nIt is designed for projects that have disabled ",(0,i.jsx)(t.code,{children:"zone.js"}),", which can lead to improved performance and simplified testing."]}),"\n",(0,i.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,i.jsx)(t.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"options"}),(0,i.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,i.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"example-1",children:"Example:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(l.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})}),(0,i.jsx)(l.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless/index.mjs';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(l.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})}),(0,i.jsx)(l.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]})]})}function j(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2822],{1898:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>p,default:()=>j,frontMatter:()=>c,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"In Jest, a test environment defines the sandbox context in which your tests run.","source":"@site/versioned_docs/version-14.3/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/14.3/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/getting-started/test-environment.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/14.3/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/14.3/guides/angular-ivy"}}');var i=n(4848),r=n(8453),o=n(1470),l=n(9365),a=n(4252);const c={id:"test-environment",title:"Test environment"},p=void 0,d={},u=[{value:"Functions",id:"functions",level:2},{value:"setupZoneTestEnv(options)",id:"setupzonetestenvoptions",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Example:",id:"example",level:4},{value:"setupZonelessTestEnv(options)",id:"setupzonelesstestenvoptions",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Example:",id:"example-1",level:4}];function h(e){const t={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:"In Jest, a test environment defines the sandbox context in which your tests run.\nFor Angular projects, setting up the correct test environment is essential to ensure compatibility with the\nframework-specific features, such as dependency injection and change detection."}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"jest-preset-angular"})," provides utility functions to simplify setting up a Jest test environment tailored for Angular projects.\nThese functions support both ",(0,i.jsx)(t.strong,{children:"zone-based"})," and ",(0,i.jsx)(t.strong,{children:"zoneless"})," environments, catering to different testing needs."]}),"\n",(0,i.jsx)(t.h2,{id:"functions",children:"Functions"}),"\n","\n",(0,i.jsx)(a.A,{toc:u.slice(1)}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.h3,{id:"setupzonetestenvoptions",children:(0,i.jsx)(t.code,{children:"setupZoneTestEnv(options)"})}),"\n",(0,i.jsxs)(t.p,{children:["Configures a test environment that uses ",(0,i.jsx)(t.code,{children:"zone.js"}),", which is the mechanism for tracking asynchronous operations.\nIt is suitable for most Angular applications that rely on ",(0,i.jsx)(t.code,{children:"zone.js"})," for change detection and other framework features."]}),"\n",(0,i.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,i.jsx)(t.h4,{id:"parameters",children:"Parameters"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"options"}),(0,i.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,i.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"example",children:"Example:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(l.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})}),(0,i.jsx)(l.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(l.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})}),(0,i.jsx)(l.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,i.jsx)(t.h3,{id:"setupzonelesstestenvoptions",children:(0,i.jsx)(t.code,{children:"setupZonelessTestEnv(options)"})}),"\n",(0,i.jsxs)(t.p,{children:["Configures a test environment that ",(0,i.jsx)(t.strong,{children:"DOESN'T"})," use ",(0,i.jsx)(t.code,{children:"zone.js"}),", as described in ",(0,i.jsx)(t.a,{href:"https://angular.dev/guide/experimental/zoneless",children:"Angular experimental zoneless guide"}),".\nIt is designed for projects that have disabled ",(0,i.jsx)(t.code,{children:"zone.js"}),", which can lead to improved performance and simplified testing."]}),"\n",(0,i.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,i.jsx)(t.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"options"}),(0,i.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,i.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"example-1",children:"Example:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(l.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})}),(0,i.jsx)(l.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless/index.mjs';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(l.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})}),(0,i.jsx)(l.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]})]})}function j(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}}}]); \ No newline at end of file diff --git a/assets/js/2ab18ce5.8df931da.js b/assets/js/2ab18ce5.1d3c8381.js similarity index 95% rename from assets/js/2ab18ce5.8df931da.js rename to assets/js/2ab18ce5.1d3c8381.js index 30d5b9e9b1..bfb072cabc 100644 --- a/assets/js/2ab18ce5.8df931da.js +++ b/assets/js/2ab18ce5.1d3c8381.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6530],{2704:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-14.2/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/14.2/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/introduction.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/14.2/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(t.p,{children:["This is a part of the article: ",(0,o.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Starting from ",(0,o.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,o.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,o.jsx)(t.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6530],{2704:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-14.2/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/14.2/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/introduction.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/14.2/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(t.p,{children:["This is a part of the article: ",(0,o.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Starting from ",(0,o.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,o.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,o.jsx)(t.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/2ae17008.7d1ad2a8.js b/assets/js/2ae17008.7e47f7ce.js similarity index 96% rename from assets/js/2ae17008.7d1ad2a8.js rename to assets/js/2ae17008.7e47f7ce.js index fa07e8f856..7c34ca33d5 100644 --- a/assets/js/2ae17008.7d1ad2a8.js +++ b/assets/js/2ae17008.7e47f7ce.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1635],{4140:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>p,default:()=>c,frontMatter:()=>i,metadata:()=>n,toc:()=>u});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"ESM support is only available in v9.0.0++","source":"@site/versioned_docs/version-8.x/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/8.x/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/guides/esm-support.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/8.x/guides/angular-ivy"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/8.x/guides/jsdom-version"}}');var o=s(4848),r=s(8453);const i={id:"esm-support",title:"ESM Support"},p=void 0,a={},u=[];function d(e){const t={admonition:"admonition",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["ESM support is only available in ",(0,o.jsx)(t.strong,{children:"v9.0.0++"})]})})}function c(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>p});var n=s(6540);const o={},r=n.createContext(o);function i(e){const t=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function p(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1635],{4140:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>p,default:()=>c,frontMatter:()=>i,metadata:()=>n,toc:()=>u});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"ESM support is only available in v9.0.0++","source":"@site/versioned_docs/version-8.x/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/8.x/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/guides/esm-support.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/8.x/guides/angular-ivy"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/8.x/guides/jsdom-version"}}');var o=s(4848),r=s(8453);const i={id:"esm-support",title:"ESM Support"},p=void 0,a={},u=[];function d(e){const t={admonition:"admonition",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["ESM support is only available in ",(0,o.jsx)(t.strong,{children:"v9.0.0++"})]})})}function c(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>p});var n=s(6540);const o={},r=n.createContext(o);function i(e){const t=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function p(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/2e81e74f.436db0e0.js b/assets/js/2e81e74f.bae43b26.js similarity index 99% rename from assets/js/2e81e74f.436db0e0.js rename to assets/js/2e81e74f.bae43b26.js index bb6c4ce183..7d6166620e 100644 --- a/assets/js/2e81e74f.436db0e0.js +++ b/assets/js/2e81e74f.bae43b26.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[647],{7303:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>g,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"This step is OPTIONAL","source":"@site/versioned_docs/version-13.0/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/13.0/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/guides/angular-ivy.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/13.0/getting-started/test-environment"},"next":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/13.0/guides/angular-13+"}}');var s=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"angular-ivy",title:"Angular Ivy"},u=void 0,c={},d=[{value:"Control ngcc processing",id:"control-ngcc-processing",level:2}];function p(e){const t={admonition:"admonition",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["This step is ",(0,s.jsx)(t.strong,{children:"OPTIONAL"})]})}),"\n",(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,s.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,s.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," also provides a Jest global setup file to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest. Add to the following section:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,s.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,s.jsxs)(t.p,{children:["Since ",(0,s.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,s.jsx)(t.code,{children:"ngcc"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nmodule.exports = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,s.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function g(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,a=p(e),[l,i]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!g({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:s}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),b=(()=>{const e=u??f;return g({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{b&&i(b)}),[b]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),s=o[n].value;s!==r&&(u(t),l(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,s.A)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var r=n(6540);const s={},a=r.createContext(s);function l(e){const t=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[647],{7303:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>g,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"This step is OPTIONAL","source":"@site/versioned_docs/version-13.0/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/13.0/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/guides/angular-ivy.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/13.0/getting-started/test-environment"},"next":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/13.0/guides/angular-13+"}}');var s=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"angular-ivy",title:"Angular Ivy"},u=void 0,c={},d=[{value:"Control ngcc processing",id:"control-ngcc-processing",level:2}];function p(e){const t={admonition:"admonition",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["This step is ",(0,s.jsx)(t.strong,{children:"OPTIONAL"})]})}),"\n",(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,s.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,s.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," also provides a Jest global setup file to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest. Add to the following section:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,s.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,s.jsxs)(t.p,{children:["Since ",(0,s.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,s.jsx)(t.code,{children:"ngcc"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nmodule.exports = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,s.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function g(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,a=p(e),[l,i]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!g({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:s}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),b=(()=>{const e=u??f;return g({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{b&&i(b)}),[b]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),s=o[n].value;s!==r&&(u(t),l(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,s.A)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var r=n(6540);const s={},a=r.createContext(s);function l(e){const t=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/30388853.a75e6966.js b/assets/js/30388853.15734096.js similarity index 96% rename from assets/js/30388853.a75e6966.js rename to assets/js/30388853.15734096.js index 4ca783d410..4d9c75702c 100644 --- a/assets/js/30388853.a75e6966.js +++ b/assets/js/30388853.15734096.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9075],{2385:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-13.0/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/13.0/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/processing.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/13.0/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/13.0/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9075],{2385:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-13.0/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/13.0/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/processing.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/13.0/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/13.0/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/327b6d8e.529330a4.js b/assets/js/327b6d8e.f655aa80.js similarity index 95% rename from assets/js/327b6d8e.529330a4.js rename to assets/js/327b6d8e.f655aa80.js index 26894b78b1..7f03256624 100644 --- a/assets/js/327b6d8e.529330a4.js +++ b/assets/js/327b6d8e.f655aa80.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6968],{3135:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-14.3/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/14.3/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/introduction.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/14.3/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(t.p,{children:["This is a part of the article: ",(0,o.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Starting from ",(0,o.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,o.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,o.jsx)(t.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6968],{3135:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-14.3/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/14.3/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/introduction.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/14.3/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(t.p,{children:["This is a part of the article: ",(0,o.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Starting from ",(0,o.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,o.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,o.jsx)(t.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/33a5adb4.9c632df6.js b/assets/js/33a5adb4.52af314e.js similarity index 99% rename from assets/js/33a5adb4.9c632df6.js rename to assets/js/33a5adb4.52af314e.js index cf7e54ea9f..974f568ead 100644 --- a/assets/js/33a5adb4.9c632df6.js +++ b/assets/js/33a5adb4.52af314e.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2758],{2944:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>j,frontMatter:()=>p,metadata:()=>s,toc:()=>h});const s=JSON.parse('{"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/14.2/guides/snapshot-testing","draft":false,"unlisted":false,"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":1740315715000,"frontMatter":{"id":"snapshot-testing","title":"Snapshot testing"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/14.2/guides/jsdom-version"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/14.2/guides/using-with-babel"}}');var i=t(4848),r=t(8453),l=t(1470),a=t(9365),o=t(4252);const p={id:"snapshot-testing",title:"Snapshot testing"},c=void 0,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,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"jest-preset-angular"})," provides several snapshot serializers to generate clearer and more human-readable snapshot."]}),"\n",(0,i.jsx)(n.admonition,{type:"info",children:(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"BY DEFAULT"}),", the ",(0,i.jsx)(n.a,{href:"/jest-preset-angular/docs/14.2/getting-started/presets",children:"preset"})," provides all of the snapshot serializers below."]})}),"\n",(0,i.jsx)(n.h2,{id:"snapshot-serializers",children:"Snapshot serializers"}),"\n","\n",(0,i.jsx)(o.A,{toc:h.slice(2)}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h2,{id:"reference",children:"Reference"}),"\n",(0,i.jsxs)(n.h3,{id:"remove-html-comments-html-comment",children:["Remove html comments (",(0,i.jsx)(n.code,{children:"html-comment"}),")"]}),"\n",(0,i.jsx)(n.p,{children:"Allow removing all the comments in the component HTML in snapshot."}),"\n",(0,i.jsx)(n.p,{children:"Examples:"}),"\n",(0,i.jsx)(n.h4,{id:"in-jest-config",children:"In Jest config"}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.h4,{id:"or-in-setup-test-environment-file",children:"Or in setup test environment file"}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsxs)(a.A,{value:"js",label:"JavaScript",children:[(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(a.A,{value:"ts",label:"TypeScript",children:[(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.h4,{id:"or-in-individual-test-files",children:"Or in individual test files"}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(n.h3,{id:"display-component-html-ng-snapshot",children:["Display component HTML (",(0,i.jsx)(n.code,{children:"ng-snapshot"}),")"]}),"\n",(0,i.jsx)(n.p,{children:"Allow displaying component HTML with data in snapshot."}),"\n",(0,i.jsx)(n.h4,{id:"configuration-options",children:"Configuration options"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"type NgSnapshotOptions = {\n omitAllCompAttrs?: boolean;\n};\n"})}),"\n",(0,i.jsx)(n.p,{children:"Configure snapshot behavior"}),"\n",(0,i.jsx)(n.p,{children:"Examples:"}),"\n",(0,i.jsx)(n.h4,{id:"in-jest-config-1",children:"In Jest config"}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.h4,{id:"or-in-setup-test-environment-file-1",children:"Or in setup test environment file"}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsxs)(a.A,{value:"js",label:"JavaScript",children:[(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(a.A,{value:"ts",label:"TypeScript",children:[(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.h4,{id:"or-in-individual-test-files-1",children:"Or in individual test files"}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.h4,{id:"with-options",children:"With options"}),"\n",(0,i.jsxs)(n.admonition,{title:"Effective priority",type:"info",children:[(0,i.jsx)(n.p,{children:"The configured serializers will have affect in this order:"}),(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"Jest config"})," -> ",(0,i.jsx)(n.code,{children:"setup files"})," -> ",(0,i.jsx)(n.code,{children:"test files"})]}),(0,i.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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"In setup files:"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsxs)(a.A,{value:"js",label:"JavaScript",children:[(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(a.A,{value:"ts",label:"TypeScript",children:[(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"or in individual test files:"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(n.h3,{id:"remove-angular-attributes-no-ng-attributes",children:["Remove Angular attributes (",(0,i.jsx)(n.code,{children:"no-ng-attributes"}),")"]}),"\n",(0,i.jsxs)(n.p,{children:["Allow removing attributes generated by Angular fixture, like ",(0,i.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,i.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,i.jsx)(n.code,{children:"_ngcontent-c*"})," etc., from component snapshot"]}),"\n",(0,i.jsx)(n.p,{children:"Examples:"}),"\n",(0,i.jsx)(n.h4,{id:"in-jest-config-2",children:"In Jest config"}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.h4,{id:"or-in-setup-test-environment-file-2",children:"Or in setup test environment file"}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsxs)(a.A,{value:"js",label:"JavaScript",children:[(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(a.A,{value:"ts",label:"TypeScript",children:[(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.h4,{id:"or-in-individual-test-files-2",children:"Or in individual test files"}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,r.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(m,{...e})}):m(e)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2758],{2944:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>j,frontMatter:()=>p,metadata:()=>s,toc:()=>h});const s=JSON.parse('{"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/14.2/guides/snapshot-testing","draft":false,"unlisted":false,"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":1740328366000,"frontMatter":{"id":"snapshot-testing","title":"Snapshot testing"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/14.2/guides/jsdom-version"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/14.2/guides/using-with-babel"}}');var i=t(4848),r=t(8453),l=t(1470),a=t(9365),o=t(4252);const p={id:"snapshot-testing",title:"Snapshot testing"},c=void 0,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,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"jest-preset-angular"})," provides several snapshot serializers to generate clearer and more human-readable snapshot."]}),"\n",(0,i.jsx)(n.admonition,{type:"info",children:(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"BY DEFAULT"}),", the ",(0,i.jsx)(n.a,{href:"/jest-preset-angular/docs/14.2/getting-started/presets",children:"preset"})," provides all of the snapshot serializers below."]})}),"\n",(0,i.jsx)(n.h2,{id:"snapshot-serializers",children:"Snapshot serializers"}),"\n","\n",(0,i.jsx)(o.A,{toc:h.slice(2)}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h2,{id:"reference",children:"Reference"}),"\n",(0,i.jsxs)(n.h3,{id:"remove-html-comments-html-comment",children:["Remove html comments (",(0,i.jsx)(n.code,{children:"html-comment"}),")"]}),"\n",(0,i.jsx)(n.p,{children:"Allow removing all the comments in the component HTML in snapshot."}),"\n",(0,i.jsx)(n.p,{children:"Examples:"}),"\n",(0,i.jsx)(n.h4,{id:"in-jest-config",children:"In Jest config"}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.h4,{id:"or-in-setup-test-environment-file",children:"Or in setup test environment file"}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsxs)(a.A,{value:"js",label:"JavaScript",children:[(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(a.A,{value:"ts",label:"TypeScript",children:[(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.h4,{id:"or-in-individual-test-files",children:"Or in individual test files"}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(n.h3,{id:"display-component-html-ng-snapshot",children:["Display component HTML (",(0,i.jsx)(n.code,{children:"ng-snapshot"}),")"]}),"\n",(0,i.jsx)(n.p,{children:"Allow displaying component HTML with data in snapshot."}),"\n",(0,i.jsx)(n.h4,{id:"configuration-options",children:"Configuration options"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"type NgSnapshotOptions = {\n omitAllCompAttrs?: boolean;\n};\n"})}),"\n",(0,i.jsx)(n.p,{children:"Configure snapshot behavior"}),"\n",(0,i.jsx)(n.p,{children:"Examples:"}),"\n",(0,i.jsx)(n.h4,{id:"in-jest-config-1",children:"In Jest config"}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.h4,{id:"or-in-setup-test-environment-file-1",children:"Or in setup test environment file"}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsxs)(a.A,{value:"js",label:"JavaScript",children:[(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(a.A,{value:"ts",label:"TypeScript",children:[(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.h4,{id:"or-in-individual-test-files-1",children:"Or in individual test files"}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.h4,{id:"with-options",children:"With options"}),"\n",(0,i.jsxs)(n.admonition,{title:"Effective priority",type:"info",children:[(0,i.jsx)(n.p,{children:"The configured serializers will have affect in this order:"}),(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"Jest config"})," -> ",(0,i.jsx)(n.code,{children:"setup files"})," -> ",(0,i.jsx)(n.code,{children:"test files"})]}),(0,i.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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"In setup files:"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsxs)(a.A,{value:"js",label:"JavaScript",children:[(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(a.A,{value:"ts",label:"TypeScript",children:[(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"or in individual test files:"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(n.h3,{id:"remove-angular-attributes-no-ng-attributes",children:["Remove Angular attributes (",(0,i.jsx)(n.code,{children:"no-ng-attributes"}),")"]}),"\n",(0,i.jsxs)(n.p,{children:["Allow removing attributes generated by Angular fixture, like ",(0,i.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,i.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,i.jsx)(n.code,{children:"_ngcontent-c*"})," etc., from component snapshot"]}),"\n",(0,i.jsx)(n.p,{children:"Examples:"}),"\n",(0,i.jsx)(n.h4,{id:"in-jest-config-2",children:"In Jest config"}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.h4,{id:"or-in-setup-test-environment-file-2",children:"Or in setup test environment file"}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsxs)(a.A,{value:"js",label:"JavaScript",children:[(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(a.A,{value:"ts",label:"TypeScript",children:[(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(n.h4,{id:"or-in-individual-test-files-2",children:"Or in individual test files"}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,i.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,i.jsx)(n.pre,{children:(0,i.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,r.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(m,{...e})}):m(e)}}}]); \ No newline at end of file diff --git a/assets/js/357d33d4.e40c7fc6.js b/assets/js/357d33d4.61c88469.js similarity index 98% rename from assets/js/357d33d4.e40c7fc6.js rename to assets/js/357d33d4.61c88469.js index bd2cec6f18..075c25830a 100644 --- a/assets/js/357d33d4.e40c7fc6.js +++ b/assets/js/357d33d4.61c88469.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5492],{5912:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>i,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/versioned_docs/version-14.4/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/14.4/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/guides/esm-support.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/14.4/guides/angular-13+"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/14.4/guides/jsdom-version"}}');var r=t(4848),o=t(8453);const i={id:"esm-support",title:"ESM Support"},a=void 0,l={},c=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:["To use ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,r.jsx)(s.code,{children:"ts-jest"})," config option ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["There is also a ",(0,r.jsx)(s.a,{href:"/jest-preset-angular/docs/14.4/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,r.jsx)(s.admonition,{type:"tip",children:(0,r.jsxs)(s.p,{children:["We have ",(0,r.jsx)(s.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example apps"})," which contains base ESM setup to work with Jest and Angular."]})}),"\n",(0,r.jsx)(s.p,{children:"Besides, there is utility function to ensure that Jest can set up test environment properly."}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})}),"\n",(0,r.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,r.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n useESM: true,\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})}),"\n",(0,r.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,r.jsxs)(s.admonition,{type:"tip",children:[(0,r.jsxs)(s.p,{children:["Jest will attempt to load ",(0,r.jsx)(s.strong,{children:"ESM"})," files from ",(0,r.jsx)(s.code,{children:"node_modules"})," with default ",(0,r.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,r.jsx)(s.strong,{children:"ESM"})," built files or ",(0,r.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,r.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,r.jsxs)(s.p,{children:["To fix that, one can use ",(0,r.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,r.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts"',children:"import type { Config } from 'jest';\n\nconst jestConfig = {\n //...\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n\nexport default jestConfig;\n"})})]})}function p(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>i,x:()=>a});var n=t(6540);const r={},o=n.createContext(r);function i(e){const s=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5492],{5912:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>i,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/versioned_docs/version-14.4/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/14.4/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/guides/esm-support.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/14.4/guides/angular-13+"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/14.4/guides/jsdom-version"}}');var r=t(4848),o=t(8453);const i={id:"esm-support",title:"ESM Support"},a=void 0,l={},c=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:["To use ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,r.jsx)(s.code,{children:"ts-jest"})," config option ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["There is also a ",(0,r.jsx)(s.a,{href:"/jest-preset-angular/docs/14.4/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,r.jsx)(s.admonition,{type:"tip",children:(0,r.jsxs)(s.p,{children:["We have ",(0,r.jsx)(s.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example apps"})," which contains base ESM setup to work with Jest and Angular."]})}),"\n",(0,r.jsx)(s.p,{children:"Besides, there is utility function to ensure that Jest can set up test environment properly."}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})}),"\n",(0,r.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,r.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n useESM: true,\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})}),"\n",(0,r.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,r.jsxs)(s.admonition,{type:"tip",children:[(0,r.jsxs)(s.p,{children:["Jest will attempt to load ",(0,r.jsx)(s.strong,{children:"ESM"})," files from ",(0,r.jsx)(s.code,{children:"node_modules"})," with default ",(0,r.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,r.jsx)(s.strong,{children:"ESM"})," built files or ",(0,r.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,r.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,r.jsxs)(s.p,{children:["To fix that, one can use ",(0,r.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,r.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts"',children:"import type { Config } from 'jest';\n\nconst jestConfig = {\n //...\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n\nexport default jestConfig;\n"})})]})}function p(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>i,x:()=>a});var n=t(6540);const r={},o=n.createContext(r);function i(e){const s=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/388d3430.c96e0d57.js b/assets/js/388d3430.5dda928b.js similarity index 99% rename from assets/js/388d3430.c96e0d57.js rename to assets/js/388d3430.5dda928b.js index c311f17c52..48aaf16ff0 100644 --- a/assets/js/388d3430.c96e0d57.js +++ b/assets/js/388d3430.5dda928b.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9762],{3085:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>u,default:()=>g,frontMatter:()=>l,metadata:()=>t,toc:()=>d});const t=JSON.parse('{"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":false,"unlisted":false,"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":1740315715000,"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"}}');var r=s(4848),a=s(8453),o=s(1470),i=s(9365);const l={id:"angular-13+",title:"Angular >=13"},u=void 0,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,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,r.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,r.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,r.jsx)(n.strong,{children:"Angular 13"})," using ",(0,r.jsx)(n.a,{href:"/jest-preset-angular/docs/14.0/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,r.jsx)(n.admonition,{type:"important",children:(0,r.jsxs)(n.p,{children:["With Jest 28 and ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,r.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,r.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,r.jsxs)(n.p,{children:["Starting from ",(0,r.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,r.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,r.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,r.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transform"})," is updated to include ",(0,r.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,r.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:["Upgrade the project to ",(0,r.jsx)(n.strong,{children:"Angular 13"})," following ",(0,r.jsx)(n.a,{href:"https://angular.dev/update-guide/",children:"guide"})]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,r.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,r.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,r.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,r.jsxs)(n.p,{children:["Your ",(0,r.jsx)(n.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.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: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,r.jsx)(n.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(n.p,{children:"or for ESM mode"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,r.jsx)(n.h2,{id:"potential-issues-with-angular-13-esm-package-format-and-workaround",children:"Potential issues with Angular 13 ESM package format and workaround"}),"\n",(0,r.jsxs)(n.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,r.jsx)(n.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one needs to add ",(0,r.jsx)(n.code,{children:"mjs"})," to ",(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",children:"Usage with Angular libraries which are built with Angular CLI 13"}),"\n",(0,r.jsxs)(n.p,{children:["Besides, the changes in Angular packages themselves, ",(0,r.jsx)(n.strong,{children:"Angular"})," libraries which are built with ",(0,r.jsx)(n.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,r.jsx)(n.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,r.jsx)(n.strong,{children:"CommonJS"})," mode."]}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one should modify ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"usage-with-ionic-6-or-7",children:"Usage with Ionic 6 or 7"}),"\n",(0,r.jsxs)(n.p,{children:["To support Ionic 6 or 7 you will need to modify ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,n,s)=>{s.d(n,{A:()=>o});s(6540);var t=s(4164);const r={tabItem:"tabItem_Ymn6"};var a=s(4848);function o(e){let{children:n,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,t.A)(r.tabItem,o),hidden:s,children:n})}},1470:(e,n,s)=>{s.d(n,{A:()=>A});var t=s(6540),r=s(4164),a=s(3104),o=s(6347),i=s(205),l=s(7485),u=s(1682),c=s(679);function d(e){return t.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,t.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:n,children:s}=e;return(0,t.useMemo)((()=>{const e=n??function(e){return d(e).map((e=>{let{props:{value:n,label:s,attributes:t,default:r}}=e;return{value:n,label:s,attributes:t,default:r}}))}(s);return function(e){const n=(0,u.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,s])}function g(e){let{value:n,tabValues:s}=e;return s.some((e=>e.value===n))}function h(e){let{queryString:n=!1,groupId:s}=e;const r=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:s}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!s)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:n,groupId:s});return[(0,l.aZ)(a),(0,t.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(r.location.search);n.set(a,e),r.replace({...r.location,search:n.toString()})}),[a,r])]}function m(e){const{defaultValue:n,queryString:s=!1,groupId:r}=e,a=p(e),[o,l]=(0,t.useState)((()=>function(e){let{defaultValue:n,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!g({value:n,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const t=s.find((e=>e.default))??s[0];if(!t)throw new Error("Unexpected error: 0 tabValues");return t.value}({defaultValue:n,tabValues:a}))),[u,d]=h({queryString:s,groupId:r}),[m,j]=function(e){let{groupId:n}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,a]=(0,c.Dv)(s);return[r,(0,t.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),f=(()=>{const e=u??m;return g({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{f&&l(f)}),[f]);return{selectedValue:o,selectValue:(0,t.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),j(e)}),[d,j,a]),tabValues:a}}var j=s(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(4848);function b(e){let{className:n,block:s,selectedValue:t,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const n=e.currentTarget,s=l.indexOf(n),r=i[s].value;r!==t&&(u(n),o(r))},d=e=>{let n=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const s=l.indexOf(e.currentTarget)+1;n=l[s]??l[0];break}case"ArrowLeft":{const s=l.indexOf(e.currentTarget)-1;n=l[s]??l[l.length-1];break}}n?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},n),children:i.map((e=>{let{value:n,label:s,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:t===n?0:-1,"aria-selected":t===n,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":t===n}),children:s??n},n)}))})}function v(e){let{lazy:n,children:s,selectedValue:a}=e;const o=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,t.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function w(e){const n=m(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function A(e){const n=(0,j.A)();return(0,x.jsx)(w,{...e,children:d(e.children)},String(n))}},8453:(e,n,s)=>{s.d(n,{R:()=>o,x:()=>i});var t=s(6540);const r={},a=t.createContext(r);function o(e){const n=t.useContext(a);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),t.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9762],{3085:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>u,default:()=>g,frontMatter:()=>l,metadata:()=>t,toc:()=>d});const t=JSON.parse('{"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":false,"unlisted":false,"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":1740328366000,"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"}}');var r=s(4848),a=s(8453),o=s(1470),i=s(9365);const l={id:"angular-13+",title:"Angular >=13"},u=void 0,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,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,r.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,r.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,r.jsx)(n.strong,{children:"Angular 13"})," using ",(0,r.jsx)(n.a,{href:"/jest-preset-angular/docs/14.0/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,r.jsx)(n.admonition,{type:"important",children:(0,r.jsxs)(n.p,{children:["With Jest 28 and ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,r.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,r.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,r.jsxs)(n.p,{children:["Starting from ",(0,r.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,r.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,r.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,r.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transform"})," is updated to include ",(0,r.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,r.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:["Upgrade the project to ",(0,r.jsx)(n.strong,{children:"Angular 13"})," following ",(0,r.jsx)(n.a,{href:"https://angular.dev/update-guide/",children:"guide"})]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,r.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,r.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,r.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,r.jsxs)(n.p,{children:["Your ",(0,r.jsx)(n.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.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: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,r.jsx)(n.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(n.p,{children:"or for ESM mode"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,r.jsx)(n.h2,{id:"potential-issues-with-angular-13-esm-package-format-and-workaround",children:"Potential issues with Angular 13 ESM package format and workaround"}),"\n",(0,r.jsxs)(n.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,r.jsx)(n.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one needs to add ",(0,r.jsx)(n.code,{children:"mjs"})," to ",(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",children:"Usage with Angular libraries which are built with Angular CLI 13"}),"\n",(0,r.jsxs)(n.p,{children:["Besides, the changes in Angular packages themselves, ",(0,r.jsx)(n.strong,{children:"Angular"})," libraries which are built with ",(0,r.jsx)(n.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,r.jsx)(n.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,r.jsx)(n.strong,{children:"CommonJS"})," mode."]}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one should modify ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"usage-with-ionic-6-or-7",children:"Usage with Ionic 6 or 7"}),"\n",(0,r.jsxs)(n.p,{children:["To support Ionic 6 or 7 you will need to modify ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,n,s)=>{s.d(n,{A:()=>o});s(6540);var t=s(4164);const r={tabItem:"tabItem_Ymn6"};var a=s(4848);function o(e){let{children:n,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,t.A)(r.tabItem,o),hidden:s,children:n})}},1470:(e,n,s)=>{s.d(n,{A:()=>A});var t=s(6540),r=s(4164),a=s(3104),o=s(6347),i=s(205),l=s(7485),u=s(1682),c=s(679);function d(e){return t.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,t.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:n,children:s}=e;return(0,t.useMemo)((()=>{const e=n??function(e){return d(e).map((e=>{let{props:{value:n,label:s,attributes:t,default:r}}=e;return{value:n,label:s,attributes:t,default:r}}))}(s);return function(e){const n=(0,u.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,s])}function g(e){let{value:n,tabValues:s}=e;return s.some((e=>e.value===n))}function h(e){let{queryString:n=!1,groupId:s}=e;const r=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:s}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!s)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:n,groupId:s});return[(0,l.aZ)(a),(0,t.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(r.location.search);n.set(a,e),r.replace({...r.location,search:n.toString()})}),[a,r])]}function m(e){const{defaultValue:n,queryString:s=!1,groupId:r}=e,a=p(e),[o,l]=(0,t.useState)((()=>function(e){let{defaultValue:n,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!g({value:n,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const t=s.find((e=>e.default))??s[0];if(!t)throw new Error("Unexpected error: 0 tabValues");return t.value}({defaultValue:n,tabValues:a}))),[u,d]=h({queryString:s,groupId:r}),[m,j]=function(e){let{groupId:n}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,a]=(0,c.Dv)(s);return[r,(0,t.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),f=(()=>{const e=u??m;return g({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{f&&l(f)}),[f]);return{selectedValue:o,selectValue:(0,t.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),j(e)}),[d,j,a]),tabValues:a}}var j=s(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(4848);function b(e){let{className:n,block:s,selectedValue:t,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const n=e.currentTarget,s=l.indexOf(n),r=i[s].value;r!==t&&(u(n),o(r))},d=e=>{let n=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const s=l.indexOf(e.currentTarget)+1;n=l[s]??l[0];break}case"ArrowLeft":{const s=l.indexOf(e.currentTarget)-1;n=l[s]??l[l.length-1];break}}n?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},n),children:i.map((e=>{let{value:n,label:s,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:t===n?0:-1,"aria-selected":t===n,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":t===n}),children:s??n},n)}))})}function v(e){let{lazy:n,children:s,selectedValue:a}=e;const o=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,t.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function w(e){const n=m(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function A(e){const n=(0,j.A)();return(0,x.jsx)(w,{...e,children:d(e.children)},String(n))}},8453:(e,n,s)=>{s.d(n,{R:()=>o,x:()=>i});var t=s(6540);const r={},a=t.createContext(r);function o(e){const n=t.useContext(a);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),t.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/3b270bcb.ceef9485.js b/assets/js/3b270bcb.fe4e9173.js similarity index 99% rename from assets/js/3b270bcb.ceef9485.js rename to assets/js/3b270bcb.fe4e9173.js index 4df6039d64..b5a0c83bac 100644 --- a/assets/js/3b270bcb.ceef9485.js +++ b/assets/js/3b270bcb.fe4e9173.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8388],{9276:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>g,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"This step is OPTIONAL","source":"@site/versioned_docs/version-14.4/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/14.4/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/guides/angular-ivy.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/14.4/getting-started/test-environment"},"next":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/14.4/guides/angular-13+"}}');var s=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"angular-ivy",title:"Angular Ivy"},c=void 0,u={},d=[{value:"Control ngcc processing",id:"control-ngcc-processing",level:2}];function p(e){const t={admonition:"admonition",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["This step is ",(0,s.jsx)(t.strong,{children:"OPTIONAL"})]})}),"\n",(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,s.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,s.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," also provides a Jest global setup file to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest. Add to the following section:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})}),(0,s.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,s.jsxs)(t.p,{children:["Since ",(0,s.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,s.jsx)(t.code,{children:"ngcc"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})}),(0,s.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>S});var r=n(6540),s=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function g(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const s=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function h(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,a=p(e),[l,i]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!g({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[c,d]=f({queryString:n,groupId:s}),[h,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,u.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),b=(()=>{const e=c??h;return g({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{b&&i(b)}),[b]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(4848);function v(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),s=o[n].value;s!==r&&(c(t),l(s))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,s.A)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function y(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function x(e){const t=h(e);return(0,j.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(y,{...t,...e})]})}function S(e){const t=(0,m.A)();return(0,j.jsx)(x,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var r=n(6540);const s={},a=r.createContext(s);function l(e){const t=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8388],{9276:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>g,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"This step is OPTIONAL","source":"@site/versioned_docs/version-14.4/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/14.4/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/guides/angular-ivy.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/14.4/getting-started/test-environment"},"next":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/14.4/guides/angular-13+"}}');var s=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"angular-ivy",title:"Angular Ivy"},c=void 0,u={},d=[{value:"Control ngcc processing",id:"control-ngcc-processing",level:2}];function p(e){const t={admonition:"admonition",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["This step is ",(0,s.jsx)(t.strong,{children:"OPTIONAL"})]})}),"\n",(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,s.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,s.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," also provides a Jest global setup file to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest. Add to the following section:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})}),(0,s.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,s.jsxs)(t.p,{children:["Since ",(0,s.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,s.jsx)(t.code,{children:"ngcc"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})}),(0,s.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>S});var r=n(6540),s=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function g(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const s=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function h(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,a=p(e),[l,i]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!g({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[c,d]=f({queryString:n,groupId:s}),[h,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,u.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),b=(()=>{const e=c??h;return g({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{b&&i(b)}),[b]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(4848);function v(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),s=o[n].value;s!==r&&(c(t),l(s))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,s.A)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function y(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function x(e){const t=h(e);return(0,j.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(y,{...t,...e})]})}function S(e){const t=(0,m.A)();return(0,j.jsx)(x,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var r=n(6540);const s={},a=r.createContext(s);function l(e){const t=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/3c7caf67.1ca64e8a.js b/assets/js/3c7caf67.15bffdae.js similarity index 99% rename from assets/js/3c7caf67.1ca64e8a.js rename to assets/js/3c7caf67.15bffdae.js index 1da29f729c..f84f8ba5dd 100644 --- a/assets/js/3c7caf67.1ca64e8a.js +++ b/assets/js/3c7caf67.15bffdae.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7375],{3448:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-14.2/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/14.2/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/getting-started/installation.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/14.2/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/14.2/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsxs)(t.p,{children:["In your project root, create ",(0,r.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(t.p,{children:"Add the following section:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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 setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "extends": "./tsconfig.json",\n "compilerOptions": {\n "outDir": "./out-tsc/spec",\n "module": "CommonJs",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// Assuming that your global setup file is setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function j(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=m({queryString:n,groupId:r}),[j,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??j;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7375],{3448:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-14.2/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/14.2/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/getting-started/installation.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/14.2/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/14.2/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsxs)(t.p,{children:["In your project root, create ",(0,r.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(t.p,{children:"Add the following section:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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 setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "extends": "./tsconfig.json",\n "compilerOptions": {\n "outDir": "./out-tsc/spec",\n "module": "CommonJs",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// Assuming that your global setup file is setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function j(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=m({queryString:n,groupId:r}),[j,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??j;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/3d3ed64e.c2eb552f.js b/assets/js/3d3ed64e.28922f8a.js similarity index 97% rename from assets/js/3d3ed64e.c2eb552f.js rename to assets/js/3d3ed64e.28922f8a.js index b83be766c0..e5583495ca 100644 --- a/assets/js/3d3ed64e.c2eb552f.js +++ b/assets/js/3d3ed64e.28922f8a.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9157],{1546:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-14.5/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/introduction.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(t.p,{children:["This is a part of the article: ",(0,o.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Starting from ",(0,o.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,o.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,o.jsx)(t.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9157],{1546:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-14.5/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/introduction.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(t.p,{children:["This is a part of the article: ",(0,o.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Starting from ",(0,o.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,o.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,o.jsx)(t.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/407f8801.7883de62.js b/assets/js/407f8801.63e26ed0.js similarity index 99% rename from assets/js/407f8801.7883de62.js rename to assets/js/407f8801.63e26ed0.js index 2a59b96793..526c1ed5e3 100644 --- a/assets/js/407f8801.7883de62.js +++ b/assets/js/407f8801.63e26ed0.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6261],{9160:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"Configure other JSDOM versions","description":"Jest v26+ by default uses JSDOM 16 to support Node 10+.","source":"@site/versioned_docs/version-9.x/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/9.x/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/guides/jsdom-version.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/9.x/guides/esm-support"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/9.x/guides/using-with-babel"}}');var s=n(4848),o=n(8453),a=n(1470),i=n(9365);const l={id:"jsdom-version",title:"Configure other JSDOM versions"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,s.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,s.jsxs)(t.p,{children:["If you need a different JSDOM version than the one that ships with Jest, you can install a jsdom environment\npackage, e.g. ",(0,s.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,s.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,s.jsx)(t.code,{children:"localStorage"})," or ",(0,s.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,s.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Reference: ",(0,s.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200",children:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200"})]})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var o=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,a),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),o=n(3104),a=n(6347),i=n(205),l=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,a.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(s.location.search);t.set(o,e),s.replace({...s.location,search:t.toString()})}),[o,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,o=p(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[u,d]=h({queryString:n,groupId:s}),[f,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,o]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return m({value:e,tabValues:o})?e:null})();(0,i.A)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),b(e)}),[d,b,o]),tabValues:o}}var b=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),c=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==r&&(u(t),a(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...o,className:(0,s.A)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6261],{9160:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"Configure other JSDOM versions","description":"Jest v26+ by default uses JSDOM 16 to support Node 10+.","source":"@site/versioned_docs/version-9.x/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/9.x/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/guides/jsdom-version.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/9.x/guides/esm-support"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/9.x/guides/using-with-babel"}}');var s=n(4848),o=n(8453),a=n(1470),i=n(9365);const l={id:"jsdom-version",title:"Configure other JSDOM versions"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,s.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,s.jsxs)(t.p,{children:["If you need a different JSDOM version than the one that ships with Jest, you can install a jsdom environment\npackage, e.g. ",(0,s.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,s.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,s.jsx)(t.code,{children:"localStorage"})," or ",(0,s.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,s.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Reference: ",(0,s.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200",children:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200"})]})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var o=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,a),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),o=n(3104),a=n(6347),i=n(205),l=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,a.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(s.location.search);t.set(o,e),s.replace({...s.location,search:t.toString()})}),[o,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,o=p(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[u,d]=h({queryString:n,groupId:s}),[f,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,o]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return m({value:e,tabValues:o})?e:null})();(0,i.A)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),b(e)}),[d,b,o]),tabValues:o}}var b=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),c=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==r&&(u(t),a(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...o,className:(0,s.A)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/433cefd8.92773ead.js b/assets/js/433cefd8.814651aa.js similarity index 99% rename from assets/js/433cefd8.92773ead.js rename to assets/js/433cefd8.814651aa.js index a47d584fa6..93e7ca06fc 100644 --- a/assets/js/433cefd8.92773ead.js +++ b/assets/js/433cefd8.814651aa.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[403],{6770:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>p,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"Starting from v9.0.0+, jest-preset-angular is fully compatible with Angular Ivy. To make sure that Jest uses the","source":"@site/versioned_docs/version-12.0/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/12.0/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/guides/angular-ivy.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/12.0/getting-started/test-environment"},"next":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/12.0/guides/angular-13+"}}');var s=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"angular-ivy",title:"Angular Ivy"},u=void 0,c={},d=[{value:"Control ngcc processing",id:"control-ngcc-processing",level:2}];function g(e){const t={code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,s.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,s.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," also provides a Jest global setup file to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest. Add to the following section:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,s.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,s.jsxs)(t.p,{children:["Since ",(0,s.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,s.jsx)(t.code,{children:"ngcc"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nmodule.exports = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,s.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]})]})}function p(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(g,{...e})}):g(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function g(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function p(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,a=g(e),[l,i]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!p({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:s}),[f,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),m=(()=>{const e=u??f;return p({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{m&&i(m)}),[m]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!p({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),b(e)}),[d,b,a]),tabValues:a}}var b=n(2303);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),s=o[n].value;s!==r&&(u(t),l(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,s.A)("tabs__item",m.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",m.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var r=n(6540);const s={},a=r.createContext(s);function l(e){const t=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[403],{6770:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>p,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"Starting from v9.0.0+, jest-preset-angular is fully compatible with Angular Ivy. To make sure that Jest uses the","source":"@site/versioned_docs/version-12.0/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/12.0/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/guides/angular-ivy.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/12.0/getting-started/test-environment"},"next":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/12.0/guides/angular-13+"}}');var s=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"angular-ivy",title:"Angular Ivy"},u=void 0,c={},d=[{value:"Control ngcc processing",id:"control-ngcc-processing",level:2}];function g(e){const t={code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,s.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,s.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," also provides a Jest global setup file to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest. Add to the following section:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,s.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,s.jsxs)(t.p,{children:["Since ",(0,s.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,s.jsx)(t.code,{children:"ngcc"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nmodule.exports = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,s.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]})]})}function p(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(g,{...e})}):g(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function g(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function p(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,a=g(e),[l,i]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!p({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:s}),[f,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),m=(()=>{const e=u??f;return p({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{m&&i(m)}),[m]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!p({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),b(e)}),[d,b,a]),tabValues:a}}var b=n(2303);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),s=o[n].value;s!==r&&(u(t),l(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,s.A)("tabs__item",m.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",m.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var r=n(6540);const s={},a=r.createContext(s);function l(e){const t=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/4351d34b.26a4ba06.js b/assets/js/4351d34b.d1bca3fe.js similarity index 99% rename from assets/js/4351d34b.26a4ba06.js rename to assets/js/4351d34b.d1bca3fe.js index 9bae98943a..67544e9e3a 100644 --- a/assets/js/4351d34b.26a4ba06.js +++ b/assets/js/4351d34b.d1bca3fe.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3095],{3062:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"JSDOM version","description":"This page is now DEPRECATED and will be removed in the next major release. Please visit JSDOM environment configuration","source":"@site/docs/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/next/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/jsdom-version.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"jsdom-version","title":"JSDOM version"},"sidebar":"docs","previous":{"title":"JSDOM environment","permalink":"/jest-preset-angular/docs/next/guides/jsdom-environment"},"next":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/next/guides/snapshot-testing"}}');var s=t(4848),a=t(8453),o=t(1470),i=t(9365);const l={id:"jsdom-version",title:"JSDOM version"},u=void 0,c={},d=[];function p(e){const n={a:"a",admonition:"admonition",code:"code",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.admonition,{title:"DEPRECATED",type:"warning",children:(0,s.jsxs)(n.p,{children:["This page is now ",(0,s.jsx)(n.strong,{children:"DEPRECATED"})," and will be removed in the next major release. Please visit ",(0,s.jsx)(n.a,{href:"/jest-preset-angular/docs/next/guides/jsdom-environment",children:"JSDOM environment configuration"})]})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," provides a way to configure a different version of ",(0,s.jsx)(n.code,{children:"JSDOM"})," than the one ships with ",(0,s.jsx)(n.code,{children:"Jest"}),"\nvia a custom ",(0,s.jsx)(n.code,{children:"JSDOM"})," environment. One can follow the below steps to configure a different JSDOM version:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"Install the desired JSDOM version"}),"\n"]}),"\n",(0,s.jsxs)(o.A,{groupId:"npm2yarn",children:[(0,s.jsx)(i.A,{value:"npm",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"npm install -D jsdom@\n"})})}),(0,s.jsx)(i.A,{value:"yarn",label:"Yarn",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"yarn add --dev jsdom@\n"})})}),(0,s.jsx)(i.A,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"pnpm add -D jsdom@\n"})})})]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["In Jest config, set the ",(0,s.jsx)(n.code,{children:"testEnvironment"})," like following"]}),"\n"]}),"\n",(0,s.jsxs)(o.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n testEnvironment: 'jest-preset-angular/environments/jest-jsdom-env',\n} satisfies Config;\n"})})}),(0,s.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n testEnvironment: 'jest-preset-angular/environments/jest-jsdom-env',\n} satisfies Config;\n"})})})]})]})}function m(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>o});t(6540);var r=t(4164);const s={tabItem:"tabItem_Ymn6"};var a=t(4848);function o(e){let{children:n,hidden:t,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,o),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>w});var r=t(6540),s=t(4164),a=t(3104),o=t(6347),i=t(205),l=t(7485),u=t(1682),c=t(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:n,children:t}=e;return(0,r.useMemo)((()=>{const e=n??function(e){return d(e).map((e=>{let{props:{value:n,label:t,attributes:r,default:s}}=e;return{value:n,label:t,attributes:r,default:s}}))}(t);return function(e){const n=(0,u.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function m(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function h(e){let{queryString:n=!1,groupId:t}=e;const s=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(s.location.search);n.set(a,e),s.replace({...s.location,search:n.toString()})}),[a,s])]}function f(e){const{defaultValue:n,queryString:t=!1,groupId:s}=e,a=p(e),[o,l]=(0,r.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!m({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const r=t.find((e=>e.default))??t[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:n,tabValues:a}))),[u,d]=h({queryString:t,groupId:s}),[f,v]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[s,a]=(0,c.Dv)(t);return[s,(0,r.useCallback)((e=>{t&&a.set(e)}),[t,a])]}({groupId:s}),g=(()=>{const e=u??f;return m({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{g&&l(g)}),[g]);return{selectedValue:o,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),v(e)}),[d,v,a]),tabValues:a}}var v=t(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=t(4848);function j(e){let{className:n,block:t,selectedValue:r,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const n=e.currentTarget,t=l.indexOf(n),s=i[t].value;s!==r&&(u(n),o(s))},d=e=>{let n=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":t},n),children:i.map((e=>{let{value:n,label:t,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:r===n?0:-1,"aria-selected":r===n,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...a,className:(0,s.A)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":r===n}),children:t??n},n)}))})}function x(e){let{lazy:n,children:t,selectedValue:a}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,r.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function y(e){const n=f(e);return(0,b.jsxs)("div",{className:(0,s.A)("tabs-container",g.tabList),children:[(0,b.jsx)(j,{...n,...e}),(0,b.jsx)(x,{...n,...e})]})}function w(e){const n=(0,v.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>i});var r=t(6540);const s={},a=r.createContext(s);function o(e){const n=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3095],{3062:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"JSDOM version","description":"This page is now DEPRECATED and will be removed in the next major release. Please visit JSDOM environment configuration","source":"@site/docs/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/next/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/jsdom-version.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"jsdom-version","title":"JSDOM version"},"sidebar":"docs","previous":{"title":"JSDOM environment","permalink":"/jest-preset-angular/docs/next/guides/jsdom-environment"},"next":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/next/guides/snapshot-testing"}}');var s=t(4848),a=t(8453),o=t(1470),i=t(9365);const l={id:"jsdom-version",title:"JSDOM version"},u=void 0,c={},d=[];function p(e){const n={a:"a",admonition:"admonition",code:"code",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.admonition,{title:"DEPRECATED",type:"warning",children:(0,s.jsxs)(n.p,{children:["This page is now ",(0,s.jsx)(n.strong,{children:"DEPRECATED"})," and will be removed in the next major release. Please visit ",(0,s.jsx)(n.a,{href:"/jest-preset-angular/docs/next/guides/jsdom-environment",children:"JSDOM environment configuration"})]})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," provides a way to configure a different version of ",(0,s.jsx)(n.code,{children:"JSDOM"})," than the one ships with ",(0,s.jsx)(n.code,{children:"Jest"}),"\nvia a custom ",(0,s.jsx)(n.code,{children:"JSDOM"})," environment. One can follow the below steps to configure a different JSDOM version:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"Install the desired JSDOM version"}),"\n"]}),"\n",(0,s.jsxs)(o.A,{groupId:"npm2yarn",children:[(0,s.jsx)(i.A,{value:"npm",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"npm install -D jsdom@\n"})})}),(0,s.jsx)(i.A,{value:"yarn",label:"Yarn",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"yarn add --dev jsdom@\n"})})}),(0,s.jsx)(i.A,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"pnpm add -D jsdom@\n"})})})]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["In Jest config, set the ",(0,s.jsx)(n.code,{children:"testEnvironment"})," like following"]}),"\n"]}),"\n",(0,s.jsxs)(o.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n testEnvironment: 'jest-preset-angular/environments/jest-jsdom-env',\n} satisfies Config;\n"})})}),(0,s.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n testEnvironment: 'jest-preset-angular/environments/jest-jsdom-env',\n} satisfies Config;\n"})})})]})]})}function m(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>o});t(6540);var r=t(4164);const s={tabItem:"tabItem_Ymn6"};var a=t(4848);function o(e){let{children:n,hidden:t,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,o),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>w});var r=t(6540),s=t(4164),a=t(3104),o=t(6347),i=t(205),l=t(7485),u=t(1682),c=t(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:n,children:t}=e;return(0,r.useMemo)((()=>{const e=n??function(e){return d(e).map((e=>{let{props:{value:n,label:t,attributes:r,default:s}}=e;return{value:n,label:t,attributes:r,default:s}}))}(t);return function(e){const n=(0,u.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function m(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function h(e){let{queryString:n=!1,groupId:t}=e;const s=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(s.location.search);n.set(a,e),s.replace({...s.location,search:n.toString()})}),[a,s])]}function f(e){const{defaultValue:n,queryString:t=!1,groupId:s}=e,a=p(e),[o,l]=(0,r.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!m({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const r=t.find((e=>e.default))??t[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:n,tabValues:a}))),[u,d]=h({queryString:t,groupId:s}),[f,v]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[s,a]=(0,c.Dv)(t);return[s,(0,r.useCallback)((e=>{t&&a.set(e)}),[t,a])]}({groupId:s}),g=(()=>{const e=u??f;return m({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{g&&l(g)}),[g]);return{selectedValue:o,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),v(e)}),[d,v,a]),tabValues:a}}var v=t(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=t(4848);function j(e){let{className:n,block:t,selectedValue:r,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const n=e.currentTarget,t=l.indexOf(n),s=i[t].value;s!==r&&(u(n),o(s))},d=e=>{let n=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":t},n),children:i.map((e=>{let{value:n,label:t,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:r===n?0:-1,"aria-selected":r===n,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...a,className:(0,s.A)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":r===n}),children:t??n},n)}))})}function x(e){let{lazy:n,children:t,selectedValue:a}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,r.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function y(e){const n=f(e);return(0,b.jsxs)("div",{className:(0,s.A)("tabs-container",g.tabList),children:[(0,b.jsx)(j,{...n,...e}),(0,b.jsx)(x,{...n,...e})]})}function w(e){const n=(0,v.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>i});var r=t(6540);const s={},a=r.createContext(s);function o(e){const n=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/44821296.b70b9034.js b/assets/js/44821296.b03f13ef.js similarity index 99% rename from assets/js/44821296.b70b9034.js rename to assets/js/44821296.b03f13ef.js index eaebb97f7e..caf867a818 100644 --- a/assets/js/44821296.b70b9034.js +++ b/assets/js/44821296.b03f13ef.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[509],{596:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>g,frontMatter:()=>p,metadata:()=>s,toc:()=>h});const s=JSON.parse('{"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.3/guides/snapshot-testing.md","sourceDirName":"guides","slug":"/guides/snapshot-testing","permalink":"/jest-preset-angular/docs/14.3/guides/snapshot-testing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/guides/snapshot-testing.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"snapshot-testing","title":"Snapshot testing"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/14.3/guides/jsdom-version"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/14.3/guides/using-with-babel"}}');var i=t(4848),r=t(8453),l=t(1470),a=t(9365),o=t(4252);const p={id:"snapshot-testing",title:"Snapshot testing"},c=void 0,d={},h=[{value:"Snapshot serializers",id:"snapshot-serializers",level:2},{value:"Remove html comments (html-comment)",id:"remove-html-comments-html-comment",level:3},{value:"Examples:",id:"examples",level:4},{value:"Display component HTML (ng-snapshot)",id:"display-component-html-ng-snapshot",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Examples:",id:"examples-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:"Examples:",id:"examples-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,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"jest-preset-angular"})," provides several snapshot serializers to generate clearer and more human-readable snapshot."]}),"\n",(0,i.jsx)(n.admonition,{type:"info",children:(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"BY DEFAULT"}),", the ",(0,i.jsx)(n.a,{href:"/jest-preset-angular/docs/14.3/getting-started/presets",children:"preset"})," provides all of the snapshot serializers below."]})}),"\n",(0,i.jsx)(n.h2,{id:"snapshot-serializers",children:"Snapshot serializers"}),"\n","\n",(0,i.jsx)(o.A,{toc:h.slice(1)}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsxs)(n.h3,{id:"remove-html-comments-html-comment",children:["Remove html comments (",(0,i.jsx)(n.code,{children:"html-comment"}),")"]}),"\n",(0,i.jsx)(n.p,{children:"Allow removing all the comments in the component HTML in snapshot."}),"\n",(0,i.jsx)(n.h4,{id:"examples",children:"Examples:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"In Jest config file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',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"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})})]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'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,i.jsxs)(n.h3,{id:"display-component-html-ng-snapshot",children:["Display component HTML (",(0,i.jsx)(n.code,{children:"ng-snapshot"}),")"]}),"\n",(0,i.jsx)(n.p,{children:"Allow displaying component HTML with data in snapshot."}),"\n",(0,i.jsx)(n.h4,{id:"parameters",children:"Parameters"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["options(",(0,i.jsx)(n.strong,{children:"optional"}),"):","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"omitAllCompAttrs: remove all component DOM attributes"}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"type NgSnapshotOptions = {\n omitAllCompAttrs?: boolean;\n};\n"})}),"\n",(0,i.jsx)(n.h4,{id:"examples-1",children:"Examples:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"In Jest config"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',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"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})})]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'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,i.jsx)(n.h4,{id:"with-options",children:"With options"}),"\n",(0,i.jsxs)(n.admonition,{title:"Effective priority",type:"info",children:[(0,i.jsx)(n.p,{children:"The configured serializers will have affect in this order:"}),(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"Jest config"})," -> ",(0,i.jsx)(n.code,{children:"setup files"})," -> ",(0,i.jsx)(n.code,{children:"test files"})]}),(0,i.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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"In setup files:"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n\nexport default jestConfig;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.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({\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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"or in individual test files:"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'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,i.jsxs)(n.h3,{id:"remove-angular-attributes-no-ng-attributes",children:["Remove Angular attributes (",(0,i.jsx)(n.code,{children:"no-ng-attributes"}),")"]}),"\n",(0,i.jsxs)(n.p,{children:["Allow removing attributes generated by Angular fixture, like ",(0,i.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,i.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,i.jsx)(n.code,{children:"_ngcontent-c*"})," etc., from component snapshot"]}),"\n",(0,i.jsx)(n.h4,{id:"examples-2",children:"Examples:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"In Jest config"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',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"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})})]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'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 g(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(m,{...e})}):m(e)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[509],{596:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>g,frontMatter:()=>p,metadata:()=>s,toc:()=>h});const s=JSON.parse('{"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.3/guides/snapshot-testing.md","sourceDirName":"guides","slug":"/guides/snapshot-testing","permalink":"/jest-preset-angular/docs/14.3/guides/snapshot-testing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/guides/snapshot-testing.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"snapshot-testing","title":"Snapshot testing"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/14.3/guides/jsdom-version"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/14.3/guides/using-with-babel"}}');var i=t(4848),r=t(8453),l=t(1470),a=t(9365),o=t(4252);const p={id:"snapshot-testing",title:"Snapshot testing"},c=void 0,d={},h=[{value:"Snapshot serializers",id:"snapshot-serializers",level:2},{value:"Remove html comments (html-comment)",id:"remove-html-comments-html-comment",level:3},{value:"Examples:",id:"examples",level:4},{value:"Display component HTML (ng-snapshot)",id:"display-component-html-ng-snapshot",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Examples:",id:"examples-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:"Examples:",id:"examples-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,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"jest-preset-angular"})," provides several snapshot serializers to generate clearer and more human-readable snapshot."]}),"\n",(0,i.jsx)(n.admonition,{type:"info",children:(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"BY DEFAULT"}),", the ",(0,i.jsx)(n.a,{href:"/jest-preset-angular/docs/14.3/getting-started/presets",children:"preset"})," provides all of the snapshot serializers below."]})}),"\n",(0,i.jsx)(n.h2,{id:"snapshot-serializers",children:"Snapshot serializers"}),"\n","\n",(0,i.jsx)(o.A,{toc:h.slice(1)}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsxs)(n.h3,{id:"remove-html-comments-html-comment",children:["Remove html comments (",(0,i.jsx)(n.code,{children:"html-comment"}),")"]}),"\n",(0,i.jsx)(n.p,{children:"Allow removing all the comments in the component HTML in snapshot."}),"\n",(0,i.jsx)(n.h4,{id:"examples",children:"Examples:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"In Jest config file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',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"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})})]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'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,i.jsxs)(n.h3,{id:"display-component-html-ng-snapshot",children:["Display component HTML (",(0,i.jsx)(n.code,{children:"ng-snapshot"}),")"]}),"\n",(0,i.jsx)(n.p,{children:"Allow displaying component HTML with data in snapshot."}),"\n",(0,i.jsx)(n.h4,{id:"parameters",children:"Parameters"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["options(",(0,i.jsx)(n.strong,{children:"optional"}),"):","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"omitAllCompAttrs: remove all component DOM attributes"}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"type NgSnapshotOptions = {\n omitAllCompAttrs?: boolean;\n};\n"})}),"\n",(0,i.jsx)(n.h4,{id:"examples-1",children:"Examples:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"In Jest config"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',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"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})})]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'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,i.jsx)(n.h4,{id:"with-options",children:"With options"}),"\n",(0,i.jsxs)(n.admonition,{title:"Effective priority",type:"info",children:[(0,i.jsx)(n.p,{children:"The configured serializers will have affect in this order:"}),(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"Jest config"})," -> ",(0,i.jsx)(n.code,{children:"setup files"})," -> ",(0,i.jsx)(n.code,{children:"test files"})]}),(0,i.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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"In setup files:"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n\nexport default jestConfig;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.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({\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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"or in individual test files:"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'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,i.jsxs)(n.h3,{id:"remove-angular-attributes-no-ng-attributes",children:["Remove Angular attributes (",(0,i.jsx)(n.code,{children:"no-ng-attributes"}),")"]}),"\n",(0,i.jsxs)(n.p,{children:["Allow removing attributes generated by Angular fixture, like ",(0,i.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,i.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,i.jsx)(n.code,{children:"_ngcontent-c*"})," etc., from component snapshot"]}),"\n",(0,i.jsx)(n.h4,{id:"examples-2",children:"Examples:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"In Jest config"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',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"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})})]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'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 g(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(m,{...e})}):m(e)}}}]); \ No newline at end of file diff --git a/assets/js/44b4d73b.b6edac17.js b/assets/js/44b4d73b.c2c51e67.js similarity index 99% rename from assets/js/44b4d73b.b6edac17.js rename to assets/js/44b4d73b.c2c51e67.js index ac8b9ba699..5f5bab22dd 100644 --- a/assets/js/44b4d73b.b6edac17.js +++ b/assets/js/44b4d73b.c2c51e67.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9829],{9004:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>u,default:()=>g,frontMatter:()=>l,metadata:()=>t,toc:()=>d});const t=JSON.parse('{"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-13.0/guides/angular-13+.md","sourceDirName":"guides","slug":"/guides/angular-13+","permalink":"/jest-preset-angular/docs/13.0/guides/angular-13+","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/guides/angular-13+.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"angular-13+","title":"Angular >=13"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/13.0/guides/angular-ivy"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/13.0/guides/esm-support"}}');var r=s(4848),a=s(8453),o=s(1470),i=s(9365);const l={id:"angular-13+",title:"Angular >=13"},u=void 0,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,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,r.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,r.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,r.jsx)(n.strong,{children:"Angular 13"})," using ",(0,r.jsx)(n.a,{href:"/jest-preset-angular/docs/13.0/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,r.jsx)(n.admonition,{type:"important",children:(0,r.jsxs)(n.p,{children:["With Jest 28 and ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,r.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,r.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,r.jsxs)(n.p,{children:["Starting from ",(0,r.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,r.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,r.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,r.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transform"})," is updated to include ",(0,r.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,r.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:["Upgrade the project to ",(0,r.jsx)(n.strong,{children:"Angular 13"})," following ",(0,r.jsx)(n.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,r.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,r.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,r.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,r.jsxs)(n.p,{children:["Your ",(0,r.jsx)(n.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.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: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,r.jsx)(n.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(n.p,{children:"or for ESM mode"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,r.jsx)(n.h2,{id:"potential-issues-with-angular-13-esm-package-format-and-workaround",children:"Potential issues with Angular 13 ESM package format and workaround"}),"\n",(0,r.jsxs)(n.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,r.jsx)(n.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one needs to add ",(0,r.jsx)(n.code,{children:"mjs"})," to ",(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",children:"Usage with Angular libraries which are built with Angular CLI 13"}),"\n",(0,r.jsxs)(n.p,{children:["Besides, the changes in Angular packages themselves, ",(0,r.jsx)(n.strong,{children:"Angular"})," libraries which are built with ",(0,r.jsx)(n.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,r.jsx)(n.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,r.jsx)(n.strong,{children:"CommonJS"})," mode."]}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one should modify ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"usage-with-ionic-6-or-7",children:"Usage with Ionic 6 or 7"}),"\n",(0,r.jsxs)(n.p,{children:["To support Ionic 6 or 7 you will need to modify ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,n,s)=>{s.d(n,{A:()=>o});s(6540);var t=s(4164);const r={tabItem:"tabItem_Ymn6"};var a=s(4848);function o(e){let{children:n,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,t.A)(r.tabItem,o),hidden:s,children:n})}},1470:(e,n,s)=>{s.d(n,{A:()=>A});var t=s(6540),r=s(4164),a=s(3104),o=s(6347),i=s(205),l=s(7485),u=s(1682),c=s(679);function d(e){return t.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,t.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:n,children:s}=e;return(0,t.useMemo)((()=>{const e=n??function(e){return d(e).map((e=>{let{props:{value:n,label:s,attributes:t,default:r}}=e;return{value:n,label:s,attributes:t,default:r}}))}(s);return function(e){const n=(0,u.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,s])}function g(e){let{value:n,tabValues:s}=e;return s.some((e=>e.value===n))}function h(e){let{queryString:n=!1,groupId:s}=e;const r=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:s}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!s)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:n,groupId:s});return[(0,l.aZ)(a),(0,t.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(r.location.search);n.set(a,e),r.replace({...r.location,search:n.toString()})}),[a,r])]}function m(e){const{defaultValue:n,queryString:s=!1,groupId:r}=e,a=p(e),[o,l]=(0,t.useState)((()=>function(e){let{defaultValue:n,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!g({value:n,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const t=s.find((e=>e.default))??s[0];if(!t)throw new Error("Unexpected error: 0 tabValues");return t.value}({defaultValue:n,tabValues:a}))),[u,d]=h({queryString:s,groupId:r}),[m,j]=function(e){let{groupId:n}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,a]=(0,c.Dv)(s);return[r,(0,t.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),f=(()=>{const e=u??m;return g({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{f&&l(f)}),[f]);return{selectedValue:o,selectValue:(0,t.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),j(e)}),[d,j,a]),tabValues:a}}var j=s(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(4848);function b(e){let{className:n,block:s,selectedValue:t,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const n=e.currentTarget,s=l.indexOf(n),r=i[s].value;r!==t&&(u(n),o(r))},d=e=>{let n=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const s=l.indexOf(e.currentTarget)+1;n=l[s]??l[0];break}case"ArrowLeft":{const s=l.indexOf(e.currentTarget)-1;n=l[s]??l[l.length-1];break}}n?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},n),children:i.map((e=>{let{value:n,label:s,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:t===n?0:-1,"aria-selected":t===n,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":t===n}),children:s??n},n)}))})}function v(e){let{lazy:n,children:s,selectedValue:a}=e;const o=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,t.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function w(e){const n=m(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function A(e){const n=(0,j.A)();return(0,x.jsx)(w,{...e,children:d(e.children)},String(n))}},8453:(e,n,s)=>{s.d(n,{R:()=>o,x:()=>i});var t=s(6540);const r={},a=t.createContext(r);function o(e){const n=t.useContext(a);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),t.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9829],{9004:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>u,default:()=>g,frontMatter:()=>l,metadata:()=>t,toc:()=>d});const t=JSON.parse('{"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-13.0/guides/angular-13+.md","sourceDirName":"guides","slug":"/guides/angular-13+","permalink":"/jest-preset-angular/docs/13.0/guides/angular-13+","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/guides/angular-13+.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"angular-13+","title":"Angular >=13"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/13.0/guides/angular-ivy"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/13.0/guides/esm-support"}}');var r=s(4848),a=s(8453),o=s(1470),i=s(9365);const l={id:"angular-13+",title:"Angular >=13"},u=void 0,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,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,r.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,r.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,r.jsx)(n.strong,{children:"Angular 13"})," using ",(0,r.jsx)(n.a,{href:"/jest-preset-angular/docs/13.0/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,r.jsx)(n.admonition,{type:"important",children:(0,r.jsxs)(n.p,{children:["With Jest 28 and ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,r.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,r.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,r.jsxs)(n.p,{children:["Starting from ",(0,r.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,r.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,r.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,r.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transform"})," is updated to include ",(0,r.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,r.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:["Upgrade the project to ",(0,r.jsx)(n.strong,{children:"Angular 13"})," following ",(0,r.jsx)(n.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,r.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,r.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,r.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,r.jsxs)(n.p,{children:["Your ",(0,r.jsx)(n.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.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: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,r.jsx)(n.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(n.p,{children:"or for ESM mode"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,r.jsx)(n.h2,{id:"potential-issues-with-angular-13-esm-package-format-and-workaround",children:"Potential issues with Angular 13 ESM package format and workaround"}),"\n",(0,r.jsxs)(n.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,r.jsx)(n.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one needs to add ",(0,r.jsx)(n.code,{children:"mjs"})," to ",(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",children:"Usage with Angular libraries which are built with Angular CLI 13"}),"\n",(0,r.jsxs)(n.p,{children:["Besides, the changes in Angular packages themselves, ",(0,r.jsx)(n.strong,{children:"Angular"})," libraries which are built with ",(0,r.jsx)(n.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,r.jsx)(n.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,r.jsx)(n.strong,{children:"CommonJS"})," mode."]}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one should modify ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"usage-with-ionic-6-or-7",children:"Usage with Ionic 6 or 7"}),"\n",(0,r.jsxs)(n.p,{children:["To support Ionic 6 or 7 you will need to modify ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,n,s)=>{s.d(n,{A:()=>o});s(6540);var t=s(4164);const r={tabItem:"tabItem_Ymn6"};var a=s(4848);function o(e){let{children:n,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,t.A)(r.tabItem,o),hidden:s,children:n})}},1470:(e,n,s)=>{s.d(n,{A:()=>A});var t=s(6540),r=s(4164),a=s(3104),o=s(6347),i=s(205),l=s(7485),u=s(1682),c=s(679);function d(e){return t.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,t.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:n,children:s}=e;return(0,t.useMemo)((()=>{const e=n??function(e){return d(e).map((e=>{let{props:{value:n,label:s,attributes:t,default:r}}=e;return{value:n,label:s,attributes:t,default:r}}))}(s);return function(e){const n=(0,u.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,s])}function g(e){let{value:n,tabValues:s}=e;return s.some((e=>e.value===n))}function h(e){let{queryString:n=!1,groupId:s}=e;const r=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:s}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!s)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:n,groupId:s});return[(0,l.aZ)(a),(0,t.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(r.location.search);n.set(a,e),r.replace({...r.location,search:n.toString()})}),[a,r])]}function m(e){const{defaultValue:n,queryString:s=!1,groupId:r}=e,a=p(e),[o,l]=(0,t.useState)((()=>function(e){let{defaultValue:n,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!g({value:n,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const t=s.find((e=>e.default))??s[0];if(!t)throw new Error("Unexpected error: 0 tabValues");return t.value}({defaultValue:n,tabValues:a}))),[u,d]=h({queryString:s,groupId:r}),[m,j]=function(e){let{groupId:n}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,a]=(0,c.Dv)(s);return[r,(0,t.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),f=(()=>{const e=u??m;return g({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{f&&l(f)}),[f]);return{selectedValue:o,selectValue:(0,t.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),j(e)}),[d,j,a]),tabValues:a}}var j=s(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(4848);function b(e){let{className:n,block:s,selectedValue:t,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const n=e.currentTarget,s=l.indexOf(n),r=i[s].value;r!==t&&(u(n),o(r))},d=e=>{let n=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const s=l.indexOf(e.currentTarget)+1;n=l[s]??l[0];break}case"ArrowLeft":{const s=l.indexOf(e.currentTarget)-1;n=l[s]??l[l.length-1];break}}n?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},n),children:i.map((e=>{let{value:n,label:s,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:t===n?0:-1,"aria-selected":t===n,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":t===n}),children:s??n},n)}))})}function v(e){let{lazy:n,children:s,selectedValue:a}=e;const o=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,t.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function w(e){const n=m(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function A(e){const n=(0,j.A)();return(0,x.jsx)(w,{...e,children:d(e.children)},String(n))}},8453:(e,n,s)=>{s.d(n,{R:()=>o,x:()=>i});var t=s(6540);const r={},a=t.createContext(r);function o(e){const n=t.useContext(a);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),t.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/44e72a25.0021a298.js b/assets/js/44e72a25.463121a4.js similarity index 99% rename from assets/js/44e72a25.0021a298.js rename to assets/js/44e72a25.463121a4.js index 94b74e0e97..0f2b4201da 100644 --- a/assets/js/44e72a25.0021a298.js +++ b/assets/js/44e72a25.463121a4.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2007],{9847:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>p,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-14.5/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/guides/troubleshooting.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/guides/absolute-imports"}}');var r=t(4848),a=t(8453),o=t(1470),i=t(9365);const l={id:"troubleshooting",title:"Troubleshooting"},c=void 0,d={},u=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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 h(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...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,{className:"language-json",metastring:'title="tsconfig.spec.json"',children:'{\n "compilerOptions": {\n "emitDecoratorMetadata": true\n }\n}\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to ",(0,r.jsx)(n.code,{children:"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 ",(0,r.jsx)(n.code,{children:"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",metastring:'title="setup-jest.ts"',children:"import 'core-js/es/reflect';\nimport '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",metastring:'title="some.component.spec.ts"',children:"beforeEach(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.jsx)(n.p,{children:"Add this to your global mock file"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest-global-mocks.ts"',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,{className:"language-shell",children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n} satisfies Config;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,r.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,r.jsx)(n.code,{children:"@angular"}),", ",(0,r.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,r.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,r.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,r.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,r.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,r.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,r.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,r.jsx)(n.p,{children:"or"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,r.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,r.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,r.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,r.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Install ",(0,r.jsx)(n.code,{children:"babel-jest"}),", ",(0,r.jsx)(n.code,{children:"@babel/core"})," and ",(0,r.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,r.jsxs)(n.li,{children:["Create a ",(0,r.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,r.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-json",metastring:'title=".babelrc"',children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Define the usage of ",(0,r.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,r.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n //...\n babelConfig: true,\n //...\n },\n ],\n },\n} satisfies Config;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n //...\n babelConfig: true,\n //...\n },\n ],\n },\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,r.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,r.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,r.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,r.jsx)(n.code,{children:"firebase"})," and ",(0,r.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,r.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-shell",children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,r.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,r.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,r.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,r.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,r.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,r.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,r.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-shell",children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,r.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,r.jsxs)(n.p,{children:["In these cases, a ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,r.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,r.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,r.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.resolver.ts"',children:"import type { SyncResolver } from 'jest-resolve';\n\nconst myResolver: SyncResolver = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n\nexport = myResolver;\n"})}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n resolver: '/src/jest.resolver.ts',\n //...\n} satisfies Config;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n resolver: '/src/jest.resolver.js',\n //...\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"inject-dependencies-with-typescript-interface-or-exported-namespace",children:"Inject dependencies with TypeScript interface or exported namespace"}),"\n",(0,r.jsxs)(n.p,{children:["Please use Angular ",(0,r.jsx)(n.a,{href:"https://angular.dev/api/core/inject",children:"inject"})," instead of ",(0,r.jsx)(n.a,{href:"https://angular.dev/api/core/Inject",children:"@Inject"}),".\nThis is because ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," has caveat when working with class constructor and decorator."]})]})}function p(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>o});t(6540);var s=t(4164);const r={tabItem:"tabItem_Ymn6"};var a=t(4848);function o(e){let{children:n,hidden:t,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,o),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>w});var s=t(6540),r=t(4164),a=t(3104),o=t(6347),i=t(205),l=t(7485),c=t(1682),d=t(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:n,children:t}=e;return(0,s.useMemo)((()=>{const e=n??function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}}))}(t);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function p(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function m(e){let{queryString:n=!1,groupId:t}=e;const r=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(r.location.search);n.set(a,e),r.replace({...r.location,search:n.toString()})}),[a,r])]}function g(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,a=h(e),[o,l]=(0,s.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!p({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const s=t.find((e=>e.default))??t[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:a}))),[c,u]=m({queryString:t,groupId:r}),[g,f]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,a]=(0,d.Dv)(t);return[r,(0,s.useCallback)((e=>{t&&a.set(e)}),[t,a])]}({groupId:r}),j=(()=>{const e=c??g;return p({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{j&&l(j)}),[j]);return{selectedValue:o,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),f(e)}),[u,f,a]),tabValues:a}}var f=t(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=t(4848);function x(e){let{className:n,block:t,selectedValue:s,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),d=e=>{const n=e.currentTarget,t=l.indexOf(n),r=i[t].value;r!==s&&(c(n),o(r))},u=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":t},n),children:i.map((e=>{let{value:n,label:t,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===n?0:-1,"aria-selected":s===n,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:a}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function y(e){const n=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...n,...e}),(0,b.jsx)(v,{...n,...e})]})}function w(e){const n=(0,f.A)();return(0,b.jsx)(y,{...e,children:u(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>i});var s=t(6540);const r={},a=s.createContext(r);function o(e){const n=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2007],{9847:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>p,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-14.5/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/guides/troubleshooting.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/guides/absolute-imports"}}');var r=t(4848),a=t(8453),o=t(1470),i=t(9365);const l={id:"troubleshooting",title:"Troubleshooting"},c=void 0,d={},u=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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 h(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...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,{className:"language-json",metastring:'title="tsconfig.spec.json"',children:'{\n "compilerOptions": {\n "emitDecoratorMetadata": true\n }\n}\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to ",(0,r.jsx)(n.code,{children:"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 ",(0,r.jsx)(n.code,{children:"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",metastring:'title="setup-jest.ts"',children:"import 'core-js/es/reflect';\nimport '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",metastring:'title="some.component.spec.ts"',children:"beforeEach(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.jsx)(n.p,{children:"Add this to your global mock file"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest-global-mocks.ts"',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,{className:"language-shell",children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n} satisfies Config;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,r.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,r.jsx)(n.code,{children:"@angular"}),", ",(0,r.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,r.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,r.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,r.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,r.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,r.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,r.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,r.jsx)(n.p,{children:"or"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,r.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,r.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,r.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,r.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Install ",(0,r.jsx)(n.code,{children:"babel-jest"}),", ",(0,r.jsx)(n.code,{children:"@babel/core"})," and ",(0,r.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,r.jsxs)(n.li,{children:["Create a ",(0,r.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,r.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-json",metastring:'title=".babelrc"',children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Define the usage of ",(0,r.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,r.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n //...\n babelConfig: true,\n //...\n },\n ],\n },\n} satisfies Config;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n //...\n babelConfig: true,\n //...\n },\n ],\n },\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,r.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,r.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,r.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,r.jsx)(n.code,{children:"firebase"})," and ",(0,r.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,r.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-shell",children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,r.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,r.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,r.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,r.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,r.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,r.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,r.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-shell",children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,r.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,r.jsxs)(n.p,{children:["In these cases, a ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,r.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,r.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,r.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.resolver.ts"',children:"import type { SyncResolver } from 'jest-resolve';\n\nconst myResolver: SyncResolver = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n\nexport = myResolver;\n"})}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n resolver: '/src/jest.resolver.ts',\n //...\n} satisfies Config;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n resolver: '/src/jest.resolver.js',\n //...\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"inject-dependencies-with-typescript-interface-or-exported-namespace",children:"Inject dependencies with TypeScript interface or exported namespace"}),"\n",(0,r.jsxs)(n.p,{children:["Please use Angular ",(0,r.jsx)(n.a,{href:"https://angular.dev/api/core/inject",children:"inject"})," instead of ",(0,r.jsx)(n.a,{href:"https://angular.dev/api/core/Inject",children:"@Inject"}),".\nThis is because ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," has caveat when working with class constructor and decorator."]})]})}function p(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>o});t(6540);var s=t(4164);const r={tabItem:"tabItem_Ymn6"};var a=t(4848);function o(e){let{children:n,hidden:t,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,o),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>w});var s=t(6540),r=t(4164),a=t(3104),o=t(6347),i=t(205),l=t(7485),c=t(1682),d=t(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:n,children:t}=e;return(0,s.useMemo)((()=>{const e=n??function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}}))}(t);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function p(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function m(e){let{queryString:n=!1,groupId:t}=e;const r=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(r.location.search);n.set(a,e),r.replace({...r.location,search:n.toString()})}),[a,r])]}function g(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,a=h(e),[o,l]=(0,s.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!p({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const s=t.find((e=>e.default))??t[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:a}))),[c,u]=m({queryString:t,groupId:r}),[g,f]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,a]=(0,d.Dv)(t);return[r,(0,s.useCallback)((e=>{t&&a.set(e)}),[t,a])]}({groupId:r}),j=(()=>{const e=c??g;return p({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{j&&l(j)}),[j]);return{selectedValue:o,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),f(e)}),[u,f,a]),tabValues:a}}var f=t(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=t(4848);function x(e){let{className:n,block:t,selectedValue:s,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),d=e=>{const n=e.currentTarget,t=l.indexOf(n),r=i[t].value;r!==s&&(c(n),o(r))},u=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":t},n),children:i.map((e=>{let{value:n,label:t,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===n?0:-1,"aria-selected":s===n,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:a}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function y(e){const n=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...n,...e}),(0,b.jsx)(v,{...n,...e})]})}function w(e){const n=(0,f.A)();return(0,b.jsx)(y,{...e,children:u(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>i});var s=t(6540);const r={},a=s.createContext(r);function o(e){const n=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/47c825a2.b1b2cca6.js b/assets/js/47c825a2.5313aee9.js similarity index 99% rename from assets/js/47c825a2.b1b2cca6.js rename to assets/js/47c825a2.5313aee9.js index fc25bffe1f..0abe92fe2a 100644 --- a/assets/js/47c825a2.b1b2cca6.js +++ b/assets/js/47c825a2.5313aee9.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8879],{9582:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>b,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/docs/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/next/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/using-with-babel.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/next/guides/snapshot-testing"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/next/guides/absolute-imports"}}');var r=n(4848),a=n(8453),l=n(1470),i=n(9365);const o={id:"using-with-babel",title:"Using with Babel"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you wish to use ",(0,r.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,r.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install ",(0,r.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,r.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:'title="babel.config.js"',children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsxs)(t.em,{children:["Note: do not use a ",(0,r.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,r.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,r.jsxs)(t.ol,{start:"3",children:["\n",(0,r.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n} satisfies Config;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n} satisfies Config;\n"})})})]})]})}function b(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),i=n(205),o=n(7485),u=n(1682),c=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function b(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,o.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,o]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!b({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:r}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),g=(()=>{const e=u??f;return b({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{g&&o(g)}),[g]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!b({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);o(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:i}=e;const o=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=o.indexOf(t),r=i[n].value;r!==s&&(u(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=o.indexOf(e.currentTarget)+1;t=o[n]??o[0];break}case"ArrowLeft":{const n=o.indexOf(e.currentTarget)-1;t=o[n]??o[o.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{o.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.A)("tabs-container",g.tabList),children:[(0,j.jsx)(x,{...t,...e}),(0,j.jsx)(v,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>i});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8879],{9582:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>b,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/docs/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/next/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/using-with-babel.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/next/guides/snapshot-testing"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/next/guides/absolute-imports"}}');var r=n(4848),a=n(8453),l=n(1470),i=n(9365);const o={id:"using-with-babel",title:"Using with Babel"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you wish to use ",(0,r.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,r.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install ",(0,r.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,r.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:'title="babel.config.js"',children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsxs)(t.em,{children:["Note: do not use a ",(0,r.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,r.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,r.jsxs)(t.ol,{start:"3",children:["\n",(0,r.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n} satisfies Config;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n} satisfies Config;\n"})})})]})]})}function b(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),i=n(205),o=n(7485),u=n(1682),c=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function b(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,o.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,o]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!b({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:r}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),g=(()=>{const e=u??f;return b({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{g&&o(g)}),[g]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!b({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);o(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:i}=e;const o=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=o.indexOf(t),r=i[n].value;r!==s&&(u(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=o.indexOf(e.currentTarget)+1;t=o[n]??o[0];break}case"ArrowLeft":{const n=o.indexOf(e.currentTarget)-1;t=o[n]??o[o.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{o.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.A)("tabs-container",g.tabList),children:[(0,j.jsx)(x,{...t,...e}),(0,j.jsx)(v,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>i});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/47cccd8d.4cc9f0c7.js b/assets/js/47cccd8d.e3120e3e.js similarity index 97% rename from assets/js/47cccd8d.4cc9f0c7.js rename to assets/js/47cccd8d.e3120e3e.js index e7b905bce0..379c03e1aa 100644 --- a/assets/js/47cccd8d.4cc9f0c7.js +++ b/assets/js/47cccd8d.e3120e3e.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6323],{4423:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/versioned_docs/version-12.0/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/12.0/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/guides/absolute-imports.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/12.0/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/12.0/guides/troubleshooting"}}');var i=s(4848),n=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,i.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,i.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,i.jsxs)(t.p,{children:["More information see ",(0,i.jsx)(t.code,{children:"ts-jest"})," ",(0,i.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const i={},n=o.createContext(i);function r(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6323],{4423:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/versioned_docs/version-12.0/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/12.0/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/guides/absolute-imports.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/12.0/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/12.0/guides/troubleshooting"}}');var i=s(4848),n=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,i.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,i.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,i.jsxs)(t.p,{children:["More information see ",(0,i.jsx)(t.code,{children:"ts-jest"})," ",(0,i.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const i={},n=o.createContext(i);function r(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/48dd39e2.cb1c0cfd.js b/assets/js/48dd39e2.d4be3244.js similarity index 99% rename from assets/js/48dd39e2.cb1c0cfd.js rename to assets/js/48dd39e2.d4be3244.js index 87f4679f94..79eeed5cfb 100644 --- a/assets/js/48dd39e2.cb1c0cfd.js +++ b/assets/js/48dd39e2.d4be3244.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2442],{6990:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>p,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the globals of Jest config object","source":"@site/versioned_docs/version-12.0/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/12.0/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/getting-started/options.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/12.0/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/12.0/getting-started/test-environment"}}');var r=t(4848),o=t(8453),i=t(1470),a=t(9365);const l={id:"options",title:"Options"},c=void 0,d={},u=[{value:"Processing with esbuild",id:"processing-with-esbuild",level:3},{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function h(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,r.jsx)(n.code,{children:"globals"})," of Jest config object\nin the ",(0,r.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,r.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,r.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,r.jsxs)(n.p,{children:["More information about ",(0,r.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,r.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,r.jsxs)(n.admonition,{type:"important",children:[(0,r.jsxs)(n.p,{children:["Since ",(0,r.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,r.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,r.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]}),(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n\nexport default jestConfig;\n"})})})]}),(0,r.jsx)(n.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),(0,r.jsxs)(n.p,{children:["Since ",(0,r.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,r.jsx)(n.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,r.jsx)(n.code,{children:".mjs"})," files\nwill be processed by ",(0,r.jsx)(n.code,{children:"esbuild"})," in ",(0,r.jsx)(n.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,r.jsx)(n.code,{children:"esbuild"}),", one can do the following:"]}),(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n globals: {\n ngJest: {\n processWithEsbuild: [],\n },\n },\n}\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globals: {\n ngJest: {\n processWithEsbuild: [],\n },\n },\n}\n\nexport default jestConfig;\n"})})})]})]}),"\n",(0,r.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst snapshotSerializers = require('jest-preset-angular/build/serializers');\n\nmodule.exports = {\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n },\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n snapshotSerializers,\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',\n },\n};\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport snapshotSerializers from 'jest-preset-angular/build/serializers';\n\nconst jestConfig: Config = {\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n },\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n snapshotSerializers,\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.admonition,{type:"important",children:(0,r.jsxs)(n.p,{children:["Jest runs with ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,r.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,r.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,r.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["We're using some ",(0,r.jsx)(n.code,{children:'"globals"'})," to pass information about configuration to use for code compilation with ",(0,r.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,r.jsx)(n.code,{children:"ts"}),"), HTML (",(0,r.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,r.jsx)(n.code,{children:"js"}),"), JSON (",(0,r.jsx)(n.code,{children:"json"}),") and ESM JavaScript (",(0,r.jsx)(n.code,{children:"mjs"}),") files."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses ",(0,r.jsx)(n.code,{children:"RegExp"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,r.jsx)(n.code,{children:"package.json"})," definitions."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. Note: by default angular adds\nsome angular-specific attributes to the code (like ",(0,r.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,r.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,r.jsx)(n.code,{children:"_ngcontent-c*"})," etc).\nThis package provides serializer to remove such attributes. This makes snapshots cleaner and more human-readable.\nTo remove such specific attributes use ",(0,r.jsx)(n.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,r.jsx)(n.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,r.jsx)(n.code,{children:".mjs"})," files which come from ",(0,r.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,r.jsx)(n.code,{children:"TS"}),", ",(0,r.jsx)(n.code,{children:"JS"}),", ",(0,r.jsx)(n.code,{children:"MJS"}),", ",(0,r.jsx)(n.code,{children:"HTML"}),", or ",(0,r.jsx)(n.code,{children:"SVG"})," file through so called ",(0,r.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>i});t(6540);var s=t(4164);const r={tabItem:"tabItem_Ymn6"};var o=t(4848);function i(e){let{children:n,hidden:t,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,i),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>w});var s=t(6540),r=t(4164),o=t(3104),i=t(6347),a=t(205),l=t(7485),c=t(1682),d=t(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:n,children:t}=e;return(0,s.useMemo)((()=>{const e=n??function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}}))}(t);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function p(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function j(e){let{queryString:n=!1,groupId:t}=e;const r=(0,i.W6)(),o=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(o),(0,s.useCallback)((e=>{if(!o)return;const n=new URLSearchParams(r.location.search);n.set(o,e),r.replace({...r.location,search:n.toString()})}),[o,r])]}function g(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,o=h(e),[i,l]=(0,s.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!p({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const s=t.find((e=>e.default))??t[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:o}))),[c,u]=j({queryString:t,groupId:r}),[g,m]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,o]=(0,d.Dv)(t);return[r,(0,s.useCallback)((e=>{t&&o.set(e)}),[t,o])]}({groupId:r}),f=(()=>{const e=c??g;return p({value:e,tabValues:o})?e:null})();(0,a.A)((()=>{f&&l(f)}),[f]);return{selectedValue:i,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),m(e)}),[u,m,o]),tabValues:o}}var m=t(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=t(4848);function b(e){let{className:n,block:t,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.a_)(),d=e=>{const n=e.currentTarget,t=l.indexOf(n),r=a[t].value;r!==s&&(c(n),i(r))},u=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":t},n),children:a.map((e=>{let{value:n,label:t,attributes:o}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:s===n?0:-1,"aria-selected":s===n,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...o,className:(0,r.A)("tabs__item",f.tabItem,o?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:o}=e;const i=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=i.find((e=>e.props.value===o));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map(((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==o})))})}function y(e){const n=g(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function w(e){const n=(0,m.A)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>a});var s=t(6540);const r={},o=s.createContext(r);function i(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2442],{6990:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>p,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the globals of Jest config object","source":"@site/versioned_docs/version-12.0/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/12.0/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/getting-started/options.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/12.0/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/12.0/getting-started/test-environment"}}');var r=t(4848),o=t(8453),i=t(1470),a=t(9365);const l={id:"options",title:"Options"},c=void 0,d={},u=[{value:"Processing with esbuild",id:"processing-with-esbuild",level:3},{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function h(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,r.jsx)(n.code,{children:"globals"})," of Jest config object\nin the ",(0,r.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,r.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,r.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,r.jsxs)(n.p,{children:["More information about ",(0,r.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,r.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,r.jsxs)(n.admonition,{type:"important",children:[(0,r.jsxs)(n.p,{children:["Since ",(0,r.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,r.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,r.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]}),(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n\nexport default jestConfig;\n"})})})]}),(0,r.jsx)(n.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),(0,r.jsxs)(n.p,{children:["Since ",(0,r.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,r.jsx)(n.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,r.jsx)(n.code,{children:".mjs"})," files\nwill be processed by ",(0,r.jsx)(n.code,{children:"esbuild"})," in ",(0,r.jsx)(n.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,r.jsx)(n.code,{children:"esbuild"}),", one can do the following:"]}),(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n globals: {\n ngJest: {\n processWithEsbuild: [],\n },\n },\n}\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globals: {\n ngJest: {\n processWithEsbuild: [],\n },\n },\n}\n\nexport default jestConfig;\n"})})})]})]}),"\n",(0,r.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst snapshotSerializers = require('jest-preset-angular/build/serializers');\n\nmodule.exports = {\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n },\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n snapshotSerializers,\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',\n },\n};\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport snapshotSerializers from 'jest-preset-angular/build/serializers';\n\nconst jestConfig: Config = {\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n },\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n snapshotSerializers,\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.admonition,{type:"important",children:(0,r.jsxs)(n.p,{children:["Jest runs with ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,r.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,r.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,r.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["We're using some ",(0,r.jsx)(n.code,{children:'"globals"'})," to pass information about configuration to use for code compilation with ",(0,r.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,r.jsx)(n.code,{children:"ts"}),"), HTML (",(0,r.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,r.jsx)(n.code,{children:"js"}),"), JSON (",(0,r.jsx)(n.code,{children:"json"}),") and ESM JavaScript (",(0,r.jsx)(n.code,{children:"mjs"}),") files."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses ",(0,r.jsx)(n.code,{children:"RegExp"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,r.jsx)(n.code,{children:"package.json"})," definitions."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. Note: by default angular adds\nsome angular-specific attributes to the code (like ",(0,r.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,r.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,r.jsx)(n.code,{children:"_ngcontent-c*"})," etc).\nThis package provides serializer to remove such attributes. This makes snapshots cleaner and more human-readable.\nTo remove such specific attributes use ",(0,r.jsx)(n.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,r.jsx)(n.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,r.jsx)(n.code,{children:".mjs"})," files which come from ",(0,r.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,r.jsx)(n.code,{children:"TS"}),", ",(0,r.jsx)(n.code,{children:"JS"}),", ",(0,r.jsx)(n.code,{children:"MJS"}),", ",(0,r.jsx)(n.code,{children:"HTML"}),", or ",(0,r.jsx)(n.code,{children:"SVG"})," file through so called ",(0,r.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>i});t(6540);var s=t(4164);const r={tabItem:"tabItem_Ymn6"};var o=t(4848);function i(e){let{children:n,hidden:t,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,i),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>w});var s=t(6540),r=t(4164),o=t(3104),i=t(6347),a=t(205),l=t(7485),c=t(1682),d=t(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:n,children:t}=e;return(0,s.useMemo)((()=>{const e=n??function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}}))}(t);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function p(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function j(e){let{queryString:n=!1,groupId:t}=e;const r=(0,i.W6)(),o=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(o),(0,s.useCallback)((e=>{if(!o)return;const n=new URLSearchParams(r.location.search);n.set(o,e),r.replace({...r.location,search:n.toString()})}),[o,r])]}function g(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,o=h(e),[i,l]=(0,s.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!p({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const s=t.find((e=>e.default))??t[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:o}))),[c,u]=j({queryString:t,groupId:r}),[g,m]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,o]=(0,d.Dv)(t);return[r,(0,s.useCallback)((e=>{t&&o.set(e)}),[t,o])]}({groupId:r}),f=(()=>{const e=c??g;return p({value:e,tabValues:o})?e:null})();(0,a.A)((()=>{f&&l(f)}),[f]);return{selectedValue:i,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),m(e)}),[u,m,o]),tabValues:o}}var m=t(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=t(4848);function b(e){let{className:n,block:t,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.a_)(),d=e=>{const n=e.currentTarget,t=l.indexOf(n),r=a[t].value;r!==s&&(c(n),i(r))},u=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":t},n),children:a.map((e=>{let{value:n,label:t,attributes:o}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:s===n?0:-1,"aria-selected":s===n,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...o,className:(0,r.A)("tabs__item",f.tabItem,o?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:o}=e;const i=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=i.find((e=>e.props.value===o));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map(((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==o})))})}function y(e){const n=g(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function w(e){const n=(0,m.A)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>a});var s=t(6540);const r={},o=s.createContext(r);function i(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/4941928a.da724449.js b/assets/js/4941928a.d7110bd6.js similarity index 99% rename from assets/js/4941928a.da724449.js rename to assets/js/4941928a.d7110bd6.js index de27819ded..8eb58b81d5 100644 --- a/assets/js/4941928a.da724449.js +++ b/assets/js/4941928a.d7110bd6.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2703],{8260:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>u,contentTitle:()=>c,default:()=>g,frontMatter:()=>l,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"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.3/guides/angular-13+.md","sourceDirName":"guides","slug":"/guides/angular-13+","permalink":"/jest-preset-angular/docs/14.3/guides/angular-13+","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/guides/angular-13+.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"angular-13+","title":"Angular >=13"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/14.3/guides/angular-ivy"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/14.3/guides/esm-support"}}');var r=t(4848),a=t(8453),o=t(1470),i=t(9365);const l={id:"angular-13+",title:"Angular >=13"},c=void 0,u={},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,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,r.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,r.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,r.jsx)(n.strong,{children:"Angular 13"})," using ",(0,r.jsx)(n.a,{href:"/jest-preset-angular/docs/14.3/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,r.jsx)(n.admonition,{type:"important",children:(0,r.jsxs)(n.p,{children:["With Jest 28 and ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,r.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,r.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,r.jsxs)(n.p,{children:["Starting from ",(0,r.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,r.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,r.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,r.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transform"})," is updated to include ",(0,r.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,r.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:["Upgrade the project to ",(0,r.jsx)(n.strong,{children:"Angular 13"})," following ",(0,r.jsx)(n.a,{href:"https://angular.dev/update-guide/",children:"guide"})]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,r.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,r.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example-apps"})," for the tests that run using ESM mode."]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,r.jsx)(n.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsx)(n.h2,{id:"potential-issues-with-angular-13-esm-package-format-and-workaround",children:"Potential issues with Angular 13 ESM package format and workaround"}),"\n",(0,r.jsxs)(n.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,r.jsx)(n.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one needs to add ",(0,r.jsx)(n.code,{children:"mjs"})," to ",(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",children:"Usage with Angular libraries which are built with Angular CLI 13"}),"\n",(0,r.jsxs)(n.p,{children:["Besides, the changes in Angular packages themselves, ",(0,r.jsx)(n.strong,{children:"Angular"})," libraries which are built with ",(0,r.jsx)(n.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,r.jsx)(n.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,r.jsx)(n.strong,{children:"CommonJS"})," mode."]}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one should modify ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"usage-with-ionic-6-or-7",children:"Usage with Ionic 6 or 7"}),"\n",(0,r.jsxs)(n.p,{children:["To support Ionic 6 or 7 you will need to modify ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>o});t(6540);var s=t(4164);const r={tabItem:"tabItem_Ymn6"};var a=t(4848);function o(e){let{children:n,hidden:t,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,o),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>S});var s=t(6540),r=t(4164),a=t(3104),o=t(6347),i=t(205),l=t(7485),c=t(1682),u=t(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:n,children:t}=e;return(0,s.useMemo)((()=>{const e=n??function(e){return d(e).map((e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}}))}(t);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function g(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function m(e){let{queryString:n=!1,groupId:t}=e;const r=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(r.location.search);n.set(a,e),r.replace({...r.location,search:n.toString()})}),[a,r])]}function h(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,a=p(e),[o,l]=(0,s.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!g({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const s=t.find((e=>e.default))??t[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:a}))),[c,d]=m({queryString:t,groupId:r}),[h,f]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,a]=(0,u.Dv)(t);return[r,(0,s.useCallback)((e=>{t&&a.set(e)}),[t,a])]}({groupId:r}),j=(()=>{const e=c??h;return g({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{j&&l(j)}),[j]);return{selectedValue:o,selectValue:(0,s.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),f(e)}),[d,f,a]),tabValues:a}}var f=t(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=t(4848);function b(e){let{className:n,block:t,selectedValue:s,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const n=e.currentTarget,t=l.indexOf(n),r=i[t].value;r!==s&&(c(n),o(r))},d=e=>{let n=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":t},n),children:i.map((e=>{let{value:n,label:t,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:s===n?0:-1,"aria-selected":s===n,ref:e=>{l.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:a}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function y(e){const n=h(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function S(e){const n=(0,f.A)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>i});var s=t(6540);const r={},a=s.createContext(r);function o(e){const n=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2703],{8260:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>u,contentTitle:()=>c,default:()=>g,frontMatter:()=>l,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"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.3/guides/angular-13+.md","sourceDirName":"guides","slug":"/guides/angular-13+","permalink":"/jest-preset-angular/docs/14.3/guides/angular-13+","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/guides/angular-13+.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"angular-13+","title":"Angular >=13"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/14.3/guides/angular-ivy"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/14.3/guides/esm-support"}}');var r=t(4848),a=t(8453),o=t(1470),i=t(9365);const l={id:"angular-13+",title:"Angular >=13"},c=void 0,u={},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,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,r.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,r.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,r.jsx)(n.strong,{children:"Angular 13"})," using ",(0,r.jsx)(n.a,{href:"/jest-preset-angular/docs/14.3/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,r.jsx)(n.admonition,{type:"important",children:(0,r.jsxs)(n.p,{children:["With Jest 28 and ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,r.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,r.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,r.jsxs)(n.p,{children:["Starting from ",(0,r.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,r.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,r.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,r.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transform"})," is updated to include ",(0,r.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,r.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:["Upgrade the project to ",(0,r.jsx)(n.strong,{children:"Angular 13"})," following ",(0,r.jsx)(n.a,{href:"https://angular.dev/update-guide/",children:"guide"})]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,r.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,r.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example-apps"})," for the tests that run using ESM mode."]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,r.jsx)(n.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsx)(n.h2,{id:"potential-issues-with-angular-13-esm-package-format-and-workaround",children:"Potential issues with Angular 13 ESM package format and workaround"}),"\n",(0,r.jsxs)(n.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,r.jsx)(n.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one needs to add ",(0,r.jsx)(n.code,{children:"mjs"})," to ",(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",children:"Usage with Angular libraries which are built with Angular CLI 13"}),"\n",(0,r.jsxs)(n.p,{children:["Besides, the changes in Angular packages themselves, ",(0,r.jsx)(n.strong,{children:"Angular"})," libraries which are built with ",(0,r.jsx)(n.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,r.jsx)(n.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,r.jsx)(n.strong,{children:"CommonJS"})," mode."]}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one should modify ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"usage-with-ionic-6-or-7",children:"Usage with Ionic 6 or 7"}),"\n",(0,r.jsxs)(n.p,{children:["To support Ionic 6 or 7 you will need to modify ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>o});t(6540);var s=t(4164);const r={tabItem:"tabItem_Ymn6"};var a=t(4848);function o(e){let{children:n,hidden:t,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,o),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>S});var s=t(6540),r=t(4164),a=t(3104),o=t(6347),i=t(205),l=t(7485),c=t(1682),u=t(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:n,children:t}=e;return(0,s.useMemo)((()=>{const e=n??function(e){return d(e).map((e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}}))}(t);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function g(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function m(e){let{queryString:n=!1,groupId:t}=e;const r=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(r.location.search);n.set(a,e),r.replace({...r.location,search:n.toString()})}),[a,r])]}function h(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,a=p(e),[o,l]=(0,s.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!g({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const s=t.find((e=>e.default))??t[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:a}))),[c,d]=m({queryString:t,groupId:r}),[h,f]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,a]=(0,u.Dv)(t);return[r,(0,s.useCallback)((e=>{t&&a.set(e)}),[t,a])]}({groupId:r}),j=(()=>{const e=c??h;return g({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{j&&l(j)}),[j]);return{selectedValue:o,selectValue:(0,s.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),f(e)}),[d,f,a]),tabValues:a}}var f=t(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=t(4848);function b(e){let{className:n,block:t,selectedValue:s,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const n=e.currentTarget,t=l.indexOf(n),r=i[t].value;r!==s&&(c(n),o(r))},d=e=>{let n=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":t},n),children:i.map((e=>{let{value:n,label:t,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:s===n?0:-1,"aria-selected":s===n,ref:e=>{l.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:a}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function y(e){const n=h(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function S(e){const n=(0,f.A)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>i});var s=t(6540);const r={},a=s.createContext(r);function o(e){const n=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/494f4f5e.7e1a1b9d.js b/assets/js/494f4f5e.f0453edc.js similarity index 97% rename from assets/js/494f4f5e.7e1a1b9d.js rename to assets/js/494f4f5e.f0453edc.js index 1e138beef2..d858caff71 100644 --- a/assets/js/494f4f5e.7e1a1b9d.js +++ b/assets/js/494f4f5e.f0453edc.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8108],{2697:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>d,frontMatter:()=>o,metadata:()=>s,toc:()=>l});const s=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"Starting from v9.0.0+, jest-preset-angular is fully compatible with Angular Ivy. To make sure that Jest uses the","source":"@site/versioned_docs/version-10.x/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/10.x/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/guides/angular-ivy.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/10.x/getting-started/test-environment"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/10.x/guides/esm-support"}}');var r=n(4848),i=n(8453);const o={id:"angular-ivy",title:"Angular Ivy"},a=void 0,c={},l=[];function u(e){const t={code:"code",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["Starting from ",(0,r.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,r.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,r.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," also provides util script to help you to run ",(0,r.jsx)(t.code,{children:"ngcc"})," with Jest but this script only works via the\nJavaScript version of Jest config"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nrequire('jest-preset-angular/ngcc-jest-processor');\n\nmodule.exports = {\n // [...]\n};\n"})})]})}function d(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>a});var s=n(6540);const r={},i=s.createContext(r);function o(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8108],{2697:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>d,frontMatter:()=>o,metadata:()=>s,toc:()=>l});const s=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"Starting from v9.0.0+, jest-preset-angular is fully compatible with Angular Ivy. To make sure that Jest uses the","source":"@site/versioned_docs/version-10.x/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/10.x/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/guides/angular-ivy.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/10.x/getting-started/test-environment"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/10.x/guides/esm-support"}}');var r=n(4848),i=n(8453);const o={id:"angular-ivy",title:"Angular Ivy"},a=void 0,c={},l=[];function u(e){const t={code:"code",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["Starting from ",(0,r.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,r.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,r.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," also provides util script to help you to run ",(0,r.jsx)(t.code,{children:"ngcc"})," with Jest but this script only works via the\nJavaScript version of Jest config"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nrequire('jest-preset-angular/ngcc-jest-processor');\n\nmodule.exports = {\n // [...]\n};\n"})})]})}function d(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>a});var s=n(6540);const r={},i=s.createContext(r);function o(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/4b3f866b.02ebfdcf.js b/assets/js/4b3f866b.69419345.js similarity index 99% rename from assets/js/4b3f866b.02ebfdcf.js rename to assets/js/4b3f866b.69419345.js index b37f9c8f0c..ab2111f33f 100644 --- a/assets/js/4b3f866b.02ebfdcf.js +++ b/assets/js/4b3f866b.69419345.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7400],{9197:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>h,frontMatter:()=>l,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/versioned_docs/version-14.2/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/14.2/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/guides/esm-support.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/14.2/guides/angular-13+"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/14.2/guides/jsdom-version"}}');var r=s(4848),a=s(8453),o=s(1470),i=s(9365);const l={id:"esm-support",title:"ESM Support"},u=void 0,c={},d=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["To use ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,r.jsx)(t.code,{children:"ts-jest"})," config option ",(0,r.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["There is also a ",(0,r.jsx)(t.a,{href:"/jest-preset-angular/docs/14.2/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,r.jsx)(t.admonition,{type:"tip",children:(0,r.jsxs)(t.p,{children:["We have ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example apps"})," which contains base ESM setup to work with Jest and Angular."]})}),"\n",(0,r.jsxs)(t.p,{children:["Besides, there is ",(0,r.jsx)(t.code,{children:"setup-jest.mjs"})," to add to Jest setup file to ensure that Jest can set up test environment properly."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,r.jsx)(t.h3,{id:"examples",children:"Examples"}),"\n",(0,r.jsx)(t.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n transform: {\n '^.+\\\\.(ts|js|html)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html)$',\n useESM: true,\n },\n ],\n },\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n useESM: true,\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["Jest will attempt to load ",(0,r.jsx)(t.strong,{children:"ESM"})," files from ",(0,r.jsx)(t.code,{children:"node_modules"})," with default ",(0,r.jsx)(t.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,r.jsx)(t.strong,{children:"ESM"})," built files or ",(0,r.jsx)(t.strong,{children:"ESM"})," files which are outside ",(0,r.jsx)(t.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,r.jsxs)(t.p,{children:["To fix that, one can use ",(0,r.jsx)(t.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,r.jsx)(t.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig = {\n //...\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,s)=>{s.d(t,{A:()=>o});s(6540);var n=s(4164);const r={tabItem:"tabItem_Ymn6"};var a=s(4848);function o(e){let{children:t,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.A)(r.tabItem,o),hidden:s,children:t})}},1470:(e,t,s)=>{s.d(t,{A:()=>S});var n=s(6540),r=s(4164),a=s(3104),o=s(6347),i=s(205),l=s(7485),u=s(1682),c=s(679);function d(e){return n.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,n.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:s}=e;return(0,n.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:s,attributes:n,default:r}}=e;return{value:t,label:s,attributes:n,default:r}}))}(s);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,s])}function h(e){let{value:t,tabValues:s}=e;return s.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:s}=e;const r=(0,o.W6)(),a=function(e){let{queryString:t=!1,groupId:s}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!s)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:t,groupId:s});return[(0,l.aZ)(a),(0,n.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:s=!1,groupId:r}=e,a=p(e),[o,l]=(0,n.useState)((()=>function(e){let{defaultValue:t,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const n=s.find((e=>e.default))??s[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:a}))),[u,d]=m({queryString:s,groupId:r}),[f,g]=function(e){let{groupId:t}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(s);return[r,(0,n.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),j=(()=>{const e=u??f;return h({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{j&&l(j)}),[j]);return{selectedValue:o,selectValue:(0,n.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=s(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(4848);function b(e){let{className:t,block:s,selectedValue:n,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,s=l.indexOf(t),r=i[s].value;r!==n&&(u(t),o(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const s=l.indexOf(e.currentTarget)+1;t=l[s]??l[0];break}case"ArrowLeft":{const s=l.indexOf(e.currentTarget)-1;t=l[s]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},t),children:i.map((e=>{let{value:t,label:s,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:n===t?0:-1,"aria-selected":n===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:a}=e;const o=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===a));return e?(0,n.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function S(e){const t=(0,g.A)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,s)=>{s.d(t,{R:()=>o,x:()=>i});var n=s(6540);const r={},a=n.createContext(r);function o(e){const t=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),n.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7400],{9197:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>h,frontMatter:()=>l,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/versioned_docs/version-14.2/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/14.2/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/guides/esm-support.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/14.2/guides/angular-13+"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/14.2/guides/jsdom-version"}}');var r=s(4848),a=s(8453),o=s(1470),i=s(9365);const l={id:"esm-support",title:"ESM Support"},u=void 0,c={},d=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["To use ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,r.jsx)(t.code,{children:"ts-jest"})," config option ",(0,r.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["There is also a ",(0,r.jsx)(t.a,{href:"/jest-preset-angular/docs/14.2/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,r.jsx)(t.admonition,{type:"tip",children:(0,r.jsxs)(t.p,{children:["We have ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example apps"})," which contains base ESM setup to work with Jest and Angular."]})}),"\n",(0,r.jsxs)(t.p,{children:["Besides, there is ",(0,r.jsx)(t.code,{children:"setup-jest.mjs"})," to add to Jest setup file to ensure that Jest can set up test environment properly."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,r.jsx)(t.h3,{id:"examples",children:"Examples"}),"\n",(0,r.jsx)(t.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n transform: {\n '^.+\\\\.(ts|js|html)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html)$',\n useESM: true,\n },\n ],\n },\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n useESM: true,\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["Jest will attempt to load ",(0,r.jsx)(t.strong,{children:"ESM"})," files from ",(0,r.jsx)(t.code,{children:"node_modules"})," with default ",(0,r.jsx)(t.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,r.jsx)(t.strong,{children:"ESM"})," built files or ",(0,r.jsx)(t.strong,{children:"ESM"})," files which are outside ",(0,r.jsx)(t.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,r.jsxs)(t.p,{children:["To fix that, one can use ",(0,r.jsx)(t.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,r.jsx)(t.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig = {\n //...\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,s)=>{s.d(t,{A:()=>o});s(6540);var n=s(4164);const r={tabItem:"tabItem_Ymn6"};var a=s(4848);function o(e){let{children:t,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.A)(r.tabItem,o),hidden:s,children:t})}},1470:(e,t,s)=>{s.d(t,{A:()=>S});var n=s(6540),r=s(4164),a=s(3104),o=s(6347),i=s(205),l=s(7485),u=s(1682),c=s(679);function d(e){return n.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,n.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:s}=e;return(0,n.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:s,attributes:n,default:r}}=e;return{value:t,label:s,attributes:n,default:r}}))}(s);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,s])}function h(e){let{value:t,tabValues:s}=e;return s.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:s}=e;const r=(0,o.W6)(),a=function(e){let{queryString:t=!1,groupId:s}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!s)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:t,groupId:s});return[(0,l.aZ)(a),(0,n.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:s=!1,groupId:r}=e,a=p(e),[o,l]=(0,n.useState)((()=>function(e){let{defaultValue:t,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const n=s.find((e=>e.default))??s[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:a}))),[u,d]=m({queryString:s,groupId:r}),[f,g]=function(e){let{groupId:t}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(s);return[r,(0,n.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),j=(()=>{const e=u??f;return h({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{j&&l(j)}),[j]);return{selectedValue:o,selectValue:(0,n.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=s(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(4848);function b(e){let{className:t,block:s,selectedValue:n,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,s=l.indexOf(t),r=i[s].value;r!==n&&(u(t),o(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const s=l.indexOf(e.currentTarget)+1;t=l[s]??l[0];break}case"ArrowLeft":{const s=l.indexOf(e.currentTarget)-1;t=l[s]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},t),children:i.map((e=>{let{value:t,label:s,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:n===t?0:-1,"aria-selected":n===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:a}=e;const o=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===a));return e?(0,n.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function S(e){const t=(0,g.A)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,s)=>{s.d(t,{R:()=>o,x:()=>i});var n=s(6540);const r={},a=n.createContext(r);function o(e){const t=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),n.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/4e0c07c5.63c25022.js b/assets/js/4e0c07c5.2117747f.js similarity index 99% rename from assets/js/4e0c07c5.63c25022.js rename to assets/js/4e0c07c5.2117747f.js index de5179fa59..38b84cac1e 100644 --- a/assets/js/4e0c07c5.63c25022.js +++ b/assets/js/4e0c07c5.2117747f.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5250],{7872:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the transform of Jest config object","source":"@site/docs/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/next/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/getting-started/options.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/next/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/next/getting-started/test-environment"}}');var r=n(4848),o=n(8453),i=n(1470),a=n(9365);const l={id:"options",title:"Options"},c=void 0,d={},u=[{value:"Processing with esbuild",id:"processing-with-esbuild",level:3},{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function p(e){const t={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,r.jsx)(t.code,{children:"transform"})," of Jest config object\nin the ",(0,r.jsx)(t.code,{children:"package.json"})," file of your project, or through a ",(0,r.jsx)(t.code,{children:"jest.config.js"}),", or ",(0,r.jsx)(t.code,{children:"jest.config.ts"})," file."]}),"\n",(0,r.jsxs)(t.p,{children:["More information about ",(0,r.jsx)(t.code,{children:"ts-jest"})," options, see ",(0,r.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v9.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,r.jsx)(t.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,r.jsx)(t.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]})}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n} satisfies Config;\n"})})}),(0,r.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),"\n",(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,r.jsx)(t.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,r.jsx)(t.code,{children:".mjs"})," files\nwill be processed by ",(0,r.jsx)(t.code,{children:"esbuild"})," in ",(0,r.jsx)(t.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,r.jsx)(t.code,{children:"esbuild"}),", one can do the following:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n processWithEsbuild: []\n }\n ]\n }\n} satisfies Config;\n"})}),"\n",(0,r.jsx)(i.A,{groupId:"code-examples",children:(0,r.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n processWithEsbuild: []\n }\n ]\n }\n} satisfies Config;\n"})})})}),"\n",(0,r.jsx)(t.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import type { Config } from 'jest';\n\nexport default {\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n snapshotSerializers: [\n 'jest-preset-angular/build/serializers/html-comment',\n 'jest-preset-angular/build/serializers/ng-snapshot',\n 'jest-preset-angular/build/serializers/no-ng-attributes',\n ],\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n ],\n },\n} satisfies Config;\n"})}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Jest runs with ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,r.jsx)(t.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,r.jsx)(t.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["We're using ",(0,r.jsx)(t.code,{children:'"transform"'})," to pass information about configuration to use for code compilation with ",(0,r.jsx)(t.code,{children:"ts-jest"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,r.jsx)(t.code,{children:"ts"}),"), HTML (",(0,r.jsx)(t.code,{children:"html"}),"), JavaScript (",(0,r.jsx)(t.code,{children:"js"}),"), JSON (",(0,r.jsx)(t.code,{children:"json"}),") and ESM JavaScript (",(0,r.jsx)(t.code,{children:"mjs"}),") files."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses ",(0,r.jsx)(t.code,{children:"RegExp"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. See more in ",(0,r.jsx)(t.a,{href:"/jest-preset-angular/docs/next/guides/snapshot-testing",children:"Snapshot testing"})]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,r.jsx)(t.code,{children:".mjs"})," files which come from ",(0,r.jsx)(t.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"transform"'})," \u2013 run every ",(0,r.jsx)(t.code,{children:"TS"}),", ",(0,r.jsx)(t.code,{children:"JS"}),", ",(0,r.jsx)(t.code,{children:"MJS"}),", ",(0,r.jsx)(t.code,{children:"HTML"}),", or ",(0,r.jsx)(t.code,{children:"SVG"})," file through so called ",(0,r.jsx)(t.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>i});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var o=n(4848);function i(e){let{children:t,hidden:n,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,i),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),o=n(3104),i=n(6347),a=n(205),l=n(7485),c=n(1682),d=n(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return u(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const r=(0,i.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,s.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(r.location.search);t.set(o,e),r.replace({...r.location,search:t.toString()})}),[o,r])]}function m(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,o=p(e),[i,l]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:o}))),[c,u]=f({queryString:n,groupId:r}),[m,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,o]=(0,d.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:r}),j=(()=>{const e=c??m;return h({value:e,tabValues:o})?e:null})();(0,a.A)((()=>{j&&l(j)}),[j]);return{selectedValue:i,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),g(e)}),[u,g,o]),tabValues:o}}var g=n(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=n(4848);function b(e){let{className:t,block:n,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.a_)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),r=a[n].value;r!==s&&(c(t),i(r))},u=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:a.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...o,className:(0,r.A)("tabs__item",j.tabItem,o?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:o}=e;const i=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=i.find((e=>e.props.value===o));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=m(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>a});var s=n(6540);const r={},o=s.createContext(r);function i(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5250],{7872:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the transform of Jest config object","source":"@site/docs/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/next/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/getting-started/options.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/next/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/next/getting-started/test-environment"}}');var r=n(4848),o=n(8453),i=n(1470),a=n(9365);const l={id:"options",title:"Options"},c=void 0,d={},u=[{value:"Processing with esbuild",id:"processing-with-esbuild",level:3},{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function p(e){const t={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,r.jsx)(t.code,{children:"transform"})," of Jest config object\nin the ",(0,r.jsx)(t.code,{children:"package.json"})," file of your project, or through a ",(0,r.jsx)(t.code,{children:"jest.config.js"}),", or ",(0,r.jsx)(t.code,{children:"jest.config.ts"})," file."]}),"\n",(0,r.jsxs)(t.p,{children:["More information about ",(0,r.jsx)(t.code,{children:"ts-jest"})," options, see ",(0,r.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v9.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,r.jsx)(t.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,r.jsx)(t.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]})}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n} satisfies Config;\n"})})}),(0,r.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),"\n",(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,r.jsx)(t.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,r.jsx)(t.code,{children:".mjs"})," files\nwill be processed by ",(0,r.jsx)(t.code,{children:"esbuild"})," in ",(0,r.jsx)(t.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,r.jsx)(t.code,{children:"esbuild"}),", one can do the following:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n processWithEsbuild: []\n }\n ]\n }\n} satisfies Config;\n"})}),"\n",(0,r.jsx)(i.A,{groupId:"code-examples",children:(0,r.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n processWithEsbuild: []\n }\n ]\n }\n} satisfies Config;\n"})})})}),"\n",(0,r.jsx)(t.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import type { Config } from 'jest';\n\nexport default {\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n snapshotSerializers: [\n 'jest-preset-angular/build/serializers/html-comment',\n 'jest-preset-angular/build/serializers/ng-snapshot',\n 'jest-preset-angular/build/serializers/no-ng-attributes',\n ],\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n ],\n },\n} satisfies Config;\n"})}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Jest runs with ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,r.jsx)(t.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,r.jsx)(t.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["We're using ",(0,r.jsx)(t.code,{children:'"transform"'})," to pass information about configuration to use for code compilation with ",(0,r.jsx)(t.code,{children:"ts-jest"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,r.jsx)(t.code,{children:"ts"}),"), HTML (",(0,r.jsx)(t.code,{children:"html"}),"), JavaScript (",(0,r.jsx)(t.code,{children:"js"}),"), JSON (",(0,r.jsx)(t.code,{children:"json"}),") and ESM JavaScript (",(0,r.jsx)(t.code,{children:"mjs"}),") files."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses ",(0,r.jsx)(t.code,{children:"RegExp"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. See more in ",(0,r.jsx)(t.a,{href:"/jest-preset-angular/docs/next/guides/snapshot-testing",children:"Snapshot testing"})]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,r.jsx)(t.code,{children:".mjs"})," files which come from ",(0,r.jsx)(t.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"transform"'})," \u2013 run every ",(0,r.jsx)(t.code,{children:"TS"}),", ",(0,r.jsx)(t.code,{children:"JS"}),", ",(0,r.jsx)(t.code,{children:"MJS"}),", ",(0,r.jsx)(t.code,{children:"HTML"}),", or ",(0,r.jsx)(t.code,{children:"SVG"})," file through so called ",(0,r.jsx)(t.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>i});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var o=n(4848);function i(e){let{children:t,hidden:n,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,i),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),o=n(3104),i=n(6347),a=n(205),l=n(7485),c=n(1682),d=n(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return u(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const r=(0,i.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,s.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(r.location.search);t.set(o,e),r.replace({...r.location,search:t.toString()})}),[o,r])]}function m(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,o=p(e),[i,l]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:o}))),[c,u]=f({queryString:n,groupId:r}),[m,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,o]=(0,d.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:r}),j=(()=>{const e=c??m;return h({value:e,tabValues:o})?e:null})();(0,a.A)((()=>{j&&l(j)}),[j]);return{selectedValue:i,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),g(e)}),[u,g,o]),tabValues:o}}var g=n(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=n(4848);function b(e){let{className:t,block:n,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.a_)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),r=a[n].value;r!==s&&(c(t),i(r))},u=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:a.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...o,className:(0,r.A)("tabs__item",j.tabItem,o?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:o}=e;const i=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=i.find((e=>e.props.value===o));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=m(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>a});var s=n(6540);const r={},o=s.createContext(r);function i(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/51d67042.74f2fca1.js b/assets/js/51d67042.8003d613.js similarity index 98% rename from assets/js/51d67042.74f2fca1.js rename to assets/js/51d67042.8003d613.js index 711ab551e9..d8a8be9cde 100644 --- a/assets/js/51d67042.74f2fca1.js +++ b/assets/js/51d67042.8003d613.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6060],{9697:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>a,contentTitle:()=>l,default:()=>u,frontMatter:()=>r,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-11.0/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/11.0/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/guides/using-with-babel.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/11.0/guides/jsdom-version"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/11.0/guides/absolute-imports"}}');var i=n(4848),o=n(8453);const r={id:"using-with-babel",title:"Using with Babel"},l=void 0,a={},c=[];function d(e){const s={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(s.p,{children:["If you wish to use ",(0,i.jsx)(s.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Install dependencies required by the official Jest documentation for ",(0,i.jsx)(s.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Install ",(0,i.jsx)(s.code,{children:"@babel/preset-env"})," and add ",(0,i.jsx)(s.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsxs)(s.em,{children:["Note: do not use a ",(0,i.jsx)(s.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,i.jsx)(s.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,i.jsx)(s.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,i.jsxs)(s.ol,{start:"3",children:["\n",(0,i.jsx)(s.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"module.exports = {\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})]})}function u(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>r,x:()=>l});var t=n(6540);const i={},o=t.createContext(i);function r(e){const s=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6060],{9697:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>a,contentTitle:()=>l,default:()=>u,frontMatter:()=>r,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-11.0/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/11.0/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/guides/using-with-babel.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/11.0/guides/jsdom-version"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/11.0/guides/absolute-imports"}}');var i=n(4848),o=n(8453);const r={id:"using-with-babel",title:"Using with Babel"},l=void 0,a={},c=[];function d(e){const s={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(s.p,{children:["If you wish to use ",(0,i.jsx)(s.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Install dependencies required by the official Jest documentation for ",(0,i.jsx)(s.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Install ",(0,i.jsx)(s.code,{children:"@babel/preset-env"})," and add ",(0,i.jsx)(s.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsxs)(s.em,{children:["Note: do not use a ",(0,i.jsx)(s.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,i.jsx)(s.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,i.jsx)(s.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,i.jsxs)(s.ol,{start:"3",children:["\n",(0,i.jsx)(s.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"module.exports = {\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})]})}function u(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>r,x:()=>l});var t=n(6540);const i={},o=t.createContext(i);function r(e){const s=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5253afba.d750c7aa.js b/assets/js/5253afba.dbb296f9.js similarity index 99% rename from assets/js/5253afba.d750c7aa.js rename to assets/js/5253afba.dbb296f9.js index 7dfc41bd1c..57c5d827b3 100644 --- a/assets/js/5253afba.d750c7aa.js +++ b/assets/js/5253afba.dbb296f9.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7832],{9011:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>g,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"This step is OPTIONAL","source":"@site/versioned_docs/version-14.3/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/14.3/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/guides/angular-ivy.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/14.3/getting-started/test-environment"},"next":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/14.3/guides/angular-13+"}}');var s=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"angular-ivy",title:"Angular Ivy"},c=void 0,u={},d=[{value:"Control ngcc processing",id:"control-ngcc-processing",level:2}];function p(e){const t={admonition:"admonition",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["This step is ",(0,s.jsx)(t.strong,{children:"OPTIONAL"})]})}),"\n",(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,s.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,s.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," also provides a Jest global setup file to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest. Add to the following section:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})}),(0,s.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,s.jsxs)(t.p,{children:["Since ",(0,s.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,s.jsx)(t.code,{children:"ngcc"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})}),(0,s.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>S});var r=n(6540),s=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function g(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const s=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function h(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,a=p(e),[l,i]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!g({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[c,d]=f({queryString:n,groupId:s}),[h,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,u.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),b=(()=>{const e=c??h;return g({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{b&&i(b)}),[b]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(4848);function v(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),s=o[n].value;s!==r&&(c(t),l(s))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,s.A)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function y(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function x(e){const t=h(e);return(0,j.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(y,{...t,...e})]})}function S(e){const t=(0,m.A)();return(0,j.jsx)(x,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var r=n(6540);const s={},a=r.createContext(s);function l(e){const t=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7832],{9011:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>g,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"This step is OPTIONAL","source":"@site/versioned_docs/version-14.3/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/14.3/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/guides/angular-ivy.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/14.3/getting-started/test-environment"},"next":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/14.3/guides/angular-13+"}}');var s=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"angular-ivy",title:"Angular Ivy"},c=void 0,u={},d=[{value:"Control ngcc processing",id:"control-ngcc-processing",level:2}];function p(e){const t={admonition:"admonition",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["This step is ",(0,s.jsx)(t.strong,{children:"OPTIONAL"})]})}),"\n",(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,s.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,s.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," also provides a Jest global setup file to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest. Add to the following section:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})}),(0,s.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,s.jsxs)(t.p,{children:["Since ",(0,s.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,s.jsx)(t.code,{children:"ngcc"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})}),(0,s.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>S});var r=n(6540),s=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function g(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const s=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function h(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,a=p(e),[l,i]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!g({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[c,d]=f({queryString:n,groupId:s}),[h,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,u.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),b=(()=>{const e=c??h;return g({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{b&&i(b)}),[b]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(4848);function v(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),s=o[n].value;s!==r&&(c(t),l(s))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,s.A)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function y(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function x(e){const t=h(e);return(0,j.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(y,{...t,...e})]})}function S(e){const t=(0,m.A)();return(0,j.jsx)(x,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var r=n(6540);const s={},a=r.createContext(s);function l(e){const t=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/54071611.98cd9e8e.js b/assets/js/54071611.c9f498fe.js similarity index 99% rename from assets/js/54071611.98cd9e8e.js rename to assets/js/54071611.c9f498fe.js index eb95657999..7c9e435411 100644 --- a/assets/js/54071611.98cd9e8e.js +++ b/assets/js/54071611.c9f498fe.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6448],{4730:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-10.x/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/10.x/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/getting-started/installation.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/10.x/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/10.x/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsxs)(t.p,{children:["In your project root, create ",(0,r.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(t.p,{children:"Add the following section:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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 setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "extends": "./tsconfig.json",\n "compilerOptions": {\n "outDir": "./out-tsc/spec",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// Assuming that your global setup file is setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function j(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=m({queryString:n,groupId:r}),[j,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??j;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6448],{4730:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-10.x/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/10.x/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/getting-started/installation.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/10.x/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/10.x/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsxs)(t.p,{children:["In your project root, create ",(0,r.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(t.p,{children:"Add the following section:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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 setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "extends": "./tsconfig.json",\n "compilerOptions": {\n "outDir": "./out-tsc/spec",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// Assuming that your global setup file is setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function j(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=m({queryString:n,groupId:r}),[j,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??j;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5465ebbc.442a5237.js b/assets/js/5465ebbc.38a35785.js similarity index 97% rename from assets/js/5465ebbc.442a5237.js rename to assets/js/5465ebbc.38a35785.js index d8b2f74f62..4612372058 100644 --- a/assets/js/5465ebbc.442a5237.js +++ b/assets/js/5465ebbc.38a35785.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6883],{2601:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/versioned_docs/version-14.3/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/14.3/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/guides/absolute-imports.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/14.3/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/14.3/guides/troubleshooting"}}');var i=s(4848),n=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,i.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,i.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,i.jsxs)(t.p,{children:["More information see ",(0,i.jsx)(t.code,{children:"ts-jest"})," ",(0,i.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const i={},n=o.createContext(i);function r(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6883],{2601:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/versioned_docs/version-14.3/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/14.3/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/guides/absolute-imports.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/14.3/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/14.3/guides/troubleshooting"}}');var i=s(4848),n=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,i.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,i.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,i.jsxs)(t.p,{children:["More information see ",(0,i.jsx)(t.code,{children:"ts-jest"})," ",(0,i.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const i={},n=o.createContext(i);function r(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/54f44165.00bab5f3.js b/assets/js/54f44165.edab643d.js similarity index 99% rename from assets/js/54f44165.00bab5f3.js rename to assets/js/54f44165.edab643d.js index b83bf38668..194f97f64d 100644 --- a/assets/js/54f44165.00bab5f3.js +++ b/assets/js/54f44165.edab643d.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7924],{7668:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>m,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/docs/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/next/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/getting-started/installation.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/next/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/next/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),i=n(9365);const o={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(i.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(i.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(i.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsx)(t.p,{children:"In your project root, create a setup file with following contents:"}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsx)(t.p,{children:"Add the following section to your root Jest config"}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label":"TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label":"TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"tsconfig-cjs",label:"Tsconfig CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json5",metastring:'title="tsconfig.spec.json" tab={"label": "Tsconfig CJS"}',children:"{\n //...\n extends: './tsconfig.json',\n compilerOptions: {\n //...\n module: 'CommonJS',\n types: ['jest'],\n },\n include: ['src/**/*.spec.ts', 'src/**/*.d.ts'],\n //...\n}\n"})})}),(0,r.jsx)(i.A,{value:"tsconfig-esm",label:"Tsconfig ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="tsconfig.spec.json" tab={"label": "Tsconfig ESM"}',children:'{\n //...\n "extends": "./tsconfig.json",\n "compilerOptions": {\n //...\n "module": "ES2022",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n //...\n}\n'})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="package.json"',children:'{\n //...\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n //...\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\nimport './jest-global-mocks';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\nimport './jest-global-mocks';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest-global-mocks.ts"',children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function m(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>S});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),i=n(205),o=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,o.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,o]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=h({queryString:n,groupId:r}),[g,j]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??g;return m({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{f&&o(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!m({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);o(e),d(e),j(e)}),[d,j,a]),tabValues:a}}var j=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:i}=e;const o=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=o.indexOf(t),r=i[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=o.indexOf(e.currentTarget)+1;t=o[n]??o[0];break}case"ArrowLeft":{const n=o.indexOf(e.currentTarget)-1;t=o[n]??o[o.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{o.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function S(e){const t=(0,j.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>i});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7924],{7668:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>m,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/docs/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/next/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/getting-started/installation.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/next/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/next/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),i=n(9365);const o={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(i.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(i.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(i.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsx)(t.p,{children:"In your project root, create a setup file with following contents:"}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsx)(t.p,{children:"Add the following section to your root Jest config"}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label":"TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label":"TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"tsconfig-cjs",label:"Tsconfig CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json5",metastring:'title="tsconfig.spec.json" tab={"label": "Tsconfig CJS"}',children:"{\n //...\n extends: './tsconfig.json',\n compilerOptions: {\n //...\n module: 'CommonJS',\n types: ['jest'],\n },\n include: ['src/**/*.spec.ts', 'src/**/*.d.ts'],\n //...\n}\n"})})}),(0,r.jsx)(i.A,{value:"tsconfig-esm",label:"Tsconfig ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="tsconfig.spec.json" tab={"label": "Tsconfig ESM"}',children:'{\n //...\n "extends": "./tsconfig.json",\n "compilerOptions": {\n //...\n "module": "ES2022",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n //...\n}\n'})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="package.json"',children:'{\n //...\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n //...\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\nimport './jest-global-mocks';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\nimport './jest-global-mocks';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest-global-mocks.ts"',children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function m(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>S});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),i=n(205),o=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,o.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,o]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=h({queryString:n,groupId:r}),[g,j]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??g;return m({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{f&&o(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!m({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);o(e),d(e),j(e)}),[d,j,a]),tabValues:a}}var j=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:i}=e;const o=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=o.indexOf(t),r=i[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=o.indexOf(e.currentTarget)+1;t=o[n]??o[0];break}case"ArrowLeft":{const n=o.indexOf(e.currentTarget)-1;t=o[n]??o[o.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{o.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function S(e){const t=(0,j.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>i});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5635425a.24149134.js b/assets/js/5635425a.15a27336.js similarity index 98% rename from assets/js/5635425a.24149134.js rename to assets/js/5635425a.15a27336.js index 1d98cbe13f..b9f36178d7 100644 --- a/assets/js/5635425a.24149134.js +++ b/assets/js/5635425a.15a27336.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9806],{2699:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/versioned_docs/version-9.x/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/9.x/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/guides/esm-support.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/9.x/guides/angular-ivy"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/9.x/guides/jsdom-version"}}');var o=t(4848),r=t(8453);const i={id:"esm-support",title:"ESM Support"},a=void 0,l={},c=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(s.p,{children:["To use ",(0,o.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,o.jsx)(s.code,{children:"ts-jest"})," config option ",(0,o.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/next/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/en/next/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,o.jsxs)(s.p,{children:["There is also a ",(0,o.jsx)(s.a,{href:"/jest-preset-angular/docs/9.x/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,o.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,o.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n extensionsToTreatAsEsm: ['.ts'],\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.html$',\n useESM: true,\n },\n },\n};\n"})}),"\n",(0,o.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,o.jsxs)(s.admonition,{type:"tip",children:[(0,o.jsxs)(s.p,{children:["Jest will attempt to load ",(0,o.jsx)(s.strong,{children:"ESM"})," files from ",(0,o.jsx)(s.code,{children:"node_modules"})," with default ",(0,o.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,o.jsx)(s.strong,{children:"ESM"})," built files or ",(0,o.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,o.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,o.jsxs)(s.p,{children:["To fix that, one can use ",(0,o.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,o.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n"})})]})}function u(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>i,x:()=>a});var n=t(6540);const o={},r=n.createContext(o);function i(e){const s=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9806],{2699:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/versioned_docs/version-9.x/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/9.x/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/guides/esm-support.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/9.x/guides/angular-ivy"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/9.x/guides/jsdom-version"}}');var o=t(4848),r=t(8453);const i={id:"esm-support",title:"ESM Support"},a=void 0,l={},c=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(s.p,{children:["To use ",(0,o.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,o.jsx)(s.code,{children:"ts-jest"})," config option ",(0,o.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/next/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/en/next/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,o.jsxs)(s.p,{children:["There is also a ",(0,o.jsx)(s.a,{href:"/jest-preset-angular/docs/9.x/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,o.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,o.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n extensionsToTreatAsEsm: ['.ts'],\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.html$',\n useESM: true,\n },\n },\n};\n"})}),"\n",(0,o.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,o.jsxs)(s.admonition,{type:"tip",children:[(0,o.jsxs)(s.p,{children:["Jest will attempt to load ",(0,o.jsx)(s.strong,{children:"ESM"})," files from ",(0,o.jsx)(s.code,{children:"node_modules"})," with default ",(0,o.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,o.jsx)(s.strong,{children:"ESM"})," built files or ",(0,o.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,o.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,o.jsxs)(s.p,{children:["To fix that, one can use ",(0,o.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,o.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n"})})]})}function u(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>i,x:()=>a});var n=t(6540);const o={},r=n.createContext(o);function i(e){const s=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/56acf0ae.8701d91d.js b/assets/js/56acf0ae.bc48207e.js similarity index 99% rename from assets/js/56acf0ae.8701d91d.js rename to assets/js/56acf0ae.bc48207e.js index dd759e2530..804c57612f 100644 --- a/assets/js/56acf0ae.8701d91d.js +++ b/assets/js/56acf0ae.bc48207e.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1694],{687:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"Configure other JSDOM versions","description":"Jest v26+ by default uses JSDOM 16 to support Node 10+.","source":"@site/versioned_docs/version-13.0/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/13.0/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/guides/jsdom-version.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/13.0/guides/esm-support"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/13.0/guides/using-with-babel"}}');var s=n(4848),o=n(8453),a=n(1470),i=n(9365);const l={id:"jsdom-version",title:"Configure other JSDOM versions"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,s.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,s.jsxs)(t.p,{children:["If you need a different JSDOM version than the one that ships with Jest, you can install a jsdom environment\npackage, e.g. ",(0,s.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,s.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,s.jsx)(t.code,{children:"localStorage"})," or ",(0,s.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,s.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Reference: ",(0,s.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200",children:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200"})]})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var o=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,a),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),o=n(3104),a=n(6347),i=n(205),l=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,a.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(s.location.search);t.set(o,e),s.replace({...s.location,search:t.toString()})}),[o,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,o=p(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[u,d]=h({queryString:n,groupId:s}),[f,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,o]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return m({value:e,tabValues:o})?e:null})();(0,i.A)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),b(e)}),[d,b,o]),tabValues:o}}var b=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),c=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==r&&(u(t),a(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...o,className:(0,s.A)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1694],{687:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"Configure other JSDOM versions","description":"Jest v26+ by default uses JSDOM 16 to support Node 10+.","source":"@site/versioned_docs/version-13.0/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/13.0/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/guides/jsdom-version.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/13.0/guides/esm-support"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/13.0/guides/using-with-babel"}}');var s=n(4848),o=n(8453),a=n(1470),i=n(9365);const l={id:"jsdom-version",title:"Configure other JSDOM versions"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,s.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,s.jsxs)(t.p,{children:["If you need a different JSDOM version than the one that ships with Jest, you can install a jsdom environment\npackage, e.g. ",(0,s.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,s.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,s.jsx)(t.code,{children:"localStorage"})," or ",(0,s.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,s.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Reference: ",(0,s.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200",children:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200"})]})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var o=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,a),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),o=n(3104),a=n(6347),i=n(205),l=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,a.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(s.location.search);t.set(o,e),s.replace({...s.location,search:t.toString()})}),[o,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,o=p(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[u,d]=h({queryString:n,groupId:s}),[f,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,o]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return m({value:e,tabValues:o})?e:null})();(0,i.A)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),b(e)}),[d,b,o]),tabValues:o}}var b=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),c=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==r&&(u(t),a(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...o,className:(0,s.A)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5ae6b2db.2e521d81.js b/assets/js/5ae6b2db.2696e495.js similarity index 95% rename from assets/js/5ae6b2db.2e521d81.js rename to assets/js/5ae6b2db.2696e495.js index 194e79d66e..ee6018d8fa 100644 --- a/assets/js/5ae6b2db.2e521d81.js +++ b/assets/js/5ae6b2db.2696e495.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6358],{8111:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-11.1/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/11.1/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/introduction.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/11.1/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(t.p,{children:["This is a part of the article: ",(0,o.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Starting from ",(0,o.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,o.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,o.jsx)(t.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6358],{8111:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-11.1/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/11.1/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/introduction.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/11.1/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(t.p,{children:["This is a part of the article: ",(0,o.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Starting from ",(0,o.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,o.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,o.jsx)(t.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5b125e0e.5508af59.js b/assets/js/5b125e0e.19f7a139.js similarity index 99% rename from assets/js/5b125e0e.5508af59.js rename to assets/js/5b125e0e.19f7a139.js index c4b68d8ccb..cd426dfc49 100644 --- a/assets/js/5b125e0e.5508af59.js +++ b/assets/js/5b125e0e.19f7a139.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8904],{8422:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>m,frontMatter:()=>l,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"guides/angular-13+","title":"Angular >=13","description":"Angular 13 introduces ESM package format for Angular packages. jest-preset-angular","source":"@site/docs/guides/angular-13+.md","sourceDirName":"guides","slug":"/guides/angular-13+","permalink":"/jest-preset-angular/docs/next/guides/angular-13+","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/angular-13+.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"angular-13+","title":"Angular >=13"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/next/guides/angular-ivy"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/next/guides/esm-support"}}');var r=s(4848),a=s(8453),i=s(1470),o=s(9365);const l={id:"angular-13+",title:"Angular >=13"},c=void 0,u={},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 t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,r.jsx)(t.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,r.jsx)(t.code,{children:"CommonJS"})," mode with ",(0,r.jsx)(t.strong,{children:"Angular 13"})," using ",(0,r.jsx)(t.a,{href:"/jest-preset-angular/docs/next/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["With Jest 28 and ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," ",(0,r.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,r.jsx)(t.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,r.jsxs)(t.p,{children:["Starting from ",(0,r.jsx)(t.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,r.jsx)(t.strong,{children:"Angular 13"}),":"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"moduleFileExtensions"})," is updated to include ",(0,r.jsx)(t.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,r.jsx)(t.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"transform"})," is updated to include ",(0,r.jsx)(t.code,{children:".mjs"})," extension to transform to ",(0,r.jsx)(t.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Upgrade the project to ",(0,r.jsx)(t.strong,{children:"Angular 13"})," following ",(0,r.jsx)(t.a,{href:"https://angular.dev/update-guide/",children:"guide"})]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)(t.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(t.p,{children:"there are no migration steps required"}),"\n",(0,r.jsx)(t.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,r.jsxs)(t.p,{children:["ES Modules support is new and may encounter issues. See ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example-apps"})," for the tests that run using ESM mode."]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nexport default {\n ...presets.createEsmPreset(),\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nexport default {\n ...presets.createEsmPreset(),\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,r.jsx)(t.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,r.jsx)(t.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsx)(t.h2,{id:"potential-issues-with-angular-13-esm-package-format-and-workaround",children:"Potential issues with Angular 13 ESM package format and workaround"}),"\n",(0,r.jsxs)(t.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,r.jsx)(t.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,r.jsxs)(t.p,{children:["To fix this issue, one needs to add ",(0,r.jsx)(t.code,{children:"mjs"})," to ",(0,r.jsx)(t.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",children:"Usage with Angular libraries which are built with Angular CLI 13"}),"\n",(0,r.jsxs)(t.p,{children:["Besides, the changes in Angular packages themselves, ",(0,r.jsx)(t.strong,{children:"Angular"})," libraries which are built with ",(0,r.jsx)(t.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,r.jsx)(t.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,r.jsx)(t.strong,{children:"CommonJS"})," mode."]}),"\n",(0,r.jsxs)(t.p,{children:["To fix this issue, one should modify ",(0,r.jsx)(t.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"usage-with-ionic-6-or-7",children:"Usage with Ionic 6 or 7"}),"\n",(0,r.jsxs)(t.p,{children:["To support Ionic 6 or 7 you will need to modify ",(0,r.jsx)(t.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n} satisfies Config;\n"})})})]})]})}function m(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,s)=>{s.d(t,{A:()=>i});s(6540);var n=s(4164);const r={tabItem:"tabItem_Ymn6"};var a=s(4848);function i(e){let{children:t,hidden:s,className:i}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.A)(r.tabItem,i),hidden:s,children:t})}},1470:(e,t,s)=>{s.d(t,{A:()=>S});var n=s(6540),r=s(4164),a=s(3104),i=s(6347),o=s(205),l=s(7485),c=s(1682),u=s(679);function d(e){return n.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,n.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:s}=e;return(0,n.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:s,attributes:n,default:r}}=e;return{value:t,label:s,attributes:n,default:r}}))}(s);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,s])}function m(e){let{value:t,tabValues:s}=e;return s.some((e=>e.value===t))}function g(e){let{queryString:t=!1,groupId:s}=e;const r=(0,i.W6)(),a=function(e){let{queryString:t=!1,groupId:s}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!s)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:t,groupId:s});return[(0,l.aZ)(a),(0,n.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function h(e){const{defaultValue:t,queryString:s=!1,groupId:r}=e,a=p(e),[i,l]=(0,n.useState)((()=>function(e){let{defaultValue:t,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const n=s.find((e=>e.default))??s[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:a}))),[c,d]=g({queryString:s,groupId:r}),[h,f]=function(e){let{groupId:t}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(s);return[r,(0,n.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),j=(()=>{const e=c??h;return m({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{j&&l(j)}),[j]);return{selectedValue:i,selectValue:(0,n.useCallback)((e=>{if(!m({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),f(e)}),[d,f,a]),tabValues:a}}var f=s(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(4848);function b(e){let{className:t,block:s,selectedValue:n,selectValue:i,tabValues:o}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,s=l.indexOf(t),r=o[s].value;r!==n&&(c(t),i(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const s=l.indexOf(e.currentTarget)+1;t=l[s]??l[0];break}case"ArrowLeft":{const s=l.indexOf(e.currentTarget)-1;t=l[s]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},t),children:o.map((e=>{let{value:t,label:s,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:n===t?0:-1,"aria-selected":n===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:a}=e;const i=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=i.find((e=>e.props.value===a));return e?(0,n.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=h(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function S(e){const t=(0,f.A)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>o});var n=s(6540);const r={},a=n.createContext(r);function i(e){const t=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8904],{8422:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>m,frontMatter:()=>l,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"guides/angular-13+","title":"Angular >=13","description":"Angular 13 introduces ESM package format for Angular packages. jest-preset-angular","source":"@site/docs/guides/angular-13+.md","sourceDirName":"guides","slug":"/guides/angular-13+","permalink":"/jest-preset-angular/docs/next/guides/angular-13+","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/angular-13+.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"angular-13+","title":"Angular >=13"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/next/guides/angular-ivy"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/next/guides/esm-support"}}');var r=s(4848),a=s(8453),i=s(1470),o=s(9365);const l={id:"angular-13+",title:"Angular >=13"},c=void 0,u={},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 t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,r.jsx)(t.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,r.jsx)(t.code,{children:"CommonJS"})," mode with ",(0,r.jsx)(t.strong,{children:"Angular 13"})," using ",(0,r.jsx)(t.a,{href:"/jest-preset-angular/docs/next/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["With Jest 28 and ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," ",(0,r.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,r.jsx)(t.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,r.jsxs)(t.p,{children:["Starting from ",(0,r.jsx)(t.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,r.jsx)(t.strong,{children:"Angular 13"}),":"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"moduleFileExtensions"})," is updated to include ",(0,r.jsx)(t.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,r.jsx)(t.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"transform"})," is updated to include ",(0,r.jsx)(t.code,{children:".mjs"})," extension to transform to ",(0,r.jsx)(t.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Upgrade the project to ",(0,r.jsx)(t.strong,{children:"Angular 13"})," following ",(0,r.jsx)(t.a,{href:"https://angular.dev/update-guide/",children:"guide"})]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)(t.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(t.p,{children:"there are no migration steps required"}),"\n",(0,r.jsx)(t.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,r.jsxs)(t.p,{children:["ES Modules support is new and may encounter issues. See ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example-apps"})," for the tests that run using ESM mode."]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nexport default {\n ...presets.createEsmPreset(),\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nexport default {\n ...presets.createEsmPreset(),\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,r.jsx)(t.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,r.jsx)(t.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsx)(t.h2,{id:"potential-issues-with-angular-13-esm-package-format-and-workaround",children:"Potential issues with Angular 13 ESM package format and workaround"}),"\n",(0,r.jsxs)(t.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,r.jsx)(t.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,r.jsxs)(t.p,{children:["To fix this issue, one needs to add ",(0,r.jsx)(t.code,{children:"mjs"})," to ",(0,r.jsx)(t.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",children:"Usage with Angular libraries which are built with Angular CLI 13"}),"\n",(0,r.jsxs)(t.p,{children:["Besides, the changes in Angular packages themselves, ",(0,r.jsx)(t.strong,{children:"Angular"})," libraries which are built with ",(0,r.jsx)(t.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,r.jsx)(t.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,r.jsx)(t.strong,{children:"CommonJS"})," mode."]}),"\n",(0,r.jsxs)(t.p,{children:["To fix this issue, one should modify ",(0,r.jsx)(t.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"usage-with-ionic-6-or-7",children:"Usage with Ionic 6 or 7"}),"\n",(0,r.jsxs)(t.p,{children:["To support Ionic 6 or 7 you will need to modify ",(0,r.jsx)(t.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n} satisfies Config;\n"})})})]})]})}function m(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,s)=>{s.d(t,{A:()=>i});s(6540);var n=s(4164);const r={tabItem:"tabItem_Ymn6"};var a=s(4848);function i(e){let{children:t,hidden:s,className:i}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.A)(r.tabItem,i),hidden:s,children:t})}},1470:(e,t,s)=>{s.d(t,{A:()=>S});var n=s(6540),r=s(4164),a=s(3104),i=s(6347),o=s(205),l=s(7485),c=s(1682),u=s(679);function d(e){return n.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,n.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:s}=e;return(0,n.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:s,attributes:n,default:r}}=e;return{value:t,label:s,attributes:n,default:r}}))}(s);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,s])}function m(e){let{value:t,tabValues:s}=e;return s.some((e=>e.value===t))}function g(e){let{queryString:t=!1,groupId:s}=e;const r=(0,i.W6)(),a=function(e){let{queryString:t=!1,groupId:s}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!s)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:t,groupId:s});return[(0,l.aZ)(a),(0,n.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function h(e){const{defaultValue:t,queryString:s=!1,groupId:r}=e,a=p(e),[i,l]=(0,n.useState)((()=>function(e){let{defaultValue:t,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const n=s.find((e=>e.default))??s[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:a}))),[c,d]=g({queryString:s,groupId:r}),[h,f]=function(e){let{groupId:t}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(s);return[r,(0,n.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),j=(()=>{const e=c??h;return m({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{j&&l(j)}),[j]);return{selectedValue:i,selectValue:(0,n.useCallback)((e=>{if(!m({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),f(e)}),[d,f,a]),tabValues:a}}var f=s(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(4848);function b(e){let{className:t,block:s,selectedValue:n,selectValue:i,tabValues:o}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,s=l.indexOf(t),r=o[s].value;r!==n&&(c(t),i(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const s=l.indexOf(e.currentTarget)+1;t=l[s]??l[0];break}case"ArrowLeft":{const s=l.indexOf(e.currentTarget)-1;t=l[s]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},t),children:o.map((e=>{let{value:t,label:s,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:n===t?0:-1,"aria-selected":n===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:a}=e;const i=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=i.find((e=>e.props.value===a));return e?(0,n.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=h(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function S(e){const t=(0,f.A)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>o});var n=s(6540);const r={},a=n.createContext(r);function i(e){const t=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5b1cb890.c6f01e2f.js b/assets/js/5b1cb890.00756730.js similarity index 99% rename from assets/js/5b1cb890.c6f01e2f.js rename to assets/js/5b1cb890.00756730.js index d9774a3192..21ae298f53 100644 --- a/assets/js/5b1cb890.c6f01e2f.js +++ b/assets/js/5b1cb890.00756730.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4827],{499:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"The presets","source":"@site/versioned_docs/version-13.0/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/13.0/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/getting-started/presets.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/13.0/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/13.0/getting-started/options"}}');var r=n(4848),a=n(8453),o=n(1470),l=n(9365);const i={id:"presets",title:"Presets"},c=void 0,u={},d=[{value:"The presets",id:"the-presets",level:3},{value:"Basic usage",id:"basic-usage",level:3},{value:"Advanced",id:"advanced",level:3}];function p(e){const t={admonition:"admonition",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Preset name"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,r.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,r.jsx)(t.code,{children:"preset"})," key to the desired preset name in your Jest config should be enough to start\nusing TypeScript with Jest (assuming you added ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,r.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,r.jsxs)(t.p,{children:["All presets come with default ",(0,r.jsx)(t.code,{children:"ts-jest"})," config options.\nIf you want to override any of the options, you'll need to use the JavaScript version of Jest config,\ncopy the original options and override the options you need:"]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["If you choose to override ",(0,r.jsx)(t.code,{children:"transform"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,r.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,r.jsx)(t.code,{children:"transform"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst { defaultTransformerOptions } = require('jest-preset-angular/presets');\n// const { defaultTransformerOptions } = require('jest-preset-angular/presets')\n\nmodule.exports = {\n // [...]\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n ...defaultTransformerOptions,\n // [...your overriden options]\n },\n ],\n },\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nconst jestConfig: Config = {\n // [...]\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n ...presets.defaultTransformerOptions,\n // [...your overriden options]\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>o});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function o(e){let{children:t,hidden:n,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,o),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),o=n(6347),l=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const r=(0,o.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[o,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=f({queryString:n,groupId:r}),[g,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),j=(()=>{const e=c??g;return h({value:e,tabValues:a})?e:null})();(0,l.A)((()=>{j&&i(j)}),[j]);return{selectedValue:o,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=l[n].value;r!==s&&(c(t),o(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:l.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>l});var s=n(6540);const r={},a=s.createContext(r);function o(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4827],{499:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"The presets","source":"@site/versioned_docs/version-13.0/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/13.0/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/getting-started/presets.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/13.0/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/13.0/getting-started/options"}}');var r=n(4848),a=n(8453),o=n(1470),l=n(9365);const i={id:"presets",title:"Presets"},c=void 0,u={},d=[{value:"The presets",id:"the-presets",level:3},{value:"Basic usage",id:"basic-usage",level:3},{value:"Advanced",id:"advanced",level:3}];function p(e){const t={admonition:"admonition",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Preset name"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,r.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,r.jsx)(t.code,{children:"preset"})," key to the desired preset name in your Jest config should be enough to start\nusing TypeScript with Jest (assuming you added ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,r.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,r.jsxs)(t.p,{children:["All presets come with default ",(0,r.jsx)(t.code,{children:"ts-jest"})," config options.\nIf you want to override any of the options, you'll need to use the JavaScript version of Jest config,\ncopy the original options and override the options you need:"]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["If you choose to override ",(0,r.jsx)(t.code,{children:"transform"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,r.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,r.jsx)(t.code,{children:"transform"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst { defaultTransformerOptions } = require('jest-preset-angular/presets');\n// const { defaultTransformerOptions } = require('jest-preset-angular/presets')\n\nmodule.exports = {\n // [...]\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n ...defaultTransformerOptions,\n // [...your overriden options]\n },\n ],\n },\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nconst jestConfig: Config = {\n // [...]\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n ...presets.defaultTransformerOptions,\n // [...your overriden options]\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>o});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function o(e){let{children:t,hidden:n,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,o),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),o=n(6347),l=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const r=(0,o.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[o,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=f({queryString:n,groupId:r}),[g,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),j=(()=>{const e=c??g;return h({value:e,tabValues:a})?e:null})();(0,l.A)((()=>{j&&i(j)}),[j]);return{selectedValue:o,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=l[n].value;r!==s&&(c(t),o(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:l.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>l});var s=n(6540);const r={},a=s.createContext(r);function o(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5ee9d842.35b8631d.js b/assets/js/5ee9d842.3ac19934.js similarity index 97% rename from assets/js/5ee9d842.35b8631d.js rename to assets/js/5ee9d842.3ac19934.js index 1bd1443f05..26ac0fb219 100644 --- a/assets/js/5ee9d842.35b8631d.js +++ b/assets/js/5ee9d842.3ac19934.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6917],{781:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"If you look at setup-jest.ts,","source":"@site/versioned_docs/version-11.1/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/11.1/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/getting-started/test-environment.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/11.1/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/11.1/guides/angular-ivy"}}');var r=n(4848),i=n(8453);const o={id:"test-environment",title:"Test environment"},a=void 0,c={},d=[];function l(e){const t={a:"a",code:"code",p:"p",...(0,i.R)(),...e.components};return(0,r.jsxs)(t.p,{children:["If you look at ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/src/config/setup-jest.ts",children:(0,r.jsx)(t.code,{children:"setup-jest.ts"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/src/zone-patch",children:"jest-zone-patch"}),"\nwe also make sure Jest test methods run in Zone context. Then we initialize the Angular testing environment like normal."]})}function u(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>a});var s=n(6540);const r={},i=s.createContext(r);function o(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6917],{781:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"If you look at setup-jest.ts,","source":"@site/versioned_docs/version-11.1/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/11.1/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/getting-started/test-environment.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/11.1/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/11.1/guides/angular-ivy"}}');var r=n(4848),i=n(8453);const o={id:"test-environment",title:"Test environment"},a=void 0,c={},d=[];function l(e){const t={a:"a",code:"code",p:"p",...(0,i.R)(),...e.components};return(0,r.jsxs)(t.p,{children:["If you look at ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/src/config/setup-jest.ts",children:(0,r.jsx)(t.code,{children:"setup-jest.ts"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/src/zone-patch",children:"jest-zone-patch"}),"\nwe also make sure Jest test methods run in Zone context. Then we initialize the Angular testing environment like normal."]})}function u(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>a});var s=n(6540);const r={},i=s.createContext(r);function o(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5f85402d.71426672.js b/assets/js/5f85402d.ab7aa60d.js similarity index 99% rename from assets/js/5f85402d.71426672.js rename to assets/js/5f85402d.ab7aa60d.js index f0e25185c5..7efcd9d106 100644 --- a/assets/js/5f85402d.71426672.js +++ b/assets/js/5f85402d.ab7aa60d.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3489],{6570:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-12.0/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/12.0/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/getting-started/installation.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/12.0/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/12.0/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsxs)(t.p,{children:["In your project root, create ",(0,r.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(t.p,{children:"Add the following section:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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 setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "extends": "./tsconfig.json",\n "compilerOptions": {\n "outDir": "./out-tsc/spec",\n "module": "CommonJs",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// Assuming that your global setup file is setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function j(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=m({queryString:n,groupId:r}),[j,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??j;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3489],{6570:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-12.0/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/12.0/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/getting-started/installation.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/12.0/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/12.0/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsxs)(t.p,{children:["In your project root, create ",(0,r.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(t.p,{children:"Add the following section:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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 setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "extends": "./tsconfig.json",\n "compilerOptions": {\n "outDir": "./out-tsc/spec",\n "module": "CommonJs",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// Assuming that your global setup file is setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function j(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=m({queryString:n,groupId:r}),[j,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??j;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/6059e070.90bbbbfd.js b/assets/js/6059e070.01631699.js similarity index 99% rename from assets/js/6059e070.90bbbbfd.js rename to assets/js/6059e070.01631699.js index 495b38e815..b10f11f7ae 100644 --- a/assets/js/6059e070.90bbbbfd.js +++ b/assets/js/6059e070.01631699.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8649],{3118:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-13.0/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/13.0/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/getting-started/installation.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/13.0/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/13.0/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsxs)(t.p,{children:["In your project root, create ",(0,r.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(t.p,{children:"Add the following section:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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 setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "extends": "./tsconfig.json",\n "compilerOptions": {\n "outDir": "./out-tsc/spec",\n "module": "CommonJs",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// Assuming that your global setup file is setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function j(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=m({queryString:n,groupId:r}),[j,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??j;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8649],{3118:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-13.0/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/13.0/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/getting-started/installation.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/13.0/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/13.0/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsxs)(t.p,{children:["In your project root, create ",(0,r.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(t.p,{children:"Add the following section:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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 setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "extends": "./tsconfig.json",\n "compilerOptions": {\n "outDir": "./out-tsc/spec",\n "module": "CommonJs",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// Assuming that your global setup file is setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function j(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=m({queryString:n,groupId:r}),[j,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??j;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/6266f1ba.45196a38.js b/assets/js/6266f1ba.b37681f7.js similarity index 99% rename from assets/js/6266f1ba.45196a38.js rename to assets/js/6266f1ba.b37681f7.js index 5bae47c962..733580758c 100644 --- a/assets/js/6266f1ba.45196a38.js +++ b/assets/js/6266f1ba.b37681f7.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5883],{5911:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the globals of Jest config object","source":"@site/versioned_docs/version-8.x/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/8.x/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/getting-started/options.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/8.x/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/8.x/getting-started/test-environment"}}');var o=n(4848),r=n(8453);const i={id:"options",title:"Options"},a=void 0,l={},d=[{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function c(e){const t={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,o.jsx)(t.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,o.jsx)(t.code,{children:"globals"})," of Jest config object\nin the ",(0,o.jsx)(t.code,{children:"package.json"})," file of your project, or through a ",(0,o.jsx)(t.code,{children:"jest.config.js"}),", or ",(0,o.jsx)(t.code,{children:"jest.config.ts"})," file."]}),"\n",(0,o.jsxs)(t.p,{children:["More information about ",(0,o.jsx)(t.code,{children:"ts-jest"})," options, see ",(0,o.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,o.jsx)(t.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"module.exports = {\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.html$',\n astTransformers: {\n before: [\n 'jest-preset-angular/build/InlineFilesTransformer',\n 'jest-preset-angular/build/StripStylesTransformer',\n ],\n },\n },\n },\n transform: {\n '^.+\\\\.(ts|js|html)$': 'ts-jest',\n },\n moduleFileExtensions: ['ts', 'html', 'js', 'json'],\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n transformIgnorePatterns: ['node_modules/(?!@ngrx)'],\n snapshotSerializers: [\n 'jest-preset-angular/build/serializers/html-comment',\n 'jest-preset-angular/build/serializers/ng-snapshot',\n 'jest-preset-angular/build/serializers/no-ng-attributes',\n ],\n};\n"})}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Jest doesn't run in browser nor through dev server. It uses ",(0,o.jsx)(t.code,{children:"JSDOM"})," to abstract browser environment. So we have to cheat\na little and inline our templates and get rid of styles (",(0,o.jsx)(t.strong,{children:"we're not testing CSS"}),") because otherwise Angular will try\nto make ",(0,o.jsx)(t.code,{children:"XHR"})," call for our templates and fail miserably."]})}),"\n",(0,o.jsx)(t.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["we're using some ",(0,o.jsx)(t.code,{children:'"globals"'})," to pass information about where our tsconfig.json file is that we'd like to be able to transform HTML files through ",(0,o.jsx)(t.code,{children:"ts-jest"}),"."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:'"transform"'})," \u2013 run every TS, JS, or HTML file through so called ",(0,o.jsx)(t.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,o.jsx)(t.code,{children:"ts"}),"), HTML (",(0,o.jsx)(t.code,{children:"html"}),"), JavaScript (",(0,o.jsx)(t.code,{children:"js"}),") and JSON (",(0,o.jsx)(t.code,{children:"json"}),") files."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses regex."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:'"transformIgnorePatterns"'})," \u2013 unfortunately some modules (like @ngrx) are released as TypeScript files, not pure JavaScript;\nin such cases we cannot ignore them (all node_modules are ignored by default), so they can be transformed through TS compiler\nlike any other module in our project."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. Note: by default angular adds\nsome angular-specific attributes to the code (like ",(0,o.jsx)(t.code,{children:"ng-reflect-*"}),", ",(0,o.jsx)(t.code,{children:'ng-version="*"'}),", ",(0,o.jsx)(t.code,{children:"_ngcontent-c*"})," etc).\nThis package provides serializer to remove such attributes. This makes snapshots cleaner and more human-readable.\nTo remove such specific attributes use ",(0,o.jsx)(t.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,o.jsx)(t.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>a});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5883],{5911:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the globals of Jest config object","source":"@site/versioned_docs/version-8.x/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/8.x/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/getting-started/options.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/8.x/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/8.x/getting-started/test-environment"}}');var o=n(4848),r=n(8453);const i={id:"options",title:"Options"},a=void 0,l={},d=[{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function c(e){const t={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,o.jsx)(t.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,o.jsx)(t.code,{children:"globals"})," of Jest config object\nin the ",(0,o.jsx)(t.code,{children:"package.json"})," file of your project, or through a ",(0,o.jsx)(t.code,{children:"jest.config.js"}),", or ",(0,o.jsx)(t.code,{children:"jest.config.ts"})," file."]}),"\n",(0,o.jsxs)(t.p,{children:["More information about ",(0,o.jsx)(t.code,{children:"ts-jest"})," options, see ",(0,o.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,o.jsx)(t.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"module.exports = {\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.html$',\n astTransformers: {\n before: [\n 'jest-preset-angular/build/InlineFilesTransformer',\n 'jest-preset-angular/build/StripStylesTransformer',\n ],\n },\n },\n },\n transform: {\n '^.+\\\\.(ts|js|html)$': 'ts-jest',\n },\n moduleFileExtensions: ['ts', 'html', 'js', 'json'],\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n transformIgnorePatterns: ['node_modules/(?!@ngrx)'],\n snapshotSerializers: [\n 'jest-preset-angular/build/serializers/html-comment',\n 'jest-preset-angular/build/serializers/ng-snapshot',\n 'jest-preset-angular/build/serializers/no-ng-attributes',\n ],\n};\n"})}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Jest doesn't run in browser nor through dev server. It uses ",(0,o.jsx)(t.code,{children:"JSDOM"})," to abstract browser environment. So we have to cheat\na little and inline our templates and get rid of styles (",(0,o.jsx)(t.strong,{children:"we're not testing CSS"}),") because otherwise Angular will try\nto make ",(0,o.jsx)(t.code,{children:"XHR"})," call for our templates and fail miserably."]})}),"\n",(0,o.jsx)(t.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["we're using some ",(0,o.jsx)(t.code,{children:'"globals"'})," to pass information about where our tsconfig.json file is that we'd like to be able to transform HTML files through ",(0,o.jsx)(t.code,{children:"ts-jest"}),"."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:'"transform"'})," \u2013 run every TS, JS, or HTML file through so called ",(0,o.jsx)(t.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,o.jsx)(t.code,{children:"ts"}),"), HTML (",(0,o.jsx)(t.code,{children:"html"}),"), JavaScript (",(0,o.jsx)(t.code,{children:"js"}),") and JSON (",(0,o.jsx)(t.code,{children:"json"}),") files."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses regex."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:'"transformIgnorePatterns"'})," \u2013 unfortunately some modules (like @ngrx) are released as TypeScript files, not pure JavaScript;\nin such cases we cannot ignore them (all node_modules are ignored by default), so they can be transformed through TS compiler\nlike any other module in our project."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. Note: by default angular adds\nsome angular-specific attributes to the code (like ",(0,o.jsx)(t.code,{children:"ng-reflect-*"}),", ",(0,o.jsx)(t.code,{children:'ng-version="*"'}),", ",(0,o.jsx)(t.code,{children:"_ngcontent-c*"})," etc).\nThis package provides serializer to remove such attributes. This makes snapshots cleaner and more human-readable.\nTo remove such specific attributes use ",(0,o.jsx)(t.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,o.jsx)(t.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>a});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/63150b11.8fa87bcb.js b/assets/js/63150b11.9b96167a.js similarity index 99% rename from assets/js/63150b11.8fa87bcb.js rename to assets/js/63150b11.9b96167a.js index a6fd664b0e..2d81809498 100644 --- a/assets/js/63150b11.8fa87bcb.js +++ b/assets/js/63150b11.9b96167a.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3596],{4383:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>t,toc:()=>a});const t=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the globals of Jest config object","source":"@site/versioned_docs/version-9.x/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/9.x/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/getting-started/options.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/9.x/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/9.x/getting-started/test-environment"}}');var o=s(4848),r=s(8453);const i={id:"options",title:"Options"},c=void 0,d={},a=[{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function l(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,o.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,o.jsx)(n.code,{children:"globals"})," of Jest config object\nin the ",(0,o.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,o.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,o.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,o.jsxs)(n.p,{children:["More information about ",(0,o.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,o.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,o.jsxs)(n.admonition,{type:"important",children:[(0,o.jsxs)(n.p,{children:["Since ",(0,o.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,o.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,o.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,o.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config"]}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n}\n"})})]}),"\n",(0,o.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const snapshotSerializers = require('jest-preset-angular/build/serializers');\n\nmodule.exports = {\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n },\n testEnvironment: 'jsdom',\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': 'jest-preset-angular',\n },\n moduleFileExtensions: ['ts', 'html', 'js', 'json'],\n snapshotSerializers,\n};\n"})}),"\n",(0,o.jsx)(n.admonition,{type:"important",children:(0,o.jsxs)(n.p,{children:["Jest runs with ",(0,o.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,o.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,o.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,o.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["we're using some ",(0,o.jsx)(n.code,{children:'"globals"'})," to pass information about where our tsconfig.json file is that we'd like to be able to transform HTML files through ",(0,o.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,o.jsx)(n.code,{children:"TS"}),", ",(0,o.jsx)(n.code,{children:"JS"}),", ",(0,o.jsx)(n.code,{children:"MJS"}),", ",(0,o.jsx)(n.code,{children:"HTML"}),", or ",(0,o.jsx)(n.code,{children:"SVG"})," file through so called ",(0,o.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,o.jsx)(n.code,{children:"ts"}),"), HTML (",(0,o.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,o.jsx)(n.code,{children:"js"}),") and JSON (",(0,o.jsx)(n.code,{children:"json"}),") files."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses regex."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. Note: by default angular adds\nsome angular-specific attributes to the code (like ",(0,o.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,o.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,o.jsx)(n.code,{children:"_ngcontent-c*"})," etc).\nThis package provides serializer to remove such attributes. This makes snapshots cleaner and more human-readable.\nTo remove such specific attributes use ",(0,o.jsx)(n.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,o.jsx)(n.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>c});var t=s(6540);const o={},r=t.createContext(o);function i(e){const n=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3596],{4383:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>t,toc:()=>a});const t=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the globals of Jest config object","source":"@site/versioned_docs/version-9.x/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/9.x/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/getting-started/options.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/9.x/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/9.x/getting-started/test-environment"}}');var o=s(4848),r=s(8453);const i={id:"options",title:"Options"},c=void 0,d={},a=[{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function l(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,o.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,o.jsx)(n.code,{children:"globals"})," of Jest config object\nin the ",(0,o.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,o.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,o.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,o.jsxs)(n.p,{children:["More information about ",(0,o.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,o.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,o.jsxs)(n.admonition,{type:"important",children:[(0,o.jsxs)(n.p,{children:["Since ",(0,o.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,o.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,o.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,o.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config"]}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n}\n"})})]}),"\n",(0,o.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const snapshotSerializers = require('jest-preset-angular/build/serializers');\n\nmodule.exports = {\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n },\n testEnvironment: 'jsdom',\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': 'jest-preset-angular',\n },\n moduleFileExtensions: ['ts', 'html', 'js', 'json'],\n snapshotSerializers,\n};\n"})}),"\n",(0,o.jsx)(n.admonition,{type:"important",children:(0,o.jsxs)(n.p,{children:["Jest runs with ",(0,o.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,o.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,o.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,o.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["we're using some ",(0,o.jsx)(n.code,{children:'"globals"'})," to pass information about where our tsconfig.json file is that we'd like to be able to transform HTML files through ",(0,o.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,o.jsx)(n.code,{children:"TS"}),", ",(0,o.jsx)(n.code,{children:"JS"}),", ",(0,o.jsx)(n.code,{children:"MJS"}),", ",(0,o.jsx)(n.code,{children:"HTML"}),", or ",(0,o.jsx)(n.code,{children:"SVG"})," file through so called ",(0,o.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,o.jsx)(n.code,{children:"ts"}),"), HTML (",(0,o.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,o.jsx)(n.code,{children:"js"}),") and JSON (",(0,o.jsx)(n.code,{children:"json"}),") files."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses regex."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. Note: by default angular adds\nsome angular-specific attributes to the code (like ",(0,o.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,o.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,o.jsx)(n.code,{children:"_ngcontent-c*"})," etc).\nThis package provides serializer to remove such attributes. This makes snapshots cleaner and more human-readable.\nTo remove such specific attributes use ",(0,o.jsx)(n.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,o.jsx)(n.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>c});var t=s(6540);const o={},r=t.createContext(o);function i(e){const n=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/651850eb.171b6e71.js b/assets/js/651850eb.7a1bc398.js similarity index 97% rename from assets/js/651850eb.171b6e71.js rename to assets/js/651850eb.7a1bc398.js index c790339ce3..185da0ca5b 100644 --- a/assets/js/651850eb.171b6e71.js +++ b/assets/js/651850eb.7a1bc398.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9461],{4866:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>a,contentTitle:()=>c,default:()=>p,frontMatter:()=>i,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-8.x/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/8.x/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/introduction.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/8.x/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},u=[];function d(t){const e={a:"a",code:"code",p:"p",...(0,r.R)(),...t.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(e.p,{children:["This is a part of the article: ",(0,o.jsx)(e.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]})]})}function p(t={}){const{wrapper:e}={...(0,r.R)(),...t.components};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(d,{...t})}):d(t)}},8453:(t,e,n)=>{n.d(e,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(t){const e=s.useContext(r);return s.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function c(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(o):t.components||o:i(t.components),s.createElement(r.Provider,{value:e},t.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9461],{4866:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>a,contentTitle:()=>c,default:()=>p,frontMatter:()=>i,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-8.x/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/8.x/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/introduction.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/8.x/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},u=[];function d(t){const e={a:"a",code:"code",p:"p",...(0,r.R)(),...t.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(e.p,{children:["This is a part of the article: ",(0,o.jsx)(e.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]})]})}function p(t={}){const{wrapper:e}={...(0,r.R)(),...t.components};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(d,{...t})}):d(t)}},8453:(t,e,n)=>{n.d(e,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(t){const e=s.useContext(r);return s.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function c(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(o):t.components||o:i(t.components),s.createElement(r.Provider,{value:e},t.children)}}}]); \ No newline at end of file diff --git a/assets/js/6608151e.b51d7613.js b/assets/js/6608151e.fcf34bf1.js similarity index 95% rename from assets/js/6608151e.b51d7613.js rename to assets/js/6608151e.fcf34bf1.js index 2d0bb49f93..dd085de1ab 100644 --- a/assets/js/6608151e.b51d7613.js +++ b/assets/js/6608151e.fcf34bf1.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2891],{185:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-10.x/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/10.x/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/introduction.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/10.x/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(t.p,{children:["This is a part of the article: ",(0,o.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Starting from ",(0,o.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,o.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,o.jsx)(t.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2891],{185:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-10.x/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/10.x/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/introduction.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/10.x/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(t.p,{children:["This is a part of the article: ",(0,o.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Starting from ",(0,o.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,o.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,o.jsx)(t.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/67b82ef4.8861b650.js b/assets/js/67b82ef4.0272a708.js similarity index 99% rename from assets/js/67b82ef4.8861b650.js rename to assets/js/67b82ef4.0272a708.js index 674da485de..d797e626f2 100644 --- a/assets/js/67b82ef4.8861b650.js +++ b/assets/js/67b82ef4.0272a708.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7569],{4987:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>b,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-14.5/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/guides/using-with-babel.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/guides/snapshot-testing"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/guides/absolute-imports"}}');var r=n(4848),a=n(8453),l=n(1470),i=n(9365);const o={id:"using-with-babel",title:"Using with Babel"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you wish to use ",(0,r.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,r.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install ",(0,r.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,r.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:'title="babel.config.js"',children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsxs)(t.em,{children:["Note: do not use a ",(0,r.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,r.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,r.jsxs)(t.ol,{start:"3",children:["\n",(0,r.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n} satisfies Config;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n} satisfies Config;\n"})})})]})]})}function b(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),i=n(205),o=n(7485),u=n(1682),c=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function b(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,o.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,o]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!b({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:r}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),g=(()=>{const e=u??f;return b({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{g&&o(g)}),[g]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!b({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);o(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(4848);function v(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:i}=e;const o=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=o.indexOf(t),r=i[n].value;r!==s&&(u(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=o.indexOf(e.currentTarget)+1;t=o[n]??o[0];break}case"ArrowLeft":{const n=o.indexOf(e.currentTarget)-1;t=o[n]??o[o.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{o.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.A)("tabs-container",g.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>i});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7569],{4987:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>b,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-14.5/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/guides/using-with-babel.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/guides/snapshot-testing"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/guides/absolute-imports"}}');var r=n(4848),a=n(8453),l=n(1470),i=n(9365);const o={id:"using-with-babel",title:"Using with Babel"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you wish to use ",(0,r.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,r.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install ",(0,r.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,r.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:'title="babel.config.js"',children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsxs)(t.em,{children:["Note: do not use a ",(0,r.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,r.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,r.jsxs)(t.ol,{start:"3",children:["\n",(0,r.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n} satisfies Config;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n} satisfies Config;\n"})})})]})]})}function b(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),i=n(205),o=n(7485),u=n(1682),c=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function b(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,o.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,o]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!b({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:r}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),g=(()=>{const e=u??f;return b({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{g&&o(g)}),[g]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!b({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);o(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(4848);function v(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:i}=e;const o=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=o.indexOf(t),r=i[n].value;r!==s&&(u(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=o.indexOf(e.currentTarget)+1;t=o[n]??o[0];break}case"ArrowLeft":{const n=o.indexOf(e.currentTarget)-1;t=o[n]??o[o.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{o.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.A)("tabs-container",g.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>i});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/68240572.b060334b.js b/assets/js/68240572.da92b213.js similarity index 99% rename from assets/js/68240572.b060334b.js rename to assets/js/68240572.da92b213.js index badea8bbe2..a2417d7fc7 100644 --- a/assets/js/68240572.b060334b.js +++ b/assets/js/68240572.da92b213.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[689],{4564:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>g,frontMatter:()=>p,metadata:()=>n,toc:()=>h});const n=JSON.parse('{"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/docs/guides/snapshot-testing.md","sourceDirName":"guides","slug":"/guides/snapshot-testing","permalink":"/jest-preset-angular/docs/next/guides/snapshot-testing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/snapshot-testing.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"snapshot-testing","title":"Snapshot testing"},"sidebar":"docs","previous":{"title":"JSDOM version","permalink":"/jest-preset-angular/docs/next/guides/jsdom-version"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/next/guides/using-with-babel"}}');var i=s(4848),r=s(8453),l=s(1470),a=s(9365),o=s(4252);const p={id:"snapshot-testing",title:"Snapshot testing"},c=void 0,d={},h=[{value:"Snapshot serializers",id:"snapshot-serializers",level:2},{value:"Remove html comments (html-comment)",id:"remove-html-comments-html-comment",level:3},{value:"Examples:",id:"examples",level:4},{value:"Display component HTML (ng-snapshot)",id:"display-component-html-ng-snapshot",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Examples:",id:"examples-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:"Examples:",id:"examples-2",level:4}];function m(e){const t={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,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"jest-preset-angular"})," provides several snapshot serializers to generate clearer and more human-readable snapshot."]}),"\n",(0,i.jsx)(t.admonition,{type:"info",children:(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"BY DEFAULT"}),", the ",(0,i.jsx)(t.a,{href:"/jest-preset-angular/docs/next/getting-started/presets",children:"preset"})," provides all of the snapshot serializers below."]})}),"\n",(0,i.jsx)(t.h2,{id:"snapshot-serializers",children:"Snapshot serializers"}),"\n","\n",(0,i.jsx)(o.A,{toc:h.slice(1)}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsxs)(t.h3,{id:"remove-html-comments-html-comment",children:["Remove html comments (",(0,i.jsx)(t.code,{children:"html-comment"}),")"]}),"\n",(0,i.jsx)(t.p,{children:"Allow removing all the comments in the component HTML in snapshot."}),"\n",(0,i.jsx)(t.h4,{id:"examples",children:"Examples:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"In Jest config file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/html-comment'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/html-comment'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.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,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'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,i.jsxs)(t.h3,{id:"display-component-html-ng-snapshot",children:["Display component HTML (",(0,i.jsx)(t.code,{children:"ng-snapshot"}),")"]}),"\n",(0,i.jsx)(t.p,{children:"Allow displaying component HTML with data in snapshot."}),"\n",(0,i.jsx)(t.h4,{id:"parameters",children:"Parameters"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["options(",(0,i.jsx)(t.strong,{children:"optional"}),"):","\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"omitAllCompAttrs: remove all component DOM attributes"}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",children:"type NgSnapshotOptions = {\n omitAllCompAttrs?: boolean;\n};\n"})}),"\n",(0,i.jsx)(t.h4,{id:"examples-1",children:"Examples:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"In Jest config"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/ng-snapshot'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/ng-snapshot'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.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,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'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,i.jsx)(t.h4,{id:"with-options",children:"With options"}),"\n",(0,i.jsxs)(t.admonition,{title:"Effective priority",type:"info",children:[(0,i.jsx)(t.p,{children:"The configured serializers will have affect in this order:"}),(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"Jest config"})," -> ",(0,i.jsx)(t.code,{children:"setup files"})," -> ",(0,i.jsx)(t.code,{children:"test files"})]}),(0,i.jsx)(t.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,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"In setup files:"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'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,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"or in individual test files:"}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'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,i.jsxs)(t.h3,{id:"remove-angular-attributes-no-ng-attributes",children:["Remove Angular attributes (",(0,i.jsx)(t.code,{children:"no-ng-attributes"}),")"]}),"\n",(0,i.jsxs)(t.p,{children:["Allow removing attributes generated by Angular fixture, like ",(0,i.jsx)(t.code,{children:"ng-reflect-*"}),", ",(0,i.jsx)(t.code,{children:'ng-version="*"'}),", ",(0,i.jsx)(t.code,{children:"_ngcontent-c*"})," etc., from component snapshot"]}),"\n",(0,i.jsx)(t.h4,{id:"examples-2",children:"Examples:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"In Jest config"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/no-ng-attributes'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/no-ng-attributes'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.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,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'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 g(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(m,{...e})}):m(e)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[689],{4564:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>g,frontMatter:()=>p,metadata:()=>n,toc:()=>h});const n=JSON.parse('{"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/docs/guides/snapshot-testing.md","sourceDirName":"guides","slug":"/guides/snapshot-testing","permalink":"/jest-preset-angular/docs/next/guides/snapshot-testing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/snapshot-testing.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"snapshot-testing","title":"Snapshot testing"},"sidebar":"docs","previous":{"title":"JSDOM version","permalink":"/jest-preset-angular/docs/next/guides/jsdom-version"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/next/guides/using-with-babel"}}');var i=s(4848),r=s(8453),l=s(1470),a=s(9365),o=s(4252);const p={id:"snapshot-testing",title:"Snapshot testing"},c=void 0,d={},h=[{value:"Snapshot serializers",id:"snapshot-serializers",level:2},{value:"Remove html comments (html-comment)",id:"remove-html-comments-html-comment",level:3},{value:"Examples:",id:"examples",level:4},{value:"Display component HTML (ng-snapshot)",id:"display-component-html-ng-snapshot",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Examples:",id:"examples-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:"Examples:",id:"examples-2",level:4}];function m(e){const t={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,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"jest-preset-angular"})," provides several snapshot serializers to generate clearer and more human-readable snapshot."]}),"\n",(0,i.jsx)(t.admonition,{type:"info",children:(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"BY DEFAULT"}),", the ",(0,i.jsx)(t.a,{href:"/jest-preset-angular/docs/next/getting-started/presets",children:"preset"})," provides all of the snapshot serializers below."]})}),"\n",(0,i.jsx)(t.h2,{id:"snapshot-serializers",children:"Snapshot serializers"}),"\n","\n",(0,i.jsx)(o.A,{toc:h.slice(1)}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsxs)(t.h3,{id:"remove-html-comments-html-comment",children:["Remove html comments (",(0,i.jsx)(t.code,{children:"html-comment"}),")"]}),"\n",(0,i.jsx)(t.p,{children:"Allow removing all the comments in the component HTML in snapshot."}),"\n",(0,i.jsx)(t.h4,{id:"examples",children:"Examples:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"In Jest config file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/html-comment'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/html-comment'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.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,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'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,i.jsxs)(t.h3,{id:"display-component-html-ng-snapshot",children:["Display component HTML (",(0,i.jsx)(t.code,{children:"ng-snapshot"}),")"]}),"\n",(0,i.jsx)(t.p,{children:"Allow displaying component HTML with data in snapshot."}),"\n",(0,i.jsx)(t.h4,{id:"parameters",children:"Parameters"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["options(",(0,i.jsx)(t.strong,{children:"optional"}),"):","\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"omitAllCompAttrs: remove all component DOM attributes"}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",children:"type NgSnapshotOptions = {\n omitAllCompAttrs?: boolean;\n};\n"})}),"\n",(0,i.jsx)(t.h4,{id:"examples-1",children:"Examples:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"In Jest config"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/ng-snapshot'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/ng-snapshot'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.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,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'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,i.jsx)(t.h4,{id:"with-options",children:"With options"}),"\n",(0,i.jsxs)(t.admonition,{title:"Effective priority",type:"info",children:[(0,i.jsx)(t.p,{children:"The configured serializers will have affect in this order:"}),(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"Jest config"})," -> ",(0,i.jsx)(t.code,{children:"setup files"})," -> ",(0,i.jsx)(t.code,{children:"test files"})]}),(0,i.jsx)(t.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,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"In setup files:"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'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,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"or in individual test files:"}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'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,i.jsxs)(t.h3,{id:"remove-angular-attributes-no-ng-attributes",children:["Remove Angular attributes (",(0,i.jsx)(t.code,{children:"no-ng-attributes"}),")"]}),"\n",(0,i.jsxs)(t.p,{children:["Allow removing attributes generated by Angular fixture, like ",(0,i.jsx)(t.code,{children:"ng-reflect-*"}),", ",(0,i.jsx)(t.code,{children:'ng-version="*"'}),", ",(0,i.jsx)(t.code,{children:"_ngcontent-c*"})," etc., from component snapshot"]}),"\n",(0,i.jsx)(t.h4,{id:"examples-2",children:"Examples:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"In Jest config"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/no-ng-attributes'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/no-ng-attributes'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.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,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'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 g(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(m,{...e})}):m(e)}}}]); \ No newline at end of file diff --git a/assets/js/68e3f1d5.86ef1642.js b/assets/js/68e3f1d5.8386a901.js similarity index 99% rename from assets/js/68e3f1d5.86ef1642.js rename to assets/js/68e3f1d5.8386a901.js index ddfbcd8357..e19cfd2844 100644 --- a/assets/js/68e3f1d5.86ef1642.js +++ b/assets/js/68e3f1d5.8386a901.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7367],{4713:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>u,default:()=>g,frontMatter:()=>i,metadata:()=>t,toc:()=>d});const t=JSON.parse('{"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-12.0/guides/angular-13+.md","sourceDirName":"guides","slug":"/guides/angular-13+","permalink":"/jest-preset-angular/docs/12.0/guides/angular-13+","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/guides/angular-13+.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"angular-13+","title":"Angular >=13"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/12.0/guides/angular-ivy"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/12.0/guides/esm-support"}}');var r=s(4848),a=s(8453),o=s(1470),l=s(9365);const i={id:"angular-13+",title:"Angular >=13"},u=void 0,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}];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,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,r.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,r.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,r.jsx)(n.strong,{children:"Angular 13"})," using ",(0,r.jsx)(n.a,{href:"/jest-preset-angular/docs/12.0/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,r.jsx)(n.admonition,{type:"important",children:(0,r.jsxs)(n.p,{children:["With Jest 28 and ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,r.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,r.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,r.jsxs)(n.p,{children:["Starting from ",(0,r.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,r.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,r.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,r.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transform"})," is updated to include ",(0,r.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,r.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:["Upgrade the project to ",(0,r.jsx)(n.strong,{children:"Angular 13"})," following ",(0,r.jsx)(n.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,r.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,r.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,r.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,r.jsx)(n.p,{children:"Your Jest config should be changed to something like:"}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.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').InitialOptionsTsJest} */\nmodule.exports = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n globals: {\n 'ts-jest': {\n useESM: true,\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n tsconfig: '/tsconfig-esm.spec.json',\n },\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n globals: {\n 'ts-jest': {\n useESM: true,\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n tsconfig: '/tsconfig-esm.spec.json',\n },\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,r.jsx)(n.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(n.p,{children:"or for ESM mode"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,r.jsx)(n.h2,{id:"potential-issues-with-angular-13-esm-package-format-and-workaround",children:"Potential issues with Angular 13 ESM package format and workaround"}),"\n",(0,r.jsxs)(n.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,r.jsx)(n.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one needs to add ",(0,r.jsx)(n.code,{children:"mjs"})," to ",(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",children:"Usage with Angular libraries which are built with Angular CLI 13"}),"\n",(0,r.jsxs)(n.p,{children:["Besides, the changes in Angular packages themselves, ",(0,r.jsx)(n.strong,{children:"Angular"})," libraries which are built with ",(0,r.jsx)(n.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,r.jsx)(n.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,r.jsx)(n.strong,{children:"CommonJS"})," mode."]}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one should modify ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,n,s)=>{s.d(n,{A:()=>o});s(6540);var t=s(4164);const r={tabItem:"tabItem_Ymn6"};var a=s(4848);function o(e){let{children:n,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,t.A)(r.tabItem,o),hidden:s,children:n})}},1470:(e,n,s)=>{s.d(n,{A:()=>A});var t=s(6540),r=s(4164),a=s(3104),o=s(6347),l=s(205),i=s(7485),u=s(1682),c=s(679);function d(e){return t.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,t.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:n,children:s}=e;return(0,t.useMemo)((()=>{const e=n??function(e){return d(e).map((e=>{let{props:{value:n,label:s,attributes:t,default:r}}=e;return{value:n,label:s,attributes:t,default:r}}))}(s);return function(e){const n=(0,u.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,s])}function g(e){let{value:n,tabValues:s}=e;return s.some((e=>e.value===n))}function h(e){let{queryString:n=!1,groupId:s}=e;const r=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:s}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!s)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:n,groupId:s});return[(0,i.aZ)(a),(0,t.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(r.location.search);n.set(a,e),r.replace({...r.location,search:n.toString()})}),[a,r])]}function m(e){const{defaultValue:n,queryString:s=!1,groupId:r}=e,a=p(e),[o,i]=(0,t.useState)((()=>function(e){let{defaultValue:n,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!g({value:n,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const t=s.find((e=>e.default))??s[0];if(!t)throw new Error("Unexpected error: 0 tabValues");return t.value}({defaultValue:n,tabValues:a}))),[u,d]=h({queryString:s,groupId:r}),[m,j]=function(e){let{groupId:n}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,a]=(0,c.Dv)(s);return[r,(0,t.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),f=(()=>{const e=u??m;return g({value:e,tabValues:a})?e:null})();(0,l.A)((()=>{f&&i(f)}),[f]);return{selectedValue:o,selectValue:(0,t.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),j(e)}),[d,j,a]),tabValues:a}}var j=s(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(4848);function b(e){let{className:n,block:s,selectedValue:t,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const n=e.currentTarget,s=i.indexOf(n),r=l[s].value;r!==t&&(u(n),o(r))},d=e=>{let n=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const s=i.indexOf(e.currentTarget)+1;n=i[s]??i[0];break}case"ArrowLeft":{const s=i.indexOf(e.currentTarget)-1;n=i[s]??i[i.length-1];break}}n?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},n),children:l.map((e=>{let{value:n,label:s,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:t===n?0:-1,"aria-selected":t===n,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":t===n}),children:s??n},n)}))})}function v(e){let{lazy:n,children:s,selectedValue:a}=e;const o=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,t.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function w(e){const n=m(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function A(e){const n=(0,j.A)();return(0,x.jsx)(w,{...e,children:d(e.children)},String(n))}},8453:(e,n,s)=>{s.d(n,{R:()=>o,x:()=>l});var t=s(6540);const r={},a=t.createContext(r);function o(e){const n=t.useContext(a);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),t.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7367],{4713:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>u,default:()=>g,frontMatter:()=>i,metadata:()=>t,toc:()=>d});const t=JSON.parse('{"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-12.0/guides/angular-13+.md","sourceDirName":"guides","slug":"/guides/angular-13+","permalink":"/jest-preset-angular/docs/12.0/guides/angular-13+","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/guides/angular-13+.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"angular-13+","title":"Angular >=13"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/12.0/guides/angular-ivy"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/12.0/guides/esm-support"}}');var r=s(4848),a=s(8453),o=s(1470),l=s(9365);const i={id:"angular-13+",title:"Angular >=13"},u=void 0,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}];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,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,r.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,r.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,r.jsx)(n.strong,{children:"Angular 13"})," using ",(0,r.jsx)(n.a,{href:"/jest-preset-angular/docs/12.0/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,r.jsx)(n.admonition,{type:"important",children:(0,r.jsxs)(n.p,{children:["With Jest 28 and ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,r.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,r.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,r.jsxs)(n.p,{children:["Starting from ",(0,r.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,r.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,r.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,r.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transform"})," is updated to include ",(0,r.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,r.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:["Upgrade the project to ",(0,r.jsx)(n.strong,{children:"Angular 13"})," following ",(0,r.jsx)(n.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,r.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,r.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,r.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,r.jsx)(n.p,{children:"Your Jest config should be changed to something like:"}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.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').InitialOptionsTsJest} */\nmodule.exports = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n globals: {\n 'ts-jest': {\n useESM: true,\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n tsconfig: '/tsconfig-esm.spec.json',\n },\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n globals: {\n 'ts-jest': {\n useESM: true,\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n tsconfig: '/tsconfig-esm.spec.json',\n },\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,r.jsx)(n.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(n.p,{children:"or for ESM mode"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,r.jsx)(n.h2,{id:"potential-issues-with-angular-13-esm-package-format-and-workaround",children:"Potential issues with Angular 13 ESM package format and workaround"}),"\n",(0,r.jsxs)(n.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,r.jsx)(n.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one needs to add ",(0,r.jsx)(n.code,{children:"mjs"})," to ",(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",children:"Usage with Angular libraries which are built with Angular CLI 13"}),"\n",(0,r.jsxs)(n.p,{children:["Besides, the changes in Angular packages themselves, ",(0,r.jsx)(n.strong,{children:"Angular"})," libraries which are built with ",(0,r.jsx)(n.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,r.jsx)(n.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,r.jsx)(n.strong,{children:"CommonJS"})," mode."]}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one should modify ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,n,s)=>{s.d(n,{A:()=>o});s(6540);var t=s(4164);const r={tabItem:"tabItem_Ymn6"};var a=s(4848);function o(e){let{children:n,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,t.A)(r.tabItem,o),hidden:s,children:n})}},1470:(e,n,s)=>{s.d(n,{A:()=>A});var t=s(6540),r=s(4164),a=s(3104),o=s(6347),l=s(205),i=s(7485),u=s(1682),c=s(679);function d(e){return t.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,t.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:n,children:s}=e;return(0,t.useMemo)((()=>{const e=n??function(e){return d(e).map((e=>{let{props:{value:n,label:s,attributes:t,default:r}}=e;return{value:n,label:s,attributes:t,default:r}}))}(s);return function(e){const n=(0,u.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,s])}function g(e){let{value:n,tabValues:s}=e;return s.some((e=>e.value===n))}function h(e){let{queryString:n=!1,groupId:s}=e;const r=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:s}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!s)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:n,groupId:s});return[(0,i.aZ)(a),(0,t.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(r.location.search);n.set(a,e),r.replace({...r.location,search:n.toString()})}),[a,r])]}function m(e){const{defaultValue:n,queryString:s=!1,groupId:r}=e,a=p(e),[o,i]=(0,t.useState)((()=>function(e){let{defaultValue:n,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!g({value:n,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const t=s.find((e=>e.default))??s[0];if(!t)throw new Error("Unexpected error: 0 tabValues");return t.value}({defaultValue:n,tabValues:a}))),[u,d]=h({queryString:s,groupId:r}),[m,j]=function(e){let{groupId:n}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,a]=(0,c.Dv)(s);return[r,(0,t.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),f=(()=>{const e=u??m;return g({value:e,tabValues:a})?e:null})();(0,l.A)((()=>{f&&i(f)}),[f]);return{selectedValue:o,selectValue:(0,t.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),j(e)}),[d,j,a]),tabValues:a}}var j=s(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(4848);function b(e){let{className:n,block:s,selectedValue:t,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const n=e.currentTarget,s=i.indexOf(n),r=l[s].value;r!==t&&(u(n),o(r))},d=e=>{let n=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const s=i.indexOf(e.currentTarget)+1;n=i[s]??i[0];break}case"ArrowLeft":{const s=i.indexOf(e.currentTarget)-1;n=i[s]??i[i.length-1];break}}n?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},n),children:l.map((e=>{let{value:n,label:s,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:t===n?0:-1,"aria-selected":t===n,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":t===n}),children:s??n},n)}))})}function v(e){let{lazy:n,children:s,selectedValue:a}=e;const o=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,t.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function w(e){const n=m(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function A(e){const n=(0,j.A)();return(0,x.jsx)(w,{...e,children:d(e.children)},String(n))}},8453:(e,n,s)=>{s.d(n,{R:()=>o,x:()=>l});var t=s(6540);const r={},a=t.createContext(r);function o(e){const n=t.useContext(a);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),t.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/6916680a.2123df80.js b/assets/js/6916680a.219ce6b2.js similarity index 99% rename from assets/js/6916680a.2123df80.js rename to assets/js/6916680a.219ce6b2.js index 09f08dc8f7..2e66711d03 100644 --- a/assets/js/6916680a.2123df80.js +++ b/assets/js/6916680a.219ce6b2.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3818],{6696:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-11.0/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/11.0/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/getting-started/installation.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/11.0/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/11.0/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsxs)(t.p,{children:["In your project root, create ",(0,r.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(t.p,{children:"Add the following section:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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 setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "extends": "./tsconfig.json",\n "compilerOptions": {\n "outDir": "./out-tsc/spec",\n "module": "CommonJs",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// Assuming that your global setup file is setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function j(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=m({queryString:n,groupId:r}),[j,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??j;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3818],{6696:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-11.0/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/11.0/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/getting-started/installation.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/11.0/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/11.0/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsxs)(t.p,{children:["In your project root, create ",(0,r.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(t.p,{children:"Add the following section:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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 setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "extends": "./tsconfig.json",\n "compilerOptions": {\n "outDir": "./out-tsc/spec",\n "module": "CommonJs",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// Assuming that your global setup file is setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function j(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=m({queryString:n,groupId:r}),[j,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??j;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/6a6dcee7.1e397aab.js b/assets/js/6a6dcee7.ff5e0009.js similarity index 98% rename from assets/js/6a6dcee7.1e397aab.js rename to assets/js/6a6dcee7.ff5e0009.js index f350f79932..5dfb93e094 100644 --- a/assets/js/6a6dcee7.1e397aab.js +++ b/assets/js/6a6dcee7.ff5e0009.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7466],{3577:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"If you look at setup-jest.js,","source":"@site/versioned_docs/version-14.2/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/14.2/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/getting-started/test-environment.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/14.2/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/14.2/guides/angular-ivy"}}');var r=n(4848),i=n(8453);const o={id:"test-environment",title:"Test environment"},a=void 0,l={},d=[{value:"Configure test environment",id:"configure-test-environment",level:3}];function c(e){const t={a:"a",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you look at ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.js",children:(0,r.jsx)(t.code,{children:"setup-jest.js"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,r.jsx)(t.a,{href:"https://github.com/angular/angular/tree/main/packages/zone.js",children:"Angular zone patch"}),"\nwe also make sure Jest test methods run in Zone context. Then we initialize the Angular testing environment like normal."]}),"\n",(0,r.jsxs)(t.p,{children:["While ",(0,r.jsx)(t.code,{children:"setup-jest.js"})," above is for running Jest with ",(0,r.jsx)(t.strong,{children:"CommonJS"})," mode, we also provide ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.mjs",children:(0,r.jsx)(t.code,{children:"setup-jest.mjs"})}),"\nto run with ",(0,r.jsx)(t.strong,{children:"ESM"})," mode."]}),"\n",(0,r.jsx)(t.h3,{id:"configure-test-environment",children:"Configure test environment"}),"\n",(0,r.jsxs)(t.p,{children:["When creating Angular test environment with ",(0,r.jsx)(t.code,{children:"TestBed"}),", it is possible to specify the ",(0,r.jsx)(t.code,{children:"testEnvironmentOptions"})," via ",(0,r.jsx)(t.code,{children:"globalThis"})," in the Jest setup file.\nFor example:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// setup-test.ts\nglobalThis.ngJest = {\n testEnvironmentOptions: {\n teardown: {\n destroyAfterEach: false,\n rethrowErrors: true,\n },\n errorOnUnknownElements: true,\n errorOnUnknownProperties: true,\n },\n};\n\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," will look at ",(0,r.jsx)(t.code,{children:"globalThis.ngJest"})," and pass the correct ",(0,r.jsx)(t.a,{href:"https://angular.dev/api/core/testing/TestEnvironmentOptions",children:(0,r.jsx)(t.code,{children:"TestEnvironmentOptions"})})," object to ",(0,r.jsx)(t.code,{children:"TestBed"}),"."]})]})}function u(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>a});var s=n(6540);const r={},i=s.createContext(r);function o(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7466],{3577:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"If you look at setup-jest.js,","source":"@site/versioned_docs/version-14.2/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/14.2/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/getting-started/test-environment.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/14.2/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/14.2/guides/angular-ivy"}}');var r=n(4848),i=n(8453);const o={id:"test-environment",title:"Test environment"},a=void 0,l={},d=[{value:"Configure test environment",id:"configure-test-environment",level:3}];function c(e){const t={a:"a",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you look at ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.js",children:(0,r.jsx)(t.code,{children:"setup-jest.js"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,r.jsx)(t.a,{href:"https://github.com/angular/angular/tree/main/packages/zone.js",children:"Angular zone patch"}),"\nwe also make sure Jest test methods run in Zone context. Then we initialize the Angular testing environment like normal."]}),"\n",(0,r.jsxs)(t.p,{children:["While ",(0,r.jsx)(t.code,{children:"setup-jest.js"})," above is for running Jest with ",(0,r.jsx)(t.strong,{children:"CommonJS"})," mode, we also provide ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.mjs",children:(0,r.jsx)(t.code,{children:"setup-jest.mjs"})}),"\nto run with ",(0,r.jsx)(t.strong,{children:"ESM"})," mode."]}),"\n",(0,r.jsx)(t.h3,{id:"configure-test-environment",children:"Configure test environment"}),"\n",(0,r.jsxs)(t.p,{children:["When creating Angular test environment with ",(0,r.jsx)(t.code,{children:"TestBed"}),", it is possible to specify the ",(0,r.jsx)(t.code,{children:"testEnvironmentOptions"})," via ",(0,r.jsx)(t.code,{children:"globalThis"})," in the Jest setup file.\nFor example:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// setup-test.ts\nglobalThis.ngJest = {\n testEnvironmentOptions: {\n teardown: {\n destroyAfterEach: false,\n rethrowErrors: true,\n },\n errorOnUnknownElements: true,\n errorOnUnknownProperties: true,\n },\n};\n\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," will look at ",(0,r.jsx)(t.code,{children:"globalThis.ngJest"})," and pass the correct ",(0,r.jsx)(t.a,{href:"https://angular.dev/api/core/testing/TestEnvironmentOptions",children:(0,r.jsx)(t.code,{children:"TestEnvironmentOptions"})})," object to ",(0,r.jsx)(t.code,{children:"TestBed"}),"."]})]})}function u(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>a});var s=n(6540);const r={},i=s.createContext(r);function o(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/6d1ddfa7.0b5645e5.js b/assets/js/6d1ddfa7.0111fb56.js similarity index 97% rename from assets/js/6d1ddfa7.0b5645e5.js rename to assets/js/6d1ddfa7.0111fb56.js index d352eeb938..28e3afeaae 100644 --- a/assets/js/6d1ddfa7.0b5645e5.js +++ b/assets/js/6d1ddfa7.0111fb56.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4240],{6021:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/versioned_docs/version-13.0/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/13.0/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/guides/absolute-imports.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/13.0/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/13.0/guides/troubleshooting"}}');var i=s(4848),n=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,i.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,i.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,i.jsxs)(t.p,{children:["More information see ",(0,i.jsx)(t.code,{children:"ts-jest"})," ",(0,i.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const i={},n=o.createContext(i);function r(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4240],{6021:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/versioned_docs/version-13.0/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/13.0/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/guides/absolute-imports.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/13.0/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/13.0/guides/troubleshooting"}}');var i=s(4848),n=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,i.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,i.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,i.jsxs)(t.p,{children:["More information see ",(0,i.jsx)(t.code,{children:"ts-jest"})," ",(0,i.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const i={},n=o.createContext(i);function r(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/6d98fde5.10623e1d.js b/assets/js/6d98fde5.fb23a4bc.js similarity index 99% rename from assets/js/6d98fde5.10623e1d.js rename to assets/js/6d98fde5.fb23a4bc.js index fe6db30385..daf9870b1a 100644 --- a/assets/js/6d98fde5.10623e1d.js +++ b/assets/js/6d98fde5.fb23a4bc.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9726],{8869:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>p,contentTitle:()=>c,default:()=>j,frontMatter:()=>d,metadata:()=>n,toc:()=>h});const n=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"In Jest, presets are pre-defined configurations that help streamline and standardize the process of setting up testing environments.","source":"@site/versioned_docs/version-14.5/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/getting-started/presets.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/getting-started/options"}}');var r=t(4848),i=t(8453),o=t(1470),a=t(9365),l=t(4252);const d={id:"presets",title:"Presets"},c=void 0,p={},h=[{value:"Functions",id:"functions",level:2},{value:"createCjsPreset(options)",id:"createcjspresetoptions",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Example:",id:"example",level:4},{value:"createEsmPreset(options)",id:"createesmpresetoptions",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-1",level:4},{value:"Example:",id:"example-1",level:4},{value:"Legacy presets",id:"legacy-presets",level:3},{value:"Example",id:"example-2",level:4}];function g(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:["In Jest, ",(0,r.jsx)(s.strong,{children:"presets"})," are pre-defined configurations that help streamline and standardize the process of setting up testing environments.\nThey allow developers to quickly configure Jest with specific transformers, file extensions, and other options."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular"})," provides very opinionated presets and based on what we found to be useful."]}),"\n",(0,r.jsx)(s.admonition,{type:"important",children:(0,r.jsx)(s.p,{children:"The current best practice for using presets is to call one of the utility functions below to create (and optionally extend) presets. Legacy presets are listed at the bottom of the page."})}),"\n",(0,r.jsx)(s.h2,{id:"functions",children:"Functions"}),"\n","\n",(0,r.jsx)(l.A,{toc:h.slice(1)}),"\n",(0,r.jsx)(s.hr,{}),"\n",(0,r.jsx)(s.h3,{id:"createcjspresetoptions",children:(0,r.jsx)(s.code,{children:"createCjsPreset(options)"})}),"\n",(0,r.jsxs)(s.p,{children:["Create a configuration to process JavaScript/TypeScript/HTML/SVG files (",(0,r.jsx)(s.code,{children:"ts|js|mjs|html|svg"}),")."]}),"\n",(0,r.jsx)(s.h4,{id:"parameters",children:"Parameters"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"options"})," (",(0,r.jsx)(s.strong,{children:"OPTIONAL"}),")","\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"tsconfig"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/tsconfig",children:"tsconfig options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"isolatedModules"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/isolatedModules",children:"isolatedModules options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"astTransformers"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/astTransformers",children:"astTransformers options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"diagnostics"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/diagnostics",children:"diagnostics options page"})]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.h4,{id:"returns",children:"Returns"}),"\n",(0,r.jsx)(s.p,{children:"An object contains Jest config:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",children:"type CjsPresetTransformerOptions = {\n tsconfig: string;\n stringifyContentPathRegex: string;\n};\n\ntype CjsPresetType = {\n testEnvironment: string;\n moduleFileExtensions: Array;\n snapshotSerializers: Array;\n transformIgnorePatterns: Array;\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': ['jest-preset-angular', CjsPresetTransformerOptions];\n };\n};\n"})}),"\n",(0,r.jsx)(s.h4,{id:"example",children:"Example:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts"',children:"import presets from 'jest-preset-angular/presets';\nimport type { Config } from 'jest';\n\nconst presetConfig = presets.createCjsPreset({\n //...options\n});\n\nexport default {\n ...presetConfig,\n} satisfies Config;\n"})}),"\n",(0,r.jsx)(s.h3,{id:"createesmpresetoptions",children:(0,r.jsx)(s.code,{children:"createEsmPreset(options)"})}),"\n",(0,r.jsxs)(s.p,{children:["Create a configuration to process JavaScript/TypeScript/HTML/SVG files (",(0,r.jsx)(s.code,{children:"ts|js|html|svg"}),")."]}),"\n",(0,r.jsx)(s.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"options"})," (",(0,r.jsx)(s.strong,{children:"OPTIONAL"}),")","\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"tsconfig"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/tsconfig",children:"tsconfig options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"isolatedModules"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/isolatedModules",children:"isolatedModules options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"astTransformers"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/astTransformers",children:"astTransformers options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"diagnostics"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/diagnostics",children:"diagnostics options page"})]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.h4,{id:"returns-1",children:"Returns"}),"\n",(0,r.jsx)(s.p,{children:"An object contains Jest config:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",children:"type EsmPresetTransformerOptions = {\n tsconfig: string;\n stringifyContentPathRegex: string;\n useEsm: true;\n};\n\ntype EsmPresetType = {\n testEnvironment: string;\n moduleFileExtensions: Array;\n snapshotSerializers: Array;\n extensionsToTreatAsEsm: Array;\n transformIgnorePatterns: Array;\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': ['jest-preset-angular', EsmPresetTransformerOptions];\n };\n};\n"})}),"\n",(0,r.jsx)(s.h4,{id:"example-1",children:"Example:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts"',children:"import presets from 'jest-preset-angular/presets';\nimport type { Config } from 'jest';\n\nconst presetConfig = presets.createEsmPreset({\n //...options\n});\n\nexport default {\n ...presetConfig,\n} satisfies Config;\n"})}),"\n",(0,r.jsx)(s.h3,{id:"legacy-presets",children:"Legacy presets"}),"\n",(0,r.jsx)(s.admonition,{type:"warning",children:(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular"})," ",(0,r.jsx)(s.strong,{children:"DON'T RECOMMEND"})," to use legacy presets because this approach is not flexible to configure Jest configuration.\nThese legacy presets will be removed in the next major release and users are ",(0,r.jsx)(s.strong,{children:"HIGHLY RECOMMENDED"})," to migrate to use the above utility functions."]})}),"\n",(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"Preset name"}),(0,r.jsx)(s.th,{children:"Description"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsxs)(s.td,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(s.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(s.code,{children:"js"}),", ",(0,r.jsx)(s.code,{children:".ts"}),", ",(0,r.jsx)(s.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(s.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsxs)(s.td,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(s.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(s.code,{children:"js"}),", ",(0,r.jsx)(s.code,{children:".ts"}),", ",(0,r.jsx)(s.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(s.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(s.h4,{id:"example-2",children:"Example"}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n preset: 'jest-preset-angular',\n} satisfies Config;\n"})})}),(0,r.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n preset: 'jest-preset-angular/presets/defaults-esm',\n} satisfies Config;\n"})})})]})]})}function j(e={}){const{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(g,{...e})}):g(e)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9726],{8869:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>p,contentTitle:()=>c,default:()=>j,frontMatter:()=>d,metadata:()=>n,toc:()=>h});const n=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"In Jest, presets are pre-defined configurations that help streamline and standardize the process of setting up testing environments.","source":"@site/versioned_docs/version-14.5/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/getting-started/presets.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/getting-started/options"}}');var r=t(4848),i=t(8453),o=t(1470),a=t(9365),l=t(4252);const d={id:"presets",title:"Presets"},c=void 0,p={},h=[{value:"Functions",id:"functions",level:2},{value:"createCjsPreset(options)",id:"createcjspresetoptions",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Example:",id:"example",level:4},{value:"createEsmPreset(options)",id:"createesmpresetoptions",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-1",level:4},{value:"Example:",id:"example-1",level:4},{value:"Legacy presets",id:"legacy-presets",level:3},{value:"Example",id:"example-2",level:4}];function g(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:["In Jest, ",(0,r.jsx)(s.strong,{children:"presets"})," are pre-defined configurations that help streamline and standardize the process of setting up testing environments.\nThey allow developers to quickly configure Jest with specific transformers, file extensions, and other options."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular"})," provides very opinionated presets and based on what we found to be useful."]}),"\n",(0,r.jsx)(s.admonition,{type:"important",children:(0,r.jsx)(s.p,{children:"The current best practice for using presets is to call one of the utility functions below to create (and optionally extend) presets. Legacy presets are listed at the bottom of the page."})}),"\n",(0,r.jsx)(s.h2,{id:"functions",children:"Functions"}),"\n","\n",(0,r.jsx)(l.A,{toc:h.slice(1)}),"\n",(0,r.jsx)(s.hr,{}),"\n",(0,r.jsx)(s.h3,{id:"createcjspresetoptions",children:(0,r.jsx)(s.code,{children:"createCjsPreset(options)"})}),"\n",(0,r.jsxs)(s.p,{children:["Create a configuration to process JavaScript/TypeScript/HTML/SVG files (",(0,r.jsx)(s.code,{children:"ts|js|mjs|html|svg"}),")."]}),"\n",(0,r.jsx)(s.h4,{id:"parameters",children:"Parameters"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"options"})," (",(0,r.jsx)(s.strong,{children:"OPTIONAL"}),")","\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"tsconfig"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/tsconfig",children:"tsconfig options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"isolatedModules"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/isolatedModules",children:"isolatedModules options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"astTransformers"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/astTransformers",children:"astTransformers options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"diagnostics"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/diagnostics",children:"diagnostics options page"})]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.h4,{id:"returns",children:"Returns"}),"\n",(0,r.jsx)(s.p,{children:"An object contains Jest config:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",children:"type CjsPresetTransformerOptions = {\n tsconfig: string;\n stringifyContentPathRegex: string;\n};\n\ntype CjsPresetType = {\n testEnvironment: string;\n moduleFileExtensions: Array;\n snapshotSerializers: Array;\n transformIgnorePatterns: Array;\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': ['jest-preset-angular', CjsPresetTransformerOptions];\n };\n};\n"})}),"\n",(0,r.jsx)(s.h4,{id:"example",children:"Example:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts"',children:"import presets from 'jest-preset-angular/presets';\nimport type { Config } from 'jest';\n\nconst presetConfig = presets.createCjsPreset({\n //...options\n});\n\nexport default {\n ...presetConfig,\n} satisfies Config;\n"})}),"\n",(0,r.jsx)(s.h3,{id:"createesmpresetoptions",children:(0,r.jsx)(s.code,{children:"createEsmPreset(options)"})}),"\n",(0,r.jsxs)(s.p,{children:["Create a configuration to process JavaScript/TypeScript/HTML/SVG files (",(0,r.jsx)(s.code,{children:"ts|js|html|svg"}),")."]}),"\n",(0,r.jsx)(s.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"options"})," (",(0,r.jsx)(s.strong,{children:"OPTIONAL"}),")","\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"tsconfig"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/tsconfig",children:"tsconfig options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"isolatedModules"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/isolatedModules",children:"isolatedModules options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"astTransformers"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/astTransformers",children:"astTransformers options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"diagnostics"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/diagnostics",children:"diagnostics options page"})]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.h4,{id:"returns-1",children:"Returns"}),"\n",(0,r.jsx)(s.p,{children:"An object contains Jest config:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",children:"type EsmPresetTransformerOptions = {\n tsconfig: string;\n stringifyContentPathRegex: string;\n useEsm: true;\n};\n\ntype EsmPresetType = {\n testEnvironment: string;\n moduleFileExtensions: Array;\n snapshotSerializers: Array;\n extensionsToTreatAsEsm: Array;\n transformIgnorePatterns: Array;\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': ['jest-preset-angular', EsmPresetTransformerOptions];\n };\n};\n"})}),"\n",(0,r.jsx)(s.h4,{id:"example-1",children:"Example:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts"',children:"import presets from 'jest-preset-angular/presets';\nimport type { Config } from 'jest';\n\nconst presetConfig = presets.createEsmPreset({\n //...options\n});\n\nexport default {\n ...presetConfig,\n} satisfies Config;\n"})}),"\n",(0,r.jsx)(s.h3,{id:"legacy-presets",children:"Legacy presets"}),"\n",(0,r.jsx)(s.admonition,{type:"warning",children:(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular"})," ",(0,r.jsx)(s.strong,{children:"DON'T RECOMMEND"})," to use legacy presets because this approach is not flexible to configure Jest configuration.\nThese legacy presets will be removed in the next major release and users are ",(0,r.jsx)(s.strong,{children:"HIGHLY RECOMMENDED"})," to migrate to use the above utility functions."]})}),"\n",(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"Preset name"}),(0,r.jsx)(s.th,{children:"Description"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsxs)(s.td,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(s.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(s.code,{children:"js"}),", ",(0,r.jsx)(s.code,{children:".ts"}),", ",(0,r.jsx)(s.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(s.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsxs)(s.td,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(s.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(s.code,{children:"js"}),", ",(0,r.jsx)(s.code,{children:".ts"}),", ",(0,r.jsx)(s.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(s.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(s.h4,{id:"example-2",children:"Example"}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n preset: 'jest-preset-angular',\n} satisfies Config;\n"})})}),(0,r.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n preset: 'jest-preset-angular/presets/defaults-esm',\n} satisfies Config;\n"})})})]})]})}function j(e={}){const{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(g,{...e})}):g(e)}}}]); \ No newline at end of file diff --git a/assets/js/6f809103.4280cb9b.js b/assets/js/6f809103.f6fff24f.js similarity index 99% rename from assets/js/6f809103.4280cb9b.js rename to assets/js/6f809103.f6fff24f.js index 50aa198731..d96100a12e 100644 --- a/assets/js/6f809103.4280cb9b.js +++ b/assets/js/6f809103.f6fff24f.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[646],{9258:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-14.0/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/14.0/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/guides/using-with-babel.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/14.0/guides/jsdom-version"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/14.0/guides/absolute-imports"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"using-with-babel",title:"Using with Babel"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you wish to use ",(0,r.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,r.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install ",(0,r.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,r.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsxs)(t.em,{children:["Note: do not use a ",(0,r.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,r.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,r.jsxs)(t.ol,{start:"3",children:["\n",(0,r.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function b(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[u,d]=b({queryString:n,groupId:r}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),g=(()=>{const e=u??f;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{g&&i(g)}),[g]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(4848);function v(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(u(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.A)("tabs-container",g.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[646],{9258:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-14.0/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/14.0/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/guides/using-with-babel.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/14.0/guides/jsdom-version"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/14.0/guides/absolute-imports"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"using-with-babel",title:"Using with Babel"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you wish to use ",(0,r.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,r.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install ",(0,r.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,r.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsxs)(t.em,{children:["Note: do not use a ",(0,r.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,r.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,r.jsxs)(t.ol,{start:"3",children:["\n",(0,r.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function b(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[u,d]=b({queryString:n,groupId:r}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),g=(()=>{const e=u??f;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{g&&i(g)}),[g]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(4848);function v(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(u(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.A)("tabs-container",g.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/710ad8a9.be18a07e.js b/assets/js/710ad8a9.1434d6e7.js similarity index 99% rename from assets/js/710ad8a9.be18a07e.js rename to assets/js/710ad8a9.1434d6e7.js index 822b64576b..e6716bb8e8 100644 --- a/assets/js/710ad8a9.be18a07e.js +++ b/assets/js/710ad8a9.1434d6e7.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8828],{2067:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"Configure other JSDOM versions","description":"Jest v26+ by default uses JSDOM 16 to support Node 10+.","source":"@site/versioned_docs/version-11.0/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/11.0/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/guides/jsdom-version.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/11.0/guides/esm-support"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/11.0/guides/using-with-babel"}}');var s=n(4848),o=n(8453),a=n(1470),i=n(9365);const l={id:"jsdom-version",title:"Configure other JSDOM versions"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,s.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,s.jsxs)(t.p,{children:["If you need a different JSDOM version than the one that ships with Jest, you can install a jsdom environment\npackage, e.g. ",(0,s.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,s.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,s.jsx)(t.code,{children:"localStorage"})," or ",(0,s.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,s.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Reference: ",(0,s.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200",children:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200"})]})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var o=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,a),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),o=n(3104),a=n(6347),i=n(205),l=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,a.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(s.location.search);t.set(o,e),s.replace({...s.location,search:t.toString()})}),[o,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,o=p(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[u,d]=h({queryString:n,groupId:s}),[f,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,o]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return m({value:e,tabValues:o})?e:null})();(0,i.A)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),b(e)}),[d,b,o]),tabValues:o}}var b=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),c=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==r&&(u(t),a(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...o,className:(0,s.A)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8828],{2067:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"Configure other JSDOM versions","description":"Jest v26+ by default uses JSDOM 16 to support Node 10+.","source":"@site/versioned_docs/version-11.0/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/11.0/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/guides/jsdom-version.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/11.0/guides/esm-support"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/11.0/guides/using-with-babel"}}');var s=n(4848),o=n(8453),a=n(1470),i=n(9365);const l={id:"jsdom-version",title:"Configure other JSDOM versions"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,s.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,s.jsxs)(t.p,{children:["If you need a different JSDOM version than the one that ships with Jest, you can install a jsdom environment\npackage, e.g. ",(0,s.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,s.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,s.jsx)(t.code,{children:"localStorage"})," or ",(0,s.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,s.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Reference: ",(0,s.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200",children:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200"})]})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var o=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,a),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),o=n(3104),a=n(6347),i=n(205),l=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,a.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(s.location.search);t.set(o,e),s.replace({...s.location,search:t.toString()})}),[o,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,o=p(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[u,d]=h({queryString:n,groupId:s}),[f,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,o]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return m({value:e,tabValues:o})?e:null})();(0,i.A)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),b(e)}),[d,b,o]),tabValues:o}}var b=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),c=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==r&&(u(t),a(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...o,className:(0,s.A)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/72f058d3.feed8cc9.js b/assets/js/72f058d3.20d13f2a.js similarity index 99% rename from assets/js/72f058d3.feed8cc9.js rename to assets/js/72f058d3.20d13f2a.js index cec68a3902..eb3bdeed2f 100644 --- a/assets/js/72f058d3.feed8cc9.js +++ b/assets/js/72f058d3.20d13f2a.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7330],{6489:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-8.x/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/8.x/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/guides/troubleshooting.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/8.x/guides/absolute-imports"}}');var t=s(4848),o=s(8453);const i={id:"troubleshooting",title:"Troubleshooting"},a=void 0,l={},d=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["You can check Jest ",(0,t.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,t.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,t.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,t.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,t.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,t.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,t.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,t.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,t.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,t.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,t.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,t.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,t.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,t.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,t.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,t.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Add this to your ",(0,t.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,t.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,t.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,t.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,t.jsx)(n.code,{children:"JS"})," file with ",(0,t.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,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,t.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,t.jsx)(n.code,{children:"@angular"}),", ",(0,t.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,t.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,t.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,t.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,t.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,t.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,t.jsx)(n.p,{children:"or"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,t.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,t.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,t.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,t.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Install ",(0,t.jsx)(n.code,{children:"babel-jest"}),", ",(0,t.jsx)(n.code,{children:"@babel/core"})," and ",(0,t.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,t.jsxs)(n.li,{children:["Create a ",(0,t.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,t.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Define the usage of ",(0,t.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,t.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,t.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,t.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,t.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,t.jsx)(n.code,{children:"firebase"})," and ",(0,t.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,t.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,t.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,t.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,t.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,t.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,t.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,t.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,t.jsxs)(n.p,{children:["In these cases, a ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,t.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,t.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,t.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.resolver.js\nmodule.exports = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\n...\nresolver: '/src/jest.resolver.js',\n...\n"})})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>a});var r=s(6540);const t={},o=r.createContext(t);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7330],{6489:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-8.x/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/8.x/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/guides/troubleshooting.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/8.x/guides/absolute-imports"}}');var t=s(4848),o=s(8453);const i={id:"troubleshooting",title:"Troubleshooting"},a=void 0,l={},d=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["You can check Jest ",(0,t.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,t.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,t.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,t.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,t.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,t.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,t.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,t.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,t.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,t.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,t.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,t.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,t.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,t.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,t.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,t.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Add this to your ",(0,t.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,t.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,t.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,t.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,t.jsx)(n.code,{children:"JS"})," file with ",(0,t.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,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,t.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,t.jsx)(n.code,{children:"@angular"}),", ",(0,t.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,t.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,t.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,t.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,t.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,t.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,t.jsx)(n.p,{children:"or"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,t.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,t.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,t.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,t.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Install ",(0,t.jsx)(n.code,{children:"babel-jest"}),", ",(0,t.jsx)(n.code,{children:"@babel/core"})," and ",(0,t.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,t.jsxs)(n.li,{children:["Create a ",(0,t.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,t.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Define the usage of ",(0,t.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,t.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,t.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,t.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,t.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,t.jsx)(n.code,{children:"firebase"})," and ",(0,t.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,t.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,t.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,t.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,t.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,t.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,t.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,t.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,t.jsxs)(n.p,{children:["In these cases, a ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,t.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,t.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,t.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.resolver.js\nmodule.exports = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\n...\nresolver: '/src/jest.resolver.js',\n...\n"})})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>a});var r=s(6540);const t={},o=r.createContext(t);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/732c3ce9.373290be.js b/assets/js/732c3ce9.ed8050c4.js similarity index 98% rename from assets/js/732c3ce9.373290be.js rename to assets/js/732c3ce9.ed8050c4.js index a0a71bc599..6df6569870 100644 --- a/assets/js/732c3ce9.373290be.js +++ b/assets/js/732c3ce9.ed8050c4.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4340],{3381:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"If you look at setup-jest.js,","source":"@site/versioned_docs/version-13.0/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/13.0/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/getting-started/test-environment.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/13.0/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/13.0/guides/angular-ivy"}}');var r=n(4848),i=n(8453);const o={id:"test-environment",title:"Test environment"},a=void 0,l={},d=[{value:"Configure test environment",id:"configure-test-environment",level:3}];function c(e){const t={a:"a",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you look at ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.js",children:(0,r.jsx)(t.code,{children:"setup-jest.js"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,r.jsx)(t.a,{href:"https://github.com/angular/angular/tree/main/packages/zone.js",children:"Angular zone patch"}),"\nwe also make sure Jest test methods run in Zone context. Then we initialize the Angular testing environment like normal."]}),"\n",(0,r.jsxs)(t.p,{children:["While ",(0,r.jsx)(t.code,{children:"setup-jest.js"})," above is for running Jest with ",(0,r.jsx)(t.strong,{children:"CommonJS"})," mode, we also provide ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.mjs",children:(0,r.jsx)(t.code,{children:"setup-jest.mjs"})}),"\nto run with ",(0,r.jsx)(t.strong,{children:"ESM"})," mode."]}),"\n",(0,r.jsx)(t.h3,{id:"configure-test-environment",children:"Configure test environment"}),"\n",(0,r.jsxs)(t.p,{children:["When creating Angular test environment with ",(0,r.jsx)(t.code,{children:"TestBed"}),", it is possible to specify the ",(0,r.jsx)(t.code,{children:"testEnvironmentOptions"})," via ",(0,r.jsx)(t.code,{children:"globalThis"})," in the Jest setup file.\nFor example:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// setup-test.ts\nglobalThis.ngJest = {\n testEnvironmentOptions: {\n teardown: {\n destroyAfterEach: false,\n rethrowErrors: true,\n },\n errorOnUnknownElements: true,\n errorOnUnknownProperties: true,\n },\n};\n\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," will look at ",(0,r.jsx)(t.code,{children:"globalThis.ngJest"})," and pass the correct ",(0,r.jsx)(t.a,{href:"https://angular.io/api/core/testing/TestEnvironmentOptions",children:(0,r.jsx)(t.code,{children:"TestEnvironmentOptions"})})," object to ",(0,r.jsx)(t.code,{children:"TestBed"}),"."]})]})}function u(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>a});var s=n(6540);const r={},i=s.createContext(r);function o(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4340],{3381:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"If you look at setup-jest.js,","source":"@site/versioned_docs/version-13.0/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/13.0/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/getting-started/test-environment.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/13.0/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/13.0/guides/angular-ivy"}}');var r=n(4848),i=n(8453);const o={id:"test-environment",title:"Test environment"},a=void 0,l={},d=[{value:"Configure test environment",id:"configure-test-environment",level:3}];function c(e){const t={a:"a",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you look at ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.js",children:(0,r.jsx)(t.code,{children:"setup-jest.js"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,r.jsx)(t.a,{href:"https://github.com/angular/angular/tree/main/packages/zone.js",children:"Angular zone patch"}),"\nwe also make sure Jest test methods run in Zone context. Then we initialize the Angular testing environment like normal."]}),"\n",(0,r.jsxs)(t.p,{children:["While ",(0,r.jsx)(t.code,{children:"setup-jest.js"})," above is for running Jest with ",(0,r.jsx)(t.strong,{children:"CommonJS"})," mode, we also provide ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.mjs",children:(0,r.jsx)(t.code,{children:"setup-jest.mjs"})}),"\nto run with ",(0,r.jsx)(t.strong,{children:"ESM"})," mode."]}),"\n",(0,r.jsx)(t.h3,{id:"configure-test-environment",children:"Configure test environment"}),"\n",(0,r.jsxs)(t.p,{children:["When creating Angular test environment with ",(0,r.jsx)(t.code,{children:"TestBed"}),", it is possible to specify the ",(0,r.jsx)(t.code,{children:"testEnvironmentOptions"})," via ",(0,r.jsx)(t.code,{children:"globalThis"})," in the Jest setup file.\nFor example:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// setup-test.ts\nglobalThis.ngJest = {\n testEnvironmentOptions: {\n teardown: {\n destroyAfterEach: false,\n rethrowErrors: true,\n },\n errorOnUnknownElements: true,\n errorOnUnknownProperties: true,\n },\n};\n\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," will look at ",(0,r.jsx)(t.code,{children:"globalThis.ngJest"})," and pass the correct ",(0,r.jsx)(t.a,{href:"https://angular.io/api/core/testing/TestEnvironmentOptions",children:(0,r.jsx)(t.code,{children:"TestEnvironmentOptions"})})," object to ",(0,r.jsx)(t.code,{children:"TestBed"}),"."]})]})}function u(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>a});var s=n(6540);const r={},i=s.createContext(r);function o(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/79ea3e73.d3c228ca.js b/assets/js/79ea3e73.a49c0e3e.js similarity index 98% rename from assets/js/79ea3e73.d3c228ca.js rename to assets/js/79ea3e73.a49c0e3e.js index 27b82f49b3..a4af86d7de 100644 --- a/assets/js/79ea3e73.d3c228ca.js +++ b/assets/js/79ea3e73.a49c0e3e.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[795],{9892:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>d,default:()=>p,frontMatter:()=>i,metadata:()=>n,toc:()=>l});const n=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"The presets","source":"@site/versioned_docs/version-9.x/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/9.x/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/getting-started/presets.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/9.x/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/9.x/getting-started/options"}}');var r=s(4848),o=s(8453);const i={id:"presets",title:"Presets"},d=void 0,a={},l=[{value:"The presets",id:"the-presets",level:3},{value:"Basic usage",id:"basic-usage",level:3},{value:"Advanced",id:"advanced",level:3}];function c(e){const t={admonition:"admonition",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Preset name"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,r.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,r.jsx)(t.code,{children:"preset"})," key to the desired preset name in your Jest config should be enough to start\nusing TypeScript with Jest (assuming you added ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,r.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n"})}),"\n",(0,r.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,r.jsxs)(t.p,{children:["All presets come with default ",(0,r.jsx)(t.code,{children:"ts-jest"})," config options.\nIf you want to override any of the options, you'll need to use the JavaScript version of Jest config,\ncopy the original options and override the options you need:"]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["If you choose to override ",(0,r.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,r.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,r.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nconst { defaults: jestNgPreset } = require('jest-preset-angular/presets');\n// const { defaultsESM: jestNgPreset } = require('jest-preset-angular/presets')\n\nmodule.exports = {\n // [...]\n globals: {\n 'ts-jest': {\n ...jestNgPreset.globals['ts-jest'],\n // [...your overriden options]\n },\n },\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:["Or through TypeScript (if ",(0,r.jsx)(t.code,{children:"ts-node"})," is installed):"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// jest.config.ts\nimport type { InitialOptionsTsJest } from 'ts-jest/dist/types';\nimport { defaults as jestNgPreset } from 'jest-preset-angular/presets';\n// import { defaultsESM as jestNgPreset } from 'jest-preset-angular/presets'\n\nconst config: InitialOptionsTsJest = {\n // [...]\n globals: {\n 'ts-jest': {\n ...jestNgPreset.globals['ts-jest'],\n // [...your overriden options]\n },\n },\n};\n\nexport default config;\n"})})]})}function p(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>d});var n=s(6540);const r={},o=n.createContext(r);function i(e){const t=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[795],{9892:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>d,default:()=>p,frontMatter:()=>i,metadata:()=>n,toc:()=>l});const n=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"The presets","source":"@site/versioned_docs/version-9.x/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/9.x/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/getting-started/presets.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/9.x/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/9.x/getting-started/options"}}');var r=s(4848),o=s(8453);const i={id:"presets",title:"Presets"},d=void 0,a={},l=[{value:"The presets",id:"the-presets",level:3},{value:"Basic usage",id:"basic-usage",level:3},{value:"Advanced",id:"advanced",level:3}];function c(e){const t={admonition:"admonition",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Preset name"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,r.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,r.jsx)(t.code,{children:"preset"})," key to the desired preset name in your Jest config should be enough to start\nusing TypeScript with Jest (assuming you added ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,r.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n"})}),"\n",(0,r.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,r.jsxs)(t.p,{children:["All presets come with default ",(0,r.jsx)(t.code,{children:"ts-jest"})," config options.\nIf you want to override any of the options, you'll need to use the JavaScript version of Jest config,\ncopy the original options and override the options you need:"]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["If you choose to override ",(0,r.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,r.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,r.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nconst { defaults: jestNgPreset } = require('jest-preset-angular/presets');\n// const { defaultsESM: jestNgPreset } = require('jest-preset-angular/presets')\n\nmodule.exports = {\n // [...]\n globals: {\n 'ts-jest': {\n ...jestNgPreset.globals['ts-jest'],\n // [...your overriden options]\n },\n },\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:["Or through TypeScript (if ",(0,r.jsx)(t.code,{children:"ts-node"})," is installed):"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// jest.config.ts\nimport type { InitialOptionsTsJest } from 'ts-jest/dist/types';\nimport { defaults as jestNgPreset } from 'jest-preset-angular/presets';\n// import { defaultsESM as jestNgPreset } from 'jest-preset-angular/presets'\n\nconst config: InitialOptionsTsJest = {\n // [...]\n globals: {\n 'ts-jest': {\n ...jestNgPreset.globals['ts-jest'],\n // [...your overriden options]\n },\n },\n};\n\nexport default config;\n"})})]})}function p(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>d});var n=s(6540);const r={},o=n.createContext(r);function i(e){const t=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/7aeeadd4.ca76dcd9.js b/assets/js/7aeeadd4.ba8b17af.js similarity index 97% rename from assets/js/7aeeadd4.ca76dcd9.js rename to assets/js/7aeeadd4.ba8b17af.js index 323be6cf60..66f1cdd742 100644 --- a/assets/js/7aeeadd4.ca76dcd9.js +++ b/assets/js/7aeeadd4.ba8b17af.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8654],{3004:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>c});const s=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"If you look at setup-jest.ts,","source":"@site/versioned_docs/version-8.x/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/8.x/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/getting-started/test-environment.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/8.x/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/8.x/guides/angular-ivy"}}');var r=n(4848),o=n(8453);const i={id:"test-environment",title:"Test environment"},a=void 0,d={},c=[];function l(e){const t={a:"a",code:"code",p:"p",...(0,o.R)(),...e.components};return(0,r.jsxs)(t.p,{children:["If you look at ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/v8.3.2/src/setup-jest.ts",children:(0,r.jsx)(t.code,{children:"setup-jest.ts"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/v8.3.2/src/zone-patch",children:"jest-zone-patch"}),"\nwe also make sure Jest test methods run in Zone context. Then we initialize the Angular testing environment like normal."]})}function u(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>a});var s=n(6540);const r={},o=s.createContext(r);function i(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8654],{3004:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>c});const s=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"If you look at setup-jest.ts,","source":"@site/versioned_docs/version-8.x/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/8.x/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/getting-started/test-environment.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/8.x/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/8.x/guides/angular-ivy"}}');var r=n(4848),o=n(8453);const i={id:"test-environment",title:"Test environment"},a=void 0,d={},c=[];function l(e){const t={a:"a",code:"code",p:"p",...(0,o.R)(),...e.components};return(0,r.jsxs)(t.p,{children:["If you look at ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/v8.3.2/src/setup-jest.ts",children:(0,r.jsx)(t.code,{children:"setup-jest.ts"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/v8.3.2/src/zone-patch",children:"jest-zone-patch"}),"\nwe also make sure Jest test methods run in Zone context. Then we initialize the Angular testing environment like normal."]})}function u(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>a});var s=n(6540);const r={},o=s.createContext(r);function i(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/80b4c599.572ec581.js b/assets/js/80b4c599.52ba3ad4.js similarity index 98% rename from assets/js/80b4c599.572ec581.js rename to assets/js/80b4c599.52ba3ad4.js index 1467ce991e..f71680ee39 100644 --- a/assets/js/80b4c599.572ec581.js +++ b/assets/js/80b4c599.52ba3ad4.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[131],{7087:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"If you look at setup-jest.js,","source":"@site/versioned_docs/version-12.0/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/12.0/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/getting-started/test-environment.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/12.0/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/12.0/guides/angular-ivy"}}');var r=n(4848),i=n(8453);const o={id:"test-environment",title:"Test environment"},a=void 0,l={},d=[{value:"Configure test environment",id:"configure-test-environment",level:3}];function c(e){const t={a:"a",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you look at ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.js",children:(0,r.jsx)(t.code,{children:"setup-jest.js"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,r.jsx)(t.a,{href:"https://github.com/angular/angular/tree/main/packages/zone.js",children:"Angular zone patch"}),"\nwe also make sure Jest test methods run in Zone context. Then we initialize the Angular testing environment like normal."]}),"\n",(0,r.jsxs)(t.p,{children:["While ",(0,r.jsx)(t.code,{children:"setup-jest.js"})," above is for running Jest with ",(0,r.jsx)(t.strong,{children:"CommonJS"})," mode, we also provide ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.mjs",children:(0,r.jsx)(t.code,{children:"setup-jest.mjs"})}),"\nto run with ",(0,r.jsx)(t.strong,{children:"ESM"})," mode."]}),"\n",(0,r.jsx)(t.h3,{id:"configure-test-environment",children:"Configure test environment"}),"\n",(0,r.jsxs)(t.p,{children:["When creating Angular test environment with ",(0,r.jsx)(t.code,{children:"TestBed"}),", it is possible to specify the ",(0,r.jsx)(t.code,{children:"testEnvironmentOptions"})," via ",(0,r.jsx)(t.code,{children:"globalThis"})," in the Jest setup file.\nFor example:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// setup-test.ts\nglobalThis.ngJest = {\n testEnvironmentOptions: {\n teardown: {\n destroyAfterEach: false,\n rethrowErrors: true,\n },\n errorOnUnknownElements: true,\n errorOnUnknownProperties: true,\n },\n};\n\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," will look at ",(0,r.jsx)(t.code,{children:"globalThis.ngJest"})," and pass the correct ",(0,r.jsx)(t.a,{href:"https://angular.io/api/core/testing/TestEnvironmentOptions",children:(0,r.jsx)(t.code,{children:"TestEnvironmentOptions"})})," object to ",(0,r.jsx)(t.code,{children:"TestBed"}),"."]})]})}function u(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>a});var s=n(6540);const r={},i=s.createContext(r);function o(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[131],{7087:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"If you look at setup-jest.js,","source":"@site/versioned_docs/version-12.0/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/12.0/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/getting-started/test-environment.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/12.0/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/12.0/guides/angular-ivy"}}');var r=n(4848),i=n(8453);const o={id:"test-environment",title:"Test environment"},a=void 0,l={},d=[{value:"Configure test environment",id:"configure-test-environment",level:3}];function c(e){const t={a:"a",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you look at ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.js",children:(0,r.jsx)(t.code,{children:"setup-jest.js"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,r.jsx)(t.a,{href:"https://github.com/angular/angular/tree/main/packages/zone.js",children:"Angular zone patch"}),"\nwe also make sure Jest test methods run in Zone context. Then we initialize the Angular testing environment like normal."]}),"\n",(0,r.jsxs)(t.p,{children:["While ",(0,r.jsx)(t.code,{children:"setup-jest.js"})," above is for running Jest with ",(0,r.jsx)(t.strong,{children:"CommonJS"})," mode, we also provide ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.mjs",children:(0,r.jsx)(t.code,{children:"setup-jest.mjs"})}),"\nto run with ",(0,r.jsx)(t.strong,{children:"ESM"})," mode."]}),"\n",(0,r.jsx)(t.h3,{id:"configure-test-environment",children:"Configure test environment"}),"\n",(0,r.jsxs)(t.p,{children:["When creating Angular test environment with ",(0,r.jsx)(t.code,{children:"TestBed"}),", it is possible to specify the ",(0,r.jsx)(t.code,{children:"testEnvironmentOptions"})," via ",(0,r.jsx)(t.code,{children:"globalThis"})," in the Jest setup file.\nFor example:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// setup-test.ts\nglobalThis.ngJest = {\n testEnvironmentOptions: {\n teardown: {\n destroyAfterEach: false,\n rethrowErrors: true,\n },\n errorOnUnknownElements: true,\n errorOnUnknownProperties: true,\n },\n};\n\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," will look at ",(0,r.jsx)(t.code,{children:"globalThis.ngJest"})," and pass the correct ",(0,r.jsx)(t.a,{href:"https://angular.io/api/core/testing/TestEnvironmentOptions",children:(0,r.jsx)(t.code,{children:"TestEnvironmentOptions"})})," object to ",(0,r.jsx)(t.code,{children:"TestBed"}),"."]})]})}function u(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>a});var s=n(6540);const r={},i=s.createContext(r);function o(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/85e14910.c228765b.js b/assets/js/85e14910.3b1ec3d1.js similarity index 99% rename from assets/js/85e14910.c228765b.js rename to assets/js/85e14910.3b1ec3d1.js index 5a7ff94304..9e719c2f38 100644 --- a/assets/js/85e14910.c228765b.js +++ b/assets/js/85e14910.3b1ec3d1.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3170],{8779:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-14.0/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/14.0/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/getting-started/installation.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/14.0/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/14.0/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsxs)(t.p,{children:["In your project root, create ",(0,r.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(t.p,{children:"Add the following section:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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 setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "extends": "./tsconfig.json",\n "compilerOptions": {\n "outDir": "./out-tsc/spec",\n "module": "CommonJs",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// Assuming that your global setup file is setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function j(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=m({queryString:n,groupId:r}),[j,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??j;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3170],{8779:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-14.0/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/14.0/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/getting-started/installation.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/14.0/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/14.0/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsxs)(t.p,{children:["In your project root, create ",(0,r.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(t.p,{children:"Add the following section:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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 setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "extends": "./tsconfig.json",\n "compilerOptions": {\n "outDir": "./out-tsc/spec",\n "module": "CommonJs",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// Assuming that your global setup file is setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function j(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=m({queryString:n,groupId:r}),[j,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??j;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/8665e647.09e7af18.js b/assets/js/8665e647.e2cee9f8.js similarity index 99% rename from assets/js/8665e647.09e7af18.js rename to assets/js/8665e647.e2cee9f8.js index 77d8c9cb6e..b1cdbcec25 100644 --- a/assets/js/8665e647.09e7af18.js +++ b/assets/js/8665e647.e2cee9f8.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5700],{3852:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-11.1/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/11.1/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/getting-started/installation.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/11.1/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/11.1/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsxs)(t.p,{children:["In your project root, create ",(0,r.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(t.p,{children:"Add the following section:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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 setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "extends": "./tsconfig.json",\n "compilerOptions": {\n "outDir": "./out-tsc/spec",\n "module": "CommonJs",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// Assuming that your global setup file is setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function j(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=m({queryString:n,groupId:r}),[j,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??j;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5700],{3852:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-11.1/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/11.1/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/getting-started/installation.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/11.1/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/11.1/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsxs)(t.p,{children:["In your project root, create ",(0,r.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(t.p,{children:"Add the following section:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.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 setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "extends": "./tsconfig.json",\n "compilerOptions": {\n "outDir": "./out-tsc/spec",\n "module": "CommonJs",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// Assuming that your global setup file is setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function j(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=m({queryString:n,groupId:r}),[j,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??j;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/8afa1348.2c77e10e.js b/assets/js/8afa1348.98d5c80f.js similarity index 96% rename from assets/js/8afa1348.2c77e10e.js rename to assets/js/8afa1348.98d5c80f.js index 25f4e77a7a..5a3f1b5f89 100644 --- a/assets/js/8afa1348.2c77e10e.js +++ b/assets/js/8afa1348.98d5c80f.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2341],{747:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-10.x/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/10.x/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/processing.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/10.x/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/10.x/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2341],{747:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-10.x/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/10.x/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/processing.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/10.x/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/10.x/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/8b263414.7f71f2a6.js b/assets/js/8b263414.5b15f1bf.js similarity index 97% rename from assets/js/8b263414.7f71f2a6.js rename to assets/js/8b263414.5b15f1bf.js index f88bb0a1af..03701825a8 100644 --- a/assets/js/8b263414.7f71f2a6.js +++ b/assets/js/8b263414.5b15f1bf.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[347],{6102:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>d,frontMatter:()=>a,metadata:()=>s,toc:()=>c});const s=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"Starting from v9.0.0+, jest-preset-angular is fully compatible with Angular Ivy. To make sure that Jest uses the","source":"@site/versioned_docs/version-11.0/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/11.0/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/guides/angular-ivy.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/11.0/getting-started/test-environment"},"next":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/11.0/guides/angular-13+"}}');var r=n(4848),i=n(8453);const a={id:"angular-ivy",title:"Angular Ivy"},o=void 0,l={},c=[];function u(e){const t={code:"code",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["Starting from ",(0,r.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,r.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,r.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," also provides util script to help you to run ",(0,r.jsx)(t.code,{children:"ngcc"})," with Jest but this script only works via the\nJavaScript version of Jest config"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nrequire('jest-preset-angular/ngcc-jest-processor');\n\nmodule.exports = {\n // [...]\n};\n"})})]})}function d(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>o});var s=n(6540);const r={},i=s.createContext(r);function a(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[347],{6102:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>d,frontMatter:()=>a,metadata:()=>s,toc:()=>c});const s=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"Starting from v9.0.0+, jest-preset-angular is fully compatible with Angular Ivy. To make sure that Jest uses the","source":"@site/versioned_docs/version-11.0/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/11.0/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/guides/angular-ivy.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/11.0/getting-started/test-environment"},"next":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/11.0/guides/angular-13+"}}');var r=n(4848),i=n(8453);const a={id:"angular-ivy",title:"Angular Ivy"},o=void 0,l={},c=[];function u(e){const t={code:"code",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["Starting from ",(0,r.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,r.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,r.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," also provides util script to help you to run ",(0,r.jsx)(t.code,{children:"ngcc"})," with Jest but this script only works via the\nJavaScript version of Jest config"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nrequire('jest-preset-angular/ngcc-jest-processor');\n\nmodule.exports = {\n // [...]\n};\n"})})]})}function d(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>o});var s=n(6540);const r={},i=s.createContext(r);function a(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/8b615392.1df2bc5d.js b/assets/js/8b615392.7c934a78.js similarity index 99% rename from assets/js/8b615392.1df2bc5d.js rename to assets/js/8b615392.7c934a78.js index 5c69cfe0ef..d5d14c993e 100644 --- a/assets/js/8b615392.1df2bc5d.js +++ b/assets/js/8b615392.7c934a78.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7511],{3124:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"JSDOM version","description":"This page is now DEPRECATED and will be removed in the next major release. Please visit JSDOM environment configuration","source":"@site/versioned_docs/version-14.5/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/guides/jsdom-version.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"jsdom-version","title":"JSDOM version"},"sidebar":"docs","previous":{"title":"JSDOM environment","permalink":"/jest-preset-angular/docs/guides/jsdom-environment"},"next":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/guides/snapshot-testing"}}');var s=t(4848),a=t(8453),o=t(1470),i=t(9365);const l={id:"jsdom-version",title:"JSDOM version"},u=void 0,c={},d=[];function p(e){const n={a:"a",admonition:"admonition",code:"code",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.admonition,{title:"DEPRECATED",type:"warning",children:(0,s.jsxs)(n.p,{children:["This page is now ",(0,s.jsx)(n.strong,{children:"DEPRECATED"})," and will be removed in the next major release. Please visit ",(0,s.jsx)(n.a,{href:"/jest-preset-angular/docs/guides/jsdom-environment",children:"JSDOM environment configuration"})]})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," provides a way to configure a different version of ",(0,s.jsx)(n.code,{children:"JSDOM"})," than the one ships with ",(0,s.jsx)(n.code,{children:"Jest"}),"\nvia a custom ",(0,s.jsx)(n.code,{children:"JSDOM"})," environment. One can follow the below steps to configure a different JSDOM version:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"Install the desired JSDOM version"}),"\n"]}),"\n",(0,s.jsxs)(o.A,{groupId:"npm2yarn",children:[(0,s.jsx)(i.A,{value:"npm",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"npm install -D jsdom@\n"})})}),(0,s.jsx)(i.A,{value:"yarn",label:"Yarn",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"yarn add --dev jsdom@\n"})})}),(0,s.jsx)(i.A,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"pnpm add -D jsdom@\n"})})})]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["In Jest config, set the ",(0,s.jsx)(n.code,{children:"testEnvironment"})," like following"]}),"\n"]}),"\n",(0,s.jsxs)(o.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n testEnvironment: 'jest-preset-angular/environments/jest-jsdom-env',\n} satisfies Config;\n"})})}),(0,s.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n testEnvironment: 'jest-preset-angular/environments/jest-jsdom-env',\n} satisfies Config;\n"})})})]})]})}function m(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>o});t(6540);var r=t(4164);const s={tabItem:"tabItem_Ymn6"};var a=t(4848);function o(e){let{children:n,hidden:t,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,o),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>w});var r=t(6540),s=t(4164),a=t(3104),o=t(6347),i=t(205),l=t(7485),u=t(1682),c=t(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:n,children:t}=e;return(0,r.useMemo)((()=>{const e=n??function(e){return d(e).map((e=>{let{props:{value:n,label:t,attributes:r,default:s}}=e;return{value:n,label:t,attributes:r,default:s}}))}(t);return function(e){const n=(0,u.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function m(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function h(e){let{queryString:n=!1,groupId:t}=e;const s=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(s.location.search);n.set(a,e),s.replace({...s.location,search:n.toString()})}),[a,s])]}function f(e){const{defaultValue:n,queryString:t=!1,groupId:s}=e,a=p(e),[o,l]=(0,r.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!m({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const r=t.find((e=>e.default))??t[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:n,tabValues:a}))),[u,d]=h({queryString:t,groupId:s}),[f,v]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[s,a]=(0,c.Dv)(t);return[s,(0,r.useCallback)((e=>{t&&a.set(e)}),[t,a])]}({groupId:s}),g=(()=>{const e=u??f;return m({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{g&&l(g)}),[g]);return{selectedValue:o,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),v(e)}),[d,v,a]),tabValues:a}}var v=t(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=t(4848);function j(e){let{className:n,block:t,selectedValue:r,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const n=e.currentTarget,t=l.indexOf(n),s=i[t].value;s!==r&&(u(n),o(s))},d=e=>{let n=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":t},n),children:i.map((e=>{let{value:n,label:t,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:r===n?0:-1,"aria-selected":r===n,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...a,className:(0,s.A)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":r===n}),children:t??n},n)}))})}function x(e){let{lazy:n,children:t,selectedValue:a}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,r.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function y(e){const n=f(e);return(0,b.jsxs)("div",{className:(0,s.A)("tabs-container",g.tabList),children:[(0,b.jsx)(j,{...n,...e}),(0,b.jsx)(x,{...n,...e})]})}function w(e){const n=(0,v.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>i});var r=t(6540);const s={},a=r.createContext(s);function o(e){const n=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7511],{3124:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"JSDOM version","description":"This page is now DEPRECATED and will be removed in the next major release. Please visit JSDOM environment configuration","source":"@site/versioned_docs/version-14.5/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/guides/jsdom-version.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"jsdom-version","title":"JSDOM version"},"sidebar":"docs","previous":{"title":"JSDOM environment","permalink":"/jest-preset-angular/docs/guides/jsdom-environment"},"next":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/guides/snapshot-testing"}}');var s=t(4848),a=t(8453),o=t(1470),i=t(9365);const l={id:"jsdom-version",title:"JSDOM version"},u=void 0,c={},d=[];function p(e){const n={a:"a",admonition:"admonition",code:"code",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.admonition,{title:"DEPRECATED",type:"warning",children:(0,s.jsxs)(n.p,{children:["This page is now ",(0,s.jsx)(n.strong,{children:"DEPRECATED"})," and will be removed in the next major release. Please visit ",(0,s.jsx)(n.a,{href:"/jest-preset-angular/docs/guides/jsdom-environment",children:"JSDOM environment configuration"})]})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," provides a way to configure a different version of ",(0,s.jsx)(n.code,{children:"JSDOM"})," than the one ships with ",(0,s.jsx)(n.code,{children:"Jest"}),"\nvia a custom ",(0,s.jsx)(n.code,{children:"JSDOM"})," environment. One can follow the below steps to configure a different JSDOM version:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"Install the desired JSDOM version"}),"\n"]}),"\n",(0,s.jsxs)(o.A,{groupId:"npm2yarn",children:[(0,s.jsx)(i.A,{value:"npm",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"npm install -D jsdom@\n"})})}),(0,s.jsx)(i.A,{value:"yarn",label:"Yarn",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"yarn add --dev jsdom@\n"})})}),(0,s.jsx)(i.A,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"pnpm add -D jsdom@\n"})})})]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["In Jest config, set the ",(0,s.jsx)(n.code,{children:"testEnvironment"})," like following"]}),"\n"]}),"\n",(0,s.jsxs)(o.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n testEnvironment: 'jest-preset-angular/environments/jest-jsdom-env',\n} satisfies Config;\n"})})}),(0,s.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n testEnvironment: 'jest-preset-angular/environments/jest-jsdom-env',\n} satisfies Config;\n"})})})]})]})}function m(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>o});t(6540);var r=t(4164);const s={tabItem:"tabItem_Ymn6"};var a=t(4848);function o(e){let{children:n,hidden:t,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,o),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>w});var r=t(6540),s=t(4164),a=t(3104),o=t(6347),i=t(205),l=t(7485),u=t(1682),c=t(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:n,children:t}=e;return(0,r.useMemo)((()=>{const e=n??function(e){return d(e).map((e=>{let{props:{value:n,label:t,attributes:r,default:s}}=e;return{value:n,label:t,attributes:r,default:s}}))}(t);return function(e){const n=(0,u.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function m(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function h(e){let{queryString:n=!1,groupId:t}=e;const s=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(s.location.search);n.set(a,e),s.replace({...s.location,search:n.toString()})}),[a,s])]}function f(e){const{defaultValue:n,queryString:t=!1,groupId:s}=e,a=p(e),[o,l]=(0,r.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!m({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const r=t.find((e=>e.default))??t[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:n,tabValues:a}))),[u,d]=h({queryString:t,groupId:s}),[f,v]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[s,a]=(0,c.Dv)(t);return[s,(0,r.useCallback)((e=>{t&&a.set(e)}),[t,a])]}({groupId:s}),g=(()=>{const e=u??f;return m({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{g&&l(g)}),[g]);return{selectedValue:o,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),v(e)}),[d,v,a]),tabValues:a}}var v=t(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=t(4848);function j(e){let{className:n,block:t,selectedValue:r,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const n=e.currentTarget,t=l.indexOf(n),s=i[t].value;s!==r&&(u(n),o(s))},d=e=>{let n=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":t},n),children:i.map((e=>{let{value:n,label:t,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:r===n?0:-1,"aria-selected":r===n,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...a,className:(0,s.A)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":r===n}),children:t??n},n)}))})}function x(e){let{lazy:n,children:t,selectedValue:a}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,r.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function y(e){const n=f(e);return(0,b.jsxs)("div",{className:(0,s.A)("tabs-container",g.tabList),children:[(0,b.jsx)(j,{...n,...e}),(0,b.jsx)(x,{...n,...e})]})}function w(e){const n=(0,v.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>i});var r=t(6540);const s={},a=r.createContext(s);function o(e){const n=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/8f3baa16.66a23cf6.js b/assets/js/8f3baa16.95fc9978.js similarity index 99% rename from assets/js/8f3baa16.66a23cf6.js rename to assets/js/8f3baa16.95fc9978.js index 62a06d98a4..ac8523a090 100644 --- a/assets/js/8f3baa16.66a23cf6.js +++ b/assets/js/8f3baa16.95fc9978.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[217],{182:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the transform of Jest config object","source":"@site/versioned_docs/version-14.3/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/14.3/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/getting-started/options.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/14.3/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/14.3/getting-started/test-environment"}}');var r=n(4848),o=n(8453),i=n(1470),a=n(9365);const l={id:"options",title:"Options"},c=void 0,d={},u=[{value:"Processing with esbuild",id:"processing-with-esbuild",level:3},{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function p(e){const t={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,r.jsx)(t.code,{children:"transform"})," of Jest config object\nin the ",(0,r.jsx)(t.code,{children:"package.json"})," file of your project, or through a ",(0,r.jsx)(t.code,{children:"jest.config.js"}),", or ",(0,r.jsx)(t.code,{children:"jest.config.ts"})," file."]}),"\n",(0,r.jsxs)(t.p,{children:["More information about ",(0,r.jsx)(t.code,{children:"ts-jest"})," options, see ",(0,r.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v9.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,r.jsx)(t.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,r.jsx)(t.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]})}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),"\n",(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,r.jsx)(t.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,r.jsx)(t.code,{children:".mjs"})," files\nwill be processed by ",(0,r.jsx)(t.code,{children:"esbuild"})," in ",(0,r.jsx)(t.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,r.jsx)(t.code,{children:"esbuild"}),", one can do the following:"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n processWithEsbuild: []\n }\n ]\n }\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n processWithEsbuild: []\n }\n ]\n }\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n snapshotSerializers: [\n 'jest-preset-angular/build/serializers/html-comment',\n 'jest-preset-angular/build/serializers/ng-snapshot',\n 'jest-preset-angular/build/serializers/no-ng-attributes',\n ],\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Jest runs with ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,r.jsx)(t.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,r.jsx)(t.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["We're using ",(0,r.jsx)(t.code,{children:'"transform"'})," to pass information about configuration to use for code compilation with ",(0,r.jsx)(t.code,{children:"ts-jest"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,r.jsx)(t.code,{children:"ts"}),"), HTML (",(0,r.jsx)(t.code,{children:"html"}),"), JavaScript (",(0,r.jsx)(t.code,{children:"js"}),"), JSON (",(0,r.jsx)(t.code,{children:"json"}),") and ESM JavaScript (",(0,r.jsx)(t.code,{children:"mjs"}),") files."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses ",(0,r.jsx)(t.code,{children:"RegExp"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. See more in ",(0,r.jsx)(t.a,{href:"/jest-preset-angular/docs/14.3/guides/snapshot-testing",children:"Snapshot testing"})]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,r.jsx)(t.code,{children:".mjs"})," files which come from ",(0,r.jsx)(t.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"transform"'})," \u2013 run every ",(0,r.jsx)(t.code,{children:"TS"}),", ",(0,r.jsx)(t.code,{children:"JS"}),", ",(0,r.jsx)(t.code,{children:"MJS"}),", ",(0,r.jsx)(t.code,{children:"HTML"}),", or ",(0,r.jsx)(t.code,{children:"SVG"})," file through so called ",(0,r.jsx)(t.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>i});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var o=n(4848);function i(e){let{children:t,hidden:n,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,i),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>S});var s=n(6540),r=n(4164),o=n(3104),i=n(6347),a=n(205),l=n(7485),c=n(1682),d=n(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return u(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const r=(0,i.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,s.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(r.location.search);t.set(o,e),r.replace({...r.location,search:t.toString()})}),[o,r])]}function m(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,o=p(e),[i,l]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:o}))),[c,u]=f({queryString:n,groupId:r}),[m,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,o]=(0,d.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:r}),j=(()=>{const e=c??m;return h({value:e,tabValues:o})?e:null})();(0,a.A)((()=>{j&&l(j)}),[j]);return{selectedValue:i,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),g(e)}),[u,g,o]),tabValues:o}}var g=n(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=n(4848);function b(e){let{className:t,block:n,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.a_)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),r=a[n].value;r!==s&&(c(t),i(r))},u=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:a.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...o,className:(0,r.A)("tabs__item",j.tabItem,o?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:o}=e;const i=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=i.find((e=>e.props.value===o));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=m(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function S(e){const t=(0,g.A)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>a});var s=n(6540);const r={},o=s.createContext(r);function i(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[217],{182:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the transform of Jest config object","source":"@site/versioned_docs/version-14.3/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/14.3/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/getting-started/options.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/14.3/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/14.3/getting-started/test-environment"}}');var r=n(4848),o=n(8453),i=n(1470),a=n(9365);const l={id:"options",title:"Options"},c=void 0,d={},u=[{value:"Processing with esbuild",id:"processing-with-esbuild",level:3},{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function p(e){const t={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,r.jsx)(t.code,{children:"transform"})," of Jest config object\nin the ",(0,r.jsx)(t.code,{children:"package.json"})," file of your project, or through a ",(0,r.jsx)(t.code,{children:"jest.config.js"}),", or ",(0,r.jsx)(t.code,{children:"jest.config.ts"})," file."]}),"\n",(0,r.jsxs)(t.p,{children:["More information about ",(0,r.jsx)(t.code,{children:"ts-jest"})," options, see ",(0,r.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v9.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,r.jsx)(t.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,r.jsx)(t.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]})}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),"\n",(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,r.jsx)(t.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,r.jsx)(t.code,{children:".mjs"})," files\nwill be processed by ",(0,r.jsx)(t.code,{children:"esbuild"})," in ",(0,r.jsx)(t.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,r.jsx)(t.code,{children:"esbuild"}),", one can do the following:"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n processWithEsbuild: []\n }\n ]\n }\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n processWithEsbuild: []\n }\n ]\n }\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n snapshotSerializers: [\n 'jest-preset-angular/build/serializers/html-comment',\n 'jest-preset-angular/build/serializers/ng-snapshot',\n 'jest-preset-angular/build/serializers/no-ng-attributes',\n ],\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Jest runs with ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,r.jsx)(t.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,r.jsx)(t.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["We're using ",(0,r.jsx)(t.code,{children:'"transform"'})," to pass information about configuration to use for code compilation with ",(0,r.jsx)(t.code,{children:"ts-jest"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,r.jsx)(t.code,{children:"ts"}),"), HTML (",(0,r.jsx)(t.code,{children:"html"}),"), JavaScript (",(0,r.jsx)(t.code,{children:"js"}),"), JSON (",(0,r.jsx)(t.code,{children:"json"}),") and ESM JavaScript (",(0,r.jsx)(t.code,{children:"mjs"}),") files."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses ",(0,r.jsx)(t.code,{children:"RegExp"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. See more in ",(0,r.jsx)(t.a,{href:"/jest-preset-angular/docs/14.3/guides/snapshot-testing",children:"Snapshot testing"})]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,r.jsx)(t.code,{children:".mjs"})," files which come from ",(0,r.jsx)(t.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"transform"'})," \u2013 run every ",(0,r.jsx)(t.code,{children:"TS"}),", ",(0,r.jsx)(t.code,{children:"JS"}),", ",(0,r.jsx)(t.code,{children:"MJS"}),", ",(0,r.jsx)(t.code,{children:"HTML"}),", or ",(0,r.jsx)(t.code,{children:"SVG"})," file through so called ",(0,r.jsx)(t.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>i});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var o=n(4848);function i(e){let{children:t,hidden:n,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,i),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>S});var s=n(6540),r=n(4164),o=n(3104),i=n(6347),a=n(205),l=n(7485),c=n(1682),d=n(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return u(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const r=(0,i.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,s.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(r.location.search);t.set(o,e),r.replace({...r.location,search:t.toString()})}),[o,r])]}function m(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,o=p(e),[i,l]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:o}))),[c,u]=f({queryString:n,groupId:r}),[m,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,o]=(0,d.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:r}),j=(()=>{const e=c??m;return h({value:e,tabValues:o})?e:null})();(0,a.A)((()=>{j&&l(j)}),[j]);return{selectedValue:i,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),g(e)}),[u,g,o]),tabValues:o}}var g=n(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=n(4848);function b(e){let{className:t,block:n,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.a_)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),r=a[n].value;r!==s&&(c(t),i(r))},u=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:a.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...o,className:(0,r.A)("tabs__item",j.tabItem,o?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:o}=e;const i=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=i.find((e=>e.props.value===o));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=m(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function S(e){const t=(0,g.A)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>a});var s=n(6540);const r={},o=s.createContext(r);function i(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/915eea02.9f7c49cb.js b/assets/js/915eea02.823d43c8.js similarity index 95% rename from assets/js/915eea02.9f7c49cb.js rename to assets/js/915eea02.823d43c8.js index f870af3c3d..026c132a23 100644 --- a/assets/js/915eea02.9f7c49cb.js +++ b/assets/js/915eea02.823d43c8.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1263],{3367:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-14.4/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/14.4/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/introduction.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/14.4/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(t.p,{children:["This is a part of the article: ",(0,o.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Starting from ",(0,o.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,o.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,o.jsx)(t.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1263],{3367:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-14.4/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/14.4/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/introduction.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/14.4/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(t.p,{children:["This is a part of the article: ",(0,o.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Starting from ",(0,o.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,o.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,o.jsx)(t.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/9251a350.966ccfc9.js b/assets/js/9251a350.3a971d6a.js similarity index 98% rename from assets/js/9251a350.966ccfc9.js rename to assets/js/9251a350.3a971d6a.js index 612f4ef040..f6b40d38ee 100644 --- a/assets/js/9251a350.966ccfc9.js +++ b/assets/js/9251a350.3a971d6a.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5075],{798:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/versioned_docs/version-11.0/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/11.0/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/guides/esm-support.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/11.0/guides/angular-13+"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/11.0/guides/jsdom-version"}}');var o=t(4848),r=t(8453);const i={id:"esm-support",title:"ESM Support"},a=void 0,l={},c=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(s.p,{children:["To use ",(0,o.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,o.jsx)(s.code,{children:"ts-jest"})," config option ",(0,o.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,o.jsxs)(s.p,{children:["There is also a ",(0,o.jsx)(s.a,{href:"/jest-preset-angular/docs/11.0/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,o.jsx)(s.admonition,{type:"tip",children:(0,o.jsxs)(s.p,{children:["We have ",(0,o.jsx)(s.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example apps"})," which contains base ESM setup to work with Jest and Angular."]})}),"\n",(0,o.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,o.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n extensionsToTreatAsEsm: ['.ts'],\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.html$',\n useESM: true,\n },\n },\n};\n"})}),"\n",(0,o.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,o.jsxs)(s.admonition,{type:"tip",children:[(0,o.jsxs)(s.p,{children:["Jest will attempt to load ",(0,o.jsx)(s.strong,{children:"ESM"})," files from ",(0,o.jsx)(s.code,{children:"node_modules"})," with default ",(0,o.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,o.jsx)(s.strong,{children:"ESM"})," built files or ",(0,o.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,o.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,o.jsxs)(s.p,{children:["To fix that, one can use ",(0,o.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,o.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n"})})]})}function u(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>i,x:()=>a});var n=t(6540);const o={},r=n.createContext(o);function i(e){const s=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5075],{798:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/versioned_docs/version-11.0/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/11.0/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/guides/esm-support.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/11.0/guides/angular-13+"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/11.0/guides/jsdom-version"}}');var o=t(4848),r=t(8453);const i={id:"esm-support",title:"ESM Support"},a=void 0,l={},c=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(s.p,{children:["To use ",(0,o.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,o.jsx)(s.code,{children:"ts-jest"})," config option ",(0,o.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,o.jsxs)(s.p,{children:["There is also a ",(0,o.jsx)(s.a,{href:"/jest-preset-angular/docs/11.0/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,o.jsx)(s.admonition,{type:"tip",children:(0,o.jsxs)(s.p,{children:["We have ",(0,o.jsx)(s.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example apps"})," which contains base ESM setup to work with Jest and Angular."]})}),"\n",(0,o.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,o.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n extensionsToTreatAsEsm: ['.ts'],\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.html$',\n useESM: true,\n },\n },\n};\n"})}),"\n",(0,o.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,o.jsxs)(s.admonition,{type:"tip",children:[(0,o.jsxs)(s.p,{children:["Jest will attempt to load ",(0,o.jsx)(s.strong,{children:"ESM"})," files from ",(0,o.jsx)(s.code,{children:"node_modules"})," with default ",(0,o.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,o.jsx)(s.strong,{children:"ESM"})," built files or ",(0,o.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,o.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,o.jsxs)(s.p,{children:["To fix that, one can use ",(0,o.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,o.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n"})})]})}function u(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>i,x:()=>a});var n=t(6540);const o={},r=n.createContext(o);function i(e){const s=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/93f0793d.d51f0bf9.js b/assets/js/93f0793d.311f3a79.js similarity index 98% rename from assets/js/93f0793d.d51f0bf9.js rename to assets/js/93f0793d.311f3a79.js index 0c56c1f7bb..3712b027c7 100644 --- a/assets/js/93f0793d.d51f0bf9.js +++ b/assets/js/93f0793d.311f3a79.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1352],{9928:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>a,contentTitle:()=>l,default:()=>u,frontMatter:()=>r,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-9.x/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/9.x/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/guides/using-with-babel.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/9.x/guides/jsdom-version"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/9.x/guides/absolute-imports"}}');var i=n(4848),o=n(8453);const r={id:"using-with-babel",title:"Using with Babel"},l=void 0,a={},c=[];function d(e){const s={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(s.p,{children:["If you wish to use ",(0,i.jsx)(s.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Install dependencies required by the official Jest documentation for ",(0,i.jsx)(s.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Install ",(0,i.jsx)(s.code,{children:"@babel/preset-env"})," and add ",(0,i.jsx)(s.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsxs)(s.em,{children:["Note: do not use a ",(0,i.jsx)(s.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,i.jsx)(s.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,i.jsx)(s.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,i.jsxs)(s.ol,{start:"3",children:["\n",(0,i.jsx)(s.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"module.exports = {\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})]})}function u(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>r,x:()=>l});var t=n(6540);const i={},o=t.createContext(i);function r(e){const s=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1352],{9928:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>a,contentTitle:()=>l,default:()=>u,frontMatter:()=>r,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-9.x/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/9.x/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/guides/using-with-babel.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/9.x/guides/jsdom-version"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/9.x/guides/absolute-imports"}}');var i=n(4848),o=n(8453);const r={id:"using-with-babel",title:"Using with Babel"},l=void 0,a={},c=[];function d(e){const s={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(s.p,{children:["If you wish to use ",(0,i.jsx)(s.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Install dependencies required by the official Jest documentation for ",(0,i.jsx)(s.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Install ",(0,i.jsx)(s.code,{children:"@babel/preset-env"})," and add ",(0,i.jsx)(s.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsxs)(s.em,{children:["Note: do not use a ",(0,i.jsx)(s.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,i.jsx)(s.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,i.jsx)(s.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,i.jsxs)(s.ol,{start:"3",children:["\n",(0,i.jsx)(s.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"module.exports = {\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})]})}function u(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>r,x:()=>l});var t=n(6540);const i={},o=t.createContext(i);function r(e){const s=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/94ea83e2.9700fe1e.js b/assets/js/94ea83e2.a8582c97.js similarity index 99% rename from assets/js/94ea83e2.9700fe1e.js rename to assets/js/94ea83e2.a8582c97.js index 1f7ae89b8e..afc45a69e8 100644 --- a/assets/js/94ea83e2.9700fe1e.js +++ b/assets/js/94ea83e2.a8582c97.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4156],{9080:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>d,contentTitle:()=>c,default:()=>g,frontMatter:()=>p,metadata:()=>n,toc:()=>h});const n=JSON.parse('{"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.5/guides/snapshot-testing.md","sourceDirName":"guides","slug":"/guides/snapshot-testing","permalink":"/jest-preset-angular/docs/guides/snapshot-testing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/guides/snapshot-testing.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"snapshot-testing","title":"Snapshot testing"},"sidebar":"docs","previous":{"title":"JSDOM version","permalink":"/jest-preset-angular/docs/guides/jsdom-version"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/guides/using-with-babel"}}');var i=t(4848),r=t(8453),l=t(1470),a=t(9365),o=t(4252);const p={id:"snapshot-testing",title:"Snapshot testing"},c=void 0,d={},h=[{value:"Snapshot serializers",id:"snapshot-serializers",level:2},{value:"Remove html comments (html-comment)",id:"remove-html-comments-html-comment",level:3},{value:"Examples:",id:"examples",level:4},{value:"Display component HTML (ng-snapshot)",id:"display-component-html-ng-snapshot",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Examples:",id:"examples-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:"Examples:",id:"examples-2",level:4}];function m(e){const s={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,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.code,{children:"jest-preset-angular"})," provides several snapshot serializers to generate clearer and more human-readable snapshot."]}),"\n",(0,i.jsx)(s.admonition,{type:"info",children:(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:"BY DEFAULT"}),", the ",(0,i.jsx)(s.a,{href:"/jest-preset-angular/docs/getting-started/presets",children:"preset"})," provides all of the snapshot serializers below."]})}),"\n",(0,i.jsx)(s.h2,{id:"snapshot-serializers",children:"Snapshot serializers"}),"\n","\n",(0,i.jsx)(o.A,{toc:h.slice(1)}),"\n",(0,i.jsx)(s.hr,{}),"\n",(0,i.jsxs)(s.h3,{id:"remove-html-comments-html-comment",children:["Remove html comments (",(0,i.jsx)(s.code,{children:"html-comment"}),")"]}),"\n",(0,i.jsx)(s.p,{children:"Allow removing all the comments in the component HTML in snapshot."}),"\n",(0,i.jsx)(s.h4,{id:"examples",children:"Examples:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"In Jest config file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/html-comment'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/html-comment'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.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,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'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,i.jsxs)(s.h3,{id:"display-component-html-ng-snapshot",children:["Display component HTML (",(0,i.jsx)(s.code,{children:"ng-snapshot"}),")"]}),"\n",(0,i.jsx)(s.p,{children:"Allow displaying component HTML with data in snapshot."}),"\n",(0,i.jsx)(s.h4,{id:"parameters",children:"Parameters"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:["options(",(0,i.jsx)(s.strong,{children:"optional"}),"):","\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"omitAllCompAttrs: remove all component DOM attributes"}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",children:"type NgSnapshotOptions = {\n omitAllCompAttrs?: boolean;\n};\n"})}),"\n",(0,i.jsx)(s.h4,{id:"examples-1",children:"Examples:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"In Jest config"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/ng-snapshot'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/ng-snapshot'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.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,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'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,i.jsx)(s.h4,{id:"with-options",children:"With options"}),"\n",(0,i.jsxs)(s.admonition,{title:"Effective priority",type:"info",children:[(0,i.jsx)(s.p,{children:"The configured serializers will have affect in this order:"}),(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.code,{children:"Jest config"})," -> ",(0,i.jsx)(s.code,{children:"setup files"})," -> ",(0,i.jsx)(s.code,{children:"test files"})]}),(0,i.jsx)(s.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,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"In setup files:"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'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,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"or in individual test files:"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'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,i.jsxs)(s.h3,{id:"remove-angular-attributes-no-ng-attributes",children:["Remove Angular attributes (",(0,i.jsx)(s.code,{children:"no-ng-attributes"}),")"]}),"\n",(0,i.jsxs)(s.p,{children:["Allow removing attributes generated by Angular fixture, like ",(0,i.jsx)(s.code,{children:"ng-reflect-*"}),", ",(0,i.jsx)(s.code,{children:'ng-version="*"'}),", ",(0,i.jsx)(s.code,{children:"_ngcontent-c*"})," etc., from component snapshot"]}),"\n",(0,i.jsx)(s.h4,{id:"examples-2",children:"Examples:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"In Jest config"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/no-ng-attributes'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/no-ng-attributes'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.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,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'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 g(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(m,{...e})}):m(e)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4156],{9080:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>d,contentTitle:()=>c,default:()=>g,frontMatter:()=>p,metadata:()=>n,toc:()=>h});const n=JSON.parse('{"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.5/guides/snapshot-testing.md","sourceDirName":"guides","slug":"/guides/snapshot-testing","permalink":"/jest-preset-angular/docs/guides/snapshot-testing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/guides/snapshot-testing.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"snapshot-testing","title":"Snapshot testing"},"sidebar":"docs","previous":{"title":"JSDOM version","permalink":"/jest-preset-angular/docs/guides/jsdom-version"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/guides/using-with-babel"}}');var i=t(4848),r=t(8453),l=t(1470),a=t(9365),o=t(4252);const p={id:"snapshot-testing",title:"Snapshot testing"},c=void 0,d={},h=[{value:"Snapshot serializers",id:"snapshot-serializers",level:2},{value:"Remove html comments (html-comment)",id:"remove-html-comments-html-comment",level:3},{value:"Examples:",id:"examples",level:4},{value:"Display component HTML (ng-snapshot)",id:"display-component-html-ng-snapshot",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Examples:",id:"examples-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:"Examples:",id:"examples-2",level:4}];function m(e){const s={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,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.code,{children:"jest-preset-angular"})," provides several snapshot serializers to generate clearer and more human-readable snapshot."]}),"\n",(0,i.jsx)(s.admonition,{type:"info",children:(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:"BY DEFAULT"}),", the ",(0,i.jsx)(s.a,{href:"/jest-preset-angular/docs/getting-started/presets",children:"preset"})," provides all of the snapshot serializers below."]})}),"\n",(0,i.jsx)(s.h2,{id:"snapshot-serializers",children:"Snapshot serializers"}),"\n","\n",(0,i.jsx)(o.A,{toc:h.slice(1)}),"\n",(0,i.jsx)(s.hr,{}),"\n",(0,i.jsxs)(s.h3,{id:"remove-html-comments-html-comment",children:["Remove html comments (",(0,i.jsx)(s.code,{children:"html-comment"}),")"]}),"\n",(0,i.jsx)(s.p,{children:"Allow removing all the comments in the component HTML in snapshot."}),"\n",(0,i.jsx)(s.h4,{id:"examples",children:"Examples:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"In Jest config file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/html-comment'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/html-comment'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.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,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'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,i.jsxs)(s.h3,{id:"display-component-html-ng-snapshot",children:["Display component HTML (",(0,i.jsx)(s.code,{children:"ng-snapshot"}),")"]}),"\n",(0,i.jsx)(s.p,{children:"Allow displaying component HTML with data in snapshot."}),"\n",(0,i.jsx)(s.h4,{id:"parameters",children:"Parameters"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:["options(",(0,i.jsx)(s.strong,{children:"optional"}),"):","\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"omitAllCompAttrs: remove all component DOM attributes"}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",children:"type NgSnapshotOptions = {\n omitAllCompAttrs?: boolean;\n};\n"})}),"\n",(0,i.jsx)(s.h4,{id:"examples-1",children:"Examples:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"In Jest config"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/ng-snapshot'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/ng-snapshot'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.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,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'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,i.jsx)(s.h4,{id:"with-options",children:"With options"}),"\n",(0,i.jsxs)(s.admonition,{title:"Effective priority",type:"info",children:[(0,i.jsx)(s.p,{children:"The configured serializers will have affect in this order:"}),(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.code,{children:"Jest config"})," -> ",(0,i.jsx)(s.code,{children:"setup files"})," -> ",(0,i.jsx)(s.code,{children:"test files"})]}),(0,i.jsx)(s.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,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"In setup files:"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'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,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"or in individual test files:"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'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,i.jsxs)(s.h3,{id:"remove-angular-attributes-no-ng-attributes",children:["Remove Angular attributes (",(0,i.jsx)(s.code,{children:"no-ng-attributes"}),")"]}),"\n",(0,i.jsxs)(s.p,{children:["Allow removing attributes generated by Angular fixture, like ",(0,i.jsx)(s.code,{children:"ng-reflect-*"}),", ",(0,i.jsx)(s.code,{children:'ng-version="*"'}),", ",(0,i.jsx)(s.code,{children:"_ngcontent-c*"})," etc., from component snapshot"]}),"\n",(0,i.jsx)(s.h4,{id:"examples-2",children:"Examples:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"In Jest config"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/no-ng-attributes'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/no-ng-attributes'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.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,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-ts",metastring:'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 g(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(m,{...e})}):m(e)}}}]); \ No newline at end of file diff --git a/assets/js/95451dd5.ce4b4929.js b/assets/js/95451dd5.5ab504ac.js similarity index 96% rename from assets/js/95451dd5.ce4b4929.js rename to assets/js/95451dd5.5ab504ac.js index 7f4350ab3a..794ead8eac 100644 --- a/assets/js/95451dd5.ce4b4929.js +++ b/assets/js/95451dd5.5ab504ac.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6201],{9584:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-14.4/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/14.4/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/processing.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/14.4/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/14.4/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6201],{9584:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-14.4/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/14.4/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/processing.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/14.4/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/14.4/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/9798ce17.8ae9f8cf.js b/assets/js/9798ce17.7a567676.js similarity index 99% rename from assets/js/9798ce17.8ae9f8cf.js rename to assets/js/9798ce17.7a567676.js index 16fdf356af..d94737d397 100644 --- a/assets/js/9798ce17.8ae9f8cf.js +++ b/assets/js/9798ce17.7a567676.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6224],{9854:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"The presets","source":"@site/versioned_docs/version-14.0/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/14.0/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/getting-started/presets.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/14.0/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/14.0/getting-started/options"}}');var r=n(4848),a=n(8453),o=n(1470),l=n(9365);const i={id:"presets",title:"Presets"},c=void 0,u={},d=[{value:"The presets",id:"the-presets",level:3},{value:"Basic usage",id:"basic-usage",level:3},{value:"Advanced",id:"advanced",level:3}];function p(e){const t={admonition:"admonition",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Preset name"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,r.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,r.jsx)(t.code,{children:"preset"})," key to the desired preset name in your Jest config should be enough to start\nusing TypeScript with Jest (assuming you added ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,r.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,r.jsxs)(t.p,{children:["All presets come with default ",(0,r.jsx)(t.code,{children:"ts-jest"})," config options.\nIf you want to override any of the options, you'll need to use the JavaScript version of Jest config,\ncopy the original options and override the options you need:"]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["If you choose to override ",(0,r.jsx)(t.code,{children:"transform"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,r.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,r.jsx)(t.code,{children:"transform"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst { defaultTransformerOptions } = require('jest-preset-angular/presets');\n// const { defaultTransformerOptions } = require('jest-preset-angular/presets')\n\nmodule.exports = {\n // [...]\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n ...defaultTransformerOptions,\n // [...your overriden options]\n },\n ],\n },\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nconst jestConfig: Config = {\n // [...]\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n ...presets.defaultTransformerOptions,\n // [...your overriden options]\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>o});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function o(e){let{children:t,hidden:n,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,o),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),o=n(6347),l=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const r=(0,o.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[o,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=f({queryString:n,groupId:r}),[g,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),j=(()=>{const e=c??g;return h({value:e,tabValues:a})?e:null})();(0,l.A)((()=>{j&&i(j)}),[j]);return{selectedValue:o,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=l[n].value;r!==s&&(c(t),o(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:l.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>l});var s=n(6540);const r={},a=s.createContext(r);function o(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6224],{9854:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"The presets","source":"@site/versioned_docs/version-14.0/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/14.0/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/getting-started/presets.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/14.0/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/14.0/getting-started/options"}}');var r=n(4848),a=n(8453),o=n(1470),l=n(9365);const i={id:"presets",title:"Presets"},c=void 0,u={},d=[{value:"The presets",id:"the-presets",level:3},{value:"Basic usage",id:"basic-usage",level:3},{value:"Advanced",id:"advanced",level:3}];function p(e){const t={admonition:"admonition",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Preset name"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,r.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,r.jsx)(t.code,{children:"preset"})," key to the desired preset name in your Jest config should be enough to start\nusing TypeScript with Jest (assuming you added ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,r.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,r.jsxs)(t.p,{children:["All presets come with default ",(0,r.jsx)(t.code,{children:"ts-jest"})," config options.\nIf you want to override any of the options, you'll need to use the JavaScript version of Jest config,\ncopy the original options and override the options you need:"]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["If you choose to override ",(0,r.jsx)(t.code,{children:"transform"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,r.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,r.jsx)(t.code,{children:"transform"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(l.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst { defaultTransformerOptions } = require('jest-preset-angular/presets');\n// const { defaultTransformerOptions } = require('jest-preset-angular/presets')\n\nmodule.exports = {\n // [...]\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n ...defaultTransformerOptions,\n // [...your overriden options]\n },\n ],\n },\n};\n"})})}),(0,r.jsx)(l.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nconst jestConfig: Config = {\n // [...]\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n ...presets.defaultTransformerOptions,\n // [...your overriden options]\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>o});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function o(e){let{children:t,hidden:n,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,o),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),o=n(6347),l=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const r=(0,o.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[o,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=f({queryString:n,groupId:r}),[g,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),j=(()=>{const e=c??g;return h({value:e,tabValues:a})?e:null})();(0,l.A)((()=>{j&&i(j)}),[j]);return{selectedValue:o,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=l[n].value;r!==s&&(c(t),o(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:l.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>l});var s=n(6540);const r={},a=s.createContext(r);function o(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/9903dc99.3d7a259d.js b/assets/js/9903dc99.58a2778d.js similarity index 97% rename from assets/js/9903dc99.3d7a259d.js rename to assets/js/9903dc99.58a2778d.js index a32996d18e..0beeddc8ee 100644 --- a/assets/js/9903dc99.3d7a259d.js +++ b/assets/js/9903dc99.58a2778d.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5487],{96:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>d,frontMatter:()=>i,metadata:()=>s,toc:()=>c});const s=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"Currently, jest-preset-angular is partially compatible with Angular Ivy. To make sure that Jest uses the Angular Ivy,","source":"@site/versioned_docs/version-8.x/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/8.x/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/guides/angular-ivy.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/8.x/getting-started/test-environment"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/8.x/guides/esm-support"}}');var r=n(4848),a=n(8453);const i={id:"angular-ivy",title:"Angular Ivy"},o=void 0,l={},c=[];function u(e){const t={code:"code",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["Currently, ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," is partially compatible with Angular Ivy. To make sure that Jest uses the Angular Ivy,\nyou must run ",(0,r.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,r.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," also provides util script to help you to run ",(0,r.jsx)(t.code,{children:"ngcc"})," with Jest but this script only works via the\nJavaScript version of Jest config"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nrequire('jest-preset-angular/ngcc-jest-processor');\n\nmodule.exports = {\n // [...]\n};\n"})})]})}function d(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function i(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5487],{96:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>d,frontMatter:()=>i,metadata:()=>s,toc:()=>c});const s=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"Currently, jest-preset-angular is partially compatible with Angular Ivy. To make sure that Jest uses the Angular Ivy,","source":"@site/versioned_docs/version-8.x/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/8.x/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/guides/angular-ivy.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/8.x/getting-started/test-environment"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/8.x/guides/esm-support"}}');var r=n(4848),a=n(8453);const i={id:"angular-ivy",title:"Angular Ivy"},o=void 0,l={},c=[];function u(e){const t={code:"code",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["Currently, ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," is partially compatible with Angular Ivy. To make sure that Jest uses the Angular Ivy,\nyou must run ",(0,r.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,r.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," also provides util script to help you to run ",(0,r.jsx)(t.code,{children:"ngcc"})," with Jest but this script only works via the\nJavaScript version of Jest config"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nrequire('jest-preset-angular/ngcc-jest-processor');\n\nmodule.exports = {\n // [...]\n};\n"})})]})}function d(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function i(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/9a2fa73a.d599e618.js b/assets/js/9a2fa73a.911fa47c.js similarity index 99% rename from assets/js/9a2fa73a.d599e618.js rename to assets/js/9a2fa73a.911fa47c.js index 1ec78f749e..88f1a17323 100644 --- a/assets/js/9a2fa73a.d599e618.js +++ b/assets/js/9a2fa73a.911fa47c.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8937],{4241:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-13.0/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/13.0/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/guides/using-with-babel.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/13.0/guides/jsdom-version"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/13.0/guides/absolute-imports"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"using-with-babel",title:"Using with Babel"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you wish to use ",(0,r.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,r.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install ",(0,r.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,r.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsxs)(t.em,{children:["Note: do not use a ",(0,r.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,r.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,r.jsxs)(t.ol,{start:"3",children:["\n",(0,r.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function b(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[u,d]=b({queryString:n,groupId:r}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),g=(()=>{const e=u??f;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{g&&i(g)}),[g]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(4848);function v(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(u(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.A)("tabs-container",g.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8937],{4241:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-13.0/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/13.0/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/guides/using-with-babel.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/13.0/guides/jsdom-version"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/13.0/guides/absolute-imports"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"using-with-babel",title:"Using with Babel"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you wish to use ",(0,r.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,r.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install ",(0,r.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,r.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsxs)(t.em,{children:["Note: do not use a ",(0,r.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,r.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,r.jsxs)(t.ol,{start:"3",children:["\n",(0,r.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function b(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[u,d]=b({queryString:n,groupId:r}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),g=(()=>{const e=u??f;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{g&&i(g)}),[g]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(4848);function v(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(u(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.A)("tabs-container",g.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/9bc9e25c.d411a951.js b/assets/js/9bc9e25c.076b4443.js similarity index 95% rename from assets/js/9bc9e25c.d411a951.js rename to assets/js/9bc9e25c.076b4443.js index 83d56c4d2b..5efc960c85 100644 --- a/assets/js/9bc9e25c.d411a951.js +++ b/assets/js/9bc9e25c.076b4443.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[223],{8946:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-13.0/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/13.0/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/introduction.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/13.0/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(t.p,{children:["This is a part of the article: ",(0,o.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Starting from ",(0,o.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,o.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,o.jsx)(t.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[223],{8946:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-13.0/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/13.0/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/introduction.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/13.0/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(t.p,{children:["This is a part of the article: ",(0,o.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Starting from ",(0,o.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,o.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,o.jsx)(t.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/9d48492b.f39e7c5c.js b/assets/js/9d48492b.8e29926d.js similarity index 98% rename from assets/js/9d48492b.f39e7c5c.js rename to assets/js/9d48492b.8e29926d.js index f36a0096f2..c85a446521 100644 --- a/assets/js/9d48492b.f39e7c5c.js +++ b/assets/js/9d48492b.8e29926d.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3737],{5452:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"If you look at setup-jest.js,","source":"@site/versioned_docs/version-14.0/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/14.0/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/getting-started/test-environment.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/14.0/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/14.0/guides/angular-ivy"}}');var r=n(4848),i=n(8453);const o={id:"test-environment",title:"Test environment"},a=void 0,l={},d=[{value:"Configure test environment",id:"configure-test-environment",level:3}];function c(e){const t={a:"a",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you look at ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.js",children:(0,r.jsx)(t.code,{children:"setup-jest.js"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,r.jsx)(t.a,{href:"https://github.com/angular/angular/tree/main/packages/zone.js",children:"Angular zone patch"}),"\nwe also make sure Jest test methods run in Zone context. Then we initialize the Angular testing environment like normal."]}),"\n",(0,r.jsxs)(t.p,{children:["While ",(0,r.jsx)(t.code,{children:"setup-jest.js"})," above is for running Jest with ",(0,r.jsx)(t.strong,{children:"CommonJS"})," mode, we also provide ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.mjs",children:(0,r.jsx)(t.code,{children:"setup-jest.mjs"})}),"\nto run with ",(0,r.jsx)(t.strong,{children:"ESM"})," mode."]}),"\n",(0,r.jsx)(t.h3,{id:"configure-test-environment",children:"Configure test environment"}),"\n",(0,r.jsxs)(t.p,{children:["When creating Angular test environment with ",(0,r.jsx)(t.code,{children:"TestBed"}),", it is possible to specify the ",(0,r.jsx)(t.code,{children:"testEnvironmentOptions"})," via ",(0,r.jsx)(t.code,{children:"globalThis"})," in the Jest setup file.\nFor example:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// setup-test.ts\nglobalThis.ngJest = {\n testEnvironmentOptions: {\n teardown: {\n destroyAfterEach: false,\n rethrowErrors: true,\n },\n errorOnUnknownElements: true,\n errorOnUnknownProperties: true,\n },\n};\n\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," will look at ",(0,r.jsx)(t.code,{children:"globalThis.ngJest"})," and pass the correct ",(0,r.jsx)(t.a,{href:"https://angular.dev/api/core/testing/TestEnvironmentOptions",children:(0,r.jsx)(t.code,{children:"TestEnvironmentOptions"})})," object to ",(0,r.jsx)(t.code,{children:"TestBed"}),"."]})]})}function u(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>a});var s=n(6540);const r={},i=s.createContext(r);function o(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3737],{5452:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"If you look at setup-jest.js,","source":"@site/versioned_docs/version-14.0/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/14.0/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/getting-started/test-environment.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/14.0/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/14.0/guides/angular-ivy"}}');var r=n(4848),i=n(8453);const o={id:"test-environment",title:"Test environment"},a=void 0,l={},d=[{value:"Configure test environment",id:"configure-test-environment",level:3}];function c(e){const t={a:"a",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you look at ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.js",children:(0,r.jsx)(t.code,{children:"setup-jest.js"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,r.jsx)(t.a,{href:"https://github.com/angular/angular/tree/main/packages/zone.js",children:"Angular zone patch"}),"\nwe also make sure Jest test methods run in Zone context. Then we initialize the Angular testing environment like normal."]}),"\n",(0,r.jsxs)(t.p,{children:["While ",(0,r.jsx)(t.code,{children:"setup-jest.js"})," above is for running Jest with ",(0,r.jsx)(t.strong,{children:"CommonJS"})," mode, we also provide ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.mjs",children:(0,r.jsx)(t.code,{children:"setup-jest.mjs"})}),"\nto run with ",(0,r.jsx)(t.strong,{children:"ESM"})," mode."]}),"\n",(0,r.jsx)(t.h3,{id:"configure-test-environment",children:"Configure test environment"}),"\n",(0,r.jsxs)(t.p,{children:["When creating Angular test environment with ",(0,r.jsx)(t.code,{children:"TestBed"}),", it is possible to specify the ",(0,r.jsx)(t.code,{children:"testEnvironmentOptions"})," via ",(0,r.jsx)(t.code,{children:"globalThis"})," in the Jest setup file.\nFor example:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// setup-test.ts\nglobalThis.ngJest = {\n testEnvironmentOptions: {\n teardown: {\n destroyAfterEach: false,\n rethrowErrors: true,\n },\n errorOnUnknownElements: true,\n errorOnUnknownProperties: true,\n },\n};\n\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," will look at ",(0,r.jsx)(t.code,{children:"globalThis.ngJest"})," and pass the correct ",(0,r.jsx)(t.a,{href:"https://angular.dev/api/core/testing/TestEnvironmentOptions",children:(0,r.jsx)(t.code,{children:"TestEnvironmentOptions"})})," object to ",(0,r.jsx)(t.code,{children:"TestBed"}),"."]})]})}function u(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>a});var s=n(6540);const r={},i=s.createContext(r);function o(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/9fc1d339.5f80a22b.js b/assets/js/9fc1d339.9244bd5f.js similarity index 99% rename from assets/js/9fc1d339.5f80a22b.js rename to assets/js/9fc1d339.9244bd5f.js index fd0ce1b9f8..03060798aa 100644 --- a/assets/js/9fc1d339.5f80a22b.js +++ b/assets/js/9fc1d339.9244bd5f.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8201],{1223:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-11.1/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/11.1/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/guides/troubleshooting.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/11.1/guides/absolute-imports"}}');var t=s(4848),o=s(8453);const i={id:"troubleshooting",title:"Troubleshooting"},a=void 0,l={},d=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["You can check Jest ",(0,t.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,t.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,t.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,t.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,t.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,t.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,t.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,t.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,t.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,t.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,t.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,t.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,t.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,t.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,t.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,t.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Add this to your ",(0,t.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,t.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,t.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,t.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,t.jsx)(n.code,{children:"JS"})," file with ",(0,t.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,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,t.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,t.jsx)(n.code,{children:"@angular"}),", ",(0,t.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,t.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,t.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,t.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,t.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,t.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,t.jsx)(n.p,{children:"or"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,t.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,t.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,t.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,t.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Install ",(0,t.jsx)(n.code,{children:"babel-jest"}),", ",(0,t.jsx)(n.code,{children:"@babel/core"})," and ",(0,t.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,t.jsxs)(n.li,{children:["Create a ",(0,t.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,t.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Define the usage of ",(0,t.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,t.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,t.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,t.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,t.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,t.jsx)(n.code,{children:"firebase"})," and ",(0,t.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,t.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,t.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,t.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,t.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,t.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,t.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,t.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,t.jsxs)(n.p,{children:["In these cases, a ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,t.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,t.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,t.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.resolver.js\nmodule.exports = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\n...\nresolver: '/src/jest.resolver.js',\n...\n"})})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>a});var r=s(6540);const t={},o=r.createContext(t);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8201],{1223:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-11.1/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/11.1/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/guides/troubleshooting.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/11.1/guides/absolute-imports"}}');var t=s(4848),o=s(8453);const i={id:"troubleshooting",title:"Troubleshooting"},a=void 0,l={},d=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["You can check Jest ",(0,t.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,t.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,t.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,t.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,t.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,t.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,t.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,t.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,t.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,t.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,t.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,t.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,t.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,t.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,t.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,t.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Add this to your ",(0,t.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,t.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,t.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,t.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,t.jsx)(n.code,{children:"JS"})," file with ",(0,t.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,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,t.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,t.jsx)(n.code,{children:"@angular"}),", ",(0,t.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,t.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,t.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,t.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,t.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,t.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,t.jsx)(n.p,{children:"or"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,t.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,t.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,t.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,t.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Install ",(0,t.jsx)(n.code,{children:"babel-jest"}),", ",(0,t.jsx)(n.code,{children:"@babel/core"})," and ",(0,t.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,t.jsxs)(n.li,{children:["Create a ",(0,t.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,t.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Define the usage of ",(0,t.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,t.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,t.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,t.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,t.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,t.jsx)(n.code,{children:"firebase"})," and ",(0,t.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,t.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,t.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,t.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,t.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,t.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,t.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,t.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,t.jsxs)(n.p,{children:["In these cases, a ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,t.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,t.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,t.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.resolver.js\nmodule.exports = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\n...\nresolver: '/src/jest.resolver.js',\n...\n"})})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>a});var r=s(6540);const t={},o=r.createContext(t);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/a05464cd.7576618f.js b/assets/js/a05464cd.49804390.js similarity index 99% rename from assets/js/a05464cd.7576618f.js rename to assets/js/a05464cd.49804390.js index 659b6b3d64..15822956ca 100644 --- a/assets/js/a05464cd.7576618f.js +++ b/assets/js/a05464cd.49804390.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1832],{4121:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>g,frontMatter:()=>p,metadata:()=>s,toc:()=>h});const s=JSON.parse('{"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.4/guides/snapshot-testing.md","sourceDirName":"guides","slug":"/guides/snapshot-testing","permalink":"/jest-preset-angular/docs/14.4/guides/snapshot-testing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/guides/snapshot-testing.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"snapshot-testing","title":"Snapshot testing"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/14.4/guides/jsdom-version"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/14.4/guides/using-with-babel"}}');var i=t(4848),r=t(8453),l=t(1470),a=t(9365),o=t(4252);const p={id:"snapshot-testing",title:"Snapshot testing"},c=void 0,d={},h=[{value:"Snapshot serializers",id:"snapshot-serializers",level:2},{value:"Remove html comments (html-comment)",id:"remove-html-comments-html-comment",level:3},{value:"Examples:",id:"examples",level:4},{value:"Display component HTML (ng-snapshot)",id:"display-component-html-ng-snapshot",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Examples:",id:"examples-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:"Examples:",id:"examples-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,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"jest-preset-angular"})," provides several snapshot serializers to generate clearer and more human-readable snapshot."]}),"\n",(0,i.jsx)(n.admonition,{type:"info",children:(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"BY DEFAULT"}),", the ",(0,i.jsx)(n.a,{href:"/jest-preset-angular/docs/14.4/getting-started/presets",children:"preset"})," provides all of the snapshot serializers below."]})}),"\n",(0,i.jsx)(n.h2,{id:"snapshot-serializers",children:"Snapshot serializers"}),"\n","\n",(0,i.jsx)(o.A,{toc:h.slice(1)}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsxs)(n.h3,{id:"remove-html-comments-html-comment",children:["Remove html comments (",(0,i.jsx)(n.code,{children:"html-comment"}),")"]}),"\n",(0,i.jsx)(n.p,{children:"Allow removing all the comments in the component HTML in snapshot."}),"\n",(0,i.jsx)(n.h4,{id:"examples",children:"Examples:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"In Jest config file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',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"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})})]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'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,i.jsxs)(n.h3,{id:"display-component-html-ng-snapshot",children:["Display component HTML (",(0,i.jsx)(n.code,{children:"ng-snapshot"}),")"]}),"\n",(0,i.jsx)(n.p,{children:"Allow displaying component HTML with data in snapshot."}),"\n",(0,i.jsx)(n.h4,{id:"parameters",children:"Parameters"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["options(",(0,i.jsx)(n.strong,{children:"optional"}),"):","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"omitAllCompAttrs: remove all component DOM attributes"}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"type NgSnapshotOptions = {\n omitAllCompAttrs?: boolean;\n};\n"})}),"\n",(0,i.jsx)(n.h4,{id:"examples-1",children:"Examples:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"In Jest config"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',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"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})})]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'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,i.jsx)(n.h4,{id:"with-options",children:"With options"}),"\n",(0,i.jsxs)(n.admonition,{title:"Effective priority",type:"info",children:[(0,i.jsx)(n.p,{children:"The configured serializers will have affect in this order:"}),(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"Jest config"})," -> ",(0,i.jsx)(n.code,{children:"setup files"})," -> ",(0,i.jsx)(n.code,{children:"test files"})]}),(0,i.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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"In setup files:"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n\nexport default jestConfig;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.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({\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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"or in individual test files:"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'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,i.jsxs)(n.h3,{id:"remove-angular-attributes-no-ng-attributes",children:["Remove Angular attributes (",(0,i.jsx)(n.code,{children:"no-ng-attributes"}),")"]}),"\n",(0,i.jsxs)(n.p,{children:["Allow removing attributes generated by Angular fixture, like ",(0,i.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,i.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,i.jsx)(n.code,{children:"_ngcontent-c*"})," etc., from component snapshot"]}),"\n",(0,i.jsx)(n.h4,{id:"examples-2",children:"Examples:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"In Jest config"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',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"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})})]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'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 g(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(m,{...e})}):m(e)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1832],{4121:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>g,frontMatter:()=>p,metadata:()=>s,toc:()=>h});const s=JSON.parse('{"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.4/guides/snapshot-testing.md","sourceDirName":"guides","slug":"/guides/snapshot-testing","permalink":"/jest-preset-angular/docs/14.4/guides/snapshot-testing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/guides/snapshot-testing.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"snapshot-testing","title":"Snapshot testing"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/14.4/guides/jsdom-version"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/14.4/guides/using-with-babel"}}');var i=t(4848),r=t(8453),l=t(1470),a=t(9365),o=t(4252);const p={id:"snapshot-testing",title:"Snapshot testing"},c=void 0,d={},h=[{value:"Snapshot serializers",id:"snapshot-serializers",level:2},{value:"Remove html comments (html-comment)",id:"remove-html-comments-html-comment",level:3},{value:"Examples:",id:"examples",level:4},{value:"Display component HTML (ng-snapshot)",id:"display-component-html-ng-snapshot",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Examples:",id:"examples-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:"Examples:",id:"examples-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,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"jest-preset-angular"})," provides several snapshot serializers to generate clearer and more human-readable snapshot."]}),"\n",(0,i.jsx)(n.admonition,{type:"info",children:(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"BY DEFAULT"}),", the ",(0,i.jsx)(n.a,{href:"/jest-preset-angular/docs/14.4/getting-started/presets",children:"preset"})," provides all of the snapshot serializers below."]})}),"\n",(0,i.jsx)(n.h2,{id:"snapshot-serializers",children:"Snapshot serializers"}),"\n","\n",(0,i.jsx)(o.A,{toc:h.slice(1)}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsxs)(n.h3,{id:"remove-html-comments-html-comment",children:["Remove html comments (",(0,i.jsx)(n.code,{children:"html-comment"}),")"]}),"\n",(0,i.jsx)(n.p,{children:"Allow removing all the comments in the component HTML in snapshot."}),"\n",(0,i.jsx)(n.h4,{id:"examples",children:"Examples:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"In Jest config file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',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"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})})]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'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,i.jsxs)(n.h3,{id:"display-component-html-ng-snapshot",children:["Display component HTML (",(0,i.jsx)(n.code,{children:"ng-snapshot"}),")"]}),"\n",(0,i.jsx)(n.p,{children:"Allow displaying component HTML with data in snapshot."}),"\n",(0,i.jsx)(n.h4,{id:"parameters",children:"Parameters"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["options(",(0,i.jsx)(n.strong,{children:"optional"}),"):","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"omitAllCompAttrs: remove all component DOM attributes"}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"type NgSnapshotOptions = {\n omitAllCompAttrs?: boolean;\n};\n"})}),"\n",(0,i.jsx)(n.h4,{id:"examples-1",children:"Examples:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"In Jest config"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',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"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})})]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'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,i.jsx)(n.h4,{id:"with-options",children:"With options"}),"\n",(0,i.jsxs)(n.admonition,{title:"Effective priority",type:"info",children:[(0,i.jsx)(n.p,{children:"The configured serializers will have affect in this order:"}),(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"Jest config"})," -> ",(0,i.jsx)(n.code,{children:"setup files"})," -> ",(0,i.jsx)(n.code,{children:"test files"})]}),(0,i.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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"In setup files:"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n\nexport default jestConfig;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.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({\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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"or in individual test files:"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'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,i.jsxs)(n.h3,{id:"remove-angular-attributes-no-ng-attributes",children:["Remove Angular attributes (",(0,i.jsx)(n.code,{children:"no-ng-attributes"}),")"]}),"\n",(0,i.jsxs)(n.p,{children:["Allow removing attributes generated by Angular fixture, like ",(0,i.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,i.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,i.jsx)(n.code,{children:"_ngcontent-c*"})," etc., from component snapshot"]}),"\n",(0,i.jsx)(n.h4,{id:"examples-2",children:"Examples:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"In Jest config"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',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"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in setup test environment file"}),"\n"]}),"\n",(0,i.jsxs)(l.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})})})]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.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,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Or in individual test files"}),"\n"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'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 g(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(m,{...e})}):m(e)}}}]); \ No newline at end of file diff --git a/assets/js/a09c2993.c838f93b.js b/assets/js/a09c2993.91b5da04.js similarity index 97% rename from assets/js/a09c2993.c838f93b.js rename to assets/js/a09c2993.91b5da04.js index be2a075d3c..b531bf26b1 100644 --- a/assets/js/a09c2993.c838f93b.js +++ b/assets/js/a09c2993.91b5da04.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5899],{1920:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/docs/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/next/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/introduction.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/next/processing"}}');var r=n(4848),o=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(t){const e={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,o.R)(),...t.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,r.jsxs)(e.p,{children:["This is a part of the article: ",(0,r.jsx)(e.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,r.jsx)(e.admonition,{type:"important",children:(0,r.jsxs)(e.p,{children:["Starting from ",(0,r.jsx)(e.strong,{children:"v9.0.0"}),", we follow closely native ",(0,r.jsx)(e.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,r.jsx)(e.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(t={}){const{wrapper:e}={...(0,o.R)(),...t.components};return e?(0,r.jsx)(e,{...t,children:(0,r.jsx)(l,{...t})}):l(t)}},8453:(t,e,n)=>{n.d(e,{R:()=>i,x:()=>c});var s=n(6540);const r={},o=s.createContext(r);function i(t){const e=s.useContext(o);return s.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function c(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(r):t.components||r:i(t.components),s.createElement(o.Provider,{value:e},t.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5899],{1920:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/docs/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/next/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/introduction.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/next/processing"}}');var r=n(4848),o=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(t){const e={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,o.R)(),...t.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,r.jsxs)(e.p,{children:["This is a part of the article: ",(0,r.jsx)(e.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,r.jsx)(e.admonition,{type:"important",children:(0,r.jsxs)(e.p,{children:["Starting from ",(0,r.jsx)(e.strong,{children:"v9.0.0"}),", we follow closely native ",(0,r.jsx)(e.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,r.jsx)(e.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(t={}){const{wrapper:e}={...(0,o.R)(),...t.components};return e?(0,r.jsx)(e,{...t,children:(0,r.jsx)(l,{...t})}):l(t)}},8453:(t,e,n)=>{n.d(e,{R:()=>i,x:()=>c});var s=n(6540);const r={},o=s.createContext(r);function i(t){const e=s.useContext(o);return s.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function c(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(r):t.components||r:i(t.components),s.createElement(o.Provider,{value:e},t.children)}}}]); \ No newline at end of file diff --git a/assets/js/a389e28e.32f9ba8d.js b/assets/js/a389e28e.5a1f5d85.js similarity index 99% rename from assets/js/a389e28e.32f9ba8d.js rename to assets/js/a389e28e.5a1f5d85.js index 1295c74342..ff6a53d25c 100644 --- a/assets/js/a389e28e.32f9ba8d.js +++ b/assets/js/a389e28e.5a1f5d85.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7554],{8827:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>h,frontMatter:()=>l,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/versioned_docs/version-12.0/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/12.0/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/guides/esm-support.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/12.0/guides/angular-13+"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/12.0/guides/jsdom-version"}}');var r=s(4848),a=s(8453),o=s(1470),i=s(9365);const l={id:"esm-support",title:"ESM Support"},u=void 0,c={},d=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["To use ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,r.jsx)(t.code,{children:"ts-jest"})," config option ",(0,r.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["There is also a ",(0,r.jsx)(t.a,{href:"/jest-preset-angular/docs/12.0/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,r.jsx)(t.admonition,{type:"tip",children:(0,r.jsxs)(t.p,{children:["We have ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example apps"})," which contains base ESM setup to work with Jest and Angular."]})}),"\n",(0,r.jsxs)(t.p,{children:["Besides, there is ",(0,r.jsx)(t.code,{children:"setup-jest.mjs"})," to add to Jest setup file to ensure that Jest can set up test environment properly."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,r.jsx)(t.h3,{id:"examples",children:"Examples"}),"\n",(0,r.jsx)(t.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.html$',\n useESM: true,\n },\n },\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.html$',\n useESM: true,\n },\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["Jest will attempt to load ",(0,r.jsx)(t.strong,{children:"ESM"})," files from ",(0,r.jsx)(t.code,{children:"node_modules"})," with default ",(0,r.jsx)(t.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,r.jsx)(t.strong,{children:"ESM"})," built files or ",(0,r.jsx)(t.strong,{children:"ESM"})," files which are outside ",(0,r.jsx)(t.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,r.jsxs)(t.p,{children:["To fix that, one can use ",(0,r.jsx)(t.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,r.jsx)(t.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig = {\n //...\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,s)=>{s.d(t,{A:()=>o});s(6540);var n=s(4164);const r={tabItem:"tabItem_Ymn6"};var a=s(4848);function o(e){let{children:t,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.A)(r.tabItem,o),hidden:s,children:t})}},1470:(e,t,s)=>{s.d(t,{A:()=>S});var n=s(6540),r=s(4164),a=s(3104),o=s(6347),i=s(205),l=s(7485),u=s(1682),c=s(679);function d(e){return n.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,n.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:s}=e;return(0,n.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:s,attributes:n,default:r}}=e;return{value:t,label:s,attributes:n,default:r}}))}(s);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,s])}function h(e){let{value:t,tabValues:s}=e;return s.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:s}=e;const r=(0,o.W6)(),a=function(e){let{queryString:t=!1,groupId:s}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!s)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:t,groupId:s});return[(0,l.aZ)(a),(0,n.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:s=!1,groupId:r}=e,a=p(e),[o,l]=(0,n.useState)((()=>function(e){let{defaultValue:t,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const n=s.find((e=>e.default))??s[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:a}))),[u,d]=m({queryString:s,groupId:r}),[f,g]=function(e){let{groupId:t}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(s);return[r,(0,n.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),j=(()=>{const e=u??f;return h({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{j&&l(j)}),[j]);return{selectedValue:o,selectValue:(0,n.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=s(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(4848);function b(e){let{className:t,block:s,selectedValue:n,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,s=l.indexOf(t),r=i[s].value;r!==n&&(u(t),o(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const s=l.indexOf(e.currentTarget)+1;t=l[s]??l[0];break}case"ArrowLeft":{const s=l.indexOf(e.currentTarget)-1;t=l[s]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},t),children:i.map((e=>{let{value:t,label:s,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:n===t?0:-1,"aria-selected":n===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:a}=e;const o=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===a));return e?(0,n.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function S(e){const t=(0,g.A)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,s)=>{s.d(t,{R:()=>o,x:()=>i});var n=s(6540);const r={},a=n.createContext(r);function o(e){const t=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),n.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7554],{8827:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>h,frontMatter:()=>l,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/versioned_docs/version-12.0/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/12.0/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/guides/esm-support.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/12.0/guides/angular-13+"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/12.0/guides/jsdom-version"}}');var r=s(4848),a=s(8453),o=s(1470),i=s(9365);const l={id:"esm-support",title:"ESM Support"},u=void 0,c={},d=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["To use ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,r.jsx)(t.code,{children:"ts-jest"})," config option ",(0,r.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["There is also a ",(0,r.jsx)(t.a,{href:"/jest-preset-angular/docs/12.0/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,r.jsx)(t.admonition,{type:"tip",children:(0,r.jsxs)(t.p,{children:["We have ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example apps"})," which contains base ESM setup to work with Jest and Angular."]})}),"\n",(0,r.jsxs)(t.p,{children:["Besides, there is ",(0,r.jsx)(t.code,{children:"setup-jest.mjs"})," to add to Jest setup file to ensure that Jest can set up test environment properly."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,r.jsx)(t.h3,{id:"examples",children:"Examples"}),"\n",(0,r.jsx)(t.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.html$',\n useESM: true,\n },\n },\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.html$',\n useESM: true,\n },\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["Jest will attempt to load ",(0,r.jsx)(t.strong,{children:"ESM"})," files from ",(0,r.jsx)(t.code,{children:"node_modules"})," with default ",(0,r.jsx)(t.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,r.jsx)(t.strong,{children:"ESM"})," built files or ",(0,r.jsx)(t.strong,{children:"ESM"})," files which are outside ",(0,r.jsx)(t.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,r.jsxs)(t.p,{children:["To fix that, one can use ",(0,r.jsx)(t.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,r.jsx)(t.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig = {\n //...\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,s)=>{s.d(t,{A:()=>o});s(6540);var n=s(4164);const r={tabItem:"tabItem_Ymn6"};var a=s(4848);function o(e){let{children:t,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.A)(r.tabItem,o),hidden:s,children:t})}},1470:(e,t,s)=>{s.d(t,{A:()=>S});var n=s(6540),r=s(4164),a=s(3104),o=s(6347),i=s(205),l=s(7485),u=s(1682),c=s(679);function d(e){return n.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,n.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:s}=e;return(0,n.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:s,attributes:n,default:r}}=e;return{value:t,label:s,attributes:n,default:r}}))}(s);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,s])}function h(e){let{value:t,tabValues:s}=e;return s.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:s}=e;const r=(0,o.W6)(),a=function(e){let{queryString:t=!1,groupId:s}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!s)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:t,groupId:s});return[(0,l.aZ)(a),(0,n.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:s=!1,groupId:r}=e,a=p(e),[o,l]=(0,n.useState)((()=>function(e){let{defaultValue:t,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const n=s.find((e=>e.default))??s[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:a}))),[u,d]=m({queryString:s,groupId:r}),[f,g]=function(e){let{groupId:t}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(s);return[r,(0,n.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),j=(()=>{const e=u??f;return h({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{j&&l(j)}),[j]);return{selectedValue:o,selectValue:(0,n.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=s(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(4848);function b(e){let{className:t,block:s,selectedValue:n,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,s=l.indexOf(t),r=i[s].value;r!==n&&(u(t),o(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const s=l.indexOf(e.currentTarget)+1;t=l[s]??l[0];break}case"ArrowLeft":{const s=l.indexOf(e.currentTarget)-1;t=l[s]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},t),children:i.map((e=>{let{value:t,label:s,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:n===t?0:-1,"aria-selected":n===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:a}=e;const o=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===a));return e?(0,n.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function S(e){const t=(0,g.A)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,s)=>{s.d(t,{R:()=>o,x:()=>i});var n=s(6540);const r={},a=n.createContext(r);function o(e){const t=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),n.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/a74b641e.c593ad33.js b/assets/js/a74b641e.14e35650.js similarity index 97% rename from assets/js/a74b641e.c593ad33.js rename to assets/js/a74b641e.14e35650.js index bc3f4300bd..72dbaabbc1 100644 --- a/assets/js/a74b641e.c593ad33.js +++ b/assets/js/a74b641e.14e35650.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1841],{6092:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/versioned_docs/version-9.x/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/9.x/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/guides/absolute-imports.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/9.x/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/9.x/guides/troubleshooting"}}');var i=s(4848),n=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,i.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,i.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,i.jsxs)(t.p,{children:["More information see ",(0,i.jsx)(t.code,{children:"ts-jest"})," ",(0,i.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const i={},n=o.createContext(i);function r(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1841],{6092:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/versioned_docs/version-9.x/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/9.x/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/guides/absolute-imports.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/9.x/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/9.x/guides/troubleshooting"}}');var i=s(4848),n=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,i.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,i.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,i.jsxs)(t.p,{children:["More information see ",(0,i.jsx)(t.code,{children:"ts-jest"})," ",(0,i.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const i={},n=o.createContext(i);function r(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/a7be2bd2.f13f9f69.js b/assets/js/a7be2bd2.4e57642e.js similarity index 97% rename from assets/js/a7be2bd2.f13f9f69.js rename to assets/js/a7be2bd2.4e57642e.js index 6375aa78bc..6ba3588897 100644 --- a/assets/js/a7be2bd2.f13f9f69.js +++ b/assets/js/a7be2bd2.4e57642e.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[686],{1717:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/versioned_docs/version-14.5/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/guides/absolute-imports.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/guides/troubleshooting"}}');var i=s(4848),n=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,i.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,i.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,i.jsxs)(t.p,{children:["More information see ",(0,i.jsx)(t.code,{children:"ts-jest"})," ",(0,i.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const i={},n=o.createContext(i);function r(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[686],{1717:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/versioned_docs/version-14.5/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/guides/absolute-imports.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/guides/troubleshooting"}}');var i=s(4848),n=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,i.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,i.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,i.jsxs)(t.p,{children:["More information see ",(0,i.jsx)(t.code,{children:"ts-jest"})," ",(0,i.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const i={},n=o.createContext(i);function r(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/a7d04da7.3fe48226.js b/assets/js/a7d04da7.d6a0d622.js similarity index 99% rename from assets/js/a7d04da7.3fe48226.js rename to assets/js/a7d04da7.d6a0d622.js index c5fffd0f34..edac2670e4 100644 --- a/assets/js/a7d04da7.3fe48226.js +++ b/assets/js/a7d04da7.d6a0d622.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2363],{7080:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>p,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-14.4/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/14.4/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/guides/troubleshooting.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/14.4/guides/absolute-imports"}}');var r=t(4848),a=t(8453),o=t(1470),i=t(9365);const l={id:"troubleshooting",title:"Troubleshooting"},c=void 0,d={},u=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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 h(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...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,{className:"language-json",metastring:'title="tsconfig.spec.json"',children:'{\n "compilerOptions": {\n "emitDecoratorMetadata": true\n }\n}\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to ",(0,r.jsx)(n.code,{children:"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 ",(0,r.jsx)(n.code,{children:"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",metastring:'title="setup-jest.ts"',children:"import 'core-js/es/reflect';\nimport '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",metastring:'title="some.component.spec.ts"',children:"beforeEach(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.jsx)(n.p,{children:"Add this to your global mock file"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest-global-mocks.ts"',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,{className:"language-shell",children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,r.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,r.jsx)(n.code,{children:"@angular"}),", ",(0,r.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,r.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,r.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,r.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,r.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,r.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,r.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,r.jsx)(n.p,{children:"or"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,r.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,r.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,r.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,r.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Install ",(0,r.jsx)(n.code,{children:"babel-jest"}),", ",(0,r.jsx)(n.code,{children:"@babel/core"})," and ",(0,r.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,r.jsxs)(n.li,{children:["Create a ",(0,r.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,r.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-json",metastring:'title=".babelrc"',children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Define the usage of ",(0,r.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,r.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n //...\n babelConfig: true,\n //...\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n //...\n babelConfig: true,\n //...\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,r.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,r.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,r.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,r.jsx)(n.code,{children:"firebase"})," and ",(0,r.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,r.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-shell",children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,r.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,r.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,r.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,r.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,r.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,r.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,r.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-shell",children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,r.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,r.jsxs)(n.p,{children:["In these cases, a ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,r.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,r.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,r.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.resolver.ts"',children:"import type { SyncResolver } from 'jest-resolve';\n\nconst myResolver: SyncResolver = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n\nexport = myResolver;\n"})}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n resolver: '/src/jest.resolver.ts',\n //...\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n resolver: '/src/jest.resolver.js',\n //...\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"inject-dependencies-with-typescript-interface-or-exported-namespace",children:"Inject dependencies with TypeScript interface or exported namespace"}),"\n",(0,r.jsxs)(n.p,{children:["Please use Angular ",(0,r.jsx)(n.a,{href:"https://angular.dev/api/core/inject",children:"inject"})," instead of ",(0,r.jsx)(n.a,{href:"https://angular.dev/api/core/Inject",children:"@Inject"}),".\nThis is because ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," has caveat when working with class constructor and decorator."]})]})}function p(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>o});t(6540);var s=t(4164);const r={tabItem:"tabItem_Ymn6"};var a=t(4848);function o(e){let{children:n,hidden:t,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,o),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>w});var s=t(6540),r=t(4164),a=t(3104),o=t(6347),i=t(205),l=t(7485),c=t(1682),d=t(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:n,children:t}=e;return(0,s.useMemo)((()=>{const e=n??function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}}))}(t);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function p(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function m(e){let{queryString:n=!1,groupId:t}=e;const r=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(r.location.search);n.set(a,e),r.replace({...r.location,search:n.toString()})}),[a,r])]}function g(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,a=h(e),[o,l]=(0,s.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!p({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const s=t.find((e=>e.default))??t[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:a}))),[c,u]=m({queryString:t,groupId:r}),[g,f]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,a]=(0,d.Dv)(t);return[r,(0,s.useCallback)((e=>{t&&a.set(e)}),[t,a])]}({groupId:r}),j=(()=>{const e=c??g;return p({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{j&&l(j)}),[j]);return{selectedValue:o,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),f(e)}),[u,f,a]),tabValues:a}}var f=t(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=t(4848);function x(e){let{className:n,block:t,selectedValue:s,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),d=e=>{const n=e.currentTarget,t=l.indexOf(n),r=i[t].value;r!==s&&(c(n),o(r))},u=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":t},n),children:i.map((e=>{let{value:n,label:t,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===n?0:-1,"aria-selected":s===n,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:a}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function y(e){const n=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...n,...e}),(0,b.jsx)(v,{...n,...e})]})}function w(e){const n=(0,f.A)();return(0,b.jsx)(y,{...e,children:u(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>i});var s=t(6540);const r={},a=s.createContext(r);function o(e){const n=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2363],{7080:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>p,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-14.4/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/14.4/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/guides/troubleshooting.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/14.4/guides/absolute-imports"}}');var r=t(4848),a=t(8453),o=t(1470),i=t(9365);const l={id:"troubleshooting",title:"Troubleshooting"},c=void 0,d={},u=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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 h(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...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,{className:"language-json",metastring:'title="tsconfig.spec.json"',children:'{\n "compilerOptions": {\n "emitDecoratorMetadata": true\n }\n}\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to ",(0,r.jsx)(n.code,{children:"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 ",(0,r.jsx)(n.code,{children:"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",metastring:'title="setup-jest.ts"',children:"import 'core-js/es/reflect';\nimport '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",metastring:'title="some.component.spec.ts"',children:"beforeEach(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.jsx)(n.p,{children:"Add this to your global mock file"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest-global-mocks.ts"',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,{className:"language-shell",children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,r.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,r.jsx)(n.code,{children:"@angular"}),", ",(0,r.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,r.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,r.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,r.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,r.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,r.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,r.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,r.jsx)(n.p,{children:"or"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,r.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,r.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,r.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,r.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Install ",(0,r.jsx)(n.code,{children:"babel-jest"}),", ",(0,r.jsx)(n.code,{children:"@babel/core"})," and ",(0,r.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,r.jsxs)(n.li,{children:["Create a ",(0,r.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,r.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-json",metastring:'title=".babelrc"',children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Define the usage of ",(0,r.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,r.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n //...\n babelConfig: true,\n //...\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n //...\n babelConfig: true,\n //...\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,r.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,r.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,r.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,r.jsx)(n.code,{children:"firebase"})," and ",(0,r.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,r.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-shell",children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,r.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,r.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,r.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,r.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,r.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,r.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,r.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-shell",children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,r.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,r.jsxs)(n.p,{children:["In these cases, a ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,r.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,r.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,r.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.resolver.ts"',children:"import type { SyncResolver } from 'jest-resolve';\n\nconst myResolver: SyncResolver = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n\nexport = myResolver;\n"})}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n resolver: '/src/jest.resolver.ts',\n //...\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n resolver: '/src/jest.resolver.js',\n //...\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"inject-dependencies-with-typescript-interface-or-exported-namespace",children:"Inject dependencies with TypeScript interface or exported namespace"}),"\n",(0,r.jsxs)(n.p,{children:["Please use Angular ",(0,r.jsx)(n.a,{href:"https://angular.dev/api/core/inject",children:"inject"})," instead of ",(0,r.jsx)(n.a,{href:"https://angular.dev/api/core/Inject",children:"@Inject"}),".\nThis is because ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," has caveat when working with class constructor and decorator."]})]})}function p(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>o});t(6540);var s=t(4164);const r={tabItem:"tabItem_Ymn6"};var a=t(4848);function o(e){let{children:n,hidden:t,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,o),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>w});var s=t(6540),r=t(4164),a=t(3104),o=t(6347),i=t(205),l=t(7485),c=t(1682),d=t(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:n,children:t}=e;return(0,s.useMemo)((()=>{const e=n??function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}}))}(t);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function p(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function m(e){let{queryString:n=!1,groupId:t}=e;const r=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(r.location.search);n.set(a,e),r.replace({...r.location,search:n.toString()})}),[a,r])]}function g(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,a=h(e),[o,l]=(0,s.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!p({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const s=t.find((e=>e.default))??t[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:a}))),[c,u]=m({queryString:t,groupId:r}),[g,f]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,a]=(0,d.Dv)(t);return[r,(0,s.useCallback)((e=>{t&&a.set(e)}),[t,a])]}({groupId:r}),j=(()=>{const e=c??g;return p({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{j&&l(j)}),[j]);return{selectedValue:o,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),f(e)}),[u,f,a]),tabValues:a}}var f=t(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=t(4848);function x(e){let{className:n,block:t,selectedValue:s,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),d=e=>{const n=e.currentTarget,t=l.indexOf(n),r=i[t].value;r!==s&&(c(n),o(r))},u=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":t},n),children:i.map((e=>{let{value:n,label:t,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===n?0:-1,"aria-selected":s===n,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:a}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function y(e){const n=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...n,...e}),(0,b.jsx)(v,{...n,...e})]})}function w(e){const n=(0,f.A)();return(0,b.jsx)(y,{...e,children:u(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>i});var s=t(6540);const r={},a=s.createContext(r);function o(e){const n=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/a7d61b99.a0f13c4a.js b/assets/js/a7d61b99.e9322b86.js similarity index 99% rename from assets/js/a7d61b99.a0f13c4a.js rename to assets/js/a7d61b99.e9322b86.js index a90e56bddf..5dbbcdd8a2 100644 --- a/assets/js/a7d61b99.a0f13c4a.js +++ b/assets/js/a7d61b99.e9322b86.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2766],{3011:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"Configure other JSDOM versions","description":"Jest v26+ by default uses JSDOM 16 to support Node 10+.","source":"@site/versioned_docs/version-12.0/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/12.0/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/guides/jsdom-version.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/12.0/guides/esm-support"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/12.0/guides/using-with-babel"}}');var s=n(4848),o=n(8453),a=n(1470),i=n(9365);const l={id:"jsdom-version",title:"Configure other JSDOM versions"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,s.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,s.jsxs)(t.p,{children:["If you need a different JSDOM version than the one that ships with Jest, you can install a jsdom environment\npackage, e.g. ",(0,s.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,s.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,s.jsx)(t.code,{children:"localStorage"})," or ",(0,s.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,s.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Reference: ",(0,s.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200",children:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200"})]})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var o=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,a),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),o=n(3104),a=n(6347),i=n(205),l=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,a.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(s.location.search);t.set(o,e),s.replace({...s.location,search:t.toString()})}),[o,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,o=p(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[u,d]=h({queryString:n,groupId:s}),[f,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,o]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return m({value:e,tabValues:o})?e:null})();(0,i.A)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),b(e)}),[d,b,o]),tabValues:o}}var b=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),c=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==r&&(u(t),a(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...o,className:(0,s.A)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2766],{3011:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"Configure other JSDOM versions","description":"Jest v26+ by default uses JSDOM 16 to support Node 10+.","source":"@site/versioned_docs/version-12.0/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/12.0/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/guides/jsdom-version.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/12.0/guides/esm-support"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/12.0/guides/using-with-babel"}}');var s=n(4848),o=n(8453),a=n(1470),i=n(9365);const l={id:"jsdom-version",title:"Configure other JSDOM versions"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,s.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,s.jsxs)(t.p,{children:["If you need a different JSDOM version than the one that ships with Jest, you can install a jsdom environment\npackage, e.g. ",(0,s.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,s.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,s.jsx)(t.code,{children:"localStorage"})," or ",(0,s.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,s.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Reference: ",(0,s.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200",children:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200"})]})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var o=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,a),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),o=n(3104),a=n(6347),i=n(205),l=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,a.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(s.location.search);t.set(o,e),s.replace({...s.location,search:t.toString()})}),[o,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,o=p(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[u,d]=h({queryString:n,groupId:s}),[f,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,o]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return m({value:e,tabValues:o})?e:null})();(0,i.A)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),b(e)}),[d,b,o]),tabValues:o}}var b=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),c=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==r&&(u(t),a(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...o,className:(0,s.A)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/a89007e0.e5d9fbe2.js b/assets/js/a89007e0.b920bd00.js similarity index 99% rename from assets/js/a89007e0.e5d9fbe2.js rename to assets/js/a89007e0.b920bd00.js index e422ef676f..b0afc0da7d 100644 --- a/assets/js/a89007e0.e5d9fbe2.js +++ b/assets/js/a89007e0.b920bd00.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3767],{5858:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>u,default:()=>g,frontMatter:()=>l,metadata:()=>t,toc:()=>d});const t=JSON.parse('{"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.2/guides/angular-13+.md","sourceDirName":"guides","slug":"/guides/angular-13+","permalink":"/jest-preset-angular/docs/14.2/guides/angular-13+","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/guides/angular-13+.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"angular-13+","title":"Angular >=13"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/14.2/guides/angular-ivy"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/14.2/guides/esm-support"}}');var r=s(4848),a=s(8453),o=s(1470),i=s(9365);const l={id:"angular-13+",title:"Angular >=13"},u=void 0,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,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,r.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,r.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,r.jsx)(n.strong,{children:"Angular 13"})," using ",(0,r.jsx)(n.a,{href:"/jest-preset-angular/docs/14.2/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,r.jsx)(n.admonition,{type:"important",children:(0,r.jsxs)(n.p,{children:["With Jest 28 and ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,r.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,r.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,r.jsxs)(n.p,{children:["Starting from ",(0,r.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,r.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,r.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,r.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transform"})," is updated to include ",(0,r.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,r.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:["Upgrade the project to ",(0,r.jsx)(n.strong,{children:"Angular 13"})," following ",(0,r.jsx)(n.a,{href:"https://angular.dev/update-guide/",children:"guide"})]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,r.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,r.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,r.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,r.jsxs)(n.p,{children:["Your ",(0,r.jsx)(n.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.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: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,r.jsx)(n.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(n.p,{children:"or for ESM mode"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,r.jsx)(n.h2,{id:"potential-issues-with-angular-13-esm-package-format-and-workaround",children:"Potential issues with Angular 13 ESM package format and workaround"}),"\n",(0,r.jsxs)(n.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,r.jsx)(n.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one needs to add ",(0,r.jsx)(n.code,{children:"mjs"})," to ",(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",children:"Usage with Angular libraries which are built with Angular CLI 13"}),"\n",(0,r.jsxs)(n.p,{children:["Besides, the changes in Angular packages themselves, ",(0,r.jsx)(n.strong,{children:"Angular"})," libraries which are built with ",(0,r.jsx)(n.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,r.jsx)(n.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,r.jsx)(n.strong,{children:"CommonJS"})," mode."]}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one should modify ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"usage-with-ionic-6-or-7",children:"Usage with Ionic 6 or 7"}),"\n",(0,r.jsxs)(n.p,{children:["To support Ionic 6 or 7 you will need to modify ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,n,s)=>{s.d(n,{A:()=>o});s(6540);var t=s(4164);const r={tabItem:"tabItem_Ymn6"};var a=s(4848);function o(e){let{children:n,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,t.A)(r.tabItem,o),hidden:s,children:n})}},1470:(e,n,s)=>{s.d(n,{A:()=>A});var t=s(6540),r=s(4164),a=s(3104),o=s(6347),i=s(205),l=s(7485),u=s(1682),c=s(679);function d(e){return t.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,t.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:n,children:s}=e;return(0,t.useMemo)((()=>{const e=n??function(e){return d(e).map((e=>{let{props:{value:n,label:s,attributes:t,default:r}}=e;return{value:n,label:s,attributes:t,default:r}}))}(s);return function(e){const n=(0,u.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,s])}function g(e){let{value:n,tabValues:s}=e;return s.some((e=>e.value===n))}function h(e){let{queryString:n=!1,groupId:s}=e;const r=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:s}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!s)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:n,groupId:s});return[(0,l.aZ)(a),(0,t.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(r.location.search);n.set(a,e),r.replace({...r.location,search:n.toString()})}),[a,r])]}function m(e){const{defaultValue:n,queryString:s=!1,groupId:r}=e,a=p(e),[o,l]=(0,t.useState)((()=>function(e){let{defaultValue:n,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!g({value:n,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const t=s.find((e=>e.default))??s[0];if(!t)throw new Error("Unexpected error: 0 tabValues");return t.value}({defaultValue:n,tabValues:a}))),[u,d]=h({queryString:s,groupId:r}),[m,j]=function(e){let{groupId:n}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,a]=(0,c.Dv)(s);return[r,(0,t.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),f=(()=>{const e=u??m;return g({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{f&&l(f)}),[f]);return{selectedValue:o,selectValue:(0,t.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),j(e)}),[d,j,a]),tabValues:a}}var j=s(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(4848);function b(e){let{className:n,block:s,selectedValue:t,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const n=e.currentTarget,s=l.indexOf(n),r=i[s].value;r!==t&&(u(n),o(r))},d=e=>{let n=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const s=l.indexOf(e.currentTarget)+1;n=l[s]??l[0];break}case"ArrowLeft":{const s=l.indexOf(e.currentTarget)-1;n=l[s]??l[l.length-1];break}}n?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},n),children:i.map((e=>{let{value:n,label:s,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:t===n?0:-1,"aria-selected":t===n,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":t===n}),children:s??n},n)}))})}function v(e){let{lazy:n,children:s,selectedValue:a}=e;const o=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,t.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function w(e){const n=m(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function A(e){const n=(0,j.A)();return(0,x.jsx)(w,{...e,children:d(e.children)},String(n))}},8453:(e,n,s)=>{s.d(n,{R:()=>o,x:()=>i});var t=s(6540);const r={},a=t.createContext(r);function o(e){const n=t.useContext(a);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),t.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3767],{5858:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>u,default:()=>g,frontMatter:()=>l,metadata:()=>t,toc:()=>d});const t=JSON.parse('{"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.2/guides/angular-13+.md","sourceDirName":"guides","slug":"/guides/angular-13+","permalink":"/jest-preset-angular/docs/14.2/guides/angular-13+","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/guides/angular-13+.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"angular-13+","title":"Angular >=13"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/14.2/guides/angular-ivy"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/14.2/guides/esm-support"}}');var r=s(4848),a=s(8453),o=s(1470),i=s(9365);const l={id:"angular-13+",title:"Angular >=13"},u=void 0,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,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,r.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,r.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,r.jsx)(n.strong,{children:"Angular 13"})," using ",(0,r.jsx)(n.a,{href:"/jest-preset-angular/docs/14.2/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,r.jsx)(n.admonition,{type:"important",children:(0,r.jsxs)(n.p,{children:["With Jest 28 and ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,r.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,r.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,r.jsxs)(n.p,{children:["Starting from ",(0,r.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,r.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,r.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,r.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transform"})," is updated to include ",(0,r.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,r.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:["Upgrade the project to ",(0,r.jsx)(n.strong,{children:"Angular 13"})," following ",(0,r.jsx)(n.a,{href:"https://angular.dev/update-guide/",children:"guide"})]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.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,r.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,r.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,r.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,r.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,r.jsxs)(n.p,{children:["Your ",(0,r.jsx)(n.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.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: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,r.jsx)(n.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,r.jsx)(n.p,{children:"or for ESM mode"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,r.jsx)(n.h2,{id:"potential-issues-with-angular-13-esm-package-format-and-workaround",children:"Potential issues with Angular 13 ESM package format and workaround"}),"\n",(0,r.jsxs)(n.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,r.jsx)(n.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one needs to add ",(0,r.jsx)(n.code,{children:"mjs"})," to ",(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",children:"Usage with Angular libraries which are built with Angular CLI 13"}),"\n",(0,r.jsxs)(n.p,{children:["Besides, the changes in Angular packages themselves, ",(0,r.jsx)(n.strong,{children:"Angular"})," libraries which are built with ",(0,r.jsx)(n.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,r.jsx)(n.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,r.jsx)(n.strong,{children:"CommonJS"})," mode."]}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one should modify ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"usage-with-ionic-6-or-7",children:"Usage with Ionic 6 or 7"}),"\n",(0,r.jsxs)(n.p,{children:["To support Ionic 6 or 7 you will need to modify ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,n,s)=>{s.d(n,{A:()=>o});s(6540);var t=s(4164);const r={tabItem:"tabItem_Ymn6"};var a=s(4848);function o(e){let{children:n,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,t.A)(r.tabItem,o),hidden:s,children:n})}},1470:(e,n,s)=>{s.d(n,{A:()=>A});var t=s(6540),r=s(4164),a=s(3104),o=s(6347),i=s(205),l=s(7485),u=s(1682),c=s(679);function d(e){return t.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,t.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:n,children:s}=e;return(0,t.useMemo)((()=>{const e=n??function(e){return d(e).map((e=>{let{props:{value:n,label:s,attributes:t,default:r}}=e;return{value:n,label:s,attributes:t,default:r}}))}(s);return function(e){const n=(0,u.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,s])}function g(e){let{value:n,tabValues:s}=e;return s.some((e=>e.value===n))}function h(e){let{queryString:n=!1,groupId:s}=e;const r=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:s}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!s)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:n,groupId:s});return[(0,l.aZ)(a),(0,t.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(r.location.search);n.set(a,e),r.replace({...r.location,search:n.toString()})}),[a,r])]}function m(e){const{defaultValue:n,queryString:s=!1,groupId:r}=e,a=p(e),[o,l]=(0,t.useState)((()=>function(e){let{defaultValue:n,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!g({value:n,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const t=s.find((e=>e.default))??s[0];if(!t)throw new Error("Unexpected error: 0 tabValues");return t.value}({defaultValue:n,tabValues:a}))),[u,d]=h({queryString:s,groupId:r}),[m,j]=function(e){let{groupId:n}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,a]=(0,c.Dv)(s);return[r,(0,t.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),f=(()=>{const e=u??m;return g({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{f&&l(f)}),[f]);return{selectedValue:o,selectValue:(0,t.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),j(e)}),[d,j,a]),tabValues:a}}var j=s(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(4848);function b(e){let{className:n,block:s,selectedValue:t,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const n=e.currentTarget,s=l.indexOf(n),r=i[s].value;r!==t&&(u(n),o(r))},d=e=>{let n=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const s=l.indexOf(e.currentTarget)+1;n=l[s]??l[0];break}case"ArrowLeft":{const s=l.indexOf(e.currentTarget)-1;n=l[s]??l[l.length-1];break}}n?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},n),children:i.map((e=>{let{value:n,label:s,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:t===n?0:-1,"aria-selected":t===n,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":t===n}),children:s??n},n)}))})}function v(e){let{lazy:n,children:s,selectedValue:a}=e;const o=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,t.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function w(e){const n=m(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function A(e){const n=(0,j.A)();return(0,x.jsx)(w,{...e,children:d(e.children)},String(n))}},8453:(e,n,s)=>{s.d(n,{R:()=>o,x:()=>i});var t=s(6540);const r={},a=t.createContext(r);function o(e){const n=t.useContext(a);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),t.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/a9789633.056c2741.js b/assets/js/a9789633.911f9c4d.js similarity index 99% rename from assets/js/a9789633.056c2741.js rename to assets/js/a9789633.911f9c4d.js index 007b7786f3..1d5c12bd92 100644 --- a/assets/js/a9789633.056c2741.js +++ b/assets/js/a9789633.911f9c4d.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3543],{9131:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-9.x/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/9.x/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/guides/troubleshooting.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/9.x/guides/absolute-imports"}}');var t=s(4848),o=s(8453);const i={id:"troubleshooting",title:"Troubleshooting"},a=void 0,l={},d=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["You can check Jest ",(0,t.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,t.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,t.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,t.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,t.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,t.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,t.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,t.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,t.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,t.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,t.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,t.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,t.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,t.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,t.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,t.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Add this to your ",(0,t.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,t.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,t.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,t.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,t.jsx)(n.code,{children:"JS"})," file with ",(0,t.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,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,t.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,t.jsx)(n.code,{children:"@angular"}),", ",(0,t.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,t.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,t.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,t.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,t.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,t.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,t.jsx)(n.p,{children:"or"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,t.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,t.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,t.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,t.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Install ",(0,t.jsx)(n.code,{children:"babel-jest"}),", ",(0,t.jsx)(n.code,{children:"@babel/core"})," and ",(0,t.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,t.jsxs)(n.li,{children:["Create a ",(0,t.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,t.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Define the usage of ",(0,t.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,t.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,t.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,t.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,t.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,t.jsx)(n.code,{children:"firebase"})," and ",(0,t.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,t.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,t.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,t.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,t.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,t.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,t.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,t.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,t.jsxs)(n.p,{children:["In these cases, a ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,t.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,t.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,t.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.resolver.js\nmodule.exports = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\n...\nresolver: '/src/jest.resolver.js',\n...\n"})})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>a});var r=s(6540);const t={},o=r.createContext(t);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3543],{9131:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-9.x/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/9.x/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/guides/troubleshooting.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/9.x/guides/absolute-imports"}}');var t=s(4848),o=s(8453);const i={id:"troubleshooting",title:"Troubleshooting"},a=void 0,l={},d=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["You can check Jest ",(0,t.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,t.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,t.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,t.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,t.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,t.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,t.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,t.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,t.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,t.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,t.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,t.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,t.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,t.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,t.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,t.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Add this to your ",(0,t.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,t.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,t.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,t.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,t.jsx)(n.code,{children:"JS"})," file with ",(0,t.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,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,t.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,t.jsx)(n.code,{children:"@angular"}),", ",(0,t.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,t.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,t.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,t.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,t.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,t.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,t.jsx)(n.p,{children:"or"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,t.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,t.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,t.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,t.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Install ",(0,t.jsx)(n.code,{children:"babel-jest"}),", ",(0,t.jsx)(n.code,{children:"@babel/core"})," and ",(0,t.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,t.jsxs)(n.li,{children:["Create a ",(0,t.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,t.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Define the usage of ",(0,t.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,t.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,t.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,t.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,t.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,t.jsx)(n.code,{children:"firebase"})," and ",(0,t.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,t.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,t.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,t.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,t.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,t.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,t.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,t.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,t.jsxs)(n.p,{children:["In these cases, a ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,t.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,t.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,t.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.resolver.js\nmodule.exports = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\n...\nresolver: '/src/jest.resolver.js',\n...\n"})})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>a});var r=s(6540);const t={},o=r.createContext(t);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/a97c21bc.271d8449.js b/assets/js/a97c21bc.68ca0691.js similarity index 99% rename from assets/js/a97c21bc.271d8449.js rename to assets/js/a97c21bc.68ca0691.js index 2a8b2655e6..2cf0e68eb5 100644 --- a/assets/js/a97c21bc.271d8449.js +++ b/assets/js/a97c21bc.68ca0691.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2133],{1213:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the transform of Jest config object","source":"@site/versioned_docs/version-14.5/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/getting-started/options.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/getting-started/test-environment"}}');var r=n(4848),o=n(8453),i=n(1470),a=n(9365);const l={id:"options",title:"Options"},c=void 0,d={},u=[{value:"Processing with esbuild",id:"processing-with-esbuild",level:3},{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function p(e){const t={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,r.jsx)(t.code,{children:"transform"})," of Jest config object\nin the ",(0,r.jsx)(t.code,{children:"package.json"})," file of your project, or through a ",(0,r.jsx)(t.code,{children:"jest.config.js"}),", or ",(0,r.jsx)(t.code,{children:"jest.config.ts"})," file."]}),"\n",(0,r.jsxs)(t.p,{children:["More information about ",(0,r.jsx)(t.code,{children:"ts-jest"})," options, see ",(0,r.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v9.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,r.jsx)(t.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,r.jsx)(t.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]})}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n} satisfies Config;\n"})})}),(0,r.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),"\n",(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,r.jsx)(t.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,r.jsx)(t.code,{children:".mjs"})," files\nwill be processed by ",(0,r.jsx)(t.code,{children:"esbuild"})," in ",(0,r.jsx)(t.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,r.jsx)(t.code,{children:"esbuild"}),", one can do the following:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n processWithEsbuild: []\n }\n ]\n }\n} satisfies Config;\n"})}),"\n",(0,r.jsx)(i.A,{groupId:"code-examples",children:(0,r.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n processWithEsbuild: []\n }\n ]\n }\n} satisfies Config;\n"})})})}),"\n",(0,r.jsx)(t.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import type { Config } from 'jest';\n\nexport default {\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n snapshotSerializers: [\n 'jest-preset-angular/build/serializers/html-comment',\n 'jest-preset-angular/build/serializers/ng-snapshot',\n 'jest-preset-angular/build/serializers/no-ng-attributes',\n ],\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n ],\n },\n} satisfies Config;\n"})}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Jest runs with ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,r.jsx)(t.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,r.jsx)(t.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["We're using ",(0,r.jsx)(t.code,{children:'"transform"'})," to pass information about configuration to use for code compilation with ",(0,r.jsx)(t.code,{children:"ts-jest"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,r.jsx)(t.code,{children:"ts"}),"), HTML (",(0,r.jsx)(t.code,{children:"html"}),"), JavaScript (",(0,r.jsx)(t.code,{children:"js"}),"), JSON (",(0,r.jsx)(t.code,{children:"json"}),") and ESM JavaScript (",(0,r.jsx)(t.code,{children:"mjs"}),") files."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses ",(0,r.jsx)(t.code,{children:"RegExp"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. See more in ",(0,r.jsx)(t.a,{href:"/jest-preset-angular/docs/guides/snapshot-testing",children:"Snapshot testing"})]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,r.jsx)(t.code,{children:".mjs"})," files which come from ",(0,r.jsx)(t.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"transform"'})," \u2013 run every ",(0,r.jsx)(t.code,{children:"TS"}),", ",(0,r.jsx)(t.code,{children:"JS"}),", ",(0,r.jsx)(t.code,{children:"MJS"}),", ",(0,r.jsx)(t.code,{children:"HTML"}),", or ",(0,r.jsx)(t.code,{children:"SVG"})," file through so called ",(0,r.jsx)(t.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>i});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var o=n(4848);function i(e){let{children:t,hidden:n,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,i),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),o=n(3104),i=n(6347),a=n(205),l=n(7485),c=n(1682),d=n(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return u(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const r=(0,i.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,s.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(r.location.search);t.set(o,e),r.replace({...r.location,search:t.toString()})}),[o,r])]}function m(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,o=p(e),[i,l]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:o}))),[c,u]=f({queryString:n,groupId:r}),[m,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,o]=(0,d.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:r}),j=(()=>{const e=c??m;return h({value:e,tabValues:o})?e:null})();(0,a.A)((()=>{j&&l(j)}),[j]);return{selectedValue:i,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),g(e)}),[u,g,o]),tabValues:o}}var g=n(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=n(4848);function b(e){let{className:t,block:n,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.a_)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),r=a[n].value;r!==s&&(c(t),i(r))},u=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:a.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...o,className:(0,r.A)("tabs__item",j.tabItem,o?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:o}=e;const i=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=i.find((e=>e.props.value===o));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=m(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>a});var s=n(6540);const r={},o=s.createContext(r);function i(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2133],{1213:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the transform of Jest config object","source":"@site/versioned_docs/version-14.5/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/getting-started/options.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/getting-started/test-environment"}}');var r=n(4848),o=n(8453),i=n(1470),a=n(9365);const l={id:"options",title:"Options"},c=void 0,d={},u=[{value:"Processing with esbuild",id:"processing-with-esbuild",level:3},{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function p(e){const t={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,r.jsx)(t.code,{children:"transform"})," of Jest config object\nin the ",(0,r.jsx)(t.code,{children:"package.json"})," file of your project, or through a ",(0,r.jsx)(t.code,{children:"jest.config.js"}),", or ",(0,r.jsx)(t.code,{children:"jest.config.ts"})," file."]}),"\n",(0,r.jsxs)(t.p,{children:["More information about ",(0,r.jsx)(t.code,{children:"ts-jest"})," options, see ",(0,r.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v9.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,r.jsx)(t.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,r.jsx)(t.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]})}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n} satisfies Config;\n"})})}),(0,r.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),"\n",(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,r.jsx)(t.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,r.jsx)(t.code,{children:".mjs"})," files\nwill be processed by ",(0,r.jsx)(t.code,{children:"esbuild"})," in ",(0,r.jsx)(t.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,r.jsx)(t.code,{children:"esbuild"}),", one can do the following:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n processWithEsbuild: []\n }\n ]\n }\n} satisfies Config;\n"})}),"\n",(0,r.jsx)(i.A,{groupId:"code-examples",children:(0,r.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n processWithEsbuild: []\n }\n ]\n }\n} satisfies Config;\n"})})})}),"\n",(0,r.jsx)(t.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import type { Config } from 'jest';\n\nexport default {\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n snapshotSerializers: [\n 'jest-preset-angular/build/serializers/html-comment',\n 'jest-preset-angular/build/serializers/ng-snapshot',\n 'jest-preset-angular/build/serializers/no-ng-attributes',\n ],\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n ],\n },\n} satisfies Config;\n"})}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Jest runs with ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,r.jsx)(t.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,r.jsx)(t.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["We're using ",(0,r.jsx)(t.code,{children:'"transform"'})," to pass information about configuration to use for code compilation with ",(0,r.jsx)(t.code,{children:"ts-jest"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,r.jsx)(t.code,{children:"ts"}),"), HTML (",(0,r.jsx)(t.code,{children:"html"}),"), JavaScript (",(0,r.jsx)(t.code,{children:"js"}),"), JSON (",(0,r.jsx)(t.code,{children:"json"}),") and ESM JavaScript (",(0,r.jsx)(t.code,{children:"mjs"}),") files."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses ",(0,r.jsx)(t.code,{children:"RegExp"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. See more in ",(0,r.jsx)(t.a,{href:"/jest-preset-angular/docs/guides/snapshot-testing",children:"Snapshot testing"})]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,r.jsx)(t.code,{children:".mjs"})," files which come from ",(0,r.jsx)(t.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"transform"'})," \u2013 run every ",(0,r.jsx)(t.code,{children:"TS"}),", ",(0,r.jsx)(t.code,{children:"JS"}),", ",(0,r.jsx)(t.code,{children:"MJS"}),", ",(0,r.jsx)(t.code,{children:"HTML"}),", or ",(0,r.jsx)(t.code,{children:"SVG"})," file through so called ",(0,r.jsx)(t.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>i});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var o=n(4848);function i(e){let{children:t,hidden:n,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,i),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),o=n(3104),i=n(6347),a=n(205),l=n(7485),c=n(1682),d=n(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return u(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const r=(0,i.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,s.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(r.location.search);t.set(o,e),r.replace({...r.location,search:t.toString()})}),[o,r])]}function m(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,o=p(e),[i,l]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:o}))),[c,u]=f({queryString:n,groupId:r}),[m,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,o]=(0,d.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:r}),j=(()=>{const e=c??m;return h({value:e,tabValues:o})?e:null})();(0,a.A)((()=>{j&&l(j)}),[j]);return{selectedValue:i,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),g(e)}),[u,g,o]),tabValues:o}}var g=n(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=n(4848);function b(e){let{className:t,block:n,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.a_)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),r=a[n].value;r!==s&&(c(t),i(r))},u=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:a.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...o,className:(0,r.A)("tabs__item",j.tabItem,o?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:o}=e;const i=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=i.find((e=>e.props.value===o));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=m(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.A)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>a});var s=n(6540);const r={},o=s.createContext(r);function i(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/aa079c8b.bb00dc0b.js b/assets/js/aa079c8b.9c3ac80f.js similarity index 99% rename from assets/js/aa079c8b.bb00dc0b.js rename to assets/js/aa079c8b.9c3ac80f.js index 37af8ab40d..fe0ad6abdf 100644 --- a/assets/js/aa079c8b.bb00dc0b.js +++ b/assets/js/aa079c8b.9c3ac80f.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2772],{374:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>p,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the transform of Jest config object","source":"@site/versioned_docs/version-13.0/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/13.0/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/getting-started/options.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/13.0/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/13.0/getting-started/test-environment"}}');var r=t(4848),o=t(8453),i=t(1470),a=t(9365);const l={id:"options",title:"Options"},c=void 0,d={},u=[{value:"Processing with esbuild",id:"processing-with-esbuild",level:3},{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function h(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,r.jsx)(n.code,{children:"transform"})," of Jest config object\nin the ",(0,r.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,r.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,r.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,r.jsxs)(n.p,{children:["More information about ",(0,r.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,r.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,r.jsxs)(n.admonition,{type:"important",children:[(0,r.jsxs)(n.p,{children:["Since ",(0,r.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,r.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,r.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]}),(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n\nexport default jestConfig;\n"})})})]}),(0,r.jsx)(n.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),(0,r.jsxs)(n.p,{children:["Since ",(0,r.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,r.jsx)(n.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,r.jsx)(n.code,{children:".mjs"})," files\nwill be processed by ",(0,r.jsx)(n.code,{children:"esbuild"})," in ",(0,r.jsx)(n.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,r.jsx)(n.code,{children:"esbuild"}),", one can do the following:"]}),(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n globals: {\n ngJest: {\n processWithEsbuild: [],\n },\n },\n}\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globals: {\n ngJest: {\n processWithEsbuild: [],\n },\n },\n}\n\nexport default jestConfig;\n"})})})]})]}),"\n",(0,r.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst snapshotSerializers = require('jest-preset-angular/build/serializers');\n\nmodule.exports = {\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n snapshotSerializers,\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n ],\n },\n};\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport snapshotSerializers from 'jest-preset-angular/build/serializers';\n\nconst jestConfig: Config = {\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n snapshotSerializers,\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.admonition,{type:"important",children:(0,r.jsxs)(n.p,{children:["Jest runs with ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,r.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,r.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,r.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["We're using ",(0,r.jsx)(n.code,{children:'"transform"'})," to pass information about configuration to use for code compilation with ",(0,r.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,r.jsx)(n.code,{children:"ts"}),"), HTML (",(0,r.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,r.jsx)(n.code,{children:"js"}),"), JSON (",(0,r.jsx)(n.code,{children:"json"}),") and ESM JavaScript (",(0,r.jsx)(n.code,{children:"mjs"}),") files."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses ",(0,r.jsx)(n.code,{children:"RegExp"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,r.jsx)(n.code,{children:"package.json"})," definitions."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. Note: by default angular adds\nsome angular-specific attributes to the code (like ",(0,r.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,r.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,r.jsx)(n.code,{children:"_ngcontent-c*"})," etc).\nThis package provides serializer to remove such attributes. This makes snapshots cleaner and more human-readable.\nTo remove such specific attributes use ",(0,r.jsx)(n.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,r.jsx)(n.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,r.jsx)(n.code,{children:".mjs"})," files which come from ",(0,r.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,r.jsx)(n.code,{children:"TS"}),", ",(0,r.jsx)(n.code,{children:"JS"}),", ",(0,r.jsx)(n.code,{children:"MJS"}),", ",(0,r.jsx)(n.code,{children:"HTML"}),", or ",(0,r.jsx)(n.code,{children:"SVG"})," file through so called ",(0,r.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>i});t(6540);var s=t(4164);const r={tabItem:"tabItem_Ymn6"};var o=t(4848);function i(e){let{children:n,hidden:t,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,i),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>w});var s=t(6540),r=t(4164),o=t(3104),i=t(6347),a=t(205),l=t(7485),c=t(1682),d=t(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:n,children:t}=e;return(0,s.useMemo)((()=>{const e=n??function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}}))}(t);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function p(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function j(e){let{queryString:n=!1,groupId:t}=e;const r=(0,i.W6)(),o=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(o),(0,s.useCallback)((e=>{if(!o)return;const n=new URLSearchParams(r.location.search);n.set(o,e),r.replace({...r.location,search:n.toString()})}),[o,r])]}function f(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,o=h(e),[i,l]=(0,s.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!p({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const s=t.find((e=>e.default))??t[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:o}))),[c,u]=j({queryString:t,groupId:r}),[f,m]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,o]=(0,d.Dv)(t);return[r,(0,s.useCallback)((e=>{t&&o.set(e)}),[t,o])]}({groupId:r}),g=(()=>{const e=c??f;return p({value:e,tabValues:o})?e:null})();(0,a.A)((()=>{g&&l(g)}),[g]);return{selectedValue:i,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),m(e)}),[u,m,o]),tabValues:o}}var m=t(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=t(4848);function b(e){let{className:n,block:t,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.a_)(),d=e=>{const n=e.currentTarget,t=l.indexOf(n),r=a[t].value;r!==s&&(c(n),i(r))},u=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":t},n),children:a.map((e=>{let{value:n,label:t,attributes:o}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:s===n?0:-1,"aria-selected":s===n,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...o,className:(0,r.A)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:o}=e;const i=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=i.find((e=>e.props.value===o));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map(((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==o})))})}function y(e){const n=f(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",g.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function w(e){const n=(0,m.A)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>a});var s=t(6540);const r={},o=s.createContext(r);function i(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2772],{374:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>p,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the transform of Jest config object","source":"@site/versioned_docs/version-13.0/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/13.0/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/getting-started/options.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/13.0/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/13.0/getting-started/test-environment"}}');var r=t(4848),o=t(8453),i=t(1470),a=t(9365);const l={id:"options",title:"Options"},c=void 0,d={},u=[{value:"Processing with esbuild",id:"processing-with-esbuild",level:3},{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function h(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,r.jsx)(n.code,{children:"transform"})," of Jest config object\nin the ",(0,r.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,r.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,r.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,r.jsxs)(n.p,{children:["More information about ",(0,r.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,r.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,r.jsxs)(n.admonition,{type:"important",children:[(0,r.jsxs)(n.p,{children:["Since ",(0,r.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,r.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,r.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]}),(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n\nexport default jestConfig;\n"})})})]}),(0,r.jsx)(n.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),(0,r.jsxs)(n.p,{children:["Since ",(0,r.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,r.jsx)(n.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,r.jsx)(n.code,{children:".mjs"})," files\nwill be processed by ",(0,r.jsx)(n.code,{children:"esbuild"})," in ",(0,r.jsx)(n.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,r.jsx)(n.code,{children:"esbuild"}),", one can do the following:"]}),(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n globals: {\n ngJest: {\n processWithEsbuild: [],\n },\n },\n}\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globals: {\n ngJest: {\n processWithEsbuild: [],\n },\n },\n}\n\nexport default jestConfig;\n"})})})]})]}),"\n",(0,r.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst snapshotSerializers = require('jest-preset-angular/build/serializers');\n\nmodule.exports = {\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n snapshotSerializers,\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n ],\n },\n};\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport snapshotSerializers from 'jest-preset-angular/build/serializers';\n\nconst jestConfig: Config = {\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n snapshotSerializers,\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.admonition,{type:"important",children:(0,r.jsxs)(n.p,{children:["Jest runs with ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,r.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,r.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,r.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["We're using ",(0,r.jsx)(n.code,{children:'"transform"'})," to pass information about configuration to use for code compilation with ",(0,r.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,r.jsx)(n.code,{children:"ts"}),"), HTML (",(0,r.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,r.jsx)(n.code,{children:"js"}),"), JSON (",(0,r.jsx)(n.code,{children:"json"}),") and ESM JavaScript (",(0,r.jsx)(n.code,{children:"mjs"}),") files."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses ",(0,r.jsx)(n.code,{children:"RegExp"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,r.jsx)(n.code,{children:"package.json"})," definitions."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. Note: by default angular adds\nsome angular-specific attributes to the code (like ",(0,r.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,r.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,r.jsx)(n.code,{children:"_ngcontent-c*"})," etc).\nThis package provides serializer to remove such attributes. This makes snapshots cleaner and more human-readable.\nTo remove such specific attributes use ",(0,r.jsx)(n.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,r.jsx)(n.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,r.jsx)(n.code,{children:".mjs"})," files which come from ",(0,r.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,r.jsx)(n.code,{children:"TS"}),", ",(0,r.jsx)(n.code,{children:"JS"}),", ",(0,r.jsx)(n.code,{children:"MJS"}),", ",(0,r.jsx)(n.code,{children:"HTML"}),", or ",(0,r.jsx)(n.code,{children:"SVG"})," file through so called ",(0,r.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>i});t(6540);var s=t(4164);const r={tabItem:"tabItem_Ymn6"};var o=t(4848);function i(e){let{children:n,hidden:t,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,i),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>w});var s=t(6540),r=t(4164),o=t(3104),i=t(6347),a=t(205),l=t(7485),c=t(1682),d=t(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:n,children:t}=e;return(0,s.useMemo)((()=>{const e=n??function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}}))}(t);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function p(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function j(e){let{queryString:n=!1,groupId:t}=e;const r=(0,i.W6)(),o=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(o),(0,s.useCallback)((e=>{if(!o)return;const n=new URLSearchParams(r.location.search);n.set(o,e),r.replace({...r.location,search:n.toString()})}),[o,r])]}function f(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,o=h(e),[i,l]=(0,s.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!p({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const s=t.find((e=>e.default))??t[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:o}))),[c,u]=j({queryString:t,groupId:r}),[f,m]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,o]=(0,d.Dv)(t);return[r,(0,s.useCallback)((e=>{t&&o.set(e)}),[t,o])]}({groupId:r}),g=(()=>{const e=c??f;return p({value:e,tabValues:o})?e:null})();(0,a.A)((()=>{g&&l(g)}),[g]);return{selectedValue:i,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),m(e)}),[u,m,o]),tabValues:o}}var m=t(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=t(4848);function b(e){let{className:n,block:t,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.a_)(),d=e=>{const n=e.currentTarget,t=l.indexOf(n),r=a[t].value;r!==s&&(c(n),i(r))},u=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":t},n),children:a.map((e=>{let{value:n,label:t,attributes:o}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:s===n?0:-1,"aria-selected":s===n,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...o,className:(0,r.A)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:o}=e;const i=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=i.find((e=>e.props.value===o));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map(((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==o})))})}function y(e){const n=f(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",g.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function w(e){const n=(0,m.A)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>a});var s=t(6540);const r={},o=s.createContext(r);function i(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/aad144a3.04036ad8.js b/assets/js/aad144a3.18d428e7.js similarity index 99% rename from assets/js/aad144a3.04036ad8.js rename to assets/js/aad144a3.18d428e7.js index 31afa9308f..fc5ca6a375 100644 --- a/assets/js/aad144a3.04036ad8.js +++ b/assets/js/aad144a3.18d428e7.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9104],{568:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"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-11.1/guides/angular-13+.md","sourceDirName":"guides","slug":"/guides/angular-13+","permalink":"/jest-preset-angular/docs/11.1/guides/angular-13+","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/guides/angular-13+.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"angular-13+","title":"Angular >=13"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/11.1/guides/angular-ivy"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/11.1/guides/esm-support"}}');var t=n(4848),i=n(8453);const o={id:"angular-13+",title:"Angular >=13"},a=void 0,l={},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}];function c(e){const s={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,t.jsx)(s.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,t.jsx)(s.code,{children:"CommonJS"})," mode with ",(0,t.jsx)(s.strong,{children:"Angular 13"})," using ",(0,t.jsx)(s.a,{href:"/jest-preset-angular/docs/11.1/getting-started/presets",children:"default preset"}),".\nJest ESM support with ",(0,t.jsx)(s.strong,{children:"Angular 13"})," is new and may have issues."]}),"\n",(0,t.jsxs)(s.p,{children:["Starting from ",(0,t.jsx)(s.strong,{children:"v11.0.0"}),", ",(0,t.jsx)(s.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,t.jsx)(s.strong,{children:"Angular 13"}),":"]}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"ng-jest-resolver"})," is introduced as a custom Jest resolver to resolve ",(0,t.jsx)(s.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"moduleFileExtensions"})," is updated to include ",(0,t.jsx)(s.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,t.jsx)(s.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"transform"})," is updated to include ",(0,t.jsx)(s.code,{children:".mjs"})," extension to transform to ",(0,t.jsx)(s.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(s.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:["Upgrade the project to ",(0,t.jsx)(s.strong,{children:"Angular 13"})," following ",(0,t.jsx)(s.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsx)(s.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})}),"\n",(0,t.jsx)(s.p,{children:"there are no migration steps required"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["If one is ",(0,t.jsx)(s.strong,{children:"NOT"})," having ",(0,t.jsx)(s.code,{children:"preset: 'jest-preset-angular'"})," in Jest config, the config needs to be updated with new values for\n",(0,t.jsx)(s.code,{children:"resolver"}),", ",(0,t.jsx)(s.code,{children:"transformIgnorePatterns"})," and ",(0,t.jsx)(s.code,{children:"transform"}),":"]}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',\n },\n};\n"})}),"\n",(0,t.jsx)(s.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,t.jsxs)(s.p,{children:["ES Modules support is new and may encounter issues. See ",(0,t.jsx)(s.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)(s.p,{children:["Your ",(0,t.jsx)(s.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"const { pathsToModuleNameMapper } = require('ts-jest/utils');\nconst { paths } = require('./tsconfig.json').compilerOptions;\n\n/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */\nmodule.exports = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n globals: {\n 'ts-jest': {\n useESM: true,\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n tsconfig: '/tsconfig-esm.spec.json',\n },\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})}),"\n",(0,t.jsxs)(s.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,t.jsx)(s.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,t.jsx)(s.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,t.jsxs)(s.p,{children:["The ",(0,t.jsx)(s.code,{children:"jest-preset-angular/setup-jest"})," file doesn't work with ESM, because it uses ",(0,t.jsx)(s.code,{children:"require"}),". For now you should skip using this file, and replace the contents of your ",(0,t.jsx)(s.code,{children:"setup-jest.ts"})," with:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'zone.js';\nimport 'zone.js/testing';\nimport './jest-global-mocks';\n\nimport { getTestBed } from '@angular/core/testing';\nimport { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';\n\ngetTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {\n teardown: {\n destroyAfterEach: true, // Angular recommends this, but it may break existing tests\n },\n});\ngetTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());\n"})}),"\n",(0,t.jsx)(s.h2,{id:"potential-issues-with-angular-13-esm-package-format-and-workaround",children:"Potential issues with Angular 13 ESM package format and workaround"}),"\n",(0,t.jsxs)(s.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,t.jsx)(s.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["Angular 13 ESM package format makes Jest resolution not able to resolve the correct ",(0,t.jsx)(s.code,{children:".mjs"})," files. Even though we introduced\n",(0,t.jsx)(s.code,{children:"ng-jest-resolver"})," as a part of the preset, this resolver won't work for all scenarios. One might get Jest error like"]}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,t.jsxs)(s.p,{children:["To fix this issue, one needs to add ",(0,t.jsx)(s.code,{children:"mjs"})," to ",(0,t.jsx)(s.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n"})}),"\n",(0,t.jsxs)(s.p,{children:["If the issue still ",(0,t.jsx)(s.strong,{children:"persists"}),", you might need to configure ",(0,t.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring",children:"moduleNameMapper"}),"\nor extend the behavior the default ",(0,t.jsx)(s.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/src/resolvers/ng-jest-resolver.ts",children:"resolver"})," of this preset."]}),"\n",(0,t.jsx)(s.h3,{id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",children:"Usage with Angular libraries which are built with Angular CLI 13"}),"\n",(0,t.jsxs)(s.p,{children:["Besides, the changes in Angular packages themselves, ",(0,t.jsx)(s.strong,{children:"Angular"})," libraries which are built with ",(0,t.jsx)(s.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,t.jsx)(s.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,t.jsx)(s.strong,{children:"CommonJS"})," mode."]}),"\n",(0,t.jsxs)(s.p,{children:["To fix this issue, one should modify ",(0,t.jsx)(s.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n"})})]})}function u(e={}){const{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>o,x:()=>a});var r=n(6540);const t={},i=r.createContext(t);function o(e){const s=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),r.createElement(i.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9104],{568:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"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-11.1/guides/angular-13+.md","sourceDirName":"guides","slug":"/guides/angular-13+","permalink":"/jest-preset-angular/docs/11.1/guides/angular-13+","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/guides/angular-13+.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"angular-13+","title":"Angular >=13"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/11.1/guides/angular-ivy"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/11.1/guides/esm-support"}}');var t=n(4848),i=n(8453);const o={id:"angular-13+",title:"Angular >=13"},a=void 0,l={},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}];function c(e){const s={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,t.jsx)(s.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,t.jsx)(s.code,{children:"CommonJS"})," mode with ",(0,t.jsx)(s.strong,{children:"Angular 13"})," using ",(0,t.jsx)(s.a,{href:"/jest-preset-angular/docs/11.1/getting-started/presets",children:"default preset"}),".\nJest ESM support with ",(0,t.jsx)(s.strong,{children:"Angular 13"})," is new and may have issues."]}),"\n",(0,t.jsxs)(s.p,{children:["Starting from ",(0,t.jsx)(s.strong,{children:"v11.0.0"}),", ",(0,t.jsx)(s.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,t.jsx)(s.strong,{children:"Angular 13"}),":"]}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"ng-jest-resolver"})," is introduced as a custom Jest resolver to resolve ",(0,t.jsx)(s.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"moduleFileExtensions"})," is updated to include ",(0,t.jsx)(s.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,t.jsx)(s.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"transform"})," is updated to include ",(0,t.jsx)(s.code,{children:".mjs"})," extension to transform to ",(0,t.jsx)(s.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(s.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:["Upgrade the project to ",(0,t.jsx)(s.strong,{children:"Angular 13"})," following ",(0,t.jsx)(s.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsx)(s.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})}),"\n",(0,t.jsx)(s.p,{children:"there are no migration steps required"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["If one is ",(0,t.jsx)(s.strong,{children:"NOT"})," having ",(0,t.jsx)(s.code,{children:"preset: 'jest-preset-angular'"})," in Jest config, the config needs to be updated with new values for\n",(0,t.jsx)(s.code,{children:"resolver"}),", ",(0,t.jsx)(s.code,{children:"transformIgnorePatterns"})," and ",(0,t.jsx)(s.code,{children:"transform"}),":"]}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',\n },\n};\n"})}),"\n",(0,t.jsx)(s.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,t.jsxs)(s.p,{children:["ES Modules support is new and may encounter issues. See ",(0,t.jsx)(s.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)(s.p,{children:["Your ",(0,t.jsx)(s.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"const { pathsToModuleNameMapper } = require('ts-jest/utils');\nconst { paths } = require('./tsconfig.json').compilerOptions;\n\n/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */\nmodule.exports = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n globals: {\n 'ts-jest': {\n useESM: true,\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n tsconfig: '/tsconfig-esm.spec.json',\n },\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})}),"\n",(0,t.jsxs)(s.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,t.jsx)(s.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,t.jsx)(s.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,t.jsxs)(s.p,{children:["The ",(0,t.jsx)(s.code,{children:"jest-preset-angular/setup-jest"})," file doesn't work with ESM, because it uses ",(0,t.jsx)(s.code,{children:"require"}),". For now you should skip using this file, and replace the contents of your ",(0,t.jsx)(s.code,{children:"setup-jest.ts"})," with:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'zone.js';\nimport 'zone.js/testing';\nimport './jest-global-mocks';\n\nimport { getTestBed } from '@angular/core/testing';\nimport { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';\n\ngetTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {\n teardown: {\n destroyAfterEach: true, // Angular recommends this, but it may break existing tests\n },\n});\ngetTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());\n"})}),"\n",(0,t.jsx)(s.h2,{id:"potential-issues-with-angular-13-esm-package-format-and-workaround",children:"Potential issues with Angular 13 ESM package format and workaround"}),"\n",(0,t.jsxs)(s.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,t.jsx)(s.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["Angular 13 ESM package format makes Jest resolution not able to resolve the correct ",(0,t.jsx)(s.code,{children:".mjs"})," files. Even though we introduced\n",(0,t.jsx)(s.code,{children:"ng-jest-resolver"})," as a part of the preset, this resolver won't work for all scenarios. One might get Jest error like"]}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,t.jsxs)(s.p,{children:["To fix this issue, one needs to add ",(0,t.jsx)(s.code,{children:"mjs"})," to ",(0,t.jsx)(s.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n"})}),"\n",(0,t.jsxs)(s.p,{children:["If the issue still ",(0,t.jsx)(s.strong,{children:"persists"}),", you might need to configure ",(0,t.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring",children:"moduleNameMapper"}),"\nor extend the behavior the default ",(0,t.jsx)(s.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/src/resolvers/ng-jest-resolver.ts",children:"resolver"})," of this preset."]}),"\n",(0,t.jsx)(s.h3,{id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",children:"Usage with Angular libraries which are built with Angular CLI 13"}),"\n",(0,t.jsxs)(s.p,{children:["Besides, the changes in Angular packages themselves, ",(0,t.jsx)(s.strong,{children:"Angular"})," libraries which are built with ",(0,t.jsx)(s.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,t.jsx)(s.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,t.jsx)(s.strong,{children:"CommonJS"})," mode."]}),"\n",(0,t.jsxs)(s.p,{children:["To fix this issue, one should modify ",(0,t.jsx)(s.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n"})})]})}function u(e={}){const{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>o,x:()=>a});var r=n(6540);const t={},i=r.createContext(t);function o(e){const s=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),r.createElement(i.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/adb64ee2.b9361e9f.js b/assets/js/adb64ee2.4019d009.js similarity index 96% rename from assets/js/adb64ee2.b9361e9f.js rename to assets/js/adb64ee2.4019d009.js index 5497da0711..0df5bb67c4 100644 --- a/assets/js/adb64ee2.b9361e9f.js +++ b/assets/js/adb64ee2.4019d009.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8480],{5622:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-8.x/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/8.x/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/processing.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/8.x/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/8.x/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8480],{5622:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-8.x/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/8.x/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/processing.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/8.x/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/8.x/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/af572879.9fbb2d72.js b/assets/js/af572879.7df85ba4.js similarity index 99% rename from assets/js/af572879.9fbb2d72.js rename to assets/js/af572879.7df85ba4.js index 5db2a6f4df..993cae7914 100644 --- a/assets/js/af572879.9fbb2d72.js +++ b/assets/js/af572879.7df85ba4.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6308],{2630:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-14.3/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/14.3/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/getting-started/installation.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/14.3/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/14.3/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsx)(t.p,{children:"In your project root, create a setup file with following contents:"}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsx)(t.p,{children:"Add the following section to your root Jest config"}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label":"TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label":"TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"tsconfig-cjs",label:"Tsconfig CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json5",metastring:'title="tsconfig.spec.json" tab={"label": "Tsconfig CJS"}',children:"{\n //...\n extends: './tsconfig.json',\n compilerOptions: {\n //...\n module: 'CommonJS',\n types: ['jest'],\n },\n include: ['src/**/*.spec.ts', 'src/**/*.d.ts'],\n //...\n}\n"})})}),(0,r.jsx)(o.A,{value:"tsconfig-esm",label:"Tsconfig ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="tsconfig.spec.json" tab={"label": "Tsconfig ESM"}',children:'{\n //...\n "extends": "./tsconfig.json",\n "compilerOptions": {\n //...\n "module": "ES2022",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n //...\n}\n'})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="package.json"',children:'{\n //...\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n //...\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\nimport './jest-global-mocks';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\nimport './jest-global-mocks';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest-global-mocks.ts"',children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>S});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=m({queryString:n,groupId:r}),[g,j]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??g;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),j(e)}),[d,j,a]),tabValues:a}}var j=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function S(e){const t=(0,j.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6308],{2630:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-14.3/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/14.3/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/getting-started/installation.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/14.3/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/14.3/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(o.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(o.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsx)(t.p,{children:"In your project root, create a setup file with following contents:"}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsx)(t.p,{children:"Add the following section to your root Jest config"}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label":"TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label":"TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"tsconfig-cjs",label:"Tsconfig CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json5",metastring:'title="tsconfig.spec.json" tab={"label": "Tsconfig CJS"}',children:"{\n //...\n extends: './tsconfig.json',\n compilerOptions: {\n //...\n module: 'CommonJS',\n types: ['jest'],\n },\n include: ['src/**/*.spec.ts', 'src/**/*.d.ts'],\n //...\n}\n"})})}),(0,r.jsx)(o.A,{value:"tsconfig-esm",label:"Tsconfig ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="tsconfig.spec.json" tab={"label": "Tsconfig ESM"}',children:'{\n //...\n "extends": "./tsconfig.json",\n "compilerOptions": {\n //...\n "module": "ES2022",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n //...\n}\n'})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="package.json"',children:'{\n //...\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n //...\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\nimport './jest-global-mocks';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\nimport './jest-global-mocks';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest-global-mocks.ts"',children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>S});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=m({queryString:n,groupId:r}),[g,j]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??g;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),j(e)}),[d,j,a]),tabValues:a}}var j=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function S(e){const t=(0,j.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/af78d9c9.3cd0b7bd.js b/assets/js/af78d9c9.0338d84a.js similarity index 99% rename from assets/js/af78d9c9.3cd0b7bd.js rename to assets/js/af78d9c9.0338d84a.js index fee564f020..639c4588dc 100644 --- a/assets/js/af78d9c9.3cd0b7bd.js +++ b/assets/js/af78d9c9.0338d84a.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5810],{2465:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-environment","title":"JSDOM environment","description":"jest-preset-angular provides a way to configure a different version of JSDOM than the one ships with Jest","source":"@site/docs/guides/jsdom-environment.md","sourceDirName":"guides","slug":"/guides/jsdom-environment","permalink":"/jest-preset-angular/docs/next/guides/jsdom-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/jsdom-environment.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"jsdom-environment","title":"JSDOM environment"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/next/guides/esm-support"},"next":{"title":"JSDOM version","permalink":"/jest-preset-angular/docs/next/guides/jsdom-version"}}');var s=n(4848),a=n(8453),o=n(1470),l=n(9365);const i={id:"jsdom-environment",title:"JSDOM environment"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," provides a way to configure a different version of ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom",children:"JSDOM"})," than the one ships with ",(0,s.jsx)(t.code,{children:"Jest"}),"\nvia a custom ",(0,s.jsx)(t.code,{children:"JSDOM"})," environment. One can follow the below steps to configure a different ",(0,s.jsx)(t.code,{children:"JSDOM"})," version:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Install the desired JSDOM version"}),"\n"]}),"\n",(0,s.jsxs)(o.A,{groupId:"npm2yarn",children:[(0,s.jsx)(l.A,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jsdom@\n"})})}),(0,s.jsx)(l.A,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jsdom@\n"})})}),(0,s.jsx)(l.A,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jsdom@\n"})})})]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["In Jest config, set the ",(0,s.jsx)(t.code,{children:"testEnvironment"})," like following"]}),"\n"]}),"\n",(0,s.jsxs)(o.A,{groupId:"code-examples",children:[(0,s.jsx)(l.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n testEnvironment: 'jest-preset-angular/environments/jest-jsdom-env',\n} satisfies Config;\n"})})}),(0,s.jsx)(l.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n testEnvironment: 'jest-preset-angular/environments/jest-jsdom-env',\n} satisfies Config;\n"})})})]})]})}function m(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>o});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var a=n(4848);function o(e){let{children:t,hidden:n,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,o),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),a=n(3104),o=n(6347),l=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,o.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,a=p(e),[o,i]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:s}),[f,v]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),b=(()=>{const e=u??f;return m({value:e,tabValues:a})?e:null})();(0,l.A)((()=>{b&&i(b)}),[b]);return{selectedValue:o,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),v(e)}),[d,v,a]),tabValues:a}}var v=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var g=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),s=l[n].value;s!==r&&(u(t),o(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,g.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:l.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,g.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,s.A)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,g.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,g.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,g.jsx)(j,{...t,...e}),(0,g.jsx)(x,{...t,...e})]})}function w(e){const t=(0,v.A)();return(0,g.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>l});var r=n(6540);const s={},a=r.createContext(s);function o(e){const t=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5810],{2465:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-environment","title":"JSDOM environment","description":"jest-preset-angular provides a way to configure a different version of JSDOM than the one ships with Jest","source":"@site/docs/guides/jsdom-environment.md","sourceDirName":"guides","slug":"/guides/jsdom-environment","permalink":"/jest-preset-angular/docs/next/guides/jsdom-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/jsdom-environment.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"jsdom-environment","title":"JSDOM environment"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/next/guides/esm-support"},"next":{"title":"JSDOM version","permalink":"/jest-preset-angular/docs/next/guides/jsdom-version"}}');var s=n(4848),a=n(8453),o=n(1470),l=n(9365);const i={id:"jsdom-environment",title:"JSDOM environment"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," provides a way to configure a different version of ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom",children:"JSDOM"})," than the one ships with ",(0,s.jsx)(t.code,{children:"Jest"}),"\nvia a custom ",(0,s.jsx)(t.code,{children:"JSDOM"})," environment. One can follow the below steps to configure a different ",(0,s.jsx)(t.code,{children:"JSDOM"})," version:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Install the desired JSDOM version"}),"\n"]}),"\n",(0,s.jsxs)(o.A,{groupId:"npm2yarn",children:[(0,s.jsx)(l.A,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jsdom@\n"})})}),(0,s.jsx)(l.A,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jsdom@\n"})})}),(0,s.jsx)(l.A,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jsdom@\n"})})})]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["In Jest config, set the ",(0,s.jsx)(t.code,{children:"testEnvironment"})," like following"]}),"\n"]}),"\n",(0,s.jsxs)(o.A,{groupId:"code-examples",children:[(0,s.jsx)(l.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n testEnvironment: 'jest-preset-angular/environments/jest-jsdom-env',\n} satisfies Config;\n"})})}),(0,s.jsx)(l.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n testEnvironment: 'jest-preset-angular/environments/jest-jsdom-env',\n} satisfies Config;\n"})})})]})]})}function m(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>o});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var a=n(4848);function o(e){let{children:t,hidden:n,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,o),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),a=n(3104),o=n(6347),l=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,o.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,a=p(e),[o,i]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:s}),[f,v]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),b=(()=>{const e=u??f;return m({value:e,tabValues:a})?e:null})();(0,l.A)((()=>{b&&i(b)}),[b]);return{selectedValue:o,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),v(e)}),[d,v,a]),tabValues:a}}var v=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var g=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),s=l[n].value;s!==r&&(u(t),o(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,g.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:l.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,g.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,s.A)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,g.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,g.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,g.jsx)(j,{...t,...e}),(0,g.jsx)(x,{...t,...e})]})}function w(e){const t=(0,v.A)();return(0,g.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>l});var r=n(6540);const s={},a=r.createContext(s);function o(e){const t=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/afba4106.9a97ed9f.js b/assets/js/afba4106.340f83db.js similarity index 97% rename from assets/js/afba4106.9a97ed9f.js rename to assets/js/afba4106.340f83db.js index 49a741bbee..65bfb6c418 100644 --- a/assets/js/afba4106.9a97ed9f.js +++ b/assets/js/afba4106.340f83db.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1942],{5831:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"If you look at setup-jest.ts,","source":"@site/versioned_docs/version-11.0/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/11.0/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/getting-started/test-environment.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/11.0/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/11.0/guides/angular-ivy"}}');var r=n(4848),i=n(8453);const o={id:"test-environment",title:"Test environment"},a=void 0,c={},d=[];function l(e){const t={a:"a",code:"code",p:"p",...(0,i.R)(),...e.components};return(0,r.jsxs)(t.p,{children:["If you look at ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/src/config/setup-jest.ts",children:(0,r.jsx)(t.code,{children:"setup-jest.ts"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/src/zone-patch",children:"jest-zone-patch"}),"\nwe also make sure Jest test methods run in Zone context. Then we initialize the Angular testing environment like normal."]})}function u(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>a});var s=n(6540);const r={},i=s.createContext(r);function o(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1942],{5831:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"If you look at setup-jest.ts,","source":"@site/versioned_docs/version-11.0/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/11.0/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/getting-started/test-environment.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/11.0/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/11.0/guides/angular-ivy"}}');var r=n(4848),i=n(8453);const o={id:"test-environment",title:"Test environment"},a=void 0,c={},d=[];function l(e){const t={a:"a",code:"code",p:"p",...(0,i.R)(),...e.components};return(0,r.jsxs)(t.p,{children:["If you look at ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/src/config/setup-jest.ts",children:(0,r.jsx)(t.code,{children:"setup-jest.ts"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/src/zone-patch",children:"jest-zone-patch"}),"\nwe also make sure Jest test methods run in Zone context. Then we initialize the Angular testing environment like normal."]})}function u(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>a});var s=n(6540);const r={},i=s.createContext(r);function o(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/b2161dc5.5b5c38fb.js b/assets/js/b2161dc5.9fd19c94.js similarity index 96% rename from assets/js/b2161dc5.5b5c38fb.js rename to assets/js/b2161dc5.9fd19c94.js index 19fd6f4825..b64ddb0859 100644 --- a/assets/js/b2161dc5.5b5c38fb.js +++ b/assets/js/b2161dc5.9fd19c94.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[709],{8615:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-14.0/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/14.0/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/processing.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/14.0/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/14.0/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[709],{8615:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-14.0/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/14.0/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/processing.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/14.0/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/14.0/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/b347685f.79e6daea.js b/assets/js/b347685f.bc33afba.js similarity index 99% rename from assets/js/b347685f.79e6daea.js rename to assets/js/b347685f.bc33afba.js index 14f7975294..d16f38a29a 100644 --- a/assets/js/b347685f.79e6daea.js +++ b/assets/js/b347685f.bc33afba.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7826],{2861:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>g,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"This guide is now DEPRECATED and will be removed in the next major release together with the below APIs.","source":"@site/versioned_docs/version-14.5/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/guides/angular-ivy.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"TestBed environment","permalink":"/jest-preset-angular/docs/getting-started/testbed-environment"},"next":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/guides/angular-13+"}}');var s=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"angular-ivy",title:"Angular Ivy"},u=void 0,c={},d=[{value:"Control ngcc processing",id:"control-ngcc-processing",level:2}];function p(e){const t={admonition:"admonition",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.admonition,{title:"DEPRECATED",type:"warning",children:(0,s.jsxs)(t.p,{children:["This guide is now ",(0,s.jsx)(t.strong,{children:"DEPRECATED"})," and will be removed in the next major release together with the below APIs."]})}),"\n",(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,s.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,s.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," also provides a Jest global setup file to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest. Add to the following section:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n} satisfies Config;\n"})})}),(0,s.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n} satisfies Config;\n"})})})]}),"\n",(0,s.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,s.jsxs)(t.p,{children:["Since ",(0,s.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,s.jsx)(t.code,{children:"ngcc"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})}),(0,s.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nexport default {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n} satisfies Config;\n"})})})]})]})}function g(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function g(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,a=p(e),[l,i]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!g({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:s}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),b=(()=>{const e=u??f;return g({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{b&&i(b)}),[b]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),s=o[n].value;s!==r&&(u(t),l(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,s.A)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var r=n(6540);const s={},a=r.createContext(s);function l(e){const t=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7826],{2861:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>g,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"This guide is now DEPRECATED and will be removed in the next major release together with the below APIs.","source":"@site/versioned_docs/version-14.5/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/guides/angular-ivy.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"TestBed environment","permalink":"/jest-preset-angular/docs/getting-started/testbed-environment"},"next":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/guides/angular-13+"}}');var s=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"angular-ivy",title:"Angular Ivy"},u=void 0,c={},d=[{value:"Control ngcc processing",id:"control-ngcc-processing",level:2}];function p(e){const t={admonition:"admonition",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.admonition,{title:"DEPRECATED",type:"warning",children:(0,s.jsxs)(t.p,{children:["This guide is now ",(0,s.jsx)(t.strong,{children:"DEPRECATED"})," and will be removed in the next major release together with the below APIs."]})}),"\n",(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,s.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,s.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," also provides a Jest global setup file to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest. Add to the following section:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n} satisfies Config;\n"})})}),(0,s.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n} satisfies Config;\n"})})})]}),"\n",(0,s.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,s.jsxs)(t.p,{children:["Since ",(0,s.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,s.jsx)(t.code,{children:"ngcc"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,s.jsxs)(l.A,{groupId:"code-examples",children:[(0,s.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nconst jestConfig: Config = {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})}),(0,s.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nglobalThis.ngJest = {\n skipNgcc: true,\n tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig\n};\n\nexport default {\n //...\n globalSetup: 'jest-preset-angular/global-setup',\n} satisfies Config;\n"})})})]})]})}function g(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function g(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,a=p(e),[l,i]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!g({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:s}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),b=(()=>{const e=u??f;return g({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{b&&i(b)}),[b]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),s=o[n].value;s!==r&&(u(t),l(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,s.A)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var r=n(6540);const s={},a=r.createContext(s);function l(e){const t=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/b4c5bdfe.8fb89b65.js b/assets/js/b4c5bdfe.2e2a40c3.js similarity index 96% rename from assets/js/b4c5bdfe.8fb89b65.js rename to assets/js/b4c5bdfe.2e2a40c3.js index 4da2e77ed1..5309e428f7 100644 --- a/assets/js/b4c5bdfe.8fb89b65.js +++ b/assets/js/b4c5bdfe.2e2a40c3.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4344],{8556:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-14.2/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/14.2/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/processing.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/14.2/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/14.2/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4344],{8556:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-14.2/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/14.2/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/processing.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/14.2/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/14.2/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/b647df5a.489071eb.js b/assets/js/b647df5a.f27ffc67.js similarity index 98% rename from assets/js/b647df5a.489071eb.js rename to assets/js/b647df5a.f27ffc67.js index ba2b27d89c..237f52c85b 100644 --- a/assets/js/b647df5a.489071eb.js +++ b/assets/js/b647df5a.f27ffc67.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2624],{31:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>a,contentTitle:()=>r,default:()=>u,frontMatter:()=>l,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-8.x/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/8.x/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/guides/using-with-babel.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/8.x/guides/jsdom-version"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/8.x/guides/absolute-imports"}}');var i=n(4848),o=n(8453);const l={id:"using-with-babel",title:"Using with Babel"},r=void 0,a={},c=[];function d(e){const s={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(s.p,{children:["If you wish to use ",(0,i.jsx)(s.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Install dependencies required by the official Jest documentation for ",(0,i.jsx)(s.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Install ",(0,i.jsx)(s.code,{children:"@babel/preset-env"})," and add ",(0,i.jsx)(s.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsxs)(s.em,{children:["Note: do not use a ",(0,i.jsx)(s.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,i.jsx)(s.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,i.jsx)(s.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,i.jsxs)(s.ol,{start:"3",children:["\n",(0,i.jsx)(s.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"module.exports = {\n transform: {\n '^.+\\\\.(ts|html)$': 'ts-jest',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})]})}function u(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>l,x:()=>r});var t=n(6540);const i={},o=t.createContext(i);function l(e){const s=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function r(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2624],{31:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>a,contentTitle:()=>r,default:()=>u,frontMatter:()=>l,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-8.x/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/8.x/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/guides/using-with-babel.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/8.x/guides/jsdom-version"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/8.x/guides/absolute-imports"}}');var i=n(4848),o=n(8453);const l={id:"using-with-babel",title:"Using with Babel"},r=void 0,a={},c=[];function d(e){const s={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(s.p,{children:["If you wish to use ",(0,i.jsx)(s.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Install dependencies required by the official Jest documentation for ",(0,i.jsx)(s.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Install ",(0,i.jsx)(s.code,{children:"@babel/preset-env"})," and add ",(0,i.jsx)(s.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsxs)(s.em,{children:["Note: do not use a ",(0,i.jsx)(s.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,i.jsx)(s.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,i.jsx)(s.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,i.jsxs)(s.ol,{start:"3",children:["\n",(0,i.jsx)(s.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"module.exports = {\n transform: {\n '^.+\\\\.(ts|html)$': 'ts-jest',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})]})}function u(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>l,x:()=>r});var t=n(6540);const i={},o=t.createContext(i);function l(e){const s=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function r(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/b83f237d.9a039891.js b/assets/js/b83f237d.4f8b71b1.js similarity index 97% rename from assets/js/b83f237d.9a039891.js rename to assets/js/b83f237d.4f8b71b1.js index e5a11274fd..bcde672807 100644 --- a/assets/js/b83f237d.9a039891.js +++ b/assets/js/b83f237d.4f8b71b1.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8930],{5804:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/versioned_docs/version-14.2/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/14.2/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/guides/absolute-imports.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/14.2/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/14.2/guides/troubleshooting"}}');var i=s(4848),n=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,i.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,i.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,i.jsxs)(t.p,{children:["More information see ",(0,i.jsx)(t.code,{children:"ts-jest"})," ",(0,i.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const i={},n=o.createContext(i);function r(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8930],{5804:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/versioned_docs/version-14.2/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/14.2/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/guides/absolute-imports.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/14.2/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/14.2/guides/troubleshooting"}}');var i=s(4848),n=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,i.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,i.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,i.jsxs)(t.p,{children:["More information see ",(0,i.jsx)(t.code,{children:"ts-jest"})," ",(0,i.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const i={},n=o.createContext(i);function r(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/c00c612c.e62de4fa.js b/assets/js/c00c612c.576d4d36.js similarity index 97% rename from assets/js/c00c612c.e62de4fa.js rename to assets/js/c00c612c.576d4d36.js index 7e5356559c..7a123d93fe 100644 --- a/assets/js/c00c612c.e62de4fa.js +++ b/assets/js/c00c612c.576d4d36.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5603],{4126:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"If you look at setup-jest.ts,","source":"@site/versioned_docs/version-10.x/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/10.x/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/getting-started/test-environment.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/10.x/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/10.x/guides/angular-ivy"}}');var r=n(4848),i=n(8453);const o={id:"test-environment",title:"Test environment"},a=void 0,c={},d=[];function l(e){const t={a:"a",code:"code",p:"p",...(0,i.R)(),...e.components};return(0,r.jsxs)(t.p,{children:["If you look at ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/src/config/setup-jest.ts",children:(0,r.jsx)(t.code,{children:"setup-jest.ts"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/src/zone-patch",children:"jest-zone-patch"}),"\nwe also make sure Jest test methods run in Zone context. Then we initialize the Angular testing environment like normal."]})}function u(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>a});var s=n(6540);const r={},i=s.createContext(r);function o(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5603],{4126:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"If you look at setup-jest.ts,","source":"@site/versioned_docs/version-10.x/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/10.x/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/getting-started/test-environment.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/10.x/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/10.x/guides/angular-ivy"}}');var r=n(4848),i=n(8453);const o={id:"test-environment",title:"Test environment"},a=void 0,c={},d=[];function l(e){const t={a:"a",code:"code",p:"p",...(0,i.R)(),...e.components};return(0,r.jsxs)(t.p,{children:["If you look at ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/src/config/setup-jest.ts",children:(0,r.jsx)(t.code,{children:"setup-jest.ts"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/src/zone-patch",children:"jest-zone-patch"}),"\nwe also make sure Jest test methods run in Zone context. Then we initialize the Angular testing environment like normal."]})}function u(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>a});var s=n(6540);const r={},i=s.createContext(r);function o(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/c1bdbc58.49103810.js b/assets/js/c1bdbc58.1c4ab3b3.js similarity index 95% rename from assets/js/c1bdbc58.49103810.js rename to assets/js/c1bdbc58.1c4ab3b3.js index 122624cfa6..28fd34e535 100644 --- a/assets/js/c1bdbc58.49103810.js +++ b/assets/js/c1bdbc58.1c4ab3b3.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9467],{9159:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-14.0/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/14.0/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/introduction.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/14.0/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(t.p,{children:["This is a part of the article: ",(0,o.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Starting from ",(0,o.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,o.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,o.jsx)(t.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9467],{9159:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-14.0/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/14.0/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/introduction.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/14.0/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(t.p,{children:["This is a part of the article: ",(0,o.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Starting from ",(0,o.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,o.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,o.jsx)(t.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/c44fa306.eae27f18.js b/assets/js/c44fa306.aee9d971.js similarity index 98% rename from assets/js/c44fa306.eae27f18.js rename to assets/js/c44fa306.aee9d971.js index 4bebda38a4..b1ceb63d66 100644 --- a/assets/js/c44fa306.eae27f18.js +++ b/assets/js/c44fa306.aee9d971.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2274],{4044:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>d,default:()=>p,frontMatter:()=>i,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"The presets","source":"@site/versioned_docs/version-8.x/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/8.x/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/getting-started/presets.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/8.x/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/8.x/getting-started/options"}}');var r=s(4848),o=s(8453);const i={id:"presets",title:"Presets"},d=void 0,a={},c=[{value:"The presets",id:"the-presets",level:3},{value:"Basic usage",id:"basic-usage",level:3},{value:"Advanced",id:"advanced",level:3}];function l(e){const t={admonition:"admonition",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," comes with a preset, covering most of the project's base configuration:"]}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Preset name"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsx)(t.tbody,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"jest-preset-angular"})}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"ts-jest"})," to ",(0,r.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]})})]}),"\n",(0,r.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,r.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,r.jsx)(t.code,{children:"preset"})," key to the desired preset name in your Jest config should be enough to start\nusing TypeScript with Jest (assuming you added ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,r.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n preset: 'jest-preset-angular',\n};\n"})}),"\n",(0,r.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,r.jsxs)(t.p,{children:["All presets come with default ",(0,r.jsx)(t.code,{children:"ts-jest"})," config options.\nIf you want to override any of the options, you'll need to use the JavaScript version of Jest config,\ncopy the original options and override the options you need:"]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["If you choose to override ",(0,r.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,r.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,r.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nconst { defaults: jestNgPreset } = require('jest-preset-angular');\n\nmodule.exports = {\n // [...]\n globals: {\n 'ts-jest': {\n ...jestNgPreset.globals['ts-jest'],\n // [...your overriden options]\n },\n },\n};\n"})})]})}function p(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>d});var n=s(6540);const r={},o=n.createContext(r);function i(e){const t=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2274],{4044:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>d,default:()=>p,frontMatter:()=>i,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"The presets","source":"@site/versioned_docs/version-8.x/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/8.x/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/getting-started/presets.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/8.x/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/8.x/getting-started/options"}}');var r=s(4848),o=s(8453);const i={id:"presets",title:"Presets"},d=void 0,a={},c=[{value:"The presets",id:"the-presets",level:3},{value:"Basic usage",id:"basic-usage",level:3},{value:"Advanced",id:"advanced",level:3}];function l(e){const t={admonition:"admonition",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," comes with a preset, covering most of the project's base configuration:"]}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Preset name"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsx)(t.tbody,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"jest-preset-angular"})}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"ts-jest"})," to ",(0,r.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]})})]}),"\n",(0,r.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,r.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,r.jsx)(t.code,{children:"preset"})," key to the desired preset name in your Jest config should be enough to start\nusing TypeScript with Jest (assuming you added ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,r.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n preset: 'jest-preset-angular',\n};\n"})}),"\n",(0,r.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,r.jsxs)(t.p,{children:["All presets come with default ",(0,r.jsx)(t.code,{children:"ts-jest"})," config options.\nIf you want to override any of the options, you'll need to use the JavaScript version of Jest config,\ncopy the original options and override the options you need:"]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["If you choose to override ",(0,r.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,r.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,r.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nconst { defaults: jestNgPreset } = require('jest-preset-angular');\n\nmodule.exports = {\n // [...]\n globals: {\n 'ts-jest': {\n ...jestNgPreset.globals['ts-jest'],\n // [...your overriden options]\n },\n },\n};\n"})})]})}function p(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>d});var n=s(6540);const r={},o=n.createContext(r);function i(e){const t=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/c49413db.b0782714.js b/assets/js/c49413db.ef98b2e6.js similarity index 98% rename from assets/js/c49413db.b0782714.js rename to assets/js/c49413db.ef98b2e6.js index 4159dba628..c7188c51c9 100644 --- a/assets/js/c49413db.b0782714.js +++ b/assets/js/c49413db.ef98b2e6.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1767],{2575:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/versioned_docs/version-10.x/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/10.x/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/guides/esm-support.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/10.x/guides/angular-ivy"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/10.x/guides/jsdom-version"}}');var o=t(4848),r=t(8453);const i={id:"esm-support",title:"ESM Support"},a=void 0,l={},c=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(s.p,{children:["To use ",(0,o.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,o.jsx)(s.code,{children:"ts-jest"})," config option ",(0,o.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/next/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/en/next/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,o.jsxs)(s.p,{children:["There is also a ",(0,o.jsx)(s.a,{href:"/jest-preset-angular/docs/10.x/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,o.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,o.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n extensionsToTreatAsEsm: ['.ts'],\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.html$',\n useESM: true,\n },\n },\n};\n"})}),"\n",(0,o.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,o.jsxs)(s.admonition,{type:"tip",children:[(0,o.jsxs)(s.p,{children:["Jest will attempt to load ",(0,o.jsx)(s.strong,{children:"ESM"})," files from ",(0,o.jsx)(s.code,{children:"node_modules"})," with default ",(0,o.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,o.jsx)(s.strong,{children:"ESM"})," built files or ",(0,o.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,o.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,o.jsxs)(s.p,{children:["To fix that, one can use ",(0,o.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,o.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n"})})]})}function u(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>i,x:()=>a});var n=t(6540);const o={},r=n.createContext(o);function i(e){const s=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1767],{2575:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/versioned_docs/version-10.x/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/10.x/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/guides/esm-support.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/10.x/guides/angular-ivy"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/10.x/guides/jsdom-version"}}');var o=t(4848),r=t(8453);const i={id:"esm-support",title:"ESM Support"},a=void 0,l={},c=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(s.p,{children:["To use ",(0,o.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,o.jsx)(s.code,{children:"ts-jest"})," config option ",(0,o.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/next/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/en/next/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,o.jsxs)(s.p,{children:["There is also a ",(0,o.jsx)(s.a,{href:"/jest-preset-angular/docs/10.x/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,o.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,o.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n extensionsToTreatAsEsm: ['.ts'],\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.html$',\n useESM: true,\n },\n },\n};\n"})}),"\n",(0,o.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,o.jsxs)(s.admonition,{type:"tip",children:[(0,o.jsxs)(s.p,{children:["Jest will attempt to load ",(0,o.jsx)(s.strong,{children:"ESM"})," files from ",(0,o.jsx)(s.code,{children:"node_modules"})," with default ",(0,o.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,o.jsx)(s.strong,{children:"ESM"})," built files or ",(0,o.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,o.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,o.jsxs)(s.p,{children:["To fix that, one can use ",(0,o.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,o.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n"})})]})}function u(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>i,x:()=>a});var n=t(6540);const o={},r=n.createContext(o);function i(e){const s=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/c4ba122c.17bd819d.js b/assets/js/c4ba122c.7181e64f.js similarity index 99% rename from assets/js/c4ba122c.17bd819d.js rename to assets/js/c4ba122c.7181e64f.js index b5c872acfa..1b0479d2ae 100644 --- a/assets/js/c4ba122c.17bd819d.js +++ b/assets/js/c4ba122c.7181e64f.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4769],{5747:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-14.2/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/14.2/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/guides/using-with-babel.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/14.2/guides/snapshot-testing"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/14.2/guides/absolute-imports"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"using-with-babel",title:"Using with Babel"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you wish to use ",(0,r.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,r.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install ",(0,r.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,r.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// babel.config.js\nmodule.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsxs)(t.em,{children:["Note: do not use a ",(0,r.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,r.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,r.jsxs)(t.ol,{start:"3",children:["\n",(0,r.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function b(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[u,d]=b({queryString:n,groupId:r}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),g=(()=>{const e=u??f;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{g&&i(g)}),[g]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(4848);function v(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(u(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.A)("tabs-container",g.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4769],{5747:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>h,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-14.2/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/14.2/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/guides/using-with-babel.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/14.2/guides/snapshot-testing"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/14.2/guides/absolute-imports"}}');var r=n(4848),a=n(8453),l=n(1470),o=n(9365);const i={id:"using-with-babel",title:"Using with Babel"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you wish to use ",(0,r.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,r.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install ",(0,r.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,r.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// babel.config.js\nmodule.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsxs)(t.em,{children:["Note: do not use a ",(0,r.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,r.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,r.jsxs)(t.ol,{start:"3",children:["\n",(0,r.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),o=n(205),i=n(7485),u=n(1682),c=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function b(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,i]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[u,d]=b({queryString:n,groupId:r}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),g=(()=>{const e=u??f;return h({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{g&&i(g)}),[g]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);i(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(4848);function v(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=i.indexOf(t),r=o[n].value;r!==s&&(u(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=i.indexOf(e.currentTarget)+1;t=i[n]??i[0];break}case"ArrowLeft":{const n=i.indexOf(e.currentTarget)-1;t=i[n]??i[i.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{i.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.A)("tabs-container",g.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/c62dfc48.6097708b.js b/assets/js/c62dfc48.4ba15889.js similarity index 99% rename from assets/js/c62dfc48.6097708b.js rename to assets/js/c62dfc48.4ba15889.js index ba08a96add..40fc5a27d0 100644 --- a/assets/js/c62dfc48.6097708b.js +++ b/assets/js/c62dfc48.4ba15889.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[51],{7704:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-14.0/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/14.0/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/guides/troubleshooting.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/14.0/guides/absolute-imports"}}');var t=s(4848),o=s(8453);const i={id:"troubleshooting",title:"Troubleshooting"},a=void 0,l={},d=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["You can check Jest ",(0,t.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,t.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,t.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,t.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,t.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,t.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,t.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,t.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,t.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,t.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,t.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,t.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,t.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,t.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,t.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,t.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Add this to your ",(0,t.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,t.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,t.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,t.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,t.jsx)(n.code,{children:"JS"})," file with ",(0,t.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,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,t.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,t.jsx)(n.code,{children:"@angular"}),", ",(0,t.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,t.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,t.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,t.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,t.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,t.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,t.jsx)(n.p,{children:"or"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,t.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,t.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,t.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,t.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Install ",(0,t.jsx)(n.code,{children:"babel-jest"}),", ",(0,t.jsx)(n.code,{children:"@babel/core"})," and ",(0,t.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,t.jsxs)(n.li,{children:["Create a ",(0,t.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,t.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Define the usage of ",(0,t.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,t.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,t.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,t.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,t.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,t.jsx)(n.code,{children:"firebase"})," and ",(0,t.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,t.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,t.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,t.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,t.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,t.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,t.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,t.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,t.jsxs)(n.p,{children:["In these cases, a ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,t.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,t.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,t.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.resolver.js\nmodule.exports = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\n...\nresolver: '/src/jest.resolver.js',\n...\n"})}),"\n",(0,t.jsx)(n.h3,{id:"inject-dependencies-with-typescript-interface-or-exported-namespace",children:"Inject dependencies with TypeScript interface or exported namespace"}),"\n",(0,t.jsxs)(n.p,{children:["Please use Angular ",(0,t.jsx)(n.a,{href:"https://angular.dev/api/core/inject",children:"inject"})," instead of ",(0,t.jsx)(n.a,{href:"https://angular.dev/api/core/Inject",children:"@Inject"}),".\nThis is because ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," has caveat when working with class constructor and decorator."]})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>a});var r=s(6540);const t={},o=r.createContext(t);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[51],{7704:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-14.0/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/14.0/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/guides/troubleshooting.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/14.0/guides/absolute-imports"}}');var t=s(4848),o=s(8453);const i={id:"troubleshooting",title:"Troubleshooting"},a=void 0,l={},d=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["You can check Jest ",(0,t.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,t.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,t.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,t.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,t.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,t.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,t.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,t.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,t.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,t.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,t.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,t.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,t.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,t.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,t.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,t.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Add this to your ",(0,t.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,t.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,t.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,t.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,t.jsx)(n.code,{children:"JS"})," file with ",(0,t.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,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,t.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,t.jsx)(n.code,{children:"@angular"}),", ",(0,t.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,t.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,t.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,t.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,t.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,t.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,t.jsx)(n.p,{children:"or"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,t.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,t.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,t.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,t.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Install ",(0,t.jsx)(n.code,{children:"babel-jest"}),", ",(0,t.jsx)(n.code,{children:"@babel/core"})," and ",(0,t.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,t.jsxs)(n.li,{children:["Create a ",(0,t.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,t.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Define the usage of ",(0,t.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,t.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,t.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,t.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,t.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,t.jsx)(n.code,{children:"firebase"})," and ",(0,t.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,t.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,t.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,t.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,t.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,t.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,t.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,t.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,t.jsxs)(n.p,{children:["In these cases, a ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,t.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,t.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,t.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.resolver.js\nmodule.exports = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\n...\nresolver: '/src/jest.resolver.js',\n...\n"})}),"\n",(0,t.jsx)(n.h3,{id:"inject-dependencies-with-typescript-interface-or-exported-namespace",children:"Inject dependencies with TypeScript interface or exported namespace"}),"\n",(0,t.jsxs)(n.p,{children:["Please use Angular ",(0,t.jsx)(n.a,{href:"https://angular.dev/api/core/inject",children:"inject"})," instead of ",(0,t.jsx)(n.a,{href:"https://angular.dev/api/core/Inject",children:"@Inject"}),".\nThis is because ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," has caveat when working with class constructor and decorator."]})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>a});var r=s(6540);const t={},o=r.createContext(t);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/c7279284.46baca95.js b/assets/js/c7279284.ccd077b8.js similarity index 99% rename from assets/js/c7279284.46baca95.js rename to assets/js/c7279284.ccd077b8.js index 5b4affe2a9..c8aa0eb26d 100644 --- a/assets/js/c7279284.46baca95.js +++ b/assets/js/c7279284.ccd077b8.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1605],{3063:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>t,toc:()=>l});const t=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the globals of Jest config object","source":"@site/versioned_docs/version-11.0/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/11.0/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/getting-started/options.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/11.0/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/11.0/getting-started/test-environment"}}');var o=n(4848),r=n(8453);const i={id:"options",title:"Options"},c=void 0,d={},l=[{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function a(e){const s={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.code,{children:"jest-preset-angular"})," uses ",(0,o.jsx)(s.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,o.jsx)(s.code,{children:"globals"})," of Jest config object\nin the ",(0,o.jsx)(s.code,{children:"package.json"})," file of your project, or through a ",(0,o.jsx)(s.code,{children:"jest.config.js"}),", or ",(0,o.jsx)(s.code,{children:"jest.config.ts"})," file."]}),"\n",(0,o.jsxs)(s.p,{children:["More information about ",(0,o.jsx)(s.code,{children:"ts-jest"})," options, see ",(0,o.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,o.jsxs)(s.admonition,{type:"important",children:[(0,o.jsxs)(s.p,{children:["Since ",(0,o.jsx)(s.strong,{children:"v9.0.0"}),", ",(0,o.jsx)(s.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,o.jsx)(s.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,o.jsx)(s.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config"]}),(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n"})})]}),"\n",(0,o.jsx)(s.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"const snapshotSerializers = require('jest-preset-angular/build/serializers');\n\nmodule.exports = {\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n },\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n snapshotSerializers,\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',\n },\n};\n"})}),"\n",(0,o.jsx)(s.admonition,{type:"important",children:(0,o.jsxs)(s.p,{children:["Jest runs with ",(0,o.jsx)(s.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,o.jsx)(s.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,o.jsx)(s.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,o.jsx)(s.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsxs)(s.li,{children:["we're using some ",(0,o.jsx)(s.code,{children:'"globals"'})," to pass information about where our tsconfig.json file is that we'd like to be able to transform HTML files through ",(0,o.jsx)(s.code,{children:"ts-jest"}),"."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,o.jsx)(s.code,{children:"ts"}),"), HTML (",(0,o.jsx)(s.code,{children:"html"}),"), JavaScript (",(0,o.jsx)(s.code,{children:"js"}),"), JSON (",(0,o.jsx)(s.code,{children:"json"}),") and ESM JavaScript (",(0,o.jsx)(s.code,{children:"mjs"}),") files."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses ",(0,o.jsx)(s.code,{children:"RegExp"}),"."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,o.jsx)(s.code,{children:"package.json"})," definitions."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. Note: by default angular adds\nsome angular-specific attributes to the code (like ",(0,o.jsx)(s.code,{children:"ng-reflect-*"}),", ",(0,o.jsx)(s.code,{children:'ng-version="*"'}),", ",(0,o.jsx)(s.code,{children:"_ngcontent-c*"})," etc).\nThis package provides serializer to remove such attributes. This makes snapshots cleaner and more human-readable.\nTo remove such specific attributes use ",(0,o.jsx)(s.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,o.jsx)(s.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,o.jsx)(s.code,{children:".mjs"})," files which come from ",(0,o.jsx)(s.code,{children:"node_modules"}),"."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"transform"'})," \u2013 run every ",(0,o.jsx)(s.code,{children:"TS"}),", ",(0,o.jsx)(s.code,{children:"JS"}),", ",(0,o.jsx)(s.code,{children:"MJS"}),", ",(0,o.jsx)(s.code,{children:"HTML"}),", or ",(0,o.jsx)(s.code,{children:"SVG"})," file through so called ",(0,o.jsx)(s.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function h(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>i,x:()=>c});var t=n(6540);const o={},r=t.createContext(o);function i(e){const s=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function c(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),t.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1605],{3063:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>t,toc:()=>l});const t=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the globals of Jest config object","source":"@site/versioned_docs/version-11.0/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/11.0/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/getting-started/options.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/11.0/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/11.0/getting-started/test-environment"}}');var o=n(4848),r=n(8453);const i={id:"options",title:"Options"},c=void 0,d={},l=[{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function a(e){const s={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.code,{children:"jest-preset-angular"})," uses ",(0,o.jsx)(s.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,o.jsx)(s.code,{children:"globals"})," of Jest config object\nin the ",(0,o.jsx)(s.code,{children:"package.json"})," file of your project, or through a ",(0,o.jsx)(s.code,{children:"jest.config.js"}),", or ",(0,o.jsx)(s.code,{children:"jest.config.ts"})," file."]}),"\n",(0,o.jsxs)(s.p,{children:["More information about ",(0,o.jsx)(s.code,{children:"ts-jest"})," options, see ",(0,o.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,o.jsxs)(s.admonition,{type:"important",children:[(0,o.jsxs)(s.p,{children:["Since ",(0,o.jsx)(s.strong,{children:"v9.0.0"}),", ",(0,o.jsx)(s.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,o.jsx)(s.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,o.jsx)(s.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config"]}),(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n"})})]}),"\n",(0,o.jsx)(s.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"const snapshotSerializers = require('jest-preset-angular/build/serializers');\n\nmodule.exports = {\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n },\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n snapshotSerializers,\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',\n },\n};\n"})}),"\n",(0,o.jsx)(s.admonition,{type:"important",children:(0,o.jsxs)(s.p,{children:["Jest runs with ",(0,o.jsx)(s.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,o.jsx)(s.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,o.jsx)(s.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,o.jsx)(s.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsxs)(s.li,{children:["we're using some ",(0,o.jsx)(s.code,{children:'"globals"'})," to pass information about where our tsconfig.json file is that we'd like to be able to transform HTML files through ",(0,o.jsx)(s.code,{children:"ts-jest"}),"."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,o.jsx)(s.code,{children:"ts"}),"), HTML (",(0,o.jsx)(s.code,{children:"html"}),"), JavaScript (",(0,o.jsx)(s.code,{children:"js"}),"), JSON (",(0,o.jsx)(s.code,{children:"json"}),") and ESM JavaScript (",(0,o.jsx)(s.code,{children:"mjs"}),") files."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses ",(0,o.jsx)(s.code,{children:"RegExp"}),"."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,o.jsx)(s.code,{children:"package.json"})," definitions."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. Note: by default angular adds\nsome angular-specific attributes to the code (like ",(0,o.jsx)(s.code,{children:"ng-reflect-*"}),", ",(0,o.jsx)(s.code,{children:'ng-version="*"'}),", ",(0,o.jsx)(s.code,{children:"_ngcontent-c*"})," etc).\nThis package provides serializer to remove such attributes. This makes snapshots cleaner and more human-readable.\nTo remove such specific attributes use ",(0,o.jsx)(s.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,o.jsx)(s.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,o.jsx)(s.code,{children:".mjs"})," files which come from ",(0,o.jsx)(s.code,{children:"node_modules"}),"."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"transform"'})," \u2013 run every ",(0,o.jsx)(s.code,{children:"TS"}),", ",(0,o.jsx)(s.code,{children:"JS"}),", ",(0,o.jsx)(s.code,{children:"MJS"}),", ",(0,o.jsx)(s.code,{children:"HTML"}),", or ",(0,o.jsx)(s.code,{children:"SVG"})," file through so called ",(0,o.jsx)(s.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function h(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>i,x:()=>c});var t=n(6540);const o={},r=t.createContext(o);function i(e){const s=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function c(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),t.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/cd9c57cb.76534b4f.js b/assets/js/cd9c57cb.32889a3d.js similarity index 97% rename from assets/js/cd9c57cb.76534b4f.js rename to assets/js/cd9c57cb.32889a3d.js index 563c241b73..35b796d98d 100644 --- a/assets/js/cd9c57cb.76534b4f.js +++ b/assets/js/cd9c57cb.32889a3d.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5297],{4710:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/versioned_docs/version-10.x/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/10.x/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/guides/absolute-imports.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/10.x/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/10.x/guides/troubleshooting"}}');var i=s(4848),n=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,i.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,i.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,i.jsxs)(t.p,{children:["More information see ",(0,i.jsx)(t.code,{children:"ts-jest"})," ",(0,i.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const i={},n=o.createContext(i);function r(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5297],{4710:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/versioned_docs/version-10.x/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/10.x/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/guides/absolute-imports.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/10.x/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/10.x/guides/troubleshooting"}}');var i=s(4848),n=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,i.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,i.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,i.jsxs)(t.p,{children:["More information see ",(0,i.jsx)(t.code,{children:"ts-jest"})," ",(0,i.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const i={},n=o.createContext(i);function r(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/d069ae84.925723c3.js b/assets/js/d069ae84.49d8ed7e.js similarity index 99% rename from assets/js/d069ae84.925723c3.js rename to assets/js/d069ae84.49d8ed7e.js index c614175ead..456d1c273f 100644 --- a/assets/js/d069ae84.925723c3.js +++ b/assets/js/d069ae84.49d8ed7e.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1454],{9453:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"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-11.0/guides/angular-13+.md","sourceDirName":"guides","slug":"/guides/angular-13+","permalink":"/jest-preset-angular/docs/11.0/guides/angular-13+","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/guides/angular-13+.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"angular-13+","title":"Angular >=13"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/11.0/guides/angular-ivy"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/11.0/guides/esm-support"}}');var t=n(4848),o=n(8453);const i={id:"angular-13+",title:"Angular >=13"},a=void 0,l={},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}];function c(e){const s={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,t.jsx)(s.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,t.jsx)(s.code,{children:"CommonJS"})," mode with ",(0,t.jsx)(s.strong,{children:"Angular 13"})," using ",(0,t.jsx)(s.a,{href:"/jest-preset-angular/docs/11.0/getting-started/presets",children:"default preset"}),".\nJest ESM support with ",(0,t.jsx)(s.strong,{children:"Angular 13"})," is new and may have issues."]}),"\n",(0,t.jsxs)(s.p,{children:["Starting from ",(0,t.jsx)(s.strong,{children:"v11.0.0"}),", ",(0,t.jsx)(s.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,t.jsx)(s.strong,{children:"Angular 13"}),":"]}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"ng-jest-resolver"})," is introduced as a custom Jest resolver to resolve ",(0,t.jsx)(s.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"moduleFileExtensions"})," is updated to include ",(0,t.jsx)(s.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,t.jsx)(s.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"transform"})," is updated to include ",(0,t.jsx)(s.code,{children:".mjs"})," extension to transform to ",(0,t.jsx)(s.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(s.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:["Upgrade the project to ",(0,t.jsx)(s.strong,{children:"Angular 13"})," following ",(0,t.jsx)(s.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsx)(s.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})}),"\n",(0,t.jsx)(s.p,{children:"there are no migration steps required"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["If one is ",(0,t.jsx)(s.strong,{children:"NOT"})," having ",(0,t.jsx)(s.code,{children:"preset: 'jest-preset-angular'"})," in Jest config, the config needs to be updated with new values for\n",(0,t.jsx)(s.code,{children:"resolver"}),", ",(0,t.jsx)(s.code,{children:"transformIgnorePatterns"})," and ",(0,t.jsx)(s.code,{children:"transform"}),":"]}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',\n },\n};\n"})}),"\n",(0,t.jsx)(s.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,t.jsxs)(s.p,{children:["ES Modules support is new and may encounter issues. See ",(0,t.jsx)(s.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)(s.p,{children:["Your ",(0,t.jsx)(s.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"const { pathsToModuleNameMapper } = require('ts-jest/utils');\nconst { paths } = require('./tsconfig.json').compilerOptions;\n\n/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */\nmodule.exports = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n globals: {\n 'ts-jest': {\n useESM: true,\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n tsconfig: '/tsconfig-esm.spec.json',\n },\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})}),"\n",(0,t.jsxs)(s.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,t.jsx)(s.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,t.jsx)(s.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,t.jsxs)(s.p,{children:["The ",(0,t.jsx)(s.code,{children:"jest-preset-angular/setup-jest"})," file doesn't work with ESM, because it uses ",(0,t.jsx)(s.code,{children:"require"}),". For now you should skip using this file, and replace the contents of your ",(0,t.jsx)(s.code,{children:"setup-jest.ts"})," with:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'zone.js';\nimport 'zone.js/testing';\nimport './jest-global-mocks';\n\nimport { getTestBed } from '@angular/core/testing';\nimport { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';\n\ngetTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());\n"})}),"\n",(0,t.jsx)(s.h2,{id:"potential-issues-with-angular-13-esm-package-format-and-workaround",children:"Potential issues with Angular 13 ESM package format and workaround"}),"\n",(0,t.jsxs)(s.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,t.jsx)(s.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["Angular 13 ESM package format makes Jest resolution not able to resolve the correct ",(0,t.jsx)(s.code,{children:".mjs"})," files. Even though we introduced\n",(0,t.jsx)(s.code,{children:"ng-jest-resolver"})," as a part of the preset, this resolver won't work for all scenarios. One might get Jest error like"]}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,t.jsxs)(s.p,{children:["To fix this issue, one needs to add ",(0,t.jsx)(s.code,{children:"mjs"})," to ",(0,t.jsx)(s.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n"})}),"\n",(0,t.jsxs)(s.p,{children:["If the issue still ",(0,t.jsx)(s.strong,{children:"persists"}),", you might need to configure ",(0,t.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring",children:"moduleNameMapper"}),"\nor extend the behavior the default ",(0,t.jsx)(s.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/src/resolvers/ng-jest-resolver.ts",children:"resolver"})," of this preset."]}),"\n",(0,t.jsx)(s.h3,{id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",children:"Usage with Angular libraries which are built with Angular CLI 13"}),"\n",(0,t.jsxs)(s.p,{children:["Besides, the changes in Angular packages themselves, ",(0,t.jsx)(s.strong,{children:"Angular"})," libraries which are built with ",(0,t.jsx)(s.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,t.jsx)(s.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,t.jsx)(s.strong,{children:"CommonJS"})," mode."]}),"\n",(0,t.jsxs)(s.p,{children:["To fix this issue, one should modify ",(0,t.jsx)(s.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n"})})]})}function u(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>i,x:()=>a});var r=n(6540);const t={},o=r.createContext(t);function i(e){const s=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1454],{9453:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"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-11.0/guides/angular-13+.md","sourceDirName":"guides","slug":"/guides/angular-13+","permalink":"/jest-preset-angular/docs/11.0/guides/angular-13+","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/guides/angular-13+.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"angular-13+","title":"Angular >=13"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/11.0/guides/angular-ivy"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/11.0/guides/esm-support"}}');var t=n(4848),o=n(8453);const i={id:"angular-13+",title:"Angular >=13"},a=void 0,l={},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}];function c(e){const s={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,t.jsx)(s.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,t.jsx)(s.code,{children:"CommonJS"})," mode with ",(0,t.jsx)(s.strong,{children:"Angular 13"})," using ",(0,t.jsx)(s.a,{href:"/jest-preset-angular/docs/11.0/getting-started/presets",children:"default preset"}),".\nJest ESM support with ",(0,t.jsx)(s.strong,{children:"Angular 13"})," is new and may have issues."]}),"\n",(0,t.jsxs)(s.p,{children:["Starting from ",(0,t.jsx)(s.strong,{children:"v11.0.0"}),", ",(0,t.jsx)(s.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,t.jsx)(s.strong,{children:"Angular 13"}),":"]}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"ng-jest-resolver"})," is introduced as a custom Jest resolver to resolve ",(0,t.jsx)(s.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"moduleFileExtensions"})," is updated to include ",(0,t.jsx)(s.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,t.jsx)(s.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"transform"})," is updated to include ",(0,t.jsx)(s.code,{children:".mjs"})," extension to transform to ",(0,t.jsx)(s.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(s.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:["Upgrade the project to ",(0,t.jsx)(s.strong,{children:"Angular 13"})," following ",(0,t.jsx)(s.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsx)(s.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})}),"\n",(0,t.jsx)(s.p,{children:"there are no migration steps required"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["If one is ",(0,t.jsx)(s.strong,{children:"NOT"})," having ",(0,t.jsx)(s.code,{children:"preset: 'jest-preset-angular'"})," in Jest config, the config needs to be updated with new values for\n",(0,t.jsx)(s.code,{children:"resolver"}),", ",(0,t.jsx)(s.code,{children:"transformIgnorePatterns"})," and ",(0,t.jsx)(s.code,{children:"transform"}),":"]}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',\n },\n};\n"})}),"\n",(0,t.jsx)(s.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,t.jsxs)(s.p,{children:["ES Modules support is new and may encounter issues. See ",(0,t.jsx)(s.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)(s.p,{children:["Your ",(0,t.jsx)(s.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"const { pathsToModuleNameMapper } = require('ts-jest/utils');\nconst { paths } = require('./tsconfig.json').compilerOptions;\n\n/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */\nmodule.exports = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n globals: {\n 'ts-jest': {\n useESM: true,\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n tsconfig: '/tsconfig-esm.spec.json',\n },\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})}),"\n",(0,t.jsxs)(s.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,t.jsx)(s.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,t.jsx)(s.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,t.jsxs)(s.p,{children:["The ",(0,t.jsx)(s.code,{children:"jest-preset-angular/setup-jest"})," file doesn't work with ESM, because it uses ",(0,t.jsx)(s.code,{children:"require"}),". For now you should skip using this file, and replace the contents of your ",(0,t.jsx)(s.code,{children:"setup-jest.ts"})," with:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'zone.js';\nimport 'zone.js/testing';\nimport './jest-global-mocks';\n\nimport { getTestBed } from '@angular/core/testing';\nimport { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';\n\ngetTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());\n"})}),"\n",(0,t.jsx)(s.h2,{id:"potential-issues-with-angular-13-esm-package-format-and-workaround",children:"Potential issues with Angular 13 ESM package format and workaround"}),"\n",(0,t.jsxs)(s.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,t.jsx)(s.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["Angular 13 ESM package format makes Jest resolution not able to resolve the correct ",(0,t.jsx)(s.code,{children:".mjs"})," files. Even though we introduced\n",(0,t.jsx)(s.code,{children:"ng-jest-resolver"})," as a part of the preset, this resolver won't work for all scenarios. One might get Jest error like"]}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,t.jsxs)(s.p,{children:["To fix this issue, one needs to add ",(0,t.jsx)(s.code,{children:"mjs"})," to ",(0,t.jsx)(s.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n"})}),"\n",(0,t.jsxs)(s.p,{children:["If the issue still ",(0,t.jsx)(s.strong,{children:"persists"}),", you might need to configure ",(0,t.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring",children:"moduleNameMapper"}),"\nor extend the behavior the default ",(0,t.jsx)(s.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/src/resolvers/ng-jest-resolver.ts",children:"resolver"})," of this preset."]}),"\n",(0,t.jsx)(s.h3,{id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",children:"Usage with Angular libraries which are built with Angular CLI 13"}),"\n",(0,t.jsxs)(s.p,{children:["Besides, the changes in Angular packages themselves, ",(0,t.jsx)(s.strong,{children:"Angular"})," libraries which are built with ",(0,t.jsx)(s.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,t.jsx)(s.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,t.jsx)(s.strong,{children:"CommonJS"})," mode."]}),"\n",(0,t.jsxs)(s.p,{children:["To fix this issue, one should modify ",(0,t.jsx)(s.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n"})})]})}function u(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>i,x:()=>a});var r=n(6540);const t={},o=r.createContext(t);function i(e){const s=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/d19b9e8a.e8c1b830.js b/assets/js/d19b9e8a.4a62310f.js similarity index 97% rename from assets/js/d19b9e8a.e8c1b830.js rename to assets/js/d19b9e8a.4a62310f.js index e3a297344b..37766ff569 100644 --- a/assets/js/d19b9e8a.e8c1b830.js +++ b/assets/js/d19b9e8a.4a62310f.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5240],{4521:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>c});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/docs/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/next/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/absolute-imports.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/next/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/next/guides/troubleshooting"}}');var n=s(4848),i=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},c=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,i.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,n.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,n.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,n.jsxs)(t.p,{children:["More information see ",(0,n.jsx)(t.code,{children:"ts-jest"})," ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const n={},i=o.createContext(n);function r(e){const t=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:r(e.components),o.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5240],{4521:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>c});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/docs/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/next/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/absolute-imports.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/next/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/next/guides/troubleshooting"}}');var n=s(4848),i=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},c=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,i.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,n.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,n.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,n.jsxs)(t.p,{children:["More information see ",(0,n.jsx)(t.code,{children:"ts-jest"})," ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const n={},i=o.createContext(n);function r(e){const t=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:r(e.components),o.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/d1b207fe.cb92fc8f.js b/assets/js/d1b207fe.45f700f4.js similarity index 99% rename from assets/js/d1b207fe.cb92fc8f.js rename to assets/js/d1b207fe.45f700f4.js index 8cb7eef414..0a8963aa90 100644 --- a/assets/js/d1b207fe.cb92fc8f.js +++ b/assets/js/d1b207fe.45f700f4.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1090],{7972:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-13.0/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/13.0/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/guides/troubleshooting.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/13.0/guides/absolute-imports"}}');var t=s(4848),o=s(8453);const i={id:"troubleshooting",title:"Troubleshooting"},a=void 0,l={},d=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["You can check Jest ",(0,t.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,t.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,t.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,t.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,t.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,t.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,t.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,t.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,t.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,t.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,t.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,t.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,t.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,t.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,t.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,t.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Add this to your ",(0,t.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,t.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,t.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,t.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,t.jsx)(n.code,{children:"JS"})," file with ",(0,t.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,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,t.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,t.jsx)(n.code,{children:"@angular"}),", ",(0,t.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,t.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,t.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,t.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,t.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,t.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,t.jsx)(n.p,{children:"or"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,t.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,t.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,t.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,t.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Install ",(0,t.jsx)(n.code,{children:"babel-jest"}),", ",(0,t.jsx)(n.code,{children:"@babel/core"})," and ",(0,t.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,t.jsxs)(n.li,{children:["Create a ",(0,t.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,t.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Define the usage of ",(0,t.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,t.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,t.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,t.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,t.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,t.jsx)(n.code,{children:"firebase"})," and ",(0,t.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,t.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,t.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,t.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,t.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,t.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,t.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,t.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,t.jsxs)(n.p,{children:["In these cases, a ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,t.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,t.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,t.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.resolver.js\nmodule.exports = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\n...\nresolver: '/src/jest.resolver.js',\n...\n"})}),"\n",(0,t.jsx)(n.h3,{id:"inject-dependencies-with-typescript-interface-or-exported-namespace",children:"Inject dependencies with TypeScript interface or exported namespace"}),"\n",(0,t.jsxs)(n.p,{children:["Please use Angular ",(0,t.jsx)(n.a,{href:"https://angular.io/api/core/inject",children:"inject"})," instead of ",(0,t.jsx)(n.a,{href:"https://angular.io/api/core/Inject",children:"@Inject"}),".\nThis is because ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," has caveat when working with class constructor and decorator."]})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>a});var r=s(6540);const t={},o=r.createContext(t);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1090],{7972:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-13.0/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/13.0/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/guides/troubleshooting.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/13.0/guides/absolute-imports"}}');var t=s(4848),o=s(8453);const i={id:"troubleshooting",title:"Troubleshooting"},a=void 0,l={},d=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["You can check Jest ",(0,t.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,t.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,t.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,t.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,t.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,t.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,t.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,t.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,t.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,t.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,t.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,t.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,t.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,t.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,t.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,t.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Add this to your ",(0,t.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,t.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,t.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,t.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,t.jsx)(n.code,{children:"JS"})," file with ",(0,t.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,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,t.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,t.jsx)(n.code,{children:"@angular"}),", ",(0,t.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,t.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,t.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,t.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,t.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,t.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,t.jsx)(n.p,{children:"or"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,t.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,t.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,t.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,t.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Install ",(0,t.jsx)(n.code,{children:"babel-jest"}),", ",(0,t.jsx)(n.code,{children:"@babel/core"})," and ",(0,t.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,t.jsxs)(n.li,{children:["Create a ",(0,t.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,t.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Define the usage of ",(0,t.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,t.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,t.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,t.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,t.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,t.jsx)(n.code,{children:"firebase"})," and ",(0,t.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,t.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,t.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,t.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,t.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,t.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,t.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,t.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,t.jsxs)(n.p,{children:["In these cases, a ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,t.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,t.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,t.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.resolver.js\nmodule.exports = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\n...\nresolver: '/src/jest.resolver.js',\n...\n"})}),"\n",(0,t.jsx)(n.h3,{id:"inject-dependencies-with-typescript-interface-or-exported-namespace",children:"Inject dependencies with TypeScript interface or exported namespace"}),"\n",(0,t.jsxs)(n.p,{children:["Please use Angular ",(0,t.jsx)(n.a,{href:"https://angular.io/api/core/inject",children:"inject"})," instead of ",(0,t.jsx)(n.a,{href:"https://angular.io/api/core/Inject",children:"@Inject"}),".\nThis is because ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," has caveat when working with class constructor and decorator."]})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>a});var r=s(6540);const t={},o=r.createContext(t);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/d2df711a.0dce75ee.js b/assets/js/d2df711a.b77819dc.js similarity index 97% rename from assets/js/d2df711a.0dce75ee.js rename to assets/js/d2df711a.b77819dc.js index 2a7a09257f..61eb232bf2 100644 --- a/assets/js/d2df711a.0dce75ee.js +++ b/assets/js/d2df711a.b77819dc.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2601],{7498:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/versioned_docs/version-11.0/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/11.0/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/guides/absolute-imports.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/11.0/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/11.0/guides/troubleshooting"}}');var i=s(4848),n=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,i.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,i.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,i.jsxs)(t.p,{children:["More information see ",(0,i.jsx)(t.code,{children:"ts-jest"})," ",(0,i.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const i={},n=o.createContext(i);function r(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2601],{7498:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/versioned_docs/version-11.0/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/11.0/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/guides/absolute-imports.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/11.0/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/11.0/guides/troubleshooting"}}');var i=s(4848),n=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,i.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,i.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,i.jsxs)(t.p,{children:["More information see ",(0,i.jsx)(t.code,{children:"ts-jest"})," ",(0,i.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const i={},n=o.createContext(i);function r(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/d38e9ca0.3eae4631.js b/assets/js/d38e9ca0.c6b4fb8b.js similarity index 99% rename from assets/js/d38e9ca0.3eae4631.js rename to assets/js/d38e9ca0.c6b4fb8b.js index 17fb26f746..a43829dd04 100644 --- a/assets/js/d38e9ca0.3eae4631.js +++ b/assets/js/d38e9ca0.c6b4fb8b.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8782],{3358:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>p,default:()=>m,frontMatter:()=>c,metadata:()=>n,toc:()=>u});const n=JSON.parse('{"id":"getting-started/testbed-environment","title":"TestBed environment","description":"Angular provides a powerful testing utility called TestBed,","source":"@site/versioned_docs/version-14.5/getting-started/testbed-environment.md","sourceDirName":"getting-started","slug":"/getting-started/testbed-environment","permalink":"/jest-preset-angular/docs/getting-started/testbed-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/getting-started/testbed-environment.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"testbed-environment","title":"TestBed environment"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/getting-started/test-environment"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/guides/angular-ivy"}}');var r=s(4848),i=s(8453),l=s(1470),o=s(9365),a=s(4252);const c={id:"testbed-environment",title:"TestBed environment"},p=void 0,d={},u=[{value:"Functions",id:"functions",level:2},{value:"setupZoneTestEnv(options)",id:"setupzonetestenvoptions",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Example:",id:"example",level:4},{value:"setupZonelessTestEnv(options)",id:"setupzonelesstestenvoptions",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Example:",id:"example-1",level:4}];function h(e){const t={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["Angular provides a powerful testing utility called ",(0,r.jsx)(t.a,{href:"https://angular.dev/api/core/testing/TestBed",children:"TestBed"}),",\nwhich allows to configure and initialize an environment for unit testing and provides methods for creating components and services in unit tests."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," provides utility functions to simplify setting up ",(0,r.jsx)(t.code,{children:"TestBed"})," environment. These below utility functions\nsupport both ",(0,r.jsx)(t.strong,{children:"zone-based"})," and ",(0,r.jsx)(t.strong,{children:"zoneless"})," environments, catering to different testing needs."]}),"\n",(0,r.jsx)(t.h2,{id:"functions",children:"Functions"}),"\n","\n",(0,r.jsx)(a.A,{toc:u.slice(1)}),"\n",(0,r.jsx)(t.hr,{}),"\n",(0,r.jsx)(t.h3,{id:"setupzonetestenvoptions",children:(0,r.jsx)(t.code,{children:"setupZoneTestEnv(options)"})}),"\n",(0,r.jsxs)(t.p,{children:["Configures an environment that uses ",(0,r.jsx)(t.code,{children:"zone.js"}),", which is the mechanism for tracking asynchronous operations.\nIt is suitable for most Angular applications that rely on ",(0,r.jsx)(t.code,{children:"zone.js"})," for change detection and other framework features."]}),"\n",(0,r.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,r.jsx)(t.h4,{id:"parameters",children:"Parameters"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"options"}),(0,r.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,r.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,r.jsx)(t.h4,{id:"example",children:"Example:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"setupzonelesstestenvoptions",children:(0,r.jsx)(t.code,{children:"setupZonelessTestEnv(options)"})}),"\n",(0,r.jsxs)(t.p,{children:["Configures an environment that ",(0,r.jsx)(t.strong,{children:"DOESN'T"})," use ",(0,r.jsx)(t.code,{children:"zone.js"}),", as described in ",(0,r.jsx)(t.a,{href:"https://angular.dev/guide/experimental/zoneless",children:"Angular experimental zoneless guide"}),".\nIt is designed for projects that have disabled ",(0,r.jsx)(t.code,{children:"zone.js"}),", which can lead to improved performance and simplified testing."]}),"\n",(0,r.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,r.jsx)(t.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"options"}),(0,r.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,r.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,r.jsx)(t.h4,{id:"example-1",children:"Example:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless/index.mjs';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]})]})}function m(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8782],{3358:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>p,default:()=>m,frontMatter:()=>c,metadata:()=>n,toc:()=>u});const n=JSON.parse('{"id":"getting-started/testbed-environment","title":"TestBed environment","description":"Angular provides a powerful testing utility called TestBed,","source":"@site/versioned_docs/version-14.5/getting-started/testbed-environment.md","sourceDirName":"getting-started","slug":"/getting-started/testbed-environment","permalink":"/jest-preset-angular/docs/getting-started/testbed-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/getting-started/testbed-environment.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"testbed-environment","title":"TestBed environment"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/getting-started/test-environment"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/guides/angular-ivy"}}');var r=s(4848),i=s(8453),l=s(1470),o=s(9365),a=s(4252);const c={id:"testbed-environment",title:"TestBed environment"},p=void 0,d={},u=[{value:"Functions",id:"functions",level:2},{value:"setupZoneTestEnv(options)",id:"setupzonetestenvoptions",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Example:",id:"example",level:4},{value:"setupZonelessTestEnv(options)",id:"setupzonelesstestenvoptions",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Example:",id:"example-1",level:4}];function h(e){const t={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["Angular provides a powerful testing utility called ",(0,r.jsx)(t.a,{href:"https://angular.dev/api/core/testing/TestBed",children:"TestBed"}),",\nwhich allows to configure and initialize an environment for unit testing and provides methods for creating components and services in unit tests."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," provides utility functions to simplify setting up ",(0,r.jsx)(t.code,{children:"TestBed"})," environment. These below utility functions\nsupport both ",(0,r.jsx)(t.strong,{children:"zone-based"})," and ",(0,r.jsx)(t.strong,{children:"zoneless"})," environments, catering to different testing needs."]}),"\n",(0,r.jsx)(t.h2,{id:"functions",children:"Functions"}),"\n","\n",(0,r.jsx)(a.A,{toc:u.slice(1)}),"\n",(0,r.jsx)(t.hr,{}),"\n",(0,r.jsx)(t.h3,{id:"setupzonetestenvoptions",children:(0,r.jsx)(t.code,{children:"setupZoneTestEnv(options)"})}),"\n",(0,r.jsxs)(t.p,{children:["Configures an environment that uses ",(0,r.jsx)(t.code,{children:"zone.js"}),", which is the mechanism for tracking asynchronous operations.\nIt is suitable for most Angular applications that rely on ",(0,r.jsx)(t.code,{children:"zone.js"})," for change detection and other framework features."]}),"\n",(0,r.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,r.jsx)(t.h4,{id:"parameters",children:"Parameters"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"options"}),(0,r.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,r.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,r.jsx)(t.h4,{id:"example",children:"Example:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"setupzonelesstestenvoptions",children:(0,r.jsx)(t.code,{children:"setupZonelessTestEnv(options)"})}),"\n",(0,r.jsxs)(t.p,{children:["Configures an environment that ",(0,r.jsx)(t.strong,{children:"DOESN'T"})," use ",(0,r.jsx)(t.code,{children:"zone.js"}),", as described in ",(0,r.jsx)(t.a,{href:"https://angular.dev/guide/experimental/zoneless",children:"Angular experimental zoneless guide"}),".\nIt is designed for projects that have disabled ",(0,r.jsx)(t.code,{children:"zone.js"}),", which can lead to improved performance and simplified testing."]}),"\n",(0,r.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,r.jsx)(t.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"options"}),(0,r.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,r.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,r.jsx)(t.h4,{id:"example-1",children:"Example:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless/index.mjs';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]})]})}function m(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}}}]); \ No newline at end of file diff --git a/assets/js/d4836a8e.ae391433.js b/assets/js/d4836a8e.6d0b803f.js similarity index 97% rename from assets/js/d4836a8e.ae391433.js rename to assets/js/d4836a8e.6d0b803f.js index 247d58fb8d..b0a99d06a5 100644 --- a/assets/js/d4836a8e.ae391433.js +++ b/assets/js/d4836a8e.6d0b803f.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[106],{248:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>i,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/docs/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/next/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/esm-support.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/next/guides/angular-13+"},"next":{"title":"JSDOM environment","permalink":"/jest-preset-angular/docs/next/guides/jsdom-environment"}}');var r=t(4848),o=t(8453);const i={id:"esm-support",title:"ESM Support"},a=void 0,l={},d=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function c(e){const s={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:["To use ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,r.jsx)(s.code,{children:"ts-jest"})," config option ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["There is also a ",(0,r.jsx)(s.a,{href:"/jest-preset-angular/docs/next/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,r.jsx)(s.admonition,{type:"tip",children:(0,r.jsxs)(s.p,{children:["We have ",(0,r.jsx)(s.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example apps"})," which contains base ESM setup to work with Jest and Angular."]})}),"\n",(0,r.jsx)(s.p,{children:"Besides, there is utility function to ensure that Jest can set up test environment properly."}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})}),"\n",(0,r.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,r.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts"',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n moduleNameMapper: {\n tslib: 'tslib/tslib.es6.js',\n '^rxjs': '/node_modules/rxjs/dist/bundles/rxjs.umd.js',\n },\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n useESM: true,\n },\n ],\n },\n} satisfies Config;\n"})}),"\n",(0,r.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,r.jsxs)(s.admonition,{type:"tip",children:[(0,r.jsxs)(s.p,{children:["Jest will attempt to load ",(0,r.jsx)(s.strong,{children:"ESM"})," files from ",(0,r.jsx)(s.code,{children:"node_modules"})," with default ",(0,r.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,r.jsx)(s.strong,{children:"ESM"})," built files or ",(0,r.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,r.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,r.jsxs)(s.p,{children:["To fix that, one can use ",(0,r.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,r.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts"',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n //...\n ...presets.createEsmPreset(),\n moduleNameMapper: {\n tslib: 'tslib/tslib.es6.js',\n '^rxjs': '/node_modules/rxjs/dist/bundles/rxjs.umd.js',\n },\n} satisfies Config;\n"})})]})}function p(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>i,x:()=>a});var n=t(6540);const r={},o=n.createContext(r);function i(e){const s=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[106],{248:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>i,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/docs/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/next/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/esm-support.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/next/guides/angular-13+"},"next":{"title":"JSDOM environment","permalink":"/jest-preset-angular/docs/next/guides/jsdom-environment"}}');var r=t(4848),o=t(8453);const i={id:"esm-support",title:"ESM Support"},a=void 0,l={},d=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function c(e){const s={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:["To use ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,r.jsx)(s.code,{children:"ts-jest"})," config option ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["There is also a ",(0,r.jsx)(s.a,{href:"/jest-preset-angular/docs/next/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,r.jsx)(s.admonition,{type:"tip",children:(0,r.jsxs)(s.p,{children:["We have ",(0,r.jsx)(s.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example apps"})," which contains base ESM setup to work with Jest and Angular."]})}),"\n",(0,r.jsx)(s.p,{children:"Besides, there is utility function to ensure that Jest can set up test environment properly."}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})}),"\n",(0,r.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,r.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts"',children:"import type { Config } from 'jest';\n\nexport default {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n moduleNameMapper: {\n tslib: 'tslib/tslib.es6.js',\n '^rxjs': '/node_modules/rxjs/dist/bundles/rxjs.umd.js',\n },\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n useESM: true,\n },\n ],\n },\n} satisfies Config;\n"})}),"\n",(0,r.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,r.jsxs)(s.admonition,{type:"tip",children:[(0,r.jsxs)(s.p,{children:["Jest will attempt to load ",(0,r.jsx)(s.strong,{children:"ESM"})," files from ",(0,r.jsx)(s.code,{children:"node_modules"})," with default ",(0,r.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,r.jsx)(s.strong,{children:"ESM"})," built files or ",(0,r.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,r.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,r.jsxs)(s.p,{children:["To fix that, one can use ",(0,r.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,r.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts"',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n //...\n ...presets.createEsmPreset(),\n moduleNameMapper: {\n tslib: 'tslib/tslib.es6.js',\n '^rxjs': '/node_modules/rxjs/dist/bundles/rxjs.umd.js',\n },\n} satisfies Config;\n"})})]})}function p(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>i,x:()=>a});var n=t(6540);const r={},o=n.createContext(r);function i(e){const s=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/d720bb60.d9f33a0c.js b/assets/js/d720bb60.e562256d.js similarity index 97% rename from assets/js/d720bb60.d9f33a0c.js rename to assets/js/d720bb60.e562256d.js index 0e2ff1f5ef..77f18d8607 100644 --- a/assets/js/d720bb60.d9f33a0c.js +++ b/assets/js/d720bb60.e562256d.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5596],{6281:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>d,frontMatter:()=>o,metadata:()=>s,toc:()=>l});const s=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"Starting from v9.0.0+, jest-preset-angular is fully compatible with Angular Ivy. To make sure that Jest uses the","source":"@site/versioned_docs/version-9.x/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/9.x/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/guides/angular-ivy.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/9.x/getting-started/test-environment"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/9.x/guides/esm-support"}}');var r=n(4848),i=n(8453);const o={id:"angular-ivy",title:"Angular Ivy"},a=void 0,c={},l=[];function u(e){const t={code:"code",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["Starting from ",(0,r.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,r.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,r.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," also provides util script to help you to run ",(0,r.jsx)(t.code,{children:"ngcc"})," with Jest but this script only works via the\nJavaScript version of Jest config"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nrequire('jest-preset-angular/ngcc-jest-processor');\n\nmodule.exports = {\n // [...]\n};\n"})})]})}function d(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>a});var s=n(6540);const r={},i=s.createContext(r);function o(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5596],{6281:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>d,frontMatter:()=>o,metadata:()=>s,toc:()=>l});const s=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"Starting from v9.0.0+, jest-preset-angular is fully compatible with Angular Ivy. To make sure that Jest uses the","source":"@site/versioned_docs/version-9.x/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/9.x/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/guides/angular-ivy.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/9.x/getting-started/test-environment"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/9.x/guides/esm-support"}}');var r=n(4848),i=n(8453);const o={id:"angular-ivy",title:"Angular Ivy"},a=void 0,c={},l=[];function u(e){const t={code:"code",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["Starting from ",(0,r.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,r.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,r.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," also provides util script to help you to run ",(0,r.jsx)(t.code,{children:"ngcc"})," with Jest but this script only works via the\nJavaScript version of Jest config"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nrequire('jest-preset-angular/ngcc-jest-processor');\n\nmodule.exports = {\n // [...]\n};\n"})})]})}function d(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>a});var s=n(6540);const r={},i=s.createContext(r);function o(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/d9330f66.74a7f0b4.js b/assets/js/d9330f66.8e674966.js similarity index 99% rename from assets/js/d9330f66.74a7f0b4.js rename to assets/js/d9330f66.8e674966.js index 2fb255d25c..635731f551 100644 --- a/assets/js/d9330f66.74a7f0b4.js +++ b/assets/js/d9330f66.8e674966.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8678],{7587:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>h,frontMatter:()=>l,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/versioned_docs/version-13.0/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/13.0/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/guides/esm-support.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/13.0/guides/angular-13+"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/13.0/guides/jsdom-version"}}');var r=s(4848),a=s(8453),o=s(1470),i=s(9365);const l={id:"esm-support",title:"ESM Support"},u=void 0,c={},d=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["To use ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,r.jsx)(t.code,{children:"ts-jest"})," config option ",(0,r.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["There is also a ",(0,r.jsx)(t.a,{href:"/jest-preset-angular/docs/13.0/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,r.jsx)(t.admonition,{type:"tip",children:(0,r.jsxs)(t.p,{children:["We have ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example apps"})," which contains base ESM setup to work with Jest and Angular."]})}),"\n",(0,r.jsxs)(t.p,{children:["Besides, there is ",(0,r.jsx)(t.code,{children:"setup-jest.mjs"})," to add to Jest setup file to ensure that Jest can set up test environment properly."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,r.jsx)(t.h3,{id:"examples",children:"Examples"}),"\n",(0,r.jsx)(t.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n transform: {\n '^.+\\\\.(ts|js|html)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html)$',\n useESM: true,\n },\n ],\n },\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n useESM: true,\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["Jest will attempt to load ",(0,r.jsx)(t.strong,{children:"ESM"})," files from ",(0,r.jsx)(t.code,{children:"node_modules"})," with default ",(0,r.jsx)(t.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,r.jsx)(t.strong,{children:"ESM"})," built files or ",(0,r.jsx)(t.strong,{children:"ESM"})," files which are outside ",(0,r.jsx)(t.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,r.jsxs)(t.p,{children:["To fix that, one can use ",(0,r.jsx)(t.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,r.jsx)(t.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig = {\n //...\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,s)=>{s.d(t,{A:()=>o});s(6540);var n=s(4164);const r={tabItem:"tabItem_Ymn6"};var a=s(4848);function o(e){let{children:t,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.A)(r.tabItem,o),hidden:s,children:t})}},1470:(e,t,s)=>{s.d(t,{A:()=>S});var n=s(6540),r=s(4164),a=s(3104),o=s(6347),i=s(205),l=s(7485),u=s(1682),c=s(679);function d(e){return n.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,n.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:s}=e;return(0,n.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:s,attributes:n,default:r}}=e;return{value:t,label:s,attributes:n,default:r}}))}(s);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,s])}function h(e){let{value:t,tabValues:s}=e;return s.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:s}=e;const r=(0,o.W6)(),a=function(e){let{queryString:t=!1,groupId:s}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!s)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:t,groupId:s});return[(0,l.aZ)(a),(0,n.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:s=!1,groupId:r}=e,a=p(e),[o,l]=(0,n.useState)((()=>function(e){let{defaultValue:t,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const n=s.find((e=>e.default))??s[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:a}))),[u,d]=m({queryString:s,groupId:r}),[f,g]=function(e){let{groupId:t}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(s);return[r,(0,n.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),j=(()=>{const e=u??f;return h({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{j&&l(j)}),[j]);return{selectedValue:o,selectValue:(0,n.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=s(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(4848);function b(e){let{className:t,block:s,selectedValue:n,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,s=l.indexOf(t),r=i[s].value;r!==n&&(u(t),o(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const s=l.indexOf(e.currentTarget)+1;t=l[s]??l[0];break}case"ArrowLeft":{const s=l.indexOf(e.currentTarget)-1;t=l[s]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},t),children:i.map((e=>{let{value:t,label:s,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:n===t?0:-1,"aria-selected":n===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:a}=e;const o=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===a));return e?(0,n.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function S(e){const t=(0,g.A)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,s)=>{s.d(t,{R:()=>o,x:()=>i});var n=s(6540);const r={},a=n.createContext(r);function o(e){const t=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),n.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8678],{7587:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>h,frontMatter:()=>l,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/versioned_docs/version-13.0/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/13.0/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/guides/esm-support.md","tags":[],"version":"13.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/13.0/guides/angular-13+"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/13.0/guides/jsdom-version"}}');var r=s(4848),a=s(8453),o=s(1470),i=s(9365);const l={id:"esm-support",title:"ESM Support"},u=void 0,c={},d=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["To use ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,r.jsx)(t.code,{children:"ts-jest"})," config option ",(0,r.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["There is also a ",(0,r.jsx)(t.a,{href:"/jest-preset-angular/docs/13.0/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,r.jsx)(t.admonition,{type:"tip",children:(0,r.jsxs)(t.p,{children:["We have ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example apps"})," which contains base ESM setup to work with Jest and Angular."]})}),"\n",(0,r.jsxs)(t.p,{children:["Besides, there is ",(0,r.jsx)(t.code,{children:"setup-jest.mjs"})," to add to Jest setup file to ensure that Jest can set up test environment properly."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,r.jsx)(t.h3,{id:"examples",children:"Examples"}),"\n",(0,r.jsx)(t.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n transform: {\n '^.+\\\\.(ts|js|html)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html)$',\n useESM: true,\n },\n ],\n },\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n extensionsToTreatAsEsm: ['.ts'],\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n useESM: true,\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["Jest will attempt to load ",(0,r.jsx)(t.strong,{children:"ESM"})," files from ",(0,r.jsx)(t.code,{children:"node_modules"})," with default ",(0,r.jsx)(t.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,r.jsx)(t.strong,{children:"ESM"})," built files or ",(0,r.jsx)(t.strong,{children:"ESM"})," files which are outside ",(0,r.jsx)(t.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,r.jsxs)(t.p,{children:["To fix that, one can use ",(0,r.jsx)(t.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,r.jsx)(t.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n"})})}),(0,r.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig = {\n //...\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,s)=>{s.d(t,{A:()=>o});s(6540);var n=s(4164);const r={tabItem:"tabItem_Ymn6"};var a=s(4848);function o(e){let{children:t,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.A)(r.tabItem,o),hidden:s,children:t})}},1470:(e,t,s)=>{s.d(t,{A:()=>S});var n=s(6540),r=s(4164),a=s(3104),o=s(6347),i=s(205),l=s(7485),u=s(1682),c=s(679);function d(e){return n.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,n.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:s}=e;return(0,n.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:s,attributes:n,default:r}}=e;return{value:t,label:s,attributes:n,default:r}}))}(s);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,s])}function h(e){let{value:t,tabValues:s}=e;return s.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:s}=e;const r=(0,o.W6)(),a=function(e){let{queryString:t=!1,groupId:s}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!s)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:t,groupId:s});return[(0,l.aZ)(a),(0,n.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:s=!1,groupId:r}=e,a=p(e),[o,l]=(0,n.useState)((()=>function(e){let{defaultValue:t,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const n=s.find((e=>e.default))??s[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:a}))),[u,d]=m({queryString:s,groupId:r}),[f,g]=function(e){let{groupId:t}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(s);return[r,(0,n.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),j=(()=>{const e=u??f;return h({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{j&&l(j)}),[j]);return{selectedValue:o,selectValue:(0,n.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),g(e)}),[d,g,a]),tabValues:a}}var g=s(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(4848);function b(e){let{className:t,block:s,selectedValue:n,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,s=l.indexOf(t),r=i[s].value;r!==n&&(u(t),o(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const s=l.indexOf(e.currentTarget)+1;t=l[s]??l[0];break}case"ArrowLeft":{const s=l.indexOf(e.currentTarget)-1;t=l[s]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},t),children:i.map((e=>{let{value:t,label:s,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:n===t?0:-1,"aria-selected":n===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:a}=e;const o=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===a));return e?(0,n.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function S(e){const t=(0,g.A)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,s)=>{s.d(t,{R:()=>o,x:()=>i});var n=s(6540);const r={},a=n.createContext(r);function o(e){const t=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),n.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/d957c22b.57ef86d4.js b/assets/js/d957c22b.04bec11e.js similarity index 99% rename from assets/js/d957c22b.57ef86d4.js rename to assets/js/d957c22b.04bec11e.js index d1c141742e..8d23c10288 100644 --- a/assets/js/d957c22b.57ef86d4.js +++ b/assets/js/d957c22b.04bec11e.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9353],{5867:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>u,contentTitle:()=>c,default:()=>g,frontMatter:()=>l,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"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.4/guides/angular-13+.md","sourceDirName":"guides","slug":"/guides/angular-13+","permalink":"/jest-preset-angular/docs/14.4/guides/angular-13+","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/guides/angular-13+.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"angular-13+","title":"Angular >=13"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/14.4/guides/angular-ivy"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/14.4/guides/esm-support"}}');var r=t(4848),a=t(8453),o=t(1470),i=t(9365);const l={id:"angular-13+",title:"Angular >=13"},c=void 0,u={},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,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,r.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,r.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,r.jsx)(n.strong,{children:"Angular 13"})," using ",(0,r.jsx)(n.a,{href:"/jest-preset-angular/docs/14.4/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,r.jsx)(n.admonition,{type:"important",children:(0,r.jsxs)(n.p,{children:["With Jest 28 and ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,r.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,r.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,r.jsxs)(n.p,{children:["Starting from ",(0,r.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,r.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,r.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,r.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transform"})," is updated to include ",(0,r.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,r.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:["Upgrade the project to ",(0,r.jsx)(n.strong,{children:"Angular 13"})," following ",(0,r.jsx)(n.a,{href:"https://angular.dev/update-guide/",children:"guide"})]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,r.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,r.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example-apps"})," for the tests that run using ESM mode."]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,r.jsx)(n.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsx)(n.h2,{id:"potential-issues-with-angular-13-esm-package-format-and-workaround",children:"Potential issues with Angular 13 ESM package format and workaround"}),"\n",(0,r.jsxs)(n.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,r.jsx)(n.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one needs to add ",(0,r.jsx)(n.code,{children:"mjs"})," to ",(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",children:"Usage with Angular libraries which are built with Angular CLI 13"}),"\n",(0,r.jsxs)(n.p,{children:["Besides, the changes in Angular packages themselves, ",(0,r.jsx)(n.strong,{children:"Angular"})," libraries which are built with ",(0,r.jsx)(n.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,r.jsx)(n.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,r.jsx)(n.strong,{children:"CommonJS"})," mode."]}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one should modify ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"usage-with-ionic-6-or-7",children:"Usage with Ionic 6 or 7"}),"\n",(0,r.jsxs)(n.p,{children:["To support Ionic 6 or 7 you will need to modify ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>o});t(6540);var s=t(4164);const r={tabItem:"tabItem_Ymn6"};var a=t(4848);function o(e){let{children:n,hidden:t,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,o),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>S});var s=t(6540),r=t(4164),a=t(3104),o=t(6347),i=t(205),l=t(7485),c=t(1682),u=t(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:n,children:t}=e;return(0,s.useMemo)((()=>{const e=n??function(e){return d(e).map((e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}}))}(t);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function g(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function m(e){let{queryString:n=!1,groupId:t}=e;const r=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(r.location.search);n.set(a,e),r.replace({...r.location,search:n.toString()})}),[a,r])]}function h(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,a=p(e),[o,l]=(0,s.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!g({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const s=t.find((e=>e.default))??t[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:a}))),[c,d]=m({queryString:t,groupId:r}),[h,f]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,a]=(0,u.Dv)(t);return[r,(0,s.useCallback)((e=>{t&&a.set(e)}),[t,a])]}({groupId:r}),j=(()=>{const e=c??h;return g({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{j&&l(j)}),[j]);return{selectedValue:o,selectValue:(0,s.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),f(e)}),[d,f,a]),tabValues:a}}var f=t(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=t(4848);function b(e){let{className:n,block:t,selectedValue:s,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const n=e.currentTarget,t=l.indexOf(n),r=i[t].value;r!==s&&(c(n),o(r))},d=e=>{let n=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":t},n),children:i.map((e=>{let{value:n,label:t,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:s===n?0:-1,"aria-selected":s===n,ref:e=>{l.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:a}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function y(e){const n=h(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function S(e){const n=(0,f.A)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>i});var s=t(6540);const r={},a=s.createContext(r);function o(e){const n=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9353],{5867:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>u,contentTitle:()=>c,default:()=>g,frontMatter:()=>l,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"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.4/guides/angular-13+.md","sourceDirName":"guides","slug":"/guides/angular-13+","permalink":"/jest-preset-angular/docs/14.4/guides/angular-13+","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/guides/angular-13+.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"angular-13+","title":"Angular >=13"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/14.4/guides/angular-ivy"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/14.4/guides/esm-support"}}');var r=t(4848),a=t(8453),o=t(1470),i=t(9365);const l={id:"angular-13+",title:"Angular >=13"},c=void 0,u={},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,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,r.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,r.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,r.jsx)(n.strong,{children:"Angular 13"})," using ",(0,r.jsx)(n.a,{href:"/jest-preset-angular/docs/14.4/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,r.jsx)(n.admonition,{type:"important",children:(0,r.jsxs)(n.p,{children:["With Jest 28 and ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,r.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,r.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,r.jsxs)(n.p,{children:["Starting from ",(0,r.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,r.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,r.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,r.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"transform"})," is updated to include ",(0,r.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,r.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:["Upgrade the project to ",(0,r.jsx)(n.strong,{children:"Angular 13"})," following ",(0,r.jsx)(n.a,{href:"https://angular.dev/update-guide/",children:"guide"})]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,r.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,r.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example-apps"})," for the tests that run using ESM mode."]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,r.jsx)(n.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsx)(n.h2,{id:"potential-issues-with-angular-13-esm-package-format-and-workaround",children:"Potential issues with Angular 13 ESM package format and workaround"}),"\n",(0,r.jsxs)(n.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,r.jsx)(n.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one needs to add ",(0,r.jsx)(n.code,{children:"mjs"})," to ",(0,r.jsx)(n.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",children:"Usage with Angular libraries which are built with Angular CLI 13"}),"\n",(0,r.jsxs)(n.p,{children:["Besides, the changes in Angular packages themselves, ",(0,r.jsx)(n.strong,{children:"Angular"})," libraries which are built with ",(0,r.jsx)(n.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,r.jsx)(n.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,r.jsx)(n.strong,{children:"CommonJS"})," mode."]}),"\n",(0,r.jsxs)(n.p,{children:["To fix this issue, one should modify ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.h3,{id:"usage-with-ionic-6-or-7",children:"Usage with Ionic 6 or 7"}),"\n",(0,r.jsxs)(n.p,{children:["To support Ionic 6 or 7 you will need to modify ",(0,r.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>o});t(6540);var s=t(4164);const r={tabItem:"tabItem_Ymn6"};var a=t(4848);function o(e){let{children:n,hidden:t,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,o),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>S});var s=t(6540),r=t(4164),a=t(3104),o=t(6347),i=t(205),l=t(7485),c=t(1682),u=t(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:n,children:t}=e;return(0,s.useMemo)((()=>{const e=n??function(e){return d(e).map((e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}}))}(t);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function g(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function m(e){let{queryString:n=!1,groupId:t}=e;const r=(0,o.W6)(),a=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(r.location.search);n.set(a,e),r.replace({...r.location,search:n.toString()})}),[a,r])]}function h(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,a=p(e),[o,l]=(0,s.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!g({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const s=t.find((e=>e.default))??t[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:a}))),[c,d]=m({queryString:t,groupId:r}),[h,f]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,a]=(0,u.Dv)(t);return[r,(0,s.useCallback)((e=>{t&&a.set(e)}),[t,a])]}({groupId:r}),j=(()=>{const e=c??h;return g({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{j&&l(j)}),[j]);return{selectedValue:o,selectValue:(0,s.useCallback)((e=>{if(!g({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),f(e)}),[d,f,a]),tabValues:a}}var f=t(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=t(4848);function b(e){let{className:n,block:t,selectedValue:s,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const n=e.currentTarget,t=l.indexOf(n),r=i[t].value;r!==s&&(c(n),o(r))},d=e=>{let n=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":t},n),children:i.map((e=>{let{value:n,label:t,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:s===n?0:-1,"aria-selected":s===n,ref:e=>{l.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:a}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function y(e){const n=h(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function S(e){const n=(0,f.A)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>i});var s=t(6540);const r={},a=s.createContext(r);function o(e){const n=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/daab97c5.3c1c7fc3.js b/assets/js/daab97c5.a838ee98.js similarity index 96% rename from assets/js/daab97c5.3c1c7fc3.js rename to assets/js/daab97c5.a838ee98.js index 9e41cd98da..0d0234f7e6 100644 --- a/assets/js/daab97c5.3c1c7fc3.js +++ b/assets/js/daab97c5.a838ee98.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1555],{648:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-11.1/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/11.1/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/processing.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/11.1/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/11.1/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1555],{648:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-11.1/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/11.1/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/processing.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/11.1/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/11.1/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/dd1da75d.80a19355.js b/assets/js/dd1da75d.adb88f80.js similarity index 99% rename from assets/js/dd1da75d.80a19355.js rename to assets/js/dd1da75d.adb88f80.js index 45af01c70a..6912ac62d0 100644 --- a/assets/js/dd1da75d.80a19355.js +++ b/assets/js/dd1da75d.adb88f80.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7951],{9747:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>p,default:()=>j,frontMatter:()=>c,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"In Jest, a test environment defines the sandbox context in which your tests run.","source":"@site/versioned_docs/version-14.4/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/14.4/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/getting-started/test-environment.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/14.4/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/14.4/guides/angular-ivy"}}');var i=n(4848),r=n(8453),o=n(1470),l=n(9365),a=n(4252);const c={id:"test-environment",title:"Test environment"},p=void 0,d={},u=[{value:"Functions",id:"functions",level:2},{value:"setupZoneTestEnv(options)",id:"setupzonetestenvoptions",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Example:",id:"example",level:4},{value:"setupZonelessTestEnv(options)",id:"setupzonelesstestenvoptions",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Example:",id:"example-1",level:4}];function h(e){const t={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:"In Jest, a test environment defines the sandbox context in which your tests run.\nFor Angular projects, setting up the correct test environment is essential to ensure compatibility with the\nframework-specific features, such as dependency injection and change detection."}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"jest-preset-angular"})," provides utility functions to simplify setting up a Jest test environment tailored for Angular projects.\nThese functions support both ",(0,i.jsx)(t.strong,{children:"zone-based"})," and ",(0,i.jsx)(t.strong,{children:"zoneless"})," environments, catering to different testing needs."]}),"\n",(0,i.jsx)(t.h2,{id:"functions",children:"Functions"}),"\n","\n",(0,i.jsx)(a.A,{toc:u.slice(1)}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.h3,{id:"setupzonetestenvoptions",children:(0,i.jsx)(t.code,{children:"setupZoneTestEnv(options)"})}),"\n",(0,i.jsxs)(t.p,{children:["Configures a test environment that uses ",(0,i.jsx)(t.code,{children:"zone.js"}),", which is the mechanism for tracking asynchronous operations.\nIt is suitable for most Angular applications that rely on ",(0,i.jsx)(t.code,{children:"zone.js"})," for change detection and other framework features."]}),"\n",(0,i.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,i.jsx)(t.h4,{id:"parameters",children:"Parameters"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"options"}),(0,i.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,i.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"example",children:"Example:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(l.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})}),(0,i.jsx)(l.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(l.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})}),(0,i.jsx)(l.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,i.jsx)(t.h3,{id:"setupzonelesstestenvoptions",children:(0,i.jsx)(t.code,{children:"setupZonelessTestEnv(options)"})}),"\n",(0,i.jsxs)(t.p,{children:["Configures a test environment that ",(0,i.jsx)(t.strong,{children:"DOESN'T"})," use ",(0,i.jsx)(t.code,{children:"zone.js"}),", as described in ",(0,i.jsx)(t.a,{href:"https://angular.dev/guide/experimental/zoneless",children:"Angular experimental zoneless guide"}),".\nIt is designed for projects that have disabled ",(0,i.jsx)(t.code,{children:"zone.js"}),", which can lead to improved performance and simplified testing."]}),"\n",(0,i.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,i.jsx)(t.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"options"}),(0,i.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,i.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"example-1",children:"Example:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(l.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})}),(0,i.jsx)(l.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless/index.mjs';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(l.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})}),(0,i.jsx)(l.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]})]})}function j(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7951],{9747:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>p,default:()=>j,frontMatter:()=>c,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"In Jest, a test environment defines the sandbox context in which your tests run.","source":"@site/versioned_docs/version-14.4/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/14.4/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/getting-started/test-environment.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/14.4/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/14.4/guides/angular-ivy"}}');var i=n(4848),r=n(8453),o=n(1470),l=n(9365),a=n(4252);const c={id:"test-environment",title:"Test environment"},p=void 0,d={},u=[{value:"Functions",id:"functions",level:2},{value:"setupZoneTestEnv(options)",id:"setupzonetestenvoptions",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Example:",id:"example",level:4},{value:"setupZonelessTestEnv(options)",id:"setupzonelesstestenvoptions",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Example:",id:"example-1",level:4}];function h(e){const t={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:"In Jest, a test environment defines the sandbox context in which your tests run.\nFor Angular projects, setting up the correct test environment is essential to ensure compatibility with the\nframework-specific features, such as dependency injection and change detection."}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"jest-preset-angular"})," provides utility functions to simplify setting up a Jest test environment tailored for Angular projects.\nThese functions support both ",(0,i.jsx)(t.strong,{children:"zone-based"})," and ",(0,i.jsx)(t.strong,{children:"zoneless"})," environments, catering to different testing needs."]}),"\n",(0,i.jsx)(t.h2,{id:"functions",children:"Functions"}),"\n","\n",(0,i.jsx)(a.A,{toc:u.slice(1)}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.h3,{id:"setupzonetestenvoptions",children:(0,i.jsx)(t.code,{children:"setupZoneTestEnv(options)"})}),"\n",(0,i.jsxs)(t.p,{children:["Configures a test environment that uses ",(0,i.jsx)(t.code,{children:"zone.js"}),", which is the mechanism for tracking asynchronous operations.\nIt is suitable for most Angular applications that rely on ",(0,i.jsx)(t.code,{children:"zone.js"})," for change detection and other framework features."]}),"\n",(0,i.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,i.jsx)(t.h4,{id:"parameters",children:"Parameters"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"options"}),(0,i.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,i.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"example",children:"Example:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(l.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})}),(0,i.jsx)(l.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(l.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})}),(0,i.jsx)(l.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,i.jsx)(t.h3,{id:"setupzonelesstestenvoptions",children:(0,i.jsx)(t.code,{children:"setupZonelessTestEnv(options)"})}),"\n",(0,i.jsxs)(t.p,{children:["Configures a test environment that ",(0,i.jsx)(t.strong,{children:"DOESN'T"})," use ",(0,i.jsx)(t.code,{children:"zone.js"}),", as described in ",(0,i.jsx)(t.a,{href:"https://angular.dev/guide/experimental/zoneless",children:"Angular experimental zoneless guide"}),".\nIt is designed for projects that have disabled ",(0,i.jsx)(t.code,{children:"zone.js"}),", which can lead to improved performance and simplified testing."]}),"\n",(0,i.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,i.jsx)(t.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"options"}),(0,i.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,i.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"example-1",children:"Example:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(l.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})}),(0,i.jsx)(l.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless/index.mjs';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(l.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})}),(0,i.jsx)(l.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]})]})}function j(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}}}]); \ No newline at end of file diff --git a/assets/js/dd8b0175.3e4aaf63.js b/assets/js/dd8b0175.d0980f3e.js similarity index 99% rename from assets/js/dd8b0175.3e4aaf63.js rename to assets/js/dd8b0175.d0980f3e.js index b5ae5104e8..0dcaef74d4 100644 --- a/assets/js/dd8b0175.3e4aaf63.js +++ b/assets/js/dd8b0175.d0980f3e.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2972],{4125:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"Configure other JSDOM versions","description":"Jest v26+ by default uses JSDOM 16 to support Node 10+.","source":"@site/versioned_docs/version-11.1/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/11.1/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/guides/jsdom-version.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/11.1/guides/esm-support"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/11.1/guides/using-with-babel"}}');var s=n(4848),o=n(8453),a=n(1470),i=n(9365);const l={id:"jsdom-version",title:"Configure other JSDOM versions"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,s.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,s.jsxs)(t.p,{children:["If you need a different JSDOM version than the one that ships with Jest, you can install a jsdom environment\npackage, e.g. ",(0,s.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,s.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,s.jsx)(t.code,{children:"localStorage"})," or ",(0,s.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,s.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Reference: ",(0,s.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200",children:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200"})]})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var o=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,a),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),o=n(3104),a=n(6347),i=n(205),l=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,a.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(s.location.search);t.set(o,e),s.replace({...s.location,search:t.toString()})}),[o,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,o=p(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[u,d]=h({queryString:n,groupId:s}),[f,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,o]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return m({value:e,tabValues:o})?e:null})();(0,i.A)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),b(e)}),[d,b,o]),tabValues:o}}var b=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),c=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==r&&(u(t),a(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...o,className:(0,s.A)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2972],{4125:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"Configure other JSDOM versions","description":"Jest v26+ by default uses JSDOM 16 to support Node 10+.","source":"@site/versioned_docs/version-11.1/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/11.1/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/guides/jsdom-version.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/11.1/guides/esm-support"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/11.1/guides/using-with-babel"}}');var s=n(4848),o=n(8453),a=n(1470),i=n(9365);const l={id:"jsdom-version",title:"Configure other JSDOM versions"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,s.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,s.jsxs)(t.p,{children:["If you need a different JSDOM version than the one that ships with Jest, you can install a jsdom environment\npackage, e.g. ",(0,s.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,s.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,s.jsx)(t.code,{children:"localStorage"})," or ",(0,s.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,s.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Reference: ",(0,s.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200",children:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200"})]})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var o=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,a),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),o=n(3104),a=n(6347),i=n(205),l=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,a.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(s.location.search);t.set(o,e),s.replace({...s.location,search:t.toString()})}),[o,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,o=p(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[u,d]=h({queryString:n,groupId:s}),[f,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,o]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return m({value:e,tabValues:o})?e:null})();(0,i.A)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),b(e)}),[d,b,o]),tabValues:o}}var b=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),c=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==r&&(u(t),a(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...o,className:(0,s.A)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/df70a34a.cfcfee44.js b/assets/js/df70a34a.692b6d8d.js similarity index 98% rename from assets/js/df70a34a.cfcfee44.js rename to assets/js/df70a34a.692b6d8d.js index b12bfffaf7..a94f2a4180 100644 --- a/assets/js/df70a34a.cfcfee44.js +++ b/assets/js/df70a34a.692b6d8d.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9197],{7267:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>a,contentTitle:()=>l,default:()=>u,frontMatter:()=>r,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-10.x/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/10.x/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/guides/using-with-babel.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/10.x/guides/jsdom-version"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/10.x/guides/absolute-imports"}}');var i=n(4848),o=n(8453);const r={id:"using-with-babel",title:"Using with Babel"},l=void 0,a={},c=[];function d(e){const s={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(s.p,{children:["If you wish to use ",(0,i.jsx)(s.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Install dependencies required by the official Jest documentation for ",(0,i.jsx)(s.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Install ",(0,i.jsx)(s.code,{children:"@babel/preset-env"})," and add ",(0,i.jsx)(s.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsxs)(s.em,{children:["Note: do not use a ",(0,i.jsx)(s.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,i.jsx)(s.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,i.jsx)(s.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,i.jsxs)(s.ol,{start:"3",children:["\n",(0,i.jsx)(s.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"module.exports = {\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})]})}function u(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>r,x:()=>l});var t=n(6540);const i={},o=t.createContext(i);function r(e){const s=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9197],{7267:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>a,contentTitle:()=>l,default:()=>u,frontMatter:()=>r,metadata:()=>t,toc:()=>c});const t=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-10.x/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/10.x/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/guides/using-with-babel.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/10.x/guides/jsdom-version"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/10.x/guides/absolute-imports"}}');var i=n(4848),o=n(8453);const r={id:"using-with-babel",title:"Using with Babel"},l=void 0,a={},c=[];function d(e){const s={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(s.p,{children:["If you wish to use ",(0,i.jsx)(s.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,i.jsxs)(s.ol,{children:["\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Install dependencies required by the official Jest documentation for ",(0,i.jsx)(s.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(s.li,{children:["\n",(0,i.jsxs)(s.p,{children:["Install ",(0,i.jsx)(s.code,{children:"@babel/preset-env"})," and add ",(0,i.jsx)(s.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,i.jsxs)(s.p,{children:[(0,i.jsxs)(s.em,{children:["Note: do not use a ",(0,i.jsx)(s.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,i.jsx)(s.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,i.jsx)(s.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,i.jsxs)(s.ol,{start:"3",children:["\n",(0,i.jsx)(s.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,i.jsx)(s.pre,{children:(0,i.jsx)(s.code,{className:"language-js",children:"module.exports = {\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})]})}function u(e={}){const{wrapper:s}={...(0,o.R)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>r,x:()=>l});var t=n(6540);const i={},o=t.createContext(i);function r(e){const s=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/dff5aaca.143ec379.js b/assets/js/dff5aaca.f23d5dbf.js similarity index 99% rename from assets/js/dff5aaca.143ec379.js rename to assets/js/dff5aaca.f23d5dbf.js index a14e18cf67..06650bb247 100644 --- a/assets/js/dff5aaca.143ec379.js +++ b/assets/js/dff5aaca.f23d5dbf.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[744],{7707:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-14.2/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/14.2/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/guides/troubleshooting.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/14.2/guides/absolute-imports"}}');var t=s(4848),o=s(8453);const i={id:"troubleshooting",title:"Troubleshooting"},a=void 0,l={},d=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["You can check Jest ",(0,t.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,t.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,t.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,t.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,t.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,t.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,t.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,t.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,t.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,t.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,t.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,t.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nrequire('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,t.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,t.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,t.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,t.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Add this to your ",(0,t.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,t.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,t.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,t.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,t.jsx)(n.code,{children:"JS"})," file with ",(0,t.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,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,t.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,t.jsx)(n.code,{children:"@angular"}),", ",(0,t.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,t.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,t.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,t.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,t.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,t.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nwindow.$ = require('path/to/jquery');\n"})}),"\n",(0,t.jsx)(n.p,{children:"or"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,t.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,t.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,t.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,t.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Install ",(0,t.jsx)(n.code,{children:"babel-jest"}),", ",(0,t.jsx)(n.code,{children:"@babel/core"})," and ",(0,t.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,t.jsxs)(n.li,{children:["Create a ",(0,t.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,t.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Define the usage of ",(0,t.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,t.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,t.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,t.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,t.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,t.jsx)(n.code,{children:"firebase"})," and ",(0,t.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,t.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,t.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,t.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,t.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,t.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,t.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,t.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,t.jsxs)(n.p,{children:["In these cases, a ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,t.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,t.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,t.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.resolver.js\nmodule.exports = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n resolver: '/src/jest.resolver.js',\n};\n"})}),"\n",(0,t.jsx)(n.h3,{id:"inject-dependencies-with-typescript-interface-or-exported-namespace",children:"Inject dependencies with TypeScript interface or exported namespace"}),"\n",(0,t.jsxs)(n.p,{children:["Please use Angular ",(0,t.jsx)(n.a,{href:"https://angular.dev/api/core/inject",children:"inject"})," instead of ",(0,t.jsx)(n.a,{href:"https://angular.dev/api/core/Inject",children:"@Inject"}),".\nThis is because ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," has caveat when working with class constructor and decorator."]})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>a});var r=s(6540);const t={},o=r.createContext(t);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[744],{7707:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-14.2/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/14.2/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/guides/troubleshooting.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/14.2/guides/absolute-imports"}}');var t=s(4848),o=s(8453);const i={id:"troubleshooting",title:"Troubleshooting"},a=void 0,l={},d=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["You can check Jest ",(0,t.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,t.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,t.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,t.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,t.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,t.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,t.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,t.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,t.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,t.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,t.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,t.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nrequire('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,t.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,t.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,t.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,t.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Add this to your ",(0,t.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,t.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,t.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,t.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,t.jsx)(n.code,{children:"JS"})," file with ",(0,t.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,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,t.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,t.jsx)(n.code,{children:"@angular"}),", ",(0,t.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,t.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,t.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,t.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,t.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,t.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nwindow.$ = require('path/to/jquery');\n"})}),"\n",(0,t.jsx)(n.p,{children:"or"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,t.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,t.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,t.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,t.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Install ",(0,t.jsx)(n.code,{children:"babel-jest"}),", ",(0,t.jsx)(n.code,{children:"@babel/core"})," and ",(0,t.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,t.jsxs)(n.li,{children:["Create a ",(0,t.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,t.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Define the usage of ",(0,t.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,t.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,t.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,t.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,t.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,t.jsx)(n.code,{children:"firebase"})," and ",(0,t.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,t.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,t.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,t.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,t.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,t.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,t.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,t.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,t.jsxs)(n.p,{children:["In these cases, a ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,t.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,t.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,t.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.resolver.js\nmodule.exports = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n resolver: '/src/jest.resolver.js',\n};\n"})}),"\n",(0,t.jsx)(n.h3,{id:"inject-dependencies-with-typescript-interface-or-exported-namespace",children:"Inject dependencies with TypeScript interface or exported namespace"}),"\n",(0,t.jsxs)(n.p,{children:["Please use Angular ",(0,t.jsx)(n.a,{href:"https://angular.dev/api/core/inject",children:"inject"})," instead of ",(0,t.jsx)(n.a,{href:"https://angular.dev/api/core/Inject",children:"@Inject"}),".\nThis is because ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," has caveat when working with class constructor and decorator."]})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>a});var r=s(6540);const t={},o=r.createContext(t);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/e0a3f9c8.1815ff65.js b/assets/js/e0a3f9c8.f6f0d49a.js similarity index 98% rename from assets/js/e0a3f9c8.1815ff65.js rename to assets/js/e0a3f9c8.f6f0d49a.js index 8d54c067a0..5e37441203 100644 --- a/assets/js/e0a3f9c8.1815ff65.js +++ b/assets/js/e0a3f9c8.f6f0d49a.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[46],{1438:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/versioned_docs/version-11.1/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/11.1/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/guides/esm-support.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/11.1/guides/angular-13+"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/11.1/guides/jsdom-version"}}');var o=t(4848),r=t(8453);const i={id:"esm-support",title:"ESM Support"},a=void 0,l={},c=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(s.p,{children:["To use ",(0,o.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,o.jsx)(s.code,{children:"ts-jest"})," config option ",(0,o.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,o.jsxs)(s.p,{children:["There is also a ",(0,o.jsx)(s.a,{href:"/jest-preset-angular/docs/11.1/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,o.jsx)(s.admonition,{type:"tip",children:(0,o.jsxs)(s.p,{children:["We have ",(0,o.jsx)(s.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example apps"})," which contains base ESM setup to work with Jest and Angular."]})}),"\n",(0,o.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,o.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n extensionsToTreatAsEsm: ['.ts'],\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.html$',\n useESM: true,\n },\n },\n};\n"})}),"\n",(0,o.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,o.jsxs)(s.admonition,{type:"tip",children:[(0,o.jsxs)(s.p,{children:["Jest will attempt to load ",(0,o.jsx)(s.strong,{children:"ESM"})," files from ",(0,o.jsx)(s.code,{children:"node_modules"})," with default ",(0,o.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,o.jsx)(s.strong,{children:"ESM"})," built files or ",(0,o.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,o.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,o.jsxs)(s.p,{children:["To fix that, one can use ",(0,o.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,o.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n"})})]})}function u(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>i,x:()=>a});var n=t(6540);const o={},r=n.createContext(o);function i(e){const s=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[46],{1438:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"guides/esm-support","title":"ESM Support","description":"To use jest-preset-angular with ESM support, you\'ll first need to check ESM Jest documentation.","source":"@site/versioned_docs/version-11.1/guides/esm-support.md","sourceDirName":"guides","slug":"/guides/esm-support","permalink":"/jest-preset-angular/docs/11.1/guides/esm-support","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/guides/esm-support.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/11.1/guides/angular-13+"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/11.1/guides/jsdom-version"}}');var o=t(4848),r=t(8453);const i={id:"esm-support",title:"ESM Support"},a=void 0,l={},c=[{value:"Examples",id:"examples",level:3},{value:"Manual configuration",id:"manual-configuration",level:4},{value:"Use ESM presets",id:"use-esm-presets",level:4}];function d(e){const s={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",p:"p",pre:"pre",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(s.p,{children:["To use ",(0,o.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,o.jsx)(s.code,{children:"ts-jest"})," config option ",(0,o.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,o.jsxs)(s.p,{children:["There is also a ",(0,o.jsx)(s.a,{href:"/jest-preset-angular/docs/11.1/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,o.jsx)(s.admonition,{type:"tip",children:(0,o.jsxs)(s.p,{children:["We have ",(0,o.jsx)(s.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example apps"})," which contains base ESM setup to work with Jest and Angular."]})}),"\n",(0,o.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,o.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n extensionsToTreatAsEsm: ['.ts'],\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.html$',\n useESM: true,\n },\n },\n};\n"})}),"\n",(0,o.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,o.jsxs)(s.admonition,{type:"tip",children:[(0,o.jsxs)(s.p,{children:["Jest will attempt to load ",(0,o.jsx)(s.strong,{children:"ESM"})," files from ",(0,o.jsx)(s.code,{children:"node_modules"})," with default ",(0,o.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,o.jsx)(s.strong,{children:"ESM"})," built files or ",(0,o.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,o.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,o.jsxs)(s.p,{children:["To fix that, one can use ",(0,o.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,o.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,o.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n"})})]})}function u(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},8453:(e,s,t)=>{t.d(s,{R:()=>i,x:()=>a});var n=t(6540);const o={},r=n.createContext(o);function i(e){const s=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/e1715838.4e80a269.js b/assets/js/e1715838.5fe6535e.js similarity index 97% rename from assets/js/e1715838.4e80a269.js rename to assets/js/e1715838.5fe6535e.js index 021e8b1e85..ddf61bcff7 100644 --- a/assets/js/e1715838.4e80a269.js +++ b/assets/js/e1715838.5fe6535e.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6603],{3804:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-9.x/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/9.x/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/introduction.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/9.x/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(t.p,{children:["This is a part of the article: ",(0,o.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Starting from ",(0,o.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,o.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,o.jsx)(t.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6603],{3804:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-9.x/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/9.x/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/introduction.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/9.x/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(t.p,{children:["This is a part of the article: ",(0,o.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Starting from ",(0,o.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,o.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,o.jsx)(t.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/e21d93aa.a23fe73b.js b/assets/js/e21d93aa.09858e07.js similarity index 99% rename from assets/js/e21d93aa.a23fe73b.js rename to assets/js/e21d93aa.09858e07.js index dd8a3f1060..47cc8e7765 100644 --- a/assets/js/e21d93aa.a23fe73b.js +++ b/assets/js/e21d93aa.09858e07.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[587],{3691:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>m,frontMatter:()=>l,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"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.5/guides/angular-13+.md","sourceDirName":"guides","slug":"/guides/angular-13+","permalink":"/jest-preset-angular/docs/guides/angular-13+","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/guides/angular-13+.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"angular-13+","title":"Angular >=13"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/guides/angular-ivy"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/guides/esm-support"}}');var r=s(4848),a=s(8453),i=s(1470),o=s(9365);const l={id:"angular-13+",title:"Angular >=13"},c=void 0,u={},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 t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,r.jsx)(t.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,r.jsx)(t.code,{children:"CommonJS"})," mode with ",(0,r.jsx)(t.strong,{children:"Angular 13"})," using ",(0,r.jsx)(t.a,{href:"/jest-preset-angular/docs/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["With Jest 28 and ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," ",(0,r.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,r.jsx)(t.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,r.jsxs)(t.p,{children:["Starting from ",(0,r.jsx)(t.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,r.jsx)(t.strong,{children:"Angular 13"}),":"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"moduleFileExtensions"})," is updated to include ",(0,r.jsx)(t.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,r.jsx)(t.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"transform"})," is updated to include ",(0,r.jsx)(t.code,{children:".mjs"})," extension to transform to ",(0,r.jsx)(t.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Upgrade the project to ",(0,r.jsx)(t.strong,{children:"Angular 13"})," following ",(0,r.jsx)(t.a,{href:"https://angular.dev/update-guide/",children:"guide"})]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)(t.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(t.p,{children:"there are no migration steps required"}),"\n",(0,r.jsx)(t.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,r.jsxs)(t.p,{children:["ES Modules support is new and may encounter issues. See ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example-apps"})," for the tests that run using ESM mode."]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nexport default {\n ...presets.createEsmPreset(),\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nexport default {\n ...presets.createEsmPreset(),\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,r.jsx)(t.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,r.jsx)(t.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsx)(t.h2,{id:"potential-issues-with-angular-13-esm-package-format-and-workaround",children:"Potential issues with Angular 13 ESM package format and workaround"}),"\n",(0,r.jsxs)(t.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,r.jsx)(t.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,r.jsxs)(t.p,{children:["To fix this issue, one needs to add ",(0,r.jsx)(t.code,{children:"mjs"})," to ",(0,r.jsx)(t.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",children:"Usage with Angular libraries which are built with Angular CLI 13"}),"\n",(0,r.jsxs)(t.p,{children:["Besides, the changes in Angular packages themselves, ",(0,r.jsx)(t.strong,{children:"Angular"})," libraries which are built with ",(0,r.jsx)(t.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,r.jsx)(t.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,r.jsx)(t.strong,{children:"CommonJS"})," mode."]}),"\n",(0,r.jsxs)(t.p,{children:["To fix this issue, one should modify ",(0,r.jsx)(t.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"usage-with-ionic-6-or-7",children:"Usage with Ionic 6 or 7"}),"\n",(0,r.jsxs)(t.p,{children:["To support Ionic 6 or 7 you will need to modify ",(0,r.jsx)(t.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n} satisfies Config;\n"})})})]})]})}function m(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,s)=>{s.d(t,{A:()=>i});s(6540);var n=s(4164);const r={tabItem:"tabItem_Ymn6"};var a=s(4848);function i(e){let{children:t,hidden:s,className:i}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.A)(r.tabItem,i),hidden:s,children:t})}},1470:(e,t,s)=>{s.d(t,{A:()=>S});var n=s(6540),r=s(4164),a=s(3104),i=s(6347),o=s(205),l=s(7485),c=s(1682),u=s(679);function d(e){return n.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,n.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:s}=e;return(0,n.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:s,attributes:n,default:r}}=e;return{value:t,label:s,attributes:n,default:r}}))}(s);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,s])}function m(e){let{value:t,tabValues:s}=e;return s.some((e=>e.value===t))}function g(e){let{queryString:t=!1,groupId:s}=e;const r=(0,i.W6)(),a=function(e){let{queryString:t=!1,groupId:s}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!s)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:t,groupId:s});return[(0,l.aZ)(a),(0,n.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function h(e){const{defaultValue:t,queryString:s=!1,groupId:r}=e,a=p(e),[i,l]=(0,n.useState)((()=>function(e){let{defaultValue:t,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const n=s.find((e=>e.default))??s[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:a}))),[c,d]=g({queryString:s,groupId:r}),[h,f]=function(e){let{groupId:t}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(s);return[r,(0,n.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),j=(()=>{const e=c??h;return m({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{j&&l(j)}),[j]);return{selectedValue:i,selectValue:(0,n.useCallback)((e=>{if(!m({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),f(e)}),[d,f,a]),tabValues:a}}var f=s(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(4848);function b(e){let{className:t,block:s,selectedValue:n,selectValue:i,tabValues:o}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,s=l.indexOf(t),r=o[s].value;r!==n&&(c(t),i(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const s=l.indexOf(e.currentTarget)+1;t=l[s]??l[0];break}case"ArrowLeft":{const s=l.indexOf(e.currentTarget)-1;t=l[s]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},t),children:o.map((e=>{let{value:t,label:s,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:n===t?0:-1,"aria-selected":n===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:a}=e;const i=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=i.find((e=>e.props.value===a));return e?(0,n.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=h(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function S(e){const t=(0,f.A)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>o});var n=s(6540);const r={},a=n.createContext(r);function i(e){const t=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[587],{3691:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>m,frontMatter:()=>l,metadata:()=>n,toc:()=>d});const n=JSON.parse('{"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.5/guides/angular-13+.md","sourceDirName":"guides","slug":"/guides/angular-13+","permalink":"/jest-preset-angular/docs/guides/angular-13+","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/guides/angular-13+.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"angular-13+","title":"Angular >=13"},"sidebar":"docs","previous":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/guides/angular-ivy"},"next":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/guides/esm-support"}}');var r=s(4848),a=s(8453),i=s(1470),o=s(9365);const l={id:"angular-13+",title:"Angular >=13"},c=void 0,u={},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 t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,r.jsx)(t.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,r.jsx)(t.code,{children:"CommonJS"})," mode with ",(0,r.jsx)(t.strong,{children:"Angular 13"})," using ",(0,r.jsx)(t.a,{href:"/jest-preset-angular/docs/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["With Jest 28 and ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," ",(0,r.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,r.jsx)(t.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,r.jsxs)(t.p,{children:["Starting from ",(0,r.jsx)(t.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,r.jsx)(t.strong,{children:"Angular 13"}),":"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"moduleFileExtensions"})," is updated to include ",(0,r.jsx)(t.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,r.jsx)(t.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"transform"})," is updated to include ",(0,r.jsx)(t.code,{children:".mjs"})," extension to transform to ",(0,r.jsx)(t.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Upgrade the project to ",(0,r.jsx)(t.strong,{children:"Angular 13"})," following ",(0,r.jsx)(t.a,{href:"https://angular.dev/update-guide/",children:"guide"})]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)(t.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(t.p,{children:"there are no migration steps required"}),"\n",(0,r.jsx)(t.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,r.jsxs)(t.p,{children:["ES Modules support is new and may encounter issues. See ",(0,r.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples",children:"example-apps"})," for the tests that run using ESM mode."]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nexport default {\n ...presets.createEsmPreset(),\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\nimport { pathsToModuleNameMapper } from 'ts-jest';\nimport { compilerOptions } from './tsconfig.json';\n\nexport default {\n ...presets.createEsmPreset(),\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig-esm.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n isolatedModules: true,\n useESM: true,\n },\n ],\n },\n moduleNameMapper: {\n ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '' }),\n tslib: 'tslib/tslib.es6.js',\n },\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,r.jsx)(t.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,r.jsx)(t.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsx)(t.h2,{id:"potential-issues-with-angular-13-esm-package-format-and-workaround",children:"Potential issues with Angular 13 ESM package format and workaround"}),"\n",(0,r.jsxs)(t.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,r.jsx)(t.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,r.jsxs)(t.p,{children:["To fix this issue, one needs to add ",(0,r.jsx)(t.code,{children:"mjs"})," to ",(0,r.jsx)(t.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",children:"Usage with Angular libraries which are built with Angular CLI 13"}),"\n",(0,r.jsxs)(t.p,{children:["Besides, the changes in Angular packages themselves, ",(0,r.jsx)(t.strong,{children:"Angular"})," libraries which are built with ",(0,r.jsx)(t.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,r.jsx)(t.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,r.jsx)(t.strong,{children:"CommonJS"})," mode."]}),"\n",(0,r.jsxs)(t.p,{children:["To fix this issue, one should modify ",(0,r.jsx)(t.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"usage-with-ionic-6-or-7",children:"Usage with Ionic 6 or 7"}),"\n",(0,r.jsxs)(t.p,{children:["To support Ionic 6 or 7 you will need to modify ",(0,r.jsx)(t.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n} satisfies Config;\n"})})})]})]})}function m(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,s)=>{s.d(t,{A:()=>i});s(6540);var n=s(4164);const r={tabItem:"tabItem_Ymn6"};var a=s(4848);function i(e){let{children:t,hidden:s,className:i}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.A)(r.tabItem,i),hidden:s,children:t})}},1470:(e,t,s)=>{s.d(t,{A:()=>S});var n=s(6540),r=s(4164),a=s(3104),i=s(6347),o=s(205),l=s(7485),c=s(1682),u=s(679);function d(e){return n.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,n.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:s}=e;return(0,n.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:s,attributes:n,default:r}}=e;return{value:t,label:s,attributes:n,default:r}}))}(s);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,s])}function m(e){let{value:t,tabValues:s}=e;return s.some((e=>e.value===t))}function g(e){let{queryString:t=!1,groupId:s}=e;const r=(0,i.W6)(),a=function(e){let{queryString:t=!1,groupId:s}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!s)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:t,groupId:s});return[(0,l.aZ)(a),(0,n.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function h(e){const{defaultValue:t,queryString:s=!1,groupId:r}=e,a=p(e),[i,l]=(0,n.useState)((()=>function(e){let{defaultValue:t,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const n=s.find((e=>e.default))??s[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:a}))),[c,d]=g({queryString:s,groupId:r}),[h,f]=function(e){let{groupId:t}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(s);return[r,(0,n.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),j=(()=>{const e=c??h;return m({value:e,tabValues:a})?e:null})();(0,o.A)((()=>{j&&l(j)}),[j]);return{selectedValue:i,selectValue:(0,n.useCallback)((e=>{if(!m({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),f(e)}),[d,f,a]),tabValues:a}}var f=s(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(4848);function b(e){let{className:t,block:s,selectedValue:n,selectValue:i,tabValues:o}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,s=l.indexOf(t),r=o[s].value;r!==n&&(c(t),i(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const s=l.indexOf(e.currentTarget)+1;t=l[s]??l[0];break}case"ArrowLeft":{const s=l.indexOf(e.currentTarget)-1;t=l[s]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":s},t),children:o.map((e=>{let{value:t,label:s,attributes:a}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:n===t?0:-1,"aria-selected":n===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:a}=e;const i=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=i.find((e=>e.props.value===a));return e?(0,n.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=h(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function S(e){const t=(0,f.A)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>o});var n=s(6540);const r={},a=n.createContext(r);function i(e){const t=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/e36b815f.bf235bae.js b/assets/js/e36b815f.df1c278e.js similarity index 97% rename from assets/js/e36b815f.bf235bae.js rename to assets/js/e36b815f.df1c278e.js index 016d48eef8..a8c94b7661 100644 --- a/assets/js/e36b815f.bf235bae.js +++ b/assets/js/e36b815f.df1c278e.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2659],{6146:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/versioned_docs/version-14.4/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/14.4/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/guides/absolute-imports.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/14.4/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/14.4/guides/troubleshooting"}}');var i=s(4848),n=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,i.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,i.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,i.jsxs)(t.p,{children:["More information see ",(0,i.jsx)(t.code,{children:"ts-jest"})," ",(0,i.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const i={},n=o.createContext(i);function r(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2659],{6146:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/versioned_docs/version-14.4/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/14.4/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/guides/absolute-imports.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/14.4/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/14.4/guides/troubleshooting"}}');var i=s(4848),n=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,i.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,i.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,i.jsxs)(t.p,{children:["More information see ",(0,i.jsx)(t.code,{children:"ts-jest"})," ",(0,i.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const i={},n=o.createContext(i);function r(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/e437670d.d99b1108.js b/assets/js/e437670d.3d19b438.js similarity index 99% rename from assets/js/e437670d.d99b1108.js rename to assets/js/e437670d.3d19b438.js index 5daf84597d..44c897e2a6 100644 --- a/assets/js/e437670d.d99b1108.js +++ b/assets/js/e437670d.3d19b438.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3179],{2360:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>m,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-14.5/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/getting-started/installation.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),i=n(9365);const o={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(i.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(i.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(i.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsx)(t.p,{children:"In your project root, create a setup file with following contents:"}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsx)(t.p,{children:"Add the following section to your root Jest config"}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label":"TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label":"TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"tsconfig-cjs",label:"Tsconfig CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json5",metastring:'title="tsconfig.spec.json" tab={"label": "Tsconfig CJS"}',children:"{\n //...\n extends: './tsconfig.json',\n compilerOptions: {\n //...\n module: 'CommonJS',\n types: ['jest'],\n },\n include: ['src/**/*.spec.ts', 'src/**/*.d.ts'],\n //...\n}\n"})})}),(0,r.jsx)(i.A,{value:"tsconfig-esm",label:"Tsconfig ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="tsconfig.spec.json" tab={"label": "Tsconfig ESM"}',children:'{\n //...\n "extends": "./tsconfig.json",\n "compilerOptions": {\n //...\n "module": "ES2022",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n //...\n}\n'})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="package.json"',children:'{\n //...\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n //...\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\nimport './jest-global-mocks';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\nimport './jest-global-mocks';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest-global-mocks.ts"',children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function m(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>S});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),i=n(205),o=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,o.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,o]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=h({queryString:n,groupId:r}),[g,j]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??g;return m({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{f&&o(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!m({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);o(e),d(e),j(e)}),[d,j,a]),tabValues:a}}var j=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:i}=e;const o=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=o.indexOf(t),r=i[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=o.indexOf(e.currentTarget)+1;t=o[n]??o[0];break}case"ArrowLeft":{const n=o.indexOf(e.currentTarget)-1;t=o[n]??o[o.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{o.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function S(e){const t=(0,j.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>i});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3179],{2360:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>m,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/installation","title":"Installation","description":"Dependencies","source":"@site/versioned_docs/version-14.5/getting-started/installation.md","sourceDirName":"getting-started","slug":"/getting-started/installation","permalink":"/jest-preset-angular/docs/getting-started/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/getting-started/installation.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"installation","title":"Installation"},"sidebar":"docs","previous":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/processing"},"next":{"title":"Presets","permalink":"/jest-preset-angular/docs/getting-started/presets"}}');var r=n(4848),a=n(8453),l=n(1470),i=n(9365);const o={id:"installation",title:"Installation"},c=void 0,u={},d=[{value:"Dependencies",id:"dependencies",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Customizing",id:"customizing",level:3},{value:"Global mocks",id:"global-mocks",level:4},{value:"Avoid karma conflicts",id:"avoid-karma-conflicts",level:4}];function p(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsxs)(t.p,{children:["You can install ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,r.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,r.jsx)(i.A,{value:"npm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(i.A,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,r.jsx)(i.A,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Angular doesn't support native ",(0,r.jsx)(t.code,{children:"async/await"})," in testing with ",(0,r.jsx)(t.code,{children:"target"})," higher than ",(0,r.jsx)(t.code,{children:"ES2016"}),", see ",(0,r.jsx)(t.a,{href:"https://github.com/angular/components/issues/21632#issuecomment-764975917",children:"https://github.com/angular/components/issues/21632#issuecomment-764975917"})]})}),"\n",(0,r.jsx)(t.p,{children:"In your project root, create a setup file with following contents:"}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsx)(t.p,{children:"Add the following section to your root Jest config"}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label":"TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label":"TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust your ",(0,r.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"tsconfig-cjs",label:"Tsconfig CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json5",metastring:'title="tsconfig.spec.json" tab={"label": "Tsconfig CJS"}',children:"{\n //...\n extends: './tsconfig.json',\n compilerOptions: {\n //...\n module: 'CommonJS',\n types: ['jest'],\n },\n include: ['src/**/*.spec.ts', 'src/**/*.d.ts'],\n //...\n}\n"})})}),(0,r.jsx)(i.A,{value:"tsconfig-esm",label:"Tsconfig ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="tsconfig.spec.json" tab={"label": "Tsconfig ESM"}',children:'{\n //...\n "extends": "./tsconfig.json",\n "compilerOptions": {\n //...\n "module": "ES2022",\n "types": ["jest"]\n },\n "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]\n //...\n}\n'})})})]}),"\n",(0,r.jsxs)(t.p,{children:["Adjust ",(0,r.jsx)(t.code,{children:"scripts"})," part your ",(0,r.jsx)(t.code,{children:"package.json"})," to use ",(0,r.jsx)(t.code,{children:"jest"})," instead of ",(0,r.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="package.json"',children:'{\n //...\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n //...\n}\n'})}),"\n",(0,r.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,r.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," which is different from normal browsers. You might need some global browser mocks to\nsimulate the behaviors of real browsers in ",(0,r.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Create a file ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,r.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\nimport './jest-global-mocks';\n\nsetupZoneTestEnv();\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label":"TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\nimport './jest-global-mocks';\n\nsetupZoneTestEnv();\n"})})})]}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsxs)(t.p,{children:["An example for ",(0,r.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest-global-mocks.ts"',children:"Object.defineProperty(document, 'doctype', {\n value: '',\n});\nObject.defineProperty(window, 'getComputedStyle', {\n value: () => {\n return {\n display: 'none',\n appearance: ['-webkit-appearance'],\n };\n },\n});\n/**\n * ISSUE: https://github.com/angular/material2/issues/7101\n * Workaround for JSDOM missing transform property\n */\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})})]}),"\n",(0,r.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,r.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,r.jsx)(t.code,{children:"src/test.ts"})," file which will be picked up by jest. To circumvent this you can either rename it to ",(0,r.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,r.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,r.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function m(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>S});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),i=n(205),o=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,o.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,o]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=h({queryString:n,groupId:r}),[g,j]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),f=(()=>{const e=c??g;return m({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{f&&o(f)}),[f]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!m({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);o(e),d(e),j(e)}),[d,j,a]),tabValues:a}}var j=n(2303);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:i}=e;const o=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=o.indexOf(t),r=i[n].value;r!==s&&(c(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=o.indexOf(e.currentTarget)+1;t=o[n]??o[0];break}case"ArrowLeft":{const n=o.indexOf(e.currentTarget)-1;t=o[n]??o[o.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{o.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function S(e){const t=(0,j.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>i});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/e59053ae.2e3df860.js b/assets/js/e59053ae.c5d5e532.js similarity index 99% rename from assets/js/e59053ae.2e3df860.js rename to assets/js/e59053ae.c5d5e532.js index b99bbbf37d..94529aac77 100644 --- a/assets/js/e59053ae.2e3df860.js +++ b/assets/js/e59053ae.c5d5e532.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2008],{5500:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>p,contentTitle:()=>c,default:()=>j,frontMatter:()=>d,metadata:()=>n,toc:()=>h});const n=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"In Jest, presets are pre-defined configurations that help streamline and standardize the process of setting up testing environments.","source":"@site/versioned_docs/version-14.4/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/14.4/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/getting-started/presets.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/14.4/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/14.4/getting-started/options"}}');var r=t(4848),i=t(8453),o=t(1470),a=t(9365),l=t(4252);const d={id:"presets",title:"Presets"},c=void 0,p={},h=[{value:"Functions",id:"functions",level:2},{value:"createCjsPreset(options)",id:"createcjspresetoptions",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Example:",id:"example",level:4},{value:"createEsmPreset(options)",id:"createesmpresetoptions",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-1",level:4},{value:"Example:",id:"example-1",level:4},{value:"Legacy presets",id:"legacy-presets",level:3},{value:"Example",id:"example-2",level:4}];function g(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:["In Jest, ",(0,r.jsx)(s.strong,{children:"presets"})," are pre-defined configurations that help streamline and standardize the process of setting up testing environments.\nThey allow developers to quickly configure Jest with specific transformers, file extensions, and other options."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular"})," provides very opinionated presets and based on what we found to be useful."]}),"\n",(0,r.jsx)(s.admonition,{type:"important",children:(0,r.jsx)(s.p,{children:"The current best practice for using presets is to call one of the utility functions below to create (and optionally extend) presets. Legacy presets are listed at the bottom of the page."})}),"\n",(0,r.jsx)(s.h2,{id:"functions",children:"Functions"}),"\n","\n",(0,r.jsx)(l.A,{toc:h.slice(1)}),"\n",(0,r.jsx)(s.hr,{}),"\n",(0,r.jsx)(s.h3,{id:"createcjspresetoptions",children:(0,r.jsx)(s.code,{children:"createCjsPreset(options)"})}),"\n",(0,r.jsxs)(s.p,{children:["Create a configuration to process JavaScript/TypeScript/HTML/SVG files (",(0,r.jsx)(s.code,{children:"ts|js|mjs|html|svg"}),")."]}),"\n",(0,r.jsx)(s.h4,{id:"parameters",children:"Parameters"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"options"})," (",(0,r.jsx)(s.strong,{children:"OPTIONAL"}),")","\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"tsconfig"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/tsconfig",children:"tsconfig options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"isolatedModules"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/isolatedModules",children:"isolatedModules options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"astTransformers"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/astTransformers",children:"astTransformers options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"diagnostics"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/diagnostics",children:"diagnostics options page"})]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.h4,{id:"returns",children:"Returns"}),"\n",(0,r.jsx)(s.p,{children:"An object contains Jest config:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",children:"type CjsPresetTransformerOptions = {\n tsconfig: string;\n stringifyContentPathRegex: string;\n};\n\ntype CjsPresetType = {\n testEnvironment: string;\n moduleFileExtensions: Array;\n snapshotSerializers: Array;\n transformIgnorePatterns: Array;\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': ['jest-preset-angular', CjsPresetTransformerOptions];\n };\n};\n"})}),"\n",(0,r.jsx)(s.h4,{id:"example",children:"Example:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts"',children:"import presets from 'jest-preset-angular/presets';\nimport type { Config } from 'jest';\n\nconst presetConfig = presets.createCjsPreset({\n //...options\n});\n\nconst jestConfig: Config = {\n ...presetConfig,\n};\n\nexport default jestConfig;\n"})}),"\n",(0,r.jsx)(s.h3,{id:"createesmpresetoptions",children:(0,r.jsx)(s.code,{children:"createEsmPreset(options)"})}),"\n",(0,r.jsxs)(s.p,{children:["Create a configuration to process JavaScript/TypeScript/HTML/SVG files (",(0,r.jsx)(s.code,{children:"ts|js|html|svg"}),")."]}),"\n",(0,r.jsx)(s.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"options"})," (",(0,r.jsx)(s.strong,{children:"OPTIONAL"}),")","\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"tsconfig"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/tsconfig",children:"tsconfig options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"isolatedModules"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/isolatedModules",children:"isolatedModules options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"astTransformers"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/astTransformers",children:"astTransformers options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"diagnostics"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/diagnostics",children:"diagnostics options page"})]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.h4,{id:"returns-1",children:"Returns"}),"\n",(0,r.jsx)(s.p,{children:"An object contains Jest config:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",children:"type EsmPresetTransformerOptions = {\n tsconfig: string;\n stringifyContentPathRegex: string;\n useEsm: true;\n};\n\ntype EsmPresetType = {\n testEnvironment: string;\n moduleFileExtensions: Array;\n snapshotSerializers: Array;\n extensionsToTreatAsEsm: Array;\n transformIgnorePatterns: Array;\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': ['jest-preset-angular', EsmPresetTransformerOptions];\n };\n};\n"})}),"\n",(0,r.jsx)(s.h4,{id:"example-1",children:"Example:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts"',children:"import presets from 'jest-preset-angular/presets';\nimport type { Config } from 'jest';\n\nconst presetConfig = presets.createEsmPreset({\n //...options\n});\n\nconst jestConfig: Config = {\n ...presetConfig,\n};\n\nexport default jestConfig;\n"})}),"\n",(0,r.jsx)(s.h3,{id:"legacy-presets",children:"Legacy presets"}),"\n",(0,r.jsx)(s.admonition,{type:"warning",children:(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular"})," ",(0,r.jsx)(s.strong,{children:"DON'T RECOMMEND"})," to use legacy presets because this approach is not flexible to configure Jest configuration.\nThese legacy presets will be removed in the next major release and users are ",(0,r.jsx)(s.strong,{children:"HIGHLY RECOMMENDED"})," to migrate to use the above utility functions."]})}),"\n",(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"Preset name"}),(0,r.jsx)(s.th,{children:"Description"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsxs)(s.td,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(s.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(s.code,{children:"js"}),", ",(0,r.jsx)(s.code,{children:".ts"}),", ",(0,r.jsx)(s.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(s.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsxs)(s.td,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(s.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(s.code,{children:"js"}),", ",(0,r.jsx)(s.code,{children:".ts"}),", ",(0,r.jsx)(s.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(s.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(s.h4,{id:"example-2",children:"Example"}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n\nexport default jestConfig;\n"})})})]})]})}function j(e={}){const{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(g,{...e})}):g(e)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2008],{5500:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>p,contentTitle:()=>c,default:()=>j,frontMatter:()=>d,metadata:()=>n,toc:()=>h});const n=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"In Jest, presets are pre-defined configurations that help streamline and standardize the process of setting up testing environments.","source":"@site/versioned_docs/version-14.4/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/14.4/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/getting-started/presets.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/14.4/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/14.4/getting-started/options"}}');var r=t(4848),i=t(8453),o=t(1470),a=t(9365),l=t(4252);const d={id:"presets",title:"Presets"},c=void 0,p={},h=[{value:"Functions",id:"functions",level:2},{value:"createCjsPreset(options)",id:"createcjspresetoptions",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Example:",id:"example",level:4},{value:"createEsmPreset(options)",id:"createesmpresetoptions",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-1",level:4},{value:"Example:",id:"example-1",level:4},{value:"Legacy presets",id:"legacy-presets",level:3},{value:"Example",id:"example-2",level:4}];function g(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:["In Jest, ",(0,r.jsx)(s.strong,{children:"presets"})," are pre-defined configurations that help streamline and standardize the process of setting up testing environments.\nThey allow developers to quickly configure Jest with specific transformers, file extensions, and other options."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular"})," provides very opinionated presets and based on what we found to be useful."]}),"\n",(0,r.jsx)(s.admonition,{type:"important",children:(0,r.jsx)(s.p,{children:"The current best practice for using presets is to call one of the utility functions below to create (and optionally extend) presets. Legacy presets are listed at the bottom of the page."})}),"\n",(0,r.jsx)(s.h2,{id:"functions",children:"Functions"}),"\n","\n",(0,r.jsx)(l.A,{toc:h.slice(1)}),"\n",(0,r.jsx)(s.hr,{}),"\n",(0,r.jsx)(s.h3,{id:"createcjspresetoptions",children:(0,r.jsx)(s.code,{children:"createCjsPreset(options)"})}),"\n",(0,r.jsxs)(s.p,{children:["Create a configuration to process JavaScript/TypeScript/HTML/SVG files (",(0,r.jsx)(s.code,{children:"ts|js|mjs|html|svg"}),")."]}),"\n",(0,r.jsx)(s.h4,{id:"parameters",children:"Parameters"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"options"})," (",(0,r.jsx)(s.strong,{children:"OPTIONAL"}),")","\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"tsconfig"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/tsconfig",children:"tsconfig options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"isolatedModules"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/isolatedModules",children:"isolatedModules options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"astTransformers"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/astTransformers",children:"astTransformers options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"diagnostics"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/diagnostics",children:"diagnostics options page"})]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.h4,{id:"returns",children:"Returns"}),"\n",(0,r.jsx)(s.p,{children:"An object contains Jest config:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",children:"type CjsPresetTransformerOptions = {\n tsconfig: string;\n stringifyContentPathRegex: string;\n};\n\ntype CjsPresetType = {\n testEnvironment: string;\n moduleFileExtensions: Array;\n snapshotSerializers: Array;\n transformIgnorePatterns: Array;\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': ['jest-preset-angular', CjsPresetTransformerOptions];\n };\n};\n"})}),"\n",(0,r.jsx)(s.h4,{id:"example",children:"Example:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts"',children:"import presets from 'jest-preset-angular/presets';\nimport type { Config } from 'jest';\n\nconst presetConfig = presets.createCjsPreset({\n //...options\n});\n\nconst jestConfig: Config = {\n ...presetConfig,\n};\n\nexport default jestConfig;\n"})}),"\n",(0,r.jsx)(s.h3,{id:"createesmpresetoptions",children:(0,r.jsx)(s.code,{children:"createEsmPreset(options)"})}),"\n",(0,r.jsxs)(s.p,{children:["Create a configuration to process JavaScript/TypeScript/HTML/SVG files (",(0,r.jsx)(s.code,{children:"ts|js|html|svg"}),")."]}),"\n",(0,r.jsx)(s.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"options"})," (",(0,r.jsx)(s.strong,{children:"OPTIONAL"}),")","\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"tsconfig"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/tsconfig",children:"tsconfig options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"isolatedModules"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/isolatedModules",children:"isolatedModules options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"astTransformers"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/astTransformers",children:"astTransformers options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"diagnostics"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/diagnostics",children:"diagnostics options page"})]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.h4,{id:"returns-1",children:"Returns"}),"\n",(0,r.jsx)(s.p,{children:"An object contains Jest config:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",children:"type EsmPresetTransformerOptions = {\n tsconfig: string;\n stringifyContentPathRegex: string;\n useEsm: true;\n};\n\ntype EsmPresetType = {\n testEnvironment: string;\n moduleFileExtensions: Array;\n snapshotSerializers: Array;\n extensionsToTreatAsEsm: Array;\n transformIgnorePatterns: Array;\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': ['jest-preset-angular', EsmPresetTransformerOptions];\n };\n};\n"})}),"\n",(0,r.jsx)(s.h4,{id:"example-1",children:"Example:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts"',children:"import presets from 'jest-preset-angular/presets';\nimport type { Config } from 'jest';\n\nconst presetConfig = presets.createEsmPreset({\n //...options\n});\n\nconst jestConfig: Config = {\n ...presetConfig,\n};\n\nexport default jestConfig;\n"})}),"\n",(0,r.jsx)(s.h3,{id:"legacy-presets",children:"Legacy presets"}),"\n",(0,r.jsx)(s.admonition,{type:"warning",children:(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular"})," ",(0,r.jsx)(s.strong,{children:"DON'T RECOMMEND"})," to use legacy presets because this approach is not flexible to configure Jest configuration.\nThese legacy presets will be removed in the next major release and users are ",(0,r.jsx)(s.strong,{children:"HIGHLY RECOMMENDED"})," to migrate to use the above utility functions."]})}),"\n",(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"Preset name"}),(0,r.jsx)(s.th,{children:"Description"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsxs)(s.td,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(s.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(s.code,{children:"js"}),", ",(0,r.jsx)(s.code,{children:".ts"}),", ",(0,r.jsx)(s.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(s.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsxs)(s.td,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(s.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(s.code,{children:"js"}),", ",(0,r.jsx)(s.code,{children:".ts"}),", ",(0,r.jsx)(s.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(s.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(s.h4,{id:"example-2",children:"Example"}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n};\n\nexport default jestConfig;\n"})})})]})]})}function j(e={}){const{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(g,{...e})}):g(e)}}}]); \ No newline at end of file diff --git a/assets/js/e5a27df7.9b2fb86e.js b/assets/js/e5a27df7.4efab9c2.js similarity index 99% rename from assets/js/e5a27df7.9b2fb86e.js rename to assets/js/e5a27df7.4efab9c2.js index 72f4302878..f72d65ebe7 100644 --- a/assets/js/e5a27df7.9b2fb86e.js +++ b/assets/js/e5a27df7.4efab9c2.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2416],{8159:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the transform of Jest config object","source":"@site/versioned_docs/version-14.4/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/14.4/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/getting-started/options.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/14.4/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/14.4/getting-started/test-environment"}}');var r=n(4848),o=n(8453),i=n(1470),a=n(9365);const l={id:"options",title:"Options"},c=void 0,d={},u=[{value:"Processing with esbuild",id:"processing-with-esbuild",level:3},{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function p(e){const t={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,r.jsx)(t.code,{children:"transform"})," of Jest config object\nin the ",(0,r.jsx)(t.code,{children:"package.json"})," file of your project, or through a ",(0,r.jsx)(t.code,{children:"jest.config.js"}),", or ",(0,r.jsx)(t.code,{children:"jest.config.ts"})," file."]}),"\n",(0,r.jsxs)(t.p,{children:["More information about ",(0,r.jsx)(t.code,{children:"ts-jest"})," options, see ",(0,r.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v9.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,r.jsx)(t.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,r.jsx)(t.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]})}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),"\n",(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,r.jsx)(t.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,r.jsx)(t.code,{children:".mjs"})," files\nwill be processed by ",(0,r.jsx)(t.code,{children:"esbuild"})," in ",(0,r.jsx)(t.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,r.jsx)(t.code,{children:"esbuild"}),", one can do the following:"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n processWithEsbuild: []\n }\n ]\n }\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n processWithEsbuild: []\n }\n ]\n }\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n snapshotSerializers: [\n 'jest-preset-angular/build/serializers/html-comment',\n 'jest-preset-angular/build/serializers/ng-snapshot',\n 'jest-preset-angular/build/serializers/no-ng-attributes',\n ],\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Jest runs with ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,r.jsx)(t.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,r.jsx)(t.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["We're using ",(0,r.jsx)(t.code,{children:'"transform"'})," to pass information about configuration to use for code compilation with ",(0,r.jsx)(t.code,{children:"ts-jest"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,r.jsx)(t.code,{children:"ts"}),"), HTML (",(0,r.jsx)(t.code,{children:"html"}),"), JavaScript (",(0,r.jsx)(t.code,{children:"js"}),"), JSON (",(0,r.jsx)(t.code,{children:"json"}),") and ESM JavaScript (",(0,r.jsx)(t.code,{children:"mjs"}),") files."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses ",(0,r.jsx)(t.code,{children:"RegExp"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. See more in ",(0,r.jsx)(t.a,{href:"/jest-preset-angular/docs/14.4/guides/snapshot-testing",children:"Snapshot testing"})]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,r.jsx)(t.code,{children:".mjs"})," files which come from ",(0,r.jsx)(t.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"transform"'})," \u2013 run every ",(0,r.jsx)(t.code,{children:"TS"}),", ",(0,r.jsx)(t.code,{children:"JS"}),", ",(0,r.jsx)(t.code,{children:"MJS"}),", ",(0,r.jsx)(t.code,{children:"HTML"}),", or ",(0,r.jsx)(t.code,{children:"SVG"})," file through so called ",(0,r.jsx)(t.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>i});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var o=n(4848);function i(e){let{children:t,hidden:n,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,i),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>S});var s=n(6540),r=n(4164),o=n(3104),i=n(6347),a=n(205),l=n(7485),c=n(1682),d=n(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return u(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const r=(0,i.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,s.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(r.location.search);t.set(o,e),r.replace({...r.location,search:t.toString()})}),[o,r])]}function m(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,o=p(e),[i,l]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:o}))),[c,u]=f({queryString:n,groupId:r}),[m,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,o]=(0,d.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:r}),j=(()=>{const e=c??m;return h({value:e,tabValues:o})?e:null})();(0,a.A)((()=>{j&&l(j)}),[j]);return{selectedValue:i,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),g(e)}),[u,g,o]),tabValues:o}}var g=n(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=n(4848);function b(e){let{className:t,block:n,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.a_)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),r=a[n].value;r!==s&&(c(t),i(r))},u=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:a.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...o,className:(0,r.A)("tabs__item",j.tabItem,o?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:o}=e;const i=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=i.find((e=>e.props.value===o));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=m(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function S(e){const t=(0,g.A)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>a});var s=n(6540);const r={},o=s.createContext(r);function i(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2416],{8159:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the transform of Jest config object","source":"@site/versioned_docs/version-14.4/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/14.4/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/getting-started/options.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/14.4/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/14.4/getting-started/test-environment"}}');var r=n(4848),o=n(8453),i=n(1470),a=n(9365);const l={id:"options",title:"Options"},c=void 0,d={},u=[{value:"Processing with esbuild",id:"processing-with-esbuild",level:3},{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function p(e){const t={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(t.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,r.jsx)(t.code,{children:"transform"})," of Jest config object\nin the ",(0,r.jsx)(t.code,{children:"package.json"})," file of your project, or through a ",(0,r.jsx)(t.code,{children:"jest.config.js"}),", or ",(0,r.jsx)(t.code,{children:"jest.config.ts"})," file."]}),"\n",(0,r.jsxs)(t.p,{children:["More information about ",(0,r.jsx)(t.code,{children:"ts-jest"})," options, see ",(0,r.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v9.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,r.jsx)(t.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,r.jsx)(t.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]})}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),"\n",(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,r.jsx)(t.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,r.jsx)(t.code,{children:".mjs"})," files\nwill be processed by ",(0,r.jsx)(t.code,{children:"esbuild"})," in ",(0,r.jsx)(t.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,r.jsx)(t.code,{children:"esbuild"}),", one can do the following:"]}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n processWithEsbuild: []\n }\n ]\n }\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n processWithEsbuild: []\n }\n ]\n }\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n snapshotSerializers: [\n 'jest-preset-angular/build/serializers/html-comment',\n 'jest-preset-angular/build/serializers/ng-snapshot',\n 'jest-preset-angular/build/serializers/no-ng-attributes',\n ],\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["Jest runs with ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,r.jsx)(t.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,r.jsx)(t.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,r.jsx)(t.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["We're using ",(0,r.jsx)(t.code,{children:'"transform"'})," to pass information about configuration to use for code compilation with ",(0,r.jsx)(t.code,{children:"ts-jest"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,r.jsx)(t.code,{children:"ts"}),"), HTML (",(0,r.jsx)(t.code,{children:"html"}),"), JavaScript (",(0,r.jsx)(t.code,{children:"js"}),"), JSON (",(0,r.jsx)(t.code,{children:"json"}),") and ESM JavaScript (",(0,r.jsx)(t.code,{children:"mjs"}),") files."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses ",(0,r.jsx)(t.code,{children:"RegExp"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. See more in ",(0,r.jsx)(t.a,{href:"/jest-preset-angular/docs/14.4/guides/snapshot-testing",children:"Snapshot testing"})]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,r.jsx)(t.code,{children:".mjs"})," files which come from ",(0,r.jsx)(t.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:'"transform"'})," \u2013 run every ",(0,r.jsx)(t.code,{children:"TS"}),", ",(0,r.jsx)(t.code,{children:"JS"}),", ",(0,r.jsx)(t.code,{children:"MJS"}),", ",(0,r.jsx)(t.code,{children:"HTML"}),", or ",(0,r.jsx)(t.code,{children:"SVG"})," file through so called ",(0,r.jsx)(t.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>i});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var o=n(4848);function i(e){let{children:t,hidden:n,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,i),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>S});var s=n(6540),r=n(4164),o=n(3104),i=n(6347),a=n(205),l=n(7485),c=n(1682),d=n(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return u(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const r=(0,i.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,s.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(r.location.search);t.set(o,e),r.replace({...r.location,search:t.toString()})}),[o,r])]}function m(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,o=p(e),[i,l]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:o}))),[c,u]=f({queryString:n,groupId:r}),[m,g]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,o]=(0,d.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:r}),j=(()=>{const e=c??m;return h({value:e,tabValues:o})?e:null})();(0,a.A)((()=>{j&&l(j)}),[j]);return{selectedValue:i,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),g(e)}),[u,g,o]),tabValues:o}}var g=n(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=n(4848);function b(e){let{className:t,block:n,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.a_)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),r=a[n].value;r!==s&&(c(t),i(r))},u=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:a.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...o,className:(0,r.A)("tabs__item",j.tabItem,o?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:o}=e;const i=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=i.find((e=>e.props.value===o));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=m(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function S(e){const t=(0,g.A)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>a});var s=n(6540);const r={},o=s.createContext(r);function i(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/e7ca0543.fa1edf47.js b/assets/js/e7ca0543.1d23f64f.js similarity index 99% rename from assets/js/e7ca0543.fa1edf47.js rename to assets/js/e7ca0543.1d23f64f.js index 450b24c985..cad6512b40 100644 --- a/assets/js/e7ca0543.fa1edf47.js +++ b/assets/js/e7ca0543.1d23f64f.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3793],{9587:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>p,default:()=>m,frontMatter:()=>c,metadata:()=>n,toc:()=>u});const n=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"This page is now DEPRECATED and will be removed in the next major release. Please visit TestBed environment configuration","source":"@site/versioned_docs/version-14.5/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/getting-started/test-environment.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/getting-started/options"},"next":{"title":"TestBed environment","permalink":"/jest-preset-angular/docs/getting-started/testbed-environment"}}');var i=s(4848),r=s(8453),o=s(1470),a=s(9365),l=s(4252);const c={id:"test-environment",title:"Test environment"},p=void 0,d={},u=[{value:"Functions",id:"functions",level:2},{value:"setupZoneTestEnv(options)",id:"setupzonetestenvoptions",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Example:",id:"example",level:4},{value:"setupZonelessTestEnv(options)",id:"setupzonelesstestenvoptions",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Example:",id:"example-1",level:4}];function h(e){const t={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,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.admonition,{title:"DEPRECATED",type:"warning",children:(0,i.jsxs)(t.p,{children:["This page is now ",(0,i.jsx)(t.strong,{children:"DEPRECATED"})," and will be removed in the next major release. Please visit ",(0,i.jsx)(t.a,{href:"/jest-preset-angular/docs/getting-started/testbed-environment",children:"TestBed environment configuration"})]})}),"\n",(0,i.jsx)(t.p,{children:"In Jest, a test environment defines the sandbox context in which your tests run.\nFor Angular projects, setting up the correct test environment is essential to ensure compatibility with the\nframework-specific features, such as dependency injection and change detection."}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"jest-preset-angular"})," provides utility functions to simplify setting up a Jest test environment tailored for Angular projects.\nThese functions support both ",(0,i.jsx)(t.strong,{children:"zone-based"})," and ",(0,i.jsx)(t.strong,{children:"zoneless"})," environments, catering to different testing needs."]}),"\n",(0,i.jsx)(t.h2,{id:"functions",children:"Functions"}),"\n","\n",(0,i.jsx)(l.A,{toc:u.slice(1)}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.h3,{id:"setupzonetestenvoptions",children:(0,i.jsx)(t.code,{children:"setupZoneTestEnv(options)"})}),"\n",(0,i.jsxs)(t.p,{children:["Configures a test environment that uses ",(0,i.jsx)(t.code,{children:"zone.js"}),", which is the mechanism for tracking asynchronous operations.\nIt is suitable for most Angular applications that rely on ",(0,i.jsx)(t.code,{children:"zone.js"})," for change detection and other framework features."]}),"\n",(0,i.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,i.jsx)(t.h4,{id:"parameters",children:"Parameters"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"options"}),(0,i.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,i.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"example",children:"Example:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsx)(t.h3,{id:"setupzonelesstestenvoptions",children:(0,i.jsx)(t.code,{children:"setupZonelessTestEnv(options)"})}),"\n",(0,i.jsxs)(t.p,{children:["Configures a test environment that ",(0,i.jsx)(t.strong,{children:"DOESN'T"})," use ",(0,i.jsx)(t.code,{children:"zone.js"}),", as described in ",(0,i.jsx)(t.a,{href:"https://angular.dev/guide/experimental/zoneless",children:"Angular experimental zoneless guide"}),".\nIt is designed for projects that have disabled ",(0,i.jsx)(t.code,{children:"zone.js"}),", which can lead to improved performance and simplified testing."]}),"\n",(0,i.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,i.jsx)(t.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"options"}),(0,i.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,i.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"example-1",children:"Example:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless/index.mjs';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]})]})}function m(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3793],{9587:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>p,default:()=>m,frontMatter:()=>c,metadata:()=>n,toc:()=>u});const n=JSON.parse('{"id":"getting-started/test-environment","title":"Test environment","description":"This page is now DEPRECATED and will be removed in the next major release. Please visit TestBed environment configuration","source":"@site/versioned_docs/version-14.5/getting-started/test-environment.md","sourceDirName":"getting-started","slug":"/getting-started/test-environment","permalink":"/jest-preset-angular/docs/getting-started/test-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.5/getting-started/test-environment.md","tags":[],"version":"14.5","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/getting-started/options"},"next":{"title":"TestBed environment","permalink":"/jest-preset-angular/docs/getting-started/testbed-environment"}}');var i=s(4848),r=s(8453),o=s(1470),a=s(9365),l=s(4252);const c={id:"test-environment",title:"Test environment"},p=void 0,d={},u=[{value:"Functions",id:"functions",level:2},{value:"setupZoneTestEnv(options)",id:"setupzonetestenvoptions",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Example:",id:"example",level:4},{value:"setupZonelessTestEnv(options)",id:"setupzonelesstestenvoptions",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Example:",id:"example-1",level:4}];function h(e){const t={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,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.admonition,{title:"DEPRECATED",type:"warning",children:(0,i.jsxs)(t.p,{children:["This page is now ",(0,i.jsx)(t.strong,{children:"DEPRECATED"})," and will be removed in the next major release. Please visit ",(0,i.jsx)(t.a,{href:"/jest-preset-angular/docs/getting-started/testbed-environment",children:"TestBed environment configuration"})]})}),"\n",(0,i.jsx)(t.p,{children:"In Jest, a test environment defines the sandbox context in which your tests run.\nFor Angular projects, setting up the correct test environment is essential to ensure compatibility with the\nframework-specific features, such as dependency injection and change detection."}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"jest-preset-angular"})," provides utility functions to simplify setting up a Jest test environment tailored for Angular projects.\nThese functions support both ",(0,i.jsx)(t.strong,{children:"zone-based"})," and ",(0,i.jsx)(t.strong,{children:"zoneless"})," environments, catering to different testing needs."]}),"\n",(0,i.jsx)(t.h2,{id:"functions",children:"Functions"}),"\n","\n",(0,i.jsx)(l.A,{toc:u.slice(1)}),"\n",(0,i.jsx)(t.hr,{}),"\n",(0,i.jsx)(t.h3,{id:"setupzonetestenvoptions",children:(0,i.jsx)(t.code,{children:"setupZoneTestEnv(options)"})}),"\n",(0,i.jsxs)(t.p,{children:["Configures a test environment that uses ",(0,i.jsx)(t.code,{children:"zone.js"}),", which is the mechanism for tracking asynchronous operations.\nIt is suitable for most Angular applications that rely on ",(0,i.jsx)(t.code,{children:"zone.js"})," for change detection and other framework features."]}),"\n",(0,i.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,i.jsx)(t.h4,{id:"parameters",children:"Parameters"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"options"}),(0,i.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,i.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"example",children:"Example:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]}),"\n",(0,i.jsx)(t.h3,{id:"setupzonelesstestenvoptions",children:(0,i.jsx)(t.code,{children:"setupZonelessTestEnv(options)"})}),"\n",(0,i.jsxs)(t.p,{children:["Configures a test environment that ",(0,i.jsx)(t.strong,{children:"DOESN'T"})," use ",(0,i.jsx)(t.code,{children:"zone.js"}),", as described in ",(0,i.jsx)(t.a,{href:"https://angular.dev/guide/experimental/zoneless",children:"Angular experimental zoneless guide"}),".\nIt is designed for projects that have disabled ",(0,i.jsx)(t.code,{children:"zone.js"}),", which can lead to improved performance and simplified testing."]}),"\n",(0,i.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,i.jsx)(t.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"options"}),(0,i.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,i.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"example-1",children:"Example:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless/index.mjs';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,i.jsxs)(o.A,{groupId:"code-examples",children:[(0,i.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,i.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]})]})}function m(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}}}]); \ No newline at end of file diff --git a/assets/js/ea131d77.50c5e69b.js b/assets/js/ea131d77.07aa65b2.js similarity index 97% rename from assets/js/ea131d77.50c5e69b.js rename to assets/js/ea131d77.07aa65b2.js index d2ea299e87..973f504268 100644 --- a/assets/js/ea131d77.50c5e69b.js +++ b/assets/js/ea131d77.07aa65b2.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8624],{1313:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/versioned_docs/version-11.1/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/11.1/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/guides/absolute-imports.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/11.1/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/11.1/guides/troubleshooting"}}');var i=s(4848),n=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,i.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,i.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,i.jsxs)(t.p,{children:["More information see ",(0,i.jsx)(t.code,{children:"ts-jest"})," ",(0,i.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const i={},n=o.createContext(i);function r(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8624],{1313:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"If you wish to use TypeScript path mappings which are defined in paths of your tsconfig, make sure that you create the","source":"@site/versioned_docs/version-11.1/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/11.1/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/guides/absolute-imports.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/11.1/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/11.1/guides/troubleshooting"}}');var i=s(4848),n=s(8453);const r={id:"absolute-imports",title:"Absolute Imports"},a=void 0,u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings which are defined in ",(0,i.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,i.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config."]}),"\n",(0,i.jsxs)(t.p,{children:["More information see ",(0,i.jsx)(t.code,{children:"ts-jest"})," ",(0,i.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping",children:"paths mapping"})," configuration documentation"]})]})}function d(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>r,x:()=>a});var o=s(6540);const i={},n=o.createContext(i);function r(e){const t=o.useContext(n);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/eabdbf07.85efe614.js b/assets/js/eabdbf07.968e2644.js similarity index 96% rename from assets/js/eabdbf07.85efe614.js rename to assets/js/eabdbf07.968e2644.js index e188bbd7d4..fbf50019df 100644 --- a/assets/js/eabdbf07.85efe614.js +++ b/assets/js/eabdbf07.968e2644.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5100],{2997:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>n,toc:()=>l});const n=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/docs/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/next/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/processing.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/next/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/next/getting-started/installation"}}');var o=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,o.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,o.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var n=s(6540);const o={},r=n.createContext(o);function i(e){const t=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5100],{2997:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>n,toc:()=>l});const n=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/docs/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/next/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/processing.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/next/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/next/getting-started/installation"}}');var o=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,o.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,o.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var n=s(6540);const o={},r=n.createContext(o);function i(e){const t=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/eae657ee.ff2888bd.js b/assets/js/eae657ee.1b4c4c18.js similarity index 99% rename from assets/js/eae657ee.ff2888bd.js rename to assets/js/eae657ee.1b4c4c18.js index 5d4e7b9cad..3d1ec8ca16 100644 --- a/assets/js/eae657ee.ff2888bd.js +++ b/assets/js/eae657ee.1b4c4c18.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4134],{4880:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>t,toc:()=>l});const t=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the globals of Jest config object","source":"@site/versioned_docs/version-11.1/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/11.1/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/getting-started/options.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/11.1/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/11.1/getting-started/test-environment"}}');var o=n(4848),r=n(8453);const i={id:"options",title:"Options"},c=void 0,d={},l=[{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function a(e){const s={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.code,{children:"jest-preset-angular"})," uses ",(0,o.jsx)(s.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,o.jsx)(s.code,{children:"globals"})," of Jest config object\nin the ",(0,o.jsx)(s.code,{children:"package.json"})," file of your project, or through a ",(0,o.jsx)(s.code,{children:"jest.config.js"}),", or ",(0,o.jsx)(s.code,{children:"jest.config.ts"})," file."]}),"\n",(0,o.jsxs)(s.p,{children:["More information about ",(0,o.jsx)(s.code,{children:"ts-jest"})," options, see ",(0,o.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,o.jsxs)(s.admonition,{type:"important",children:[(0,o.jsxs)(s.p,{children:["Since ",(0,o.jsx)(s.strong,{children:"v9.0.0"}),", ",(0,o.jsx)(s.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,o.jsx)(s.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,o.jsx)(s.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config"]}),(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n"})})]}),"\n",(0,o.jsx)(s.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"const snapshotSerializers = require('jest-preset-angular/build/serializers');\n\nmodule.exports = {\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n },\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n snapshotSerializers,\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',\n },\n};\n"})}),"\n",(0,o.jsx)(s.admonition,{type:"important",children:(0,o.jsxs)(s.p,{children:["Jest runs with ",(0,o.jsx)(s.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,o.jsx)(s.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,o.jsx)(s.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,o.jsx)(s.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsxs)(s.li,{children:["we're using some ",(0,o.jsx)(s.code,{children:'"globals"'})," to pass information about where our tsconfig.json file is that we'd like to be able to transform HTML files through ",(0,o.jsx)(s.code,{children:"ts-jest"}),"."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,o.jsx)(s.code,{children:"ts"}),"), HTML (",(0,o.jsx)(s.code,{children:"html"}),"), JavaScript (",(0,o.jsx)(s.code,{children:"js"}),"), JSON (",(0,o.jsx)(s.code,{children:"json"}),") and ESM JavaScript (",(0,o.jsx)(s.code,{children:"mjs"}),") files."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses ",(0,o.jsx)(s.code,{children:"RegExp"}),"."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,o.jsx)(s.code,{children:"package.json"})," definitions."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. Note: by default angular adds\nsome angular-specific attributes to the code (like ",(0,o.jsx)(s.code,{children:"ng-reflect-*"}),", ",(0,o.jsx)(s.code,{children:'ng-version="*"'}),", ",(0,o.jsx)(s.code,{children:"_ngcontent-c*"})," etc).\nThis package provides serializer to remove such attributes. This makes snapshots cleaner and more human-readable.\nTo remove such specific attributes use ",(0,o.jsx)(s.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,o.jsx)(s.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,o.jsx)(s.code,{children:".mjs"})," files which come from ",(0,o.jsx)(s.code,{children:"node_modules"}),"."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"transform"'})," \u2013 run every ",(0,o.jsx)(s.code,{children:"TS"}),", ",(0,o.jsx)(s.code,{children:"JS"}),", ",(0,o.jsx)(s.code,{children:"MJS"}),", ",(0,o.jsx)(s.code,{children:"HTML"}),", or ",(0,o.jsx)(s.code,{children:"SVG"})," file through so called ",(0,o.jsx)(s.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function h(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>i,x:()=>c});var t=n(6540);const o={},r=t.createContext(o);function i(e){const s=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function c(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),t.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4134],{4880:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>t,toc:()=>l});const t=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the globals of Jest config object","source":"@site/versioned_docs/version-11.1/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/11.1/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/getting-started/options.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/11.1/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/11.1/getting-started/test-environment"}}');var o=n(4848),r=n(8453);const i={id:"options",title:"Options"},c=void 0,d={},l=[{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function a(e){const s={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.code,{children:"jest-preset-angular"})," uses ",(0,o.jsx)(s.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,o.jsx)(s.code,{children:"globals"})," of Jest config object\nin the ",(0,o.jsx)(s.code,{children:"package.json"})," file of your project, or through a ",(0,o.jsx)(s.code,{children:"jest.config.js"}),", or ",(0,o.jsx)(s.code,{children:"jest.config.ts"})," file."]}),"\n",(0,o.jsxs)(s.p,{children:["More information about ",(0,o.jsx)(s.code,{children:"ts-jest"})," options, see ",(0,o.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,o.jsxs)(s.admonition,{type:"important",children:[(0,o.jsxs)(s.p,{children:["Since ",(0,o.jsx)(s.strong,{children:"v9.0.0"}),", ",(0,o.jsx)(s.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,o.jsx)(s.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,o.jsx)(s.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config"]}),(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n"})})]}),"\n",(0,o.jsx)(s.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",children:"const snapshotSerializers = require('jest-preset-angular/build/serializers');\n\nmodule.exports = {\n globals: {\n 'ts-jest': {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n },\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n snapshotSerializers,\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',\n },\n};\n"})}),"\n",(0,o.jsx)(s.admonition,{type:"important",children:(0,o.jsxs)(s.p,{children:["Jest runs with ",(0,o.jsx)(s.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,o.jsx)(s.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,o.jsx)(s.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,o.jsx)(s.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsxs)(s.li,{children:["we're using some ",(0,o.jsx)(s.code,{children:'"globals"'})," to pass information about where our tsconfig.json file is that we'd like to be able to transform HTML files through ",(0,o.jsx)(s.code,{children:"ts-jest"}),"."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,o.jsx)(s.code,{children:"ts"}),"), HTML (",(0,o.jsx)(s.code,{children:"html"}),"), JavaScript (",(0,o.jsx)(s.code,{children:"js"}),"), JSON (",(0,o.jsx)(s.code,{children:"json"}),") and ESM JavaScript (",(0,o.jsx)(s.code,{children:"mjs"}),") files."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses ",(0,o.jsx)(s.code,{children:"RegExp"}),"."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,o.jsx)(s.code,{children:"package.json"})," definitions."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. Note: by default angular adds\nsome angular-specific attributes to the code (like ",(0,o.jsx)(s.code,{children:"ng-reflect-*"}),", ",(0,o.jsx)(s.code,{children:'ng-version="*"'}),", ",(0,o.jsx)(s.code,{children:"_ngcontent-c*"})," etc).\nThis package provides serializer to remove such attributes. This makes snapshots cleaner and more human-readable.\nTo remove such specific attributes use ",(0,o.jsx)(s.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,o.jsx)(s.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,o.jsx)(s.code,{children:".mjs"})," files which come from ",(0,o.jsx)(s.code,{children:"node_modules"}),"."]}),"\n",(0,o.jsxs)(s.li,{children:[(0,o.jsx)(s.code,{children:'"transform"'})," \u2013 run every ",(0,o.jsx)(s.code,{children:"TS"}),", ",(0,o.jsx)(s.code,{children:"JS"}),", ",(0,o.jsx)(s.code,{children:"MJS"}),", ",(0,o.jsx)(s.code,{children:"HTML"}),", or ",(0,o.jsx)(s.code,{children:"SVG"})," file through so called ",(0,o.jsx)(s.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function h(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}},8453:(e,s,n)=>{n.d(s,{R:()=>i,x:()=>c});var t=n(6540);const o={},r=t.createContext(o);function i(e){const s=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function c(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),t.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/ebf39289.483bdc29.js b/assets/js/ebf39289.22979f56.js similarity index 99% rename from assets/js/ebf39289.483bdc29.js rename to assets/js/ebf39289.22979f56.js index 7d2e31d499..066bb48ed6 100644 --- a/assets/js/ebf39289.483bdc29.js +++ b/assets/js/ebf39289.22979f56.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8715],{9546:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>p,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the transform of Jest config object","source":"@site/versioned_docs/version-14.0/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/14.0/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/getting-started/options.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/14.0/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/14.0/getting-started/test-environment"}}');var r=t(4848),o=t(8453),i=t(1470),a=t(9365);const l={id:"options",title:"Options"},c=void 0,d={},u=[{value:"Processing with esbuild",id:"processing-with-esbuild",level:3},{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function h(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,r.jsx)(n.code,{children:"transform"})," of Jest config object\nin the ",(0,r.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,r.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,r.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,r.jsxs)(n.p,{children:["More information about ",(0,r.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,r.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,r.jsxs)(n.admonition,{type:"important",children:[(0,r.jsxs)(n.p,{children:["Since ",(0,r.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,r.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,r.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]}),(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n\nexport default jestConfig;\n"})})})]}),(0,r.jsx)(n.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),(0,r.jsxs)(n.p,{children:["Since ",(0,r.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,r.jsx)(n.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,r.jsx)(n.code,{children:".mjs"})," files\nwill be processed by ",(0,r.jsx)(n.code,{children:"esbuild"})," in ",(0,r.jsx)(n.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,r.jsx)(n.code,{children:"esbuild"}),", one can do the following:"]}),(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n globals: {\n ngJest: {\n processWithEsbuild: [],\n },\n },\n}\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globals: {\n ngJest: {\n processWithEsbuild: [],\n },\n },\n}\n\nexport default jestConfig;\n"})})})]})]}),"\n",(0,r.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst snapshotSerializers = require('jest-preset-angular/build/serializers');\n\nmodule.exports = {\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n snapshotSerializers,\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n ],\n },\n};\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport snapshotSerializers from 'jest-preset-angular/build/serializers';\n\nconst jestConfig: Config = {\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n snapshotSerializers,\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.admonition,{type:"important",children:(0,r.jsxs)(n.p,{children:["Jest runs with ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,r.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,r.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,r.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["We're using ",(0,r.jsx)(n.code,{children:'"transform"'})," to pass information about configuration to use for code compilation with ",(0,r.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,r.jsx)(n.code,{children:"ts"}),"), HTML (",(0,r.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,r.jsx)(n.code,{children:"js"}),"), JSON (",(0,r.jsx)(n.code,{children:"json"}),") and ESM JavaScript (",(0,r.jsx)(n.code,{children:"mjs"}),") files."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses ",(0,r.jsx)(n.code,{children:"RegExp"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,r.jsx)(n.code,{children:"package.json"})," definitions."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. Note: by default angular adds\nsome angular-specific attributes to the code (like ",(0,r.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,r.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,r.jsx)(n.code,{children:"_ngcontent-c*"})," etc).\nThis package provides serializer to remove such attributes. This makes snapshots cleaner and more human-readable.\nTo remove such specific attributes use ",(0,r.jsx)(n.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,r.jsx)(n.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,r.jsx)(n.code,{children:".mjs"})," files which come from ",(0,r.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,r.jsx)(n.code,{children:"TS"}),", ",(0,r.jsx)(n.code,{children:"JS"}),", ",(0,r.jsx)(n.code,{children:"MJS"}),", ",(0,r.jsx)(n.code,{children:"HTML"}),", or ",(0,r.jsx)(n.code,{children:"SVG"})," file through so called ",(0,r.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>i});t(6540);var s=t(4164);const r={tabItem:"tabItem_Ymn6"};var o=t(4848);function i(e){let{children:n,hidden:t,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,i),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>w});var s=t(6540),r=t(4164),o=t(3104),i=t(6347),a=t(205),l=t(7485),c=t(1682),d=t(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:n,children:t}=e;return(0,s.useMemo)((()=>{const e=n??function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}}))}(t);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function p(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function j(e){let{queryString:n=!1,groupId:t}=e;const r=(0,i.W6)(),o=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(o),(0,s.useCallback)((e=>{if(!o)return;const n=new URLSearchParams(r.location.search);n.set(o,e),r.replace({...r.location,search:n.toString()})}),[o,r])]}function f(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,o=h(e),[i,l]=(0,s.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!p({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const s=t.find((e=>e.default))??t[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:o}))),[c,u]=j({queryString:t,groupId:r}),[f,m]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,o]=(0,d.Dv)(t);return[r,(0,s.useCallback)((e=>{t&&o.set(e)}),[t,o])]}({groupId:r}),g=(()=>{const e=c??f;return p({value:e,tabValues:o})?e:null})();(0,a.A)((()=>{g&&l(g)}),[g]);return{selectedValue:i,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),m(e)}),[u,m,o]),tabValues:o}}var m=t(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=t(4848);function b(e){let{className:n,block:t,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.a_)(),d=e=>{const n=e.currentTarget,t=l.indexOf(n),r=a[t].value;r!==s&&(c(n),i(r))},u=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":t},n),children:a.map((e=>{let{value:n,label:t,attributes:o}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:s===n?0:-1,"aria-selected":s===n,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...o,className:(0,r.A)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:o}=e;const i=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=i.find((e=>e.props.value===o));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map(((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==o})))})}function y(e){const n=f(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",g.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function w(e){const n=(0,m.A)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>a});var s=t(6540);const r={},o=s.createContext(r);function i(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8715],{9546:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>p,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the transform of Jest config object","source":"@site/versioned_docs/version-14.0/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/14.0/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/getting-started/options.md","tags":[],"version":"14.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/14.0/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/14.0/getting-started/test-environment"}}');var r=t(4848),o=t(8453),i=t(1470),a=t(9365);const l={id:"options",title:"Options"},c=void 0,d={},u=[{value:"Processing with esbuild",id:"processing-with-esbuild",level:3},{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function h(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,r.jsx)(n.code,{children:"transform"})," of Jest config object\nin the ",(0,r.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,r.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,r.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,r.jsxs)(n.p,{children:["More information about ",(0,r.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,r.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,r.jsxs)(n.admonition,{type:"important",children:[(0,r.jsxs)(n.p,{children:["Since ",(0,r.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,r.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,r.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]}),(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n\nexport default jestConfig;\n"})})})]}),(0,r.jsx)(n.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),(0,r.jsxs)(n.p,{children:["Since ",(0,r.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,r.jsx)(n.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,r.jsx)(n.code,{children:".mjs"})," files\nwill be processed by ",(0,r.jsx)(n.code,{children:"esbuild"})," in ",(0,r.jsx)(n.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,r.jsx)(n.code,{children:"esbuild"}),", one can do the following:"]}),(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n globals: {\n ngJest: {\n processWithEsbuild: [],\n },\n },\n}\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globals: {\n ngJest: {\n processWithEsbuild: [],\n },\n },\n}\n\nexport default jestConfig;\n"})})})]})]}),"\n",(0,r.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst snapshotSerializers = require('jest-preset-angular/build/serializers');\n\nmodule.exports = {\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n snapshotSerializers,\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n ],\n },\n};\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport snapshotSerializers from 'jest-preset-angular/build/serializers';\n\nconst jestConfig: Config = {\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n snapshotSerializers,\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.admonition,{type:"important",children:(0,r.jsxs)(n.p,{children:["Jest runs with ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,r.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,r.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,r.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["We're using ",(0,r.jsx)(n.code,{children:'"transform"'})," to pass information about configuration to use for code compilation with ",(0,r.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,r.jsx)(n.code,{children:"ts"}),"), HTML (",(0,r.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,r.jsx)(n.code,{children:"js"}),"), JSON (",(0,r.jsx)(n.code,{children:"json"}),") and ESM JavaScript (",(0,r.jsx)(n.code,{children:"mjs"}),") files."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses ",(0,r.jsx)(n.code,{children:"RegExp"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,r.jsx)(n.code,{children:"package.json"})," definitions."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. Note: by default angular adds\nsome angular-specific attributes to the code (like ",(0,r.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,r.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,r.jsx)(n.code,{children:"_ngcontent-c*"})," etc).\nThis package provides serializer to remove such attributes. This makes snapshots cleaner and more human-readable.\nTo remove such specific attributes use ",(0,r.jsx)(n.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,r.jsx)(n.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,r.jsx)(n.code,{children:".mjs"})," files which come from ",(0,r.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,r.jsx)(n.code,{children:"TS"}),", ",(0,r.jsx)(n.code,{children:"JS"}),", ",(0,r.jsx)(n.code,{children:"MJS"}),", ",(0,r.jsx)(n.code,{children:"HTML"}),", or ",(0,r.jsx)(n.code,{children:"SVG"})," file through so called ",(0,r.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>i});t(6540);var s=t(4164);const r={tabItem:"tabItem_Ymn6"};var o=t(4848);function i(e){let{children:n,hidden:t,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,i),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>w});var s=t(6540),r=t(4164),o=t(3104),i=t(6347),a=t(205),l=t(7485),c=t(1682),d=t(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:n,children:t}=e;return(0,s.useMemo)((()=>{const e=n??function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}}))}(t);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function p(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function j(e){let{queryString:n=!1,groupId:t}=e;const r=(0,i.W6)(),o=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(o),(0,s.useCallback)((e=>{if(!o)return;const n=new URLSearchParams(r.location.search);n.set(o,e),r.replace({...r.location,search:n.toString()})}),[o,r])]}function f(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,o=h(e),[i,l]=(0,s.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!p({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const s=t.find((e=>e.default))??t[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:o}))),[c,u]=j({queryString:t,groupId:r}),[f,m]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,o]=(0,d.Dv)(t);return[r,(0,s.useCallback)((e=>{t&&o.set(e)}),[t,o])]}({groupId:r}),g=(()=>{const e=c??f;return p({value:e,tabValues:o})?e:null})();(0,a.A)((()=>{g&&l(g)}),[g]);return{selectedValue:i,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),m(e)}),[u,m,o]),tabValues:o}}var m=t(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=t(4848);function b(e){let{className:n,block:t,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.a_)(),d=e=>{const n=e.currentTarget,t=l.indexOf(n),r=a[t].value;r!==s&&(c(n),i(r))},u=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":t},n),children:a.map((e=>{let{value:n,label:t,attributes:o}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:s===n?0:-1,"aria-selected":s===n,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...o,className:(0,r.A)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:o}=e;const i=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=i.find((e=>e.props.value===o));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map(((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==o})))})}function y(e){const n=f(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",g.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function w(e){const n=(0,m.A)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>a});var s=t(6540);const r={},o=s.createContext(r);function i(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/ec1d9510.f2a27758.js b/assets/js/ec1d9510.8ff97a94.js similarity index 99% rename from assets/js/ec1d9510.f2a27758.js rename to assets/js/ec1d9510.8ff97a94.js index 1ce6696c75..d7a667396a 100644 --- a/assets/js/ec1d9510.f2a27758.js +++ b/assets/js/ec1d9510.8ff97a94.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3421],{6418:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-11.0/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/11.0/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/guides/troubleshooting.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/11.0/guides/absolute-imports"}}');var t=s(4848),o=s(8453);const i={id:"troubleshooting",title:"Troubleshooting"},a=void 0,l={},d=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["You can check Jest ",(0,t.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,t.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,t.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,t.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,t.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,t.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,t.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,t.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,t.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,t.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,t.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,t.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,t.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,t.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,t.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,t.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Add this to your ",(0,t.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,t.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,t.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,t.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,t.jsx)(n.code,{children:"JS"})," file with ",(0,t.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,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,t.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,t.jsx)(n.code,{children:"@angular"}),", ",(0,t.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,t.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,t.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,t.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,t.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,t.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,t.jsx)(n.p,{children:"or"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,t.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,t.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,t.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,t.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Install ",(0,t.jsx)(n.code,{children:"babel-jest"}),", ",(0,t.jsx)(n.code,{children:"@babel/core"})," and ",(0,t.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,t.jsxs)(n.li,{children:["Create a ",(0,t.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,t.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Define the usage of ",(0,t.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,t.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,t.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,t.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,t.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,t.jsx)(n.code,{children:"firebase"})," and ",(0,t.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,t.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,t.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,t.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,t.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,t.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,t.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,t.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,t.jsxs)(n.p,{children:["In these cases, a ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,t.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,t.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,t.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.resolver.js\nmodule.exports = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\n...\nresolver: '/src/jest.resolver.js',\n...\n"})})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>a});var r=s(6540);const t={},o=r.createContext(t);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3421],{6418:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-11.0/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/11.0/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/guides/troubleshooting.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/11.0/guides/absolute-imports"}}');var t=s(4848),o=s(8453);const i={id:"troubleshooting",title:"Troubleshooting"},a=void 0,l={},d=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["You can check Jest ",(0,t.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,t.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,t.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,t.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,t.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,t.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,t.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,t.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,t.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,t.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,t.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,t.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,t.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,t.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,t.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,t.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Add this to your ",(0,t.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,t.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,t.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,t.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,t.jsx)(n.code,{children:"JS"})," file with ",(0,t.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,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,t.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,t.jsx)(n.code,{children:"@angular"}),", ",(0,t.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,t.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,t.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,t.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,t.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,t.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,t.jsx)(n.p,{children:"or"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,t.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,t.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,t.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,t.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Install ",(0,t.jsx)(n.code,{children:"babel-jest"}),", ",(0,t.jsx)(n.code,{children:"@babel/core"})," and ",(0,t.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,t.jsxs)(n.li,{children:["Create a ",(0,t.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,t.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Define the usage of ",(0,t.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,t.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,t.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,t.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,t.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,t.jsx)(n.code,{children:"firebase"})," and ",(0,t.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,t.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,t.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,t.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,t.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,t.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,t.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,t.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,t.jsxs)(n.p,{children:["In these cases, a ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,t.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,t.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,t.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.resolver.js\nmodule.exports = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\n...\nresolver: '/src/jest.resolver.js',\n...\n"})})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>a});var r=s(6540);const t={},o=r.createContext(t);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/ec7d5e88.95fba1c9.js b/assets/js/ec7d5e88.30ea76b8.js similarity index 99% rename from assets/js/ec7d5e88.95fba1c9.js rename to assets/js/ec7d5e88.30ea76b8.js index 9641613273..56d690e593 100644 --- a/assets/js/ec7d5e88.95fba1c9.js +++ b/assets/js/ec7d5e88.30ea76b8.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9896],{7988:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>l,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"The presets","source":"@site/versioned_docs/version-14.3/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/14.3/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/getting-started/presets.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/14.3/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/14.3/getting-started/options"}}');var r=n(4848),a=n(8453),o=n(1470),i=n(9365);const l={id:"presets",title:"Presets"},c=void 0,u={},d=[{value:"The presets",id:"the-presets",level:3},{value:"Basic usage",id:"basic-usage",level:3},{value:"Advanced",id:"advanced",level:3}];function p(e){const t={admonition:"admonition",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Preset name"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,r.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,r.jsx)(t.code,{children:"preset"})," key to the desired preset name in your Jest config should be enough to start\nusing TypeScript with Jest (assuming you added ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,r.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,r.jsxs)(t.p,{children:["All presets come with default ",(0,r.jsx)(t.code,{children:"ts-jest"})," config options.\nIf you want to override any of the options, you'll need to use the JavaScript version of Jest config,\ncopy the original options and override the options you need:"]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["If you choose to override ",(0,r.jsx)(t.code,{children:"transform"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,r.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,r.jsx)(t.code,{children:"transform"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nconst jestConfig: Config = {\n // [...]\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n ...presets.defaultTransformerOptions,\n // [...your overriden options]\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nconst jestConfig: Config = {\n // [...]\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n ...presets.defaultTransformerOptions,\n // [...your overriden options]\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>o});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function o(e){let{children:t,hidden:n,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,o),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),o=n(6347),i=n(205),l=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const r=(0,o.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[o,l]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=f({queryString:n,groupId:r}),[g,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),j=(()=>{const e=c??g;return h({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{j&&l(j)}),[j]);return{selectedValue:o,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=l.indexOf(t),r=i[n].value;r!==s&&(c(t),o(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>i});var s=n(6540);const r={},a=s.createContext(r);function o(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9896],{7988:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>l,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"The presets","source":"@site/versioned_docs/version-14.3/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/14.3/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.3/getting-started/presets.md","tags":[],"version":"14.3","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/14.3/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/14.3/getting-started/options"}}');var r=n(4848),a=n(8453),o=n(1470),i=n(9365);const l={id:"presets",title:"Presets"},c=void 0,u={},d=[{value:"The presets",id:"the-presets",level:3},{value:"Basic usage",id:"basic-usage",level:3},{value:"Advanced",id:"advanced",level:3}];function p(e){const t={admonition:"admonition",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Preset name"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,r.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,r.jsx)(t.code,{children:"preset"})," key to the desired preset name in your Jest config should be enough to start\nusing TypeScript with Jest (assuming you added ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,r.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,r.jsxs)(t.p,{children:["All presets come with default ",(0,r.jsx)(t.code,{children:"ts-jest"})," config options.\nIf you want to override any of the options, you'll need to use the JavaScript version of Jest config,\ncopy the original options and override the options you need:"]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["If you choose to override ",(0,r.jsx)(t.code,{children:"transform"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,r.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,r.jsx)(t.code,{children:"transform"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nconst jestConfig: Config = {\n // [...]\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n ...presets.defaultTransformerOptions,\n // [...your overriden options]\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nconst jestConfig: Config = {\n // [...]\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n ...presets.defaultTransformerOptions,\n // [...your overriden options]\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>o});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function o(e){let{children:t,hidden:n,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,o),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),o=n(6347),i=n(205),l=n(7485),c=n(1682),u=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,c.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const r=(0,o.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[o,l]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[c,d]=f({queryString:n,groupId:r}),[g,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),j=(()=>{const e=c??g;return h({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{j&&l(j)}),[j]);return{selectedValue:o,selectValue:(0,s.useCallback)((e=>{if(!h({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(4848);function x(e){let{className:t,block:n,selectedValue:s,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.a_)(),u=e=>{const t=e.currentTarget,n=l.indexOf(t),r=i[n].value;r!==s&&(c(t),o(r))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:u,...a,className:(0,r.A)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:a}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.A)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>i});var s=n(6540);const r={},a=s.createContext(r);function o(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/ecfacc56.16578852.js b/assets/js/ecfacc56.c6dfd7a7.js similarity index 96% rename from assets/js/ecfacc56.16578852.js rename to assets/js/ecfacc56.c6dfd7a7.js index c56f56a8c7..4907c427c7 100644 --- a/assets/js/ecfacc56.16578852.js +++ b/assets/js/ecfacc56.c6dfd7a7.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1019],{1811:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-11.0/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/11.0/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/processing.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/11.0/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/11.0/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1019],{1811:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-11.0/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/11.0/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/processing.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/11.0/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/11.0/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/ef2f3ccd.2ceb2dee.js b/assets/js/ef2f3ccd.2d04afca.js similarity index 99% rename from assets/js/ef2f3ccd.2ceb2dee.js rename to assets/js/ef2f3ccd.2d04afca.js index 9072ffea77..8edf901af1 100644 --- a/assets/js/ef2f3ccd.2ceb2dee.js +++ b/assets/js/ef2f3ccd.2d04afca.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6741],{6979:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>p,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the transform of Jest config object","source":"@site/versioned_docs/version-14.2/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/14.2/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/getting-started/options.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/14.2/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/14.2/getting-started/test-environment"}}');var r=t(4848),o=t(8453),i=t(1470),a=t(9365);const l={id:"options",title:"Options"},c=void 0,d={},u=[{value:"Processing with esbuild",id:"processing-with-esbuild",level:3},{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function h(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,r.jsx)(n.code,{children:"transform"})," of Jest config object\nin the ",(0,r.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,r.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,r.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,r.jsxs)(n.p,{children:["More information about ",(0,r.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,r.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,r.jsxs)(n.admonition,{type:"important",children:[(0,r.jsxs)(n.p,{children:["Since ",(0,r.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,r.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,r.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]}),(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n\nexport default jestConfig;\n"})})})]}),(0,r.jsx)(n.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),(0,r.jsxs)(n.p,{children:["Since ",(0,r.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,r.jsx)(n.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,r.jsx)(n.code,{children:".mjs"})," files\nwill be processed by ",(0,r.jsx)(n.code,{children:"esbuild"})," in ",(0,r.jsx)(n.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,r.jsx)(n.code,{children:"esbuild"}),", one can do the following:"]}),(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n globals: {\n ngJest: {\n processWithEsbuild: [],\n },\n },\n}\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globals: {\n ngJest: {\n processWithEsbuild: [],\n },\n },\n}\n\nexport default jestConfig;\n"})})})]})]}),"\n",(0,r.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst snapshotSerializers = require('jest-preset-angular/build/serializers');\n\nmodule.exports = {\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n snapshotSerializers,\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n ],\n },\n};\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport snapshotSerializers from 'jest-preset-angular/build/serializers';\n\nconst jestConfig: Config = {\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n snapshotSerializers,\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.admonition,{type:"important",children:(0,r.jsxs)(n.p,{children:["Jest runs with ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,r.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,r.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,r.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["We're using ",(0,r.jsx)(n.code,{children:'"transform"'})," to pass information about configuration to use for code compilation with ",(0,r.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,r.jsx)(n.code,{children:"ts"}),"), HTML (",(0,r.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,r.jsx)(n.code,{children:"js"}),"), JSON (",(0,r.jsx)(n.code,{children:"json"}),") and ESM JavaScript (",(0,r.jsx)(n.code,{children:"mjs"}),") files."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses ",(0,r.jsx)(n.code,{children:"RegExp"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,r.jsx)(n.code,{children:"package.json"})," definitions."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. See more in ",(0,r.jsx)(n.a,{href:"/jest-preset-angular/docs/14.2/guides/snapshot-testing",children:"Snapshot testing"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,r.jsx)(n.code,{children:".mjs"})," files which come from ",(0,r.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,r.jsx)(n.code,{children:"TS"}),", ",(0,r.jsx)(n.code,{children:"JS"}),", ",(0,r.jsx)(n.code,{children:"MJS"}),", ",(0,r.jsx)(n.code,{children:"HTML"}),", or ",(0,r.jsx)(n.code,{children:"SVG"})," file through so called ",(0,r.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>i});t(6540);var s=t(4164);const r={tabItem:"tabItem_Ymn6"};var o=t(4848);function i(e){let{children:n,hidden:t,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,i),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>w});var s=t(6540),r=t(4164),o=t(3104),i=t(6347),a=t(205),l=t(7485),c=t(1682),d=t(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:n,children:t}=e;return(0,s.useMemo)((()=>{const e=n??function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}}))}(t);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function p(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function j(e){let{queryString:n=!1,groupId:t}=e;const r=(0,i.W6)(),o=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(o),(0,s.useCallback)((e=>{if(!o)return;const n=new URLSearchParams(r.location.search);n.set(o,e),r.replace({...r.location,search:n.toString()})}),[o,r])]}function f(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,o=h(e),[i,l]=(0,s.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!p({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const s=t.find((e=>e.default))??t[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:o}))),[c,u]=j({queryString:t,groupId:r}),[f,g]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,o]=(0,d.Dv)(t);return[r,(0,s.useCallback)((e=>{t&&o.set(e)}),[t,o])]}({groupId:r}),m=(()=>{const e=c??f;return p({value:e,tabValues:o})?e:null})();(0,a.A)((()=>{m&&l(m)}),[m]);return{selectedValue:i,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),g(e)}),[u,g,o]),tabValues:o}}var g=t(2303);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=t(4848);function b(e){let{className:n,block:t,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.a_)(),d=e=>{const n=e.currentTarget,t=l.indexOf(n),r=a[t].value;r!==s&&(c(n),i(r))},u=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":t},n),children:a.map((e=>{let{value:n,label:t,attributes:o}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:s===n?0:-1,"aria-selected":s===n,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...o,className:(0,r.A)("tabs__item",m.tabItem,o?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:o}=e;const i=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=i.find((e=>e.props.value===o));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map(((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==o})))})}function y(e){const n=f(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",m.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function w(e){const n=(0,g.A)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>a});var s=t(6540);const r={},o=s.createContext(r);function i(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6741],{6979:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>p,frontMatter:()=>l,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"getting-started/options","title":"Options","description":"jest-preset-angular uses ts-jest options under the hood, which are located under the transform of Jest config object","source":"@site/versioned_docs/version-14.2/getting-started/options.md","sourceDirName":"getting-started","slug":"/getting-started/options","permalink":"/jest-preset-angular/docs/14.2/getting-started/options","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/getting-started/options.md","tags":[],"version":"14.2","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"options","title":"Options"},"sidebar":"docs","previous":{"title":"Presets","permalink":"/jest-preset-angular/docs/14.2/getting-started/presets"},"next":{"title":"Test environment","permalink":"/jest-preset-angular/docs/14.2/getting-started/test-environment"}}');var r=t(4848),o=t(8453),i=t(1470),a=t(9365);const l={id:"options",title:"Options"},c=void 0,d={},u=[{value:"Processing with esbuild",id:"processing-with-esbuild",level:3},{value:"Exposed configuration",id:"exposed-configuration",level:3},{value:"Brief explanation of config",id:"brief-explanation-of-config",level:3}];function h(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,r.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,r.jsx)(n.code,{children:"transform"})," of Jest config object\nin the ",(0,r.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,r.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,r.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,r.jsxs)(n.p,{children:["More information about ",(0,r.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,r.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,r.jsxs)(n.admonition,{type:"important",children:[(0,r.jsxs)(n.p,{children:["Since ",(0,r.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,r.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,r.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]}),(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n moduleNameMapper: {\n '^src/(.*)$': '/src/$1',\n '^app/(.*)$': '/src/app/$1',\n '^assets/(.*)$': '/src/assets/$1',\n '^environments/(.*)$': '/src/environments/$1',\n },\n};\n\nexport default jestConfig;\n"})})})]}),(0,r.jsx)(n.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),(0,r.jsxs)(n.p,{children:["Since ",(0,r.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,r.jsx)(n.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,r.jsx)(n.code,{children:".mjs"})," files\nwill be processed by ",(0,r.jsx)(n.code,{children:"esbuild"})," in ",(0,r.jsx)(n.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,r.jsx)(n.code,{children:"esbuild"}),", one can do the following:"]}),(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n //...\n globals: {\n ngJest: {\n processWithEsbuild: [],\n },\n },\n}\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n globals: {\n ngJest: {\n processWithEsbuild: [],\n },\n },\n}\n\nexport default jestConfig;\n"})})})]})]}),"\n",(0,r.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,r.jsxs)(i.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst snapshotSerializers = require('jest-preset-angular/build/serializers');\n\nmodule.exports = {\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n snapshotSerializers,\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n ],\n },\n};\n"})})}),(0,r.jsx)(a.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\nimport snapshotSerializers from 'jest-preset-angular/build/serializers';\n\nconst jestConfig: Config = {\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',\n snapshotSerializers,\n testEnvironment: 'jsdom',\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/tsconfig.spec.json',\n stringifyContentPathRegex: '\\\\.(html|svg)$',\n },\n ],\n },\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(n.admonition,{type:"important",children:(0,r.jsxs)(n.p,{children:["Jest runs with ",(0,r.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,r.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,r.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,r.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["We're using ",(0,r.jsx)(n.code,{children:'"transform"'})," to pass information about configuration to use for code compilation with ",(0,r.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,r.jsx)(n.code,{children:"ts"}),"), HTML (",(0,r.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,r.jsx)(n.code,{children:"js"}),"), JSON (",(0,r.jsx)(n.code,{children:"json"}),") and ESM JavaScript (",(0,r.jsx)(n.code,{children:"mjs"}),") files."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"moduleNameMapper"'})," \u2013 if you're using absolute imports here's how to tell Jest where to look for them; uses ",(0,r.jsx)(n.code,{children:"RegExp"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,r.jsx)(n.code,{children:"package.json"})," definitions."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. See more in ",(0,r.jsx)(n.a,{href:"/jest-preset-angular/docs/14.2/guides/snapshot-testing",children:"Snapshot testing"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,r.jsx)(n.code,{children:".mjs"})," files which come from ",(0,r.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,r.jsx)(n.code,{children:"TS"}),", ",(0,r.jsx)(n.code,{children:"JS"}),", ",(0,r.jsx)(n.code,{children:"MJS"}),", ",(0,r.jsx)(n.code,{children:"HTML"}),", or ",(0,r.jsx)(n.code,{children:"SVG"})," file through so called ",(0,r.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},9365:(e,n,t)=>{t.d(n,{A:()=>i});t(6540);var s=t(4164);const r={tabItem:"tabItem_Ymn6"};var o=t(4848);function i(e){let{children:n,hidden:t,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,i),hidden:t,children:n})}},1470:(e,n,t)=>{t.d(n,{A:()=>w});var s=t(6540),r=t(4164),o=t(3104),i=t(6347),a=t(205),l=t(7485),c=t(1682),d=t(679);function u(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function h(e){const{values:n,children:t}=e;return(0,s.useMemo)((()=>{const e=n??function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:s,default:r}}=e;return{value:n,label:t,attributes:s,default:r}}))}(t);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function p(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function j(e){let{queryString:n=!1,groupId:t}=e;const r=(0,i.W6)(),o=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,l.aZ)(o),(0,s.useCallback)((e=>{if(!o)return;const n=new URLSearchParams(r.location.search);n.set(o,e),r.replace({...r.location,search:n.toString()})}),[o,r])]}function f(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,o=h(e),[i,l]=(0,s.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!p({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const s=t.find((e=>e.default))??t[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:o}))),[c,u]=j({queryString:t,groupId:r}),[f,g]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[r,o]=(0,d.Dv)(t);return[r,(0,s.useCallback)((e=>{t&&o.set(e)}),[t,o])]}({groupId:r}),m=(()=>{const e=c??f;return p({value:e,tabValues:o})?e:null})();(0,a.A)((()=>{m&&l(m)}),[m]);return{selectedValue:i,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),g(e)}),[u,g,o]),tabValues:o}}var g=t(2303);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=t(4848);function b(e){let{className:n,block:t,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.a_)(),d=e=>{const n=e.currentTarget,t=l.indexOf(n),r=a[t].value;r!==s&&(c(n),i(r))},u=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const t=l.indexOf(e.currentTarget)+1;n=l[t]??l[0];break}case"ArrowLeft":{const t=l.indexOf(e.currentTarget)-1;n=l[t]??l[l.length-1];break}}n?.focus()};return(0,x.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":t},n),children:a.map((e=>{let{value:n,label:t,attributes:o}=e;return(0,x.jsx)("li",{role:"tab",tabIndex:s===n?0:-1,"aria-selected":s===n,ref:e=>{l.push(e)},onKeyDown:u,onClick:d,...o,className:(0,r.A)("tabs__item",m.tabItem,o?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:o}=e;const i=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=i.find((e=>e.props.value===o));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:i.map(((e,n)=>(0,s.cloneElement)(e,{key:n,hidden:e.props.value!==o})))})}function y(e){const n=f(e);return(0,x.jsxs)("div",{className:(0,r.A)("tabs-container",m.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function w(e){const n=(0,g.A)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(n))}},8453:(e,n,t)=>{t.d(n,{R:()=>i,x:()=>a});var s=t(6540);const r={},o=s.createContext(r);function i(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f0447160.982a158b.js b/assets/js/f0447160.5e054564.js similarity index 99% rename from assets/js/f0447160.982a158b.js rename to assets/js/f0447160.5e054564.js index f6c5ed9742..f7ba863c71 100644 --- a/assets/js/f0447160.982a158b.js +++ b/assets/js/f0447160.5e054564.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[499],{7727:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"Configure other JSDOM versions","description":"Jest v26+ by default uses JSDOM 16 to support Node 10+.","source":"@site/versioned_docs/version-8.x/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/8.x/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/guides/jsdom-version.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/8.x/guides/esm-support"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/8.x/guides/using-with-babel"}}');var s=n(4848),o=n(8453),a=n(1470),i=n(9365);const l={id:"jsdom-version",title:"Configure other JSDOM versions"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,s.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,s.jsxs)(t.p,{children:["If you need a different JSDOM version than the one that ships with Jest, you can install a jsdom environment\npackage, e.g. ",(0,s.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,s.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,s.jsx)(t.code,{children:"localStorage"})," or ",(0,s.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,s.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Reference: ",(0,s.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200",children:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200"})]})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var o=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,a),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),o=n(3104),a=n(6347),i=n(205),l=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,a.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(s.location.search);t.set(o,e),s.replace({...s.location,search:t.toString()})}),[o,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,o=p(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[u,d]=h({queryString:n,groupId:s}),[f,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,o]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return m({value:e,tabValues:o})?e:null})();(0,i.A)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),b(e)}),[d,b,o]),tabValues:o}}var b=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),c=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==r&&(u(t),a(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...o,className:(0,s.A)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[499],{7727:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"Configure other JSDOM versions","description":"Jest v26+ by default uses JSDOM 16 to support Node 10+.","source":"@site/versioned_docs/version-8.x/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/8.x/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/guides/jsdom-version.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/8.x/guides/esm-support"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/8.x/guides/using-with-babel"}}');var s=n(4848),o=n(8453),a=n(1470),i=n(9365);const l={id:"jsdom-version",title:"Configure other JSDOM versions"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,s.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,s.jsxs)(t.p,{children:["If you need a different JSDOM version than the one that ships with Jest, you can install a jsdom environment\npackage, e.g. ",(0,s.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,s.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,s.jsx)(t.code,{children:"localStorage"})," or ",(0,s.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,s.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Reference: ",(0,s.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200",children:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200"})]})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var o=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,a),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),o=n(3104),a=n(6347),i=n(205),l=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,a.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(s.location.search);t.set(o,e),s.replace({...s.location,search:t.toString()})}),[o,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,o=p(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[u,d]=h({queryString:n,groupId:s}),[f,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,o]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return m({value:e,tabValues:o})?e:null})();(0,i.A)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),b(e)}),[d,b,o]),tabValues:o}}var b=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),c=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==r&&(u(t),a(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...o,className:(0,s.A)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f071d7c3.6d12e392.js b/assets/js/f071d7c3.92b2317c.js similarity index 98% rename from assets/js/f071d7c3.6d12e392.js rename to assets/js/f071d7c3.92b2317c.js index 5bb151dc3e..e1832d30b2 100644 --- a/assets/js/f071d7c3.6d12e392.js +++ b/assets/js/f071d7c3.92b2317c.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8048],{5938:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>p,default:()=>m,frontMatter:()=>c,metadata:()=>n,toc:()=>u});const n=JSON.parse('{"id":"getting-started/testbed-environment","title":"TestBed environment","description":"Angular provides a powerful testing utility called TestBed,","source":"@site/docs/getting-started/testbed-environment.md","sourceDirName":"getting-started","slug":"/getting-started/testbed-environment","permalink":"/jest-preset-angular/docs/next/getting-started/testbed-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/getting-started/testbed-environment.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"testbed-environment","title":"TestBed environment"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/next/getting-started/test-environment"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/next/guides/angular-ivy"}}');var r=s(4848),i=s(8453),l=s(1470),o=s(9365),a=s(4252);const c={id:"testbed-environment",title:"TestBed environment"},p=void 0,d={},u=[{value:"Functions",id:"functions",level:2},{value:"setupZoneTestEnv(options)",id:"setupzonetestenvoptions",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Example:",id:"example",level:4},{value:"setupZonelessTestEnv(options)",id:"setupzonelesstestenvoptions",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Example:",id:"example-1",level:4}];function h(e){const t={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["Angular provides a powerful testing utility called ",(0,r.jsx)(t.a,{href:"https://angular.dev/api/core/testing/TestBed",children:"TestBed"}),",\nwhich allows to configure and initialize an environment for unit testing and provides methods for creating components and services in unit tests."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," provides utility functions to simplify setting up ",(0,r.jsx)(t.code,{children:"TestBed"})," environment. These below utility functions\nsupport both ",(0,r.jsx)(t.strong,{children:"zone-based"})," and ",(0,r.jsx)(t.strong,{children:"zoneless"})," environments, catering to different testing needs."]}),"\n",(0,r.jsx)(t.h2,{id:"functions",children:"Functions"}),"\n","\n",(0,r.jsx)(a.A,{toc:u.slice(1)}),"\n",(0,r.jsx)(t.hr,{}),"\n",(0,r.jsx)(t.h3,{id:"setupzonetestenvoptions",children:(0,r.jsx)(t.code,{children:"setupZoneTestEnv(options)"})}),"\n",(0,r.jsxs)(t.p,{children:["Configures an environment that uses ",(0,r.jsx)(t.code,{children:"zone.js"}),", which is the mechanism for tracking asynchronous operations.\nIt is suitable for most Angular applications that rely on ",(0,r.jsx)(t.code,{children:"zone.js"})," for change detection and other framework features."]}),"\n",(0,r.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,r.jsx)(t.h4,{id:"parameters",children:"Parameters"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"options"}),(0,r.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,r.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,r.jsx)(t.h4,{id:"example",children:"Example:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"setupzonelesstestenvoptions",children:(0,r.jsx)(t.code,{children:"setupZonelessTestEnv(options)"})}),"\n",(0,r.jsxs)(t.p,{children:["Configures an environment that ",(0,r.jsx)(t.strong,{children:"DOESN'T"})," use ",(0,r.jsx)(t.code,{children:"zone.js"}),", as described in ",(0,r.jsx)(t.a,{href:"https://angular.dev/guide/experimental/zoneless",children:"Angular experimental zoneless guide"}),".\nIt is designed for projects that have disabled ",(0,r.jsx)(t.code,{children:"zone.js"}),", which can lead to improved performance and simplified testing."]}),"\n",(0,r.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,r.jsx)(t.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"options"}),(0,r.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,r.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,r.jsx)(t.h4,{id:"example-1",children:"Example:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless/index.mjs';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]})]})}function m(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8048],{5938:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>p,default:()=>m,frontMatter:()=>c,metadata:()=>n,toc:()=>u});const n=JSON.parse('{"id":"getting-started/testbed-environment","title":"TestBed environment","description":"Angular provides a powerful testing utility called TestBed,","source":"@site/docs/getting-started/testbed-environment.md","sourceDirName":"getting-started","slug":"/getting-started/testbed-environment","permalink":"/jest-preset-angular/docs/next/getting-started/testbed-environment","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/getting-started/testbed-environment.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"testbed-environment","title":"TestBed environment"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/next/getting-started/test-environment"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/next/guides/angular-ivy"}}');var r=s(4848),i=s(8453),l=s(1470),o=s(9365),a=s(4252);const c={id:"testbed-environment",title:"TestBed environment"},p=void 0,d={},u=[{value:"Functions",id:"functions",level:2},{value:"setupZoneTestEnv(options)",id:"setupzonetestenvoptions",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Example:",id:"example",level:4},{value:"setupZonelessTestEnv(options)",id:"setupzonelesstestenvoptions",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Example:",id:"example-1",level:4}];function h(e){const t={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["Angular provides a powerful testing utility called ",(0,r.jsx)(t.a,{href:"https://angular.dev/api/core/testing/TestBed",children:"TestBed"}),",\nwhich allows to configure and initialize an environment for unit testing and provides methods for creating components and services in unit tests."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," provides utility functions to simplify setting up ",(0,r.jsx)(t.code,{children:"TestBed"})," environment. These below utility functions\nsupport both ",(0,r.jsx)(t.strong,{children:"zone-based"})," and ",(0,r.jsx)(t.strong,{children:"zoneless"})," environments, catering to different testing needs."]}),"\n",(0,r.jsx)(t.h2,{id:"functions",children:"Functions"}),"\n","\n",(0,r.jsx)(a.A,{toc:u.slice(1)}),"\n",(0,r.jsx)(t.hr,{}),"\n",(0,r.jsx)(t.h3,{id:"setupzonetestenvoptions",children:(0,r.jsx)(t.code,{children:"setupZoneTestEnv(options)"})}),"\n",(0,r.jsxs)(t.p,{children:["Configures an environment that uses ",(0,r.jsx)(t.code,{children:"zone.js"}),", which is the mechanism for tracking asynchronous operations.\nIt is suitable for most Angular applications that rely on ",(0,r.jsx)(t.code,{children:"zone.js"})," for change detection and other framework features."]}),"\n",(0,r.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,r.jsx)(t.h4,{id:"parameters",children:"Parameters"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"options"}),(0,r.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,r.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,r.jsx)(t.h4,{id:"example",children:"Example:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]}),"\n",(0,r.jsx)(t.h3,{id:"setupzonelesstestenvoptions",children:(0,r.jsx)(t.code,{children:"setupZonelessTestEnv(options)"})}),"\n",(0,r.jsxs)(t.p,{children:["Configures an environment that ",(0,r.jsx)(t.strong,{children:"DOESN'T"})," use ",(0,r.jsx)(t.code,{children:"zone.js"}),", as described in ",(0,r.jsx)(t.a,{href:"https://angular.dev/guide/experimental/zoneless",children:"Angular experimental zoneless guide"}),".\nIt is designed for projects that have disabled ",(0,r.jsx)(t.code,{children:"zone.js"}),", which can lead to improved performance and simplified testing."]}),"\n",(0,r.jsx)(t.p,{children:"You can customize the environment by providing options as function arguments."}),"\n",(0,r.jsx)(t.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"options"}),(0,r.jsx)(t.strong,{children:"(optional)"}),": An object follows ",(0,r.jsx)(t.a,{href:"https://github.com/angular/angular/blob/a55341b1ab8d2bc4285a4cce59df7fc0b23c0125/packages/core/testing/src/test_bed_common.ts#L95",children:"TestEnvironmentOptions interface"}),", which allows fine-tuning the environment."]}),"\n"]}),"\n",(0,r.jsx)(t.h4,{id:"example-1",children:"Example:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Create a Jest setup file:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript CJS"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="setup-jest.ts" tab={"label": "TypeScript ESM"}',children:"import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless/index.mjs';\n\nsetupZonelessTestEnv({\n //...options\n});\n"})})})]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Update your Jest configuration:"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(o.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createCjsPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})}),(0,r.jsx)(o.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\nimport presets from 'jest-preset-angular/presets';\n\nexport default {\n ...presets.createEsmPreset(),\n setupFilesAfterEnv: ['/setup-jest.ts'],\n} satisfies Config;\n"})})})]})]})}function m(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}}}]); \ No newline at end of file diff --git a/assets/js/f14ecac0.7f52bde0.js b/assets/js/f14ecac0.54538842.js similarity index 95% rename from assets/js/f14ecac0.7f52bde0.js rename to assets/js/f14ecac0.54538842.js index f7171f12cf..758b13d76d 100644 --- a/assets/js/f14ecac0.7f52bde0.js +++ b/assets/js/f14ecac0.54538842.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8704],{9088:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-12.0/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/12.0/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/introduction.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/12.0/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(t.p,{children:["This is a part of the article: ",(0,o.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Starting from ",(0,o.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,o.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,o.jsx)(t.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8704],{9088:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","source":"@site/versioned_docs/version-12.0/introduction.md","sourceDirName":".","slug":"/","permalink":"/jest-preset-angular/docs/12.0/","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/introduction.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"introduction","title":"Introduction","description":"Jest preset configuration for Angular projects.","slug":"/"},"sidebar":"docs","next":{"title":"Processing flow","permalink":"/jest-preset-angular/docs/12.0/processing"}}');var o=n(4848),r=n(8453);const i={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},c=void 0,a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"jest-preset-angular"})," is Jest preset configuration and TypeScript preprocessor with source map support for Jest that lets you use Jest to test Angular projects."]}),"\n",(0,o.jsxs)(t.p,{children:["This is a part of the article: ",(0,o.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["Starting from ",(0,o.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,o.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,o.jsx)(t.code,{children:"@angular/cli"}),". This will make the testing experience with Jest more inline native with Angular testing experience."]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f3212b1e.9c5d7a8c.js b/assets/js/f3212b1e.14ec7219.js similarity index 99% rename from assets/js/f3212b1e.9c5d7a8c.js rename to assets/js/f3212b1e.14ec7219.js index 7edaf7b428..adc70cb378 100644 --- a/assets/js/f3212b1e.9c5d7a8c.js +++ b/assets/js/f3212b1e.14ec7219.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9892],{5496:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"Configure other JSDOM versions","description":"Jest v26+ by default uses JSDOM 16 to support Node 10+.","source":"@site/versioned_docs/version-10.x/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/10.x/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/guides/jsdom-version.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/10.x/guides/esm-support"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/10.x/guides/using-with-babel"}}');var s=n(4848),o=n(8453),a=n(1470),i=n(9365);const l={id:"jsdom-version",title:"Configure other JSDOM versions"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,s.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,s.jsxs)(t.p,{children:["If you need a different JSDOM version than the one that ships with Jest, you can install a jsdom environment\npackage, e.g. ",(0,s.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,s.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,s.jsx)(t.code,{children:"localStorage"})," or ",(0,s.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,s.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Reference: ",(0,s.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200",children:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200"})]})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var o=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,a),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),o=n(3104),a=n(6347),i=n(205),l=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,a.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(s.location.search);t.set(o,e),s.replace({...s.location,search:t.toString()})}),[o,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,o=p(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[u,d]=h({queryString:n,groupId:s}),[f,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,o]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return m({value:e,tabValues:o})?e:null})();(0,i.A)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),b(e)}),[d,b,o]),tabValues:o}}var b=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),c=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==r&&(u(t),a(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...o,className:(0,s.A)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9892],{5496:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>l,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/jsdom-version","title":"Configure other JSDOM versions","description":"Jest v26+ by default uses JSDOM 16 to support Node 10+.","source":"@site/versioned_docs/version-10.x/guides/jsdom-version.md","sourceDirName":"guides","slug":"/guides/jsdom-version","permalink":"/jest-preset-angular/docs/10.x/guides/jsdom-version","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/guides/jsdom-version.md","tags":[],"version":"10.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/10.x/guides/esm-support"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/10.x/guides/using-with-babel"}}');var s=n(4848),o=n(8453),a=n(1470),i=n(9365);const l={id:"jsdom-version",title:"Configure other JSDOM versions"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,s.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,s.jsxs)(t.p,{children:["If you need a different JSDOM version than the one that ships with Jest, you can install a jsdom environment\npackage, e.g. ",(0,s.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,s.jsxs)(a.A,{groupId:"code-examples",children:[(0,s.jsx)(i.A,{value:"js",label:"JavaScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,s.jsx)(i.A,{value:"ts",label:"TypeScript",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,s.jsx)(t.code,{children:"localStorage"})," or ",(0,s.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,s.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Reference: ",(0,s.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,s.jsx)(t.a,{href:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200",children:"https://github.com/jsdom/jsdom/blob/main/Changelog.md#1200"})]})]})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>a});n(6540);var r=n(4164);const s={tabItem:"tabItem_Ymn6"};var o=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(s.tabItem,a),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),s=n(4164),o=n(3104),a=n(6347),i=n(205),l=n(7485),u=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:s}}=e;return{value:t,label:n,attributes:r,default:s}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const s=(0,a.W6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l.aZ)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(s.location.search);t.set(o,e),s.replace({...s.location,search:t.toString()})}),[o,s])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,o=p(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[u,d]=h({queryString:n,groupId:s}),[f,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,o]=(0,c.Dv)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return m({value:e,tabValues:o})?e:null})();(0,i.A)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),b(e)}),[d,b,o]),tabValues:o}}var b=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),c=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==r&&(u(t),a(s))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{l.push(e)},onKeyDown:d,onClick:c,...o,className:(0,s.A)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,s.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.A)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.A)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f43def45.a67d9f13.js b/assets/js/f43def45.0416372c.js similarity index 99% rename from assets/js/f43def45.a67d9f13.js rename to assets/js/f43def45.0416372c.js index 94fa27a13c..ae3c6c4750 100644 --- a/assets/js/f43def45.a67d9f13.js +++ b/assets/js/f43def45.0416372c.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2656],{1524:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>g,frontMatter:()=>u,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"Starting from v9.0.0+, jest-preset-angular is fully compatible with Angular Ivy. To make sure that Jest uses the","source":"@site/versioned_docs/version-11.1/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/11.1/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/guides/angular-ivy.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/11.1/getting-started/test-environment"},"next":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/11.1/guides/angular-13+"}}');var a=n(4848),s=n(8453),l=n(1470),o=n(9365);const u={id:"angular-ivy",title:"Angular Ivy"},i=void 0,c={},d=[];function p(e){const t={code:"code",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(t.p,{children:["Starting from ",(0,a.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,a.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,a.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,a.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.code,{children:"jest-preset-angular"})," also provides a Jest ",(0,a.jsx)(t.code,{children:"global-setup.js"})," file to help you to run ",(0,a.jsx)(t.code,{children:"ngcc"})," with Jest. Add to the following section:"]}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,a.jsxs)(l.A,{groupId:"code-examples",children:[(0,a.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // [...]\n globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,a.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest-config';\n\nconst jestConfig: Config = {\n // [...]\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var r=n(4164);const a={tabItem:"tabItem_Ymn6"};var s=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,r.A)(a.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),a=n(4164),s=n(3104),l=n(6347),o=n(205),u=n(7485),i=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:a}}=e;return{value:t,label:n,attributes:r,default:a}}))}(n);return function(e){const t=(0,i.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function g(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const a=(0,l.W6)(),s=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,u.aZ)(s),(0,r.useCallback)((e=>{if(!s)return;const t=new URLSearchParams(a.location.search);t.set(s,e),a.replace({...a.location,search:t.toString()})}),[s,a])]}function h(e){const{defaultValue:t,queryString:n=!1,groupId:a}=e,s=p(e),[l,u]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!g({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:s}))),[i,d]=f({queryString:n,groupId:a}),[h,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[a,s]=(0,c.Dv)(n);return[a,(0,r.useCallback)((e=>{n&&s.set(e)}),[n,s])]}({groupId:a}),b=(()=>{const e=i??h;return g({value:e,tabValues:s})?e:null})();(0,o.A)((()=>{b&&u(b)}),[b]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!g({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);u(e),d(e),m(e)}),[d,m,s]),tabValues:s}}var m=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const u=[],{blockElementScrollPositionUntilNextRender:i}=(0,s.a_)(),c=e=>{const t=e.currentTarget,n=u.indexOf(t),a=o[n].value;a!==r&&(i(t),l(a))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=u.indexOf(e.currentTarget)+1;t=u[n]??u[0];break}case"ArrowLeft":{const n=u.indexOf(e.currentTarget)-1;t=u[n]??u[u.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:s}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{u.push(e)},onKeyDown:d,onClick:c,...s,className:(0,a.A)("tabs__item",b.tabItem,s?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function y(e){let{lazy:t,children:n,selectedValue:s}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:(0,a.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function x(e){const t=h(e);return(0,v.jsxs)("div",{className:(0,a.A)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(y,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,v.jsx)(x,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var r=n(6540);const a={},s=r.createContext(a);function l(e){const t=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:l(e.components),r.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2656],{1524:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>g,frontMatter:()=>u,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/angular-ivy","title":"Angular Ivy","description":"Starting from v9.0.0+, jest-preset-angular is fully compatible with Angular Ivy. To make sure that Jest uses the","source":"@site/versioned_docs/version-11.1/guides/angular-ivy.md","sourceDirName":"guides","slug":"/guides/angular-ivy","permalink":"/jest-preset-angular/docs/11.1/guides/angular-ivy","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/guides/angular-ivy.md","tags":[],"version":"11.1","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/11.1/getting-started/test-environment"},"next":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/11.1/guides/angular-13+"}}');var a=n(4848),s=n(8453),l=n(1470),o=n(9365);const u={id:"angular-ivy",title:"Angular Ivy"},i=void 0,c={},d=[];function p(e){const t={code:"code",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(t.p,{children:["Starting from ",(0,a.jsx)(t.strong,{children:"v9.0.0+"}),", ",(0,a.jsx)(t.code,{children:"jest-preset-angular"})," is fully compatible with Angular Ivy. To make sure that Jest uses the\nAngular Ivy, you must run ",(0,a.jsx)(t.code,{children:"ngcc"})," before running tests. ",(0,a.jsx)(t.code,{children:"ngcc"})," will transform all Angular-format packages to be compatible\nwith Ivy compiler."]}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.code,{children:"jest-preset-angular"})," also provides a Jest ",(0,a.jsx)(t.code,{children:"global-setup.js"})," file to help you to run ",(0,a.jsx)(t.code,{children:"ngcc"})," with Jest. Add to the following section:"]}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"to your root Jest config"}),"\n"]}),"\n",(0,a.jsxs)(l.A,{groupId:"code-examples",children:[(0,a.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // [...]\n globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,a.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest-config';\n\nconst jestConfig: Config = {\n // [...]\n globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var r=n(4164);const a={tabItem:"tabItem_Ymn6"};var s=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,r.A)(a.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),a=n(4164),s=n(3104),l=n(6347),o=n(205),u=n(7485),i=n(1682),c=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:a}}=e;return{value:t,label:n,attributes:r,default:a}}))}(n);return function(e){const t=(0,i.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function g(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const a=(0,l.W6)(),s=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,u.aZ)(s),(0,r.useCallback)((e=>{if(!s)return;const t=new URLSearchParams(a.location.search);t.set(s,e),a.replace({...a.location,search:t.toString()})}),[s,a])]}function h(e){const{defaultValue:t,queryString:n=!1,groupId:a}=e,s=p(e),[l,u]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!g({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:s}))),[i,d]=f({queryString:n,groupId:a}),[h,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[a,s]=(0,c.Dv)(n);return[a,(0,r.useCallback)((e=>{n&&s.set(e)}),[n,s])]}({groupId:a}),b=(()=>{const e=i??h;return g({value:e,tabValues:s})?e:null})();(0,o.A)((()=>{b&&u(b)}),[b]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!g({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);u(e),d(e),m(e)}),[d,m,s]),tabValues:s}}var m=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(4848);function j(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const u=[],{blockElementScrollPositionUntilNextRender:i}=(0,s.a_)(),c=e=>{const t=e.currentTarget,n=u.indexOf(t),a=o[n].value;a!==r&&(i(t),l(a))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=u.indexOf(e.currentTarget)+1;t=u[n]??u[0];break}case"ArrowLeft":{const n=u.indexOf(e.currentTarget)-1;t=u[n]??u[u.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:s}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>{u.push(e)},onKeyDown:d,onClick:c,...s,className:(0,a.A)("tabs__item",b.tabItem,s?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function y(e){let{lazy:t,children:n,selectedValue:s}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:(0,a.A)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function x(e){const t=h(e);return(0,v.jsxs)("div",{className:(0,a.A)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(y,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,v.jsx)(x,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var r=n(6540);const a={},s=r.createContext(a);function l(e){const t=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:l(e.components),r.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f546eb96.4dcf8da8.js b/assets/js/f546eb96.087e9d4b.js similarity index 96% rename from assets/js/f546eb96.4dcf8da8.js rename to assets/js/f546eb96.087e9d4b.js index 8f6cc66bfa..035bd1145f 100644 --- a/assets/js/f546eb96.4dcf8da8.js +++ b/assets/js/f546eb96.087e9d4b.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6370],{8115:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-9.x/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/9.x/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/processing.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/9.x/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/9.x/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6370],{8115:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>l});const o=JSON.parse('{"id":"processing","title":"Processing flow","description":"jest-preset-angular follows the processing flow of ts-jest, see more at https://kulshekhar.github.io/ts-jest/docs/processing","source":"@site/versioned_docs/version-9.x/processing.md","sourceDirName":".","slug":"/processing","permalink":"/jest-preset-angular/docs/9.x/processing","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/processing.md","tags":[],"version":"9.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"processing","title":"Processing flow"},"sidebar":"docs","previous":{"title":"Introduction","permalink":"/jest-preset-angular/docs/9.x/"},"next":{"title":"Installation","permalink":"/jest-preset-angular/docs/9.x/getting-started/installation"}}');var n=s(4848),r=s(8453);const i={id:"processing",title:"Processing flow"},c=void 0,a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," follows the processing flow of ",(0,n.jsx)(t.code,{children:"ts-jest"}),", see more at ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/processing",children:"https://kulshekhar.github.io/ts-jest/docs/processing"})]})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>c});var o=s(6540);const n={},r=o.createContext(n);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f97daad0.76c01560.js b/assets/js/f97daad0.2a058beb.js similarity index 98% rename from assets/js/f97daad0.76c01560.js rename to assets/js/f97daad0.2a058beb.js index 26cc76f2aa..996cafbf3f 100644 --- a/assets/js/f97daad0.76c01560.js +++ b/assets/js/f97daad0.2a058beb.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5243],{560:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>n,toc:()=>p});const n=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"TypeScript supports absolute imports. The preset (starting from v3.0.0) by default understands absolute imports referring to src, app, assets and environments directory, so instead:","source":"@site/versioned_docs/version-8.x/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/8.x/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/guides/absolute-imports.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/8.x/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/8.x/guides/troubleshooting"}}');var o=s(4848),r=s(8453);const i={id:"absolute-imports",title:"Absolute Imports"},a=void 0,d={},p=[];function c(e){const t={admonition:"admonition",code:"code",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["TypeScript supports absolute imports. The preset (starting from v3.0.0) by default understands absolute imports referring to ",(0,o.jsx)(t.code,{children:"src"}),", ",(0,o.jsx)(t.code,{children:"app"}),", ",(0,o.jsx)(t.code,{children:"assets"})," and ",(0,o.jsx)(t.code,{children:"environments"})," directory, so instead:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:"import MyComponent from '../../src/app/my.component';\nimport MyStuff from '../../src/testing/my.stuff';\n"})}),"\n",(0,o.jsx)(t.p,{children:"you can use:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:"import MyComponent from 'app/my.component';\nimport MyStuff from 'src/testing/my.stuff';\n"})}),"\n",(0,o.jsxs)(t.p,{children:["However, if your directory structure differ from that provided by ",(0,o.jsx)(t.code,{children:"angular-cli"})," you can adjust ",(0,o.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-json5",children:"{\n jest: {\n moduleNameMapper: {\n 'app/(.*)': '/src/to/app/$1', // override default, why not\n 'testing/(.*)': '/app/testing/$1', // add new mapping\n },\n },\n}\n"})}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["If you wish to use any absolute import paths which are defined in ",(0,o.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,o.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config"]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>a});var n=s(6540);const o={},r=n.createContext(o);function i(e){const t=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5243],{560:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>a,default:()=>u,frontMatter:()=>i,metadata:()=>n,toc:()=>p});const n=JSON.parse('{"id":"guides/absolute-imports","title":"Absolute Imports","description":"TypeScript supports absolute imports. The preset (starting from v3.0.0) by default understands absolute imports referring to src, app, assets and environments directory, so instead:","source":"@site/versioned_docs/version-8.x/guides/absolute-imports.md","sourceDirName":"guides","slug":"/guides/absolute-imports","permalink":"/jest-preset-angular/docs/8.x/guides/absolute-imports","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/guides/absolute-imports.md","tags":[],"version":"8.x","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"absolute-imports","title":"Absolute Imports"},"sidebar":"docs","previous":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/8.x/guides/using-with-babel"},"next":{"title":"Troubleshooting","permalink":"/jest-preset-angular/docs/8.x/guides/troubleshooting"}}');var o=s(4848),r=s(8453);const i={id:"absolute-imports",title:"Absolute Imports"},a=void 0,d={},p=[];function c(e){const t={admonition:"admonition",code:"code",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["TypeScript supports absolute imports. The preset (starting from v3.0.0) by default understands absolute imports referring to ",(0,o.jsx)(t.code,{children:"src"}),", ",(0,o.jsx)(t.code,{children:"app"}),", ",(0,o.jsx)(t.code,{children:"assets"})," and ",(0,o.jsx)(t.code,{children:"environments"})," directory, so instead:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:"import MyComponent from '../../src/app/my.component';\nimport MyStuff from '../../src/testing/my.stuff';\n"})}),"\n",(0,o.jsx)(t.p,{children:"you can use:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",children:"import MyComponent from 'app/my.component';\nimport MyStuff from 'src/testing/my.stuff';\n"})}),"\n",(0,o.jsxs)(t.p,{children:["However, if your directory structure differ from that provided by ",(0,o.jsx)(t.code,{children:"angular-cli"})," you can adjust ",(0,o.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-json5",children:"{\n jest: {\n moduleNameMapper: {\n 'app/(.*)': '/src/to/app/$1', // override default, why not\n 'testing/(.*)': '/app/testing/$1', // add new mapping\n },\n },\n}\n"})}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["If you wish to use any absolute import paths which are defined in ",(0,o.jsx)(t.code,{children:"paths"})," of your tsconfig, make sure that you create the\nsimilar mapping for ",(0,o.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config"]})})]})}function u(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>a});var n=s(6540);const o={},r=n.createContext(o);function i(e){const t=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/fa9f2ace.1f19ecf2.js b/assets/js/fa9f2ace.772cffad.js similarity index 98% rename from assets/js/fa9f2ace.1f19ecf2.js rename to assets/js/fa9f2ace.772cffad.js index 18dfb20ab5..24d2c52cf6 100644 --- a/assets/js/fa9f2ace.1f19ecf2.js +++ b/assets/js/fa9f2ace.772cffad.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[742],{5034:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>d,default:()=>p,frontMatter:()=>i,metadata:()=>n,toc:()=>l});const n=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"The presets","source":"@site/versioned_docs/version-11.0/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/11.0/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/getting-started/presets.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/11.0/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/11.0/getting-started/options"}}');var r=s(4848),o=s(8453);const i={id:"presets",title:"Presets"},d=void 0,a={},l=[{value:"The presets",id:"the-presets",level:3},{value:"Basic usage",id:"basic-usage",level:3},{value:"Advanced",id:"advanced",level:3}];function c(e){const t={admonition:"admonition",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Preset name"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,r.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,r.jsx)(t.code,{children:"preset"})," key to the desired preset name in your Jest config should be enough to start\nusing TypeScript with Jest (assuming you added ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,r.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n"})}),"\n",(0,r.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,r.jsxs)(t.p,{children:["All presets come with default ",(0,r.jsx)(t.code,{children:"ts-jest"})," config options.\nIf you want to override any of the options, you'll need to use the JavaScript version of Jest config,\ncopy the original options and override the options you need:"]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["If you choose to override ",(0,r.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,r.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,r.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nconst { defaults: jestNgPreset } = require('jest-preset-angular/presets');\n// const { defaultsESM: jestNgPreset } = require('jest-preset-angular/presets')\n\nmodule.exports = {\n // [...]\n globals: {\n 'ts-jest': {\n ...jestNgPreset.globals['ts-jest'],\n // [...your overriden options]\n },\n },\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:["Or through TypeScript (if ",(0,r.jsx)(t.code,{children:"ts-node"})," is installed):"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// jest.config.ts\nimport type { InitialOptionsTsJest } from 'ts-jest/dist/types';\nimport { defaults as jestNgPreset } from 'jest-preset-angular/presets';\n// import { defaultsESM as jestNgPreset } from 'jest-preset-angular/presets'\n\nconst config: InitialOptionsTsJest = {\n // [...]\n globals: {\n 'ts-jest': {\n ...jestNgPreset.globals['ts-jest'],\n // [...your overriden options]\n },\n },\n};\n\nexport default config;\n"})})]})}function p(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>d});var n=s(6540);const r={},o=n.createContext(r);function i(e){const t=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[742],{5034:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>d,default:()=>p,frontMatter:()=>i,metadata:()=>n,toc:()=>l});const n=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"The presets","source":"@site/versioned_docs/version-11.0/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/11.0/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/getting-started/presets.md","tags":[],"version":"11.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/11.0/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/11.0/getting-started/options"}}');var r=s(4848),o=s(8453);const i={id:"presets",title:"Presets"},d=void 0,a={},l=[{value:"The presets",id:"the-presets",level:3},{value:"Basic usage",id:"basic-usage",level:3},{value:"Advanced",id:"advanced",level:3}];function c(e){const t={admonition:"admonition",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Preset name"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsxs)(t.td,{children:[(0,r.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(t.code,{children:"js"}),", ",(0,r.jsx)(t.code,{children:".ts"}),", ",(0,r.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,r.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,r.jsx)(t.code,{children:"preset"})," key to the desired preset name in your Jest config should be enough to start\nusing TypeScript with Jest (assuming you added ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,r.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n"})}),"\n",(0,r.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,r.jsxs)(t.p,{children:["All presets come with default ",(0,r.jsx)(t.code,{children:"ts-jest"})," config options.\nIf you want to override any of the options, you'll need to use the JavaScript version of Jest config,\ncopy the original options and override the options you need:"]}),"\n",(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["If you choose to override ",(0,r.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,r.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,r.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nconst { defaults: jestNgPreset } = require('jest-preset-angular/presets');\n// const { defaultsESM: jestNgPreset } = require('jest-preset-angular/presets')\n\nmodule.exports = {\n // [...]\n globals: {\n 'ts-jest': {\n ...jestNgPreset.globals['ts-jest'],\n // [...your overriden options]\n },\n },\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:["Or through TypeScript (if ",(0,r.jsx)(t.code,{children:"ts-node"})," is installed):"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",children:"// jest.config.ts\nimport type { InitialOptionsTsJest } from 'ts-jest/dist/types';\nimport { defaults as jestNgPreset } from 'jest-preset-angular/presets';\n// import { defaultsESM as jestNgPreset } from 'jest-preset-angular/presets'\n\nconst config: InitialOptionsTsJest = {\n // [...]\n globals: {\n 'ts-jest': {\n ...jestNgPreset.globals['ts-jest'],\n // [...your overriden options]\n },\n },\n};\n\nexport default config;\n"})})]})}function p(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>d});var n=s(6540);const r={},o=n.createContext(r);function i(e){const t=n.useContext(o);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/fbd32610.e44b367e.js b/assets/js/fbd32610.553bb92a.js similarity index 99% rename from assets/js/fbd32610.e44b367e.js rename to assets/js/fbd32610.553bb92a.js index d842ecab65..7ec177f2f0 100644 --- a/assets/js/fbd32610.e44b367e.js +++ b/assets/js/fbd32610.553bb92a.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6543],{9570:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>b,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-14.4/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/14.4/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/guides/using-with-babel.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/14.4/guides/snapshot-testing"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/14.4/guides/absolute-imports"}}');var r=n(4848),a=n(8453),l=n(1470),i=n(9365);const o={id:"using-with-babel",title:"Using with Babel"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you wish to use ",(0,r.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,r.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install ",(0,r.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,r.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:'title="babel.config.js"',children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsxs)(t.em,{children:["Note: do not use a ",(0,r.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,r.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,r.jsxs)(t.ol,{start:"3",children:["\n",(0,r.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n\nexport default jestConfig;\n"})})})]})]})}function b(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),i=n(205),o=n(7485),u=n(1682),c=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function b(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,o.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,o]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!b({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:r}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),g=(()=>{const e=u??f;return b({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{g&&o(g)}),[g]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!b({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);o(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(4848);function v(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:i}=e;const o=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=o.indexOf(t),r=i[n].value;r!==s&&(u(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=o.indexOf(e.currentTarget)+1;t=o[n]??o[0];break}case"ArrowLeft":{const n=o.indexOf(e.currentTarget)-1;t=o[n]??o[o.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{o.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.A)("tabs-container",g.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>i});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6543],{9570:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>b,frontMatter:()=>o,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"guides/using-with-babel","title":"Using with Babel","description":"If you wish to use Babel, you need to say jest to transpile such files manually.","source":"@site/versioned_docs/version-14.4/guides/using-with-babel.md","sourceDirName":"guides","slug":"/guides/using-with-babel","permalink":"/jest-preset-angular/docs/14.4/guides/using-with-babel","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.4/guides/using-with-babel.md","tags":[],"version":"14.4","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"using-with-babel","title":"Using with Babel"},"sidebar":"docs","previous":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/14.4/guides/snapshot-testing"},"next":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/14.4/guides/absolute-imports"}}');var r=n(4848),a=n(8453),l=n(1470),i=n(9365);const o={id:"using-with-babel",title:"Using with Babel"},u=void 0,c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:["If you wish to use ",(0,r.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,r.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Install ",(0,r.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,r.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:'title="babel.config.js"',children:"module.exports = function (api) {\n api.cache(true);\n\n const presets = ['@babel/preset-env'];\n const plugins = [];\n\n return {\n presets,\n plugins,\n };\n};\n"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsxs)(t.em,{children:["Note: do not use a ",(0,r.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,r.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,r.jsxs)(t.ol,{start:"3",children:["\n",(0,r.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,r.jsxs)(l.A,{groupId:"code-examples",children:[(0,r.jsx)(i.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n\nexport default jestConfig;\n"})})}),(0,r.jsx)(i.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //...\n transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n\nexport default jestConfig;\n"})})})]})]})}function b(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164);const r={tabItem:"tabItem_Ymn6"};var a=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var s=n(6540),r=n(4164),a=n(3104),l=n(6347),i=n(205),o=n(7485),u=n(1682),c=n(679);function d(e){return s.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:s,default:r}}=e;return{value:t,label:n,attributes:s,default:r}}))}(n);return function(e){const t=(0,u.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function b(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,o.aZ)(a),(0,s.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=p(e),[l,o]=(0,s.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!b({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const s=n.find((e=>e.default))??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:t,tabValues:a}))),[u,d]=h({queryString:n,groupId:r}),[f,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,c.Dv)(n);return[r,(0,s.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),g=(()=>{const e=u??f;return b({value:e,tabValues:a})?e:null})();(0,i.A)((()=>{g&&o(g)}),[g]);return{selectedValue:l,selectValue:(0,s.useCallback)((e=>{if(!b({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);o(e),d(e),m(e)}),[d,m,a]),tabValues:a}}var m=n(2303);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(4848);function v(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:i}=e;const o=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.a_)(),c=e=>{const t=e.currentTarget,n=o.indexOf(t),r=i[n].value;r!==s&&(u(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=o.indexOf(e.currentTarget)+1;t=o[n]??o[0];break}case"ArrowLeft":{const n=o.indexOf(e.currentTarget)-1;t=o[n]??o[o.length-1];break}}t?.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>{o.push(e)},onKeyDown:d,onClick:c,...a,className:(0,r.A)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const l=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=l.find((e=>e.props.value===a));return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:l.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.A)("tabs-container",g.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.A)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>i});var s=n(6540);const r={},a=s.createContext(r);function l(e){const t=s.useContext(a);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/fc80686b.b30d942a.js b/assets/js/fc80686b.c308db62.js similarity index 99% rename from assets/js/fc80686b.b30d942a.js rename to assets/js/fc80686b.c308db62.js index e9f5554cc4..2768f87132 100644 --- a/assets/js/fc80686b.b30d942a.js +++ b/assets/js/fc80686b.c308db62.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2440],{4160:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>p,contentTitle:()=>c,default:()=>j,frontMatter:()=>d,metadata:()=>n,toc:()=>h});const n=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"In Jest, presets are pre-defined configurations that help streamline and standardize the process of setting up testing environments.","source":"@site/docs/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/next/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/getting-started/presets.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/next/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/next/getting-started/options"}}');var r=t(4848),i=t(8453),o=t(1470),a=t(9365),l=t(4252);const d={id:"presets",title:"Presets"},c=void 0,p={},h=[{value:"Functions",id:"functions",level:2},{value:"createCjsPreset(options)",id:"createcjspresetoptions",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Example:",id:"example",level:4},{value:"createEsmPreset(options)",id:"createesmpresetoptions",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-1",level:4},{value:"Example:",id:"example-1",level:4},{value:"Legacy presets",id:"legacy-presets",level:3},{value:"Example",id:"example-2",level:4}];function g(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:["In Jest, ",(0,r.jsx)(s.strong,{children:"presets"})," are pre-defined configurations that help streamline and standardize the process of setting up testing environments.\nThey allow developers to quickly configure Jest with specific transformers, file extensions, and other options."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular"})," provides very opinionated presets and based on what we found to be useful."]}),"\n",(0,r.jsx)(s.admonition,{type:"important",children:(0,r.jsx)(s.p,{children:"The current best practice for using presets is to call one of the utility functions below to create (and optionally extend) presets. Legacy presets are listed at the bottom of the page."})}),"\n",(0,r.jsx)(s.h2,{id:"functions",children:"Functions"}),"\n","\n",(0,r.jsx)(l.A,{toc:h.slice(1)}),"\n",(0,r.jsx)(s.hr,{}),"\n",(0,r.jsx)(s.h3,{id:"createcjspresetoptions",children:(0,r.jsx)(s.code,{children:"createCjsPreset(options)"})}),"\n",(0,r.jsxs)(s.p,{children:["Create a configuration to process JavaScript/TypeScript/HTML/SVG files (",(0,r.jsx)(s.code,{children:"ts|js|mjs|html|svg"}),")."]}),"\n",(0,r.jsx)(s.h4,{id:"parameters",children:"Parameters"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"options"})," (",(0,r.jsx)(s.strong,{children:"OPTIONAL"}),")","\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"tsconfig"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/tsconfig",children:"tsconfig options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"isolatedModules"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/isolatedModules",children:"isolatedModules options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"astTransformers"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/astTransformers",children:"astTransformers options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"diagnostics"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/diagnostics",children:"diagnostics options page"})]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.h4,{id:"returns",children:"Returns"}),"\n",(0,r.jsx)(s.p,{children:"An object contains Jest config:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",children:"type CjsPresetTransformerOptions = {\n tsconfig: string;\n stringifyContentPathRegex: string;\n};\n\ntype CjsPresetType = {\n testEnvironment: string;\n moduleFileExtensions: Array;\n snapshotSerializers: Array;\n transformIgnorePatterns: Array;\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': ['jest-preset-angular', CjsPresetTransformerOptions];\n };\n};\n"})}),"\n",(0,r.jsx)(s.h4,{id:"example",children:"Example:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts"',children:"import presets from 'jest-preset-angular/presets';\nimport type { Config } from 'jest';\n\nconst presetConfig = presets.createCjsPreset({\n //...options\n});\n\nexport default {\n ...presetConfig,\n} satisfies Config;\n"})}),"\n",(0,r.jsx)(s.h3,{id:"createesmpresetoptions",children:(0,r.jsx)(s.code,{children:"createEsmPreset(options)"})}),"\n",(0,r.jsxs)(s.p,{children:["Create a configuration to process JavaScript/TypeScript/HTML/SVG files (",(0,r.jsx)(s.code,{children:"ts|js|html|svg"}),")."]}),"\n",(0,r.jsx)(s.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"options"})," (",(0,r.jsx)(s.strong,{children:"OPTIONAL"}),")","\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"tsconfig"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/tsconfig",children:"tsconfig options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"isolatedModules"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/isolatedModules",children:"isolatedModules options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"astTransformers"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/astTransformers",children:"astTransformers options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"diagnostics"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/diagnostics",children:"diagnostics options page"})]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.h4,{id:"returns-1",children:"Returns"}),"\n",(0,r.jsx)(s.p,{children:"An object contains Jest config:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",children:"type EsmPresetTransformerOptions = {\n tsconfig: string;\n stringifyContentPathRegex: string;\n useEsm: true;\n};\n\ntype EsmPresetType = {\n testEnvironment: string;\n moduleFileExtensions: Array;\n snapshotSerializers: Array;\n extensionsToTreatAsEsm: Array;\n transformIgnorePatterns: Array;\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': ['jest-preset-angular', EsmPresetTransformerOptions];\n };\n};\n"})}),"\n",(0,r.jsx)(s.h4,{id:"example-1",children:"Example:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts"',children:"import presets from 'jest-preset-angular/presets';\nimport type { Config } from 'jest';\n\nconst presetConfig = presets.createEsmPreset({\n //...options\n});\n\nexport default {\n ...presetConfig,\n} satisfies Config;\n"})}),"\n",(0,r.jsx)(s.h3,{id:"legacy-presets",children:"Legacy presets"}),"\n",(0,r.jsx)(s.admonition,{type:"warning",children:(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular"})," ",(0,r.jsx)(s.strong,{children:"DON'T RECOMMEND"})," to use legacy presets because this approach is not flexible to configure Jest configuration.\nThese legacy presets will be removed in the next major release and users are ",(0,r.jsx)(s.strong,{children:"HIGHLY RECOMMENDED"})," to migrate to use the above utility functions."]})}),"\n",(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"Preset name"}),(0,r.jsx)(s.th,{children:"Description"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsxs)(s.td,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(s.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(s.code,{children:"js"}),", ",(0,r.jsx)(s.code,{children:".ts"}),", ",(0,r.jsx)(s.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(s.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsxs)(s.td,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(s.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(s.code,{children:"js"}),", ",(0,r.jsx)(s.code,{children:".ts"}),", ",(0,r.jsx)(s.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(s.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(s.h4,{id:"example-2",children:"Example"}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n preset: 'jest-preset-angular',\n} satisfies Config;\n"})})}),(0,r.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n preset: 'jest-preset-angular/presets/defaults-esm',\n} satisfies Config;\n"})})})]})]})}function j(e={}){const{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(g,{...e})}):g(e)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2440],{4160:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>p,contentTitle:()=>c,default:()=>j,frontMatter:()=>d,metadata:()=>n,toc:()=>h});const n=JSON.parse('{"id":"getting-started/presets","title":"Presets","description":"In Jest, presets are pre-defined configurations that help streamline and standardize the process of setting up testing environments.","source":"@site/docs/getting-started/presets.md","sourceDirName":"getting-started","slug":"/getting-started/presets","permalink":"/jest-preset-angular/docs/next/getting-started/presets","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/getting-started/presets.md","tags":[],"version":"current","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"presets","title":"Presets"},"sidebar":"docs","previous":{"title":"Installation","permalink":"/jest-preset-angular/docs/next/getting-started/installation"},"next":{"title":"Options","permalink":"/jest-preset-angular/docs/next/getting-started/options"}}');var r=t(4848),i=t(8453),o=t(1470),a=t(9365),l=t(4252);const d={id:"presets",title:"Presets"},c=void 0,p={},h=[{value:"Functions",id:"functions",level:2},{value:"createCjsPreset(options)",id:"createcjspresetoptions",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns",level:4},{value:"Example:",id:"example",level:4},{value:"createEsmPreset(options)",id:"createesmpresetoptions",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-1",level:4},{value:"Example:",id:"example-1",level:4},{value:"Legacy presets",id:"legacy-presets",level:3},{value:"Example",id:"example-2",level:4}];function g(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:["In Jest, ",(0,r.jsx)(s.strong,{children:"presets"})," are pre-defined configurations that help streamline and standardize the process of setting up testing environments.\nThey allow developers to quickly configure Jest with specific transformers, file extensions, and other options."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular"})," provides very opinionated presets and based on what we found to be useful."]}),"\n",(0,r.jsx)(s.admonition,{type:"important",children:(0,r.jsx)(s.p,{children:"The current best practice for using presets is to call one of the utility functions below to create (and optionally extend) presets. Legacy presets are listed at the bottom of the page."})}),"\n",(0,r.jsx)(s.h2,{id:"functions",children:"Functions"}),"\n","\n",(0,r.jsx)(l.A,{toc:h.slice(1)}),"\n",(0,r.jsx)(s.hr,{}),"\n",(0,r.jsx)(s.h3,{id:"createcjspresetoptions",children:(0,r.jsx)(s.code,{children:"createCjsPreset(options)"})}),"\n",(0,r.jsxs)(s.p,{children:["Create a configuration to process JavaScript/TypeScript/HTML/SVG files (",(0,r.jsx)(s.code,{children:"ts|js|mjs|html|svg"}),")."]}),"\n",(0,r.jsx)(s.h4,{id:"parameters",children:"Parameters"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"options"})," (",(0,r.jsx)(s.strong,{children:"OPTIONAL"}),")","\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"tsconfig"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/tsconfig",children:"tsconfig options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"isolatedModules"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/isolatedModules",children:"isolatedModules options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"astTransformers"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/astTransformers",children:"astTransformers options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"diagnostics"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/diagnostics",children:"diagnostics options page"})]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.h4,{id:"returns",children:"Returns"}),"\n",(0,r.jsx)(s.p,{children:"An object contains Jest config:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",children:"type CjsPresetTransformerOptions = {\n tsconfig: string;\n stringifyContentPathRegex: string;\n};\n\ntype CjsPresetType = {\n testEnvironment: string;\n moduleFileExtensions: Array;\n snapshotSerializers: Array;\n transformIgnorePatterns: Array;\n transform: {\n '^.+\\\\.(ts|js|mjs|html|svg)$': ['jest-preset-angular', CjsPresetTransformerOptions];\n };\n};\n"})}),"\n",(0,r.jsx)(s.h4,{id:"example",children:"Example:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts"',children:"import presets from 'jest-preset-angular/presets';\nimport type { Config } from 'jest';\n\nconst presetConfig = presets.createCjsPreset({\n //...options\n});\n\nexport default {\n ...presetConfig,\n} satisfies Config;\n"})}),"\n",(0,r.jsx)(s.h3,{id:"createesmpresetoptions",children:(0,r.jsx)(s.code,{children:"createEsmPreset(options)"})}),"\n",(0,r.jsxs)(s.p,{children:["Create a configuration to process JavaScript/TypeScript/HTML/SVG files (",(0,r.jsx)(s.code,{children:"ts|js|html|svg"}),")."]}),"\n",(0,r.jsx)(s.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"options"})," (",(0,r.jsx)(s.strong,{children:"OPTIONAL"}),")","\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"tsconfig"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/tsconfig",children:"tsconfig options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"isolatedModules"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/isolatedModules",children:"isolatedModules options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"astTransformers"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/astTransformers",children:"astTransformers options page"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"diagnostics"}),": see more at ",(0,r.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/diagnostics",children:"diagnostics options page"})]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.h4,{id:"returns-1",children:"Returns"}),"\n",(0,r.jsx)(s.p,{children:"An object contains Jest config:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",children:"type EsmPresetTransformerOptions = {\n tsconfig: string;\n stringifyContentPathRegex: string;\n useEsm: true;\n};\n\ntype EsmPresetType = {\n testEnvironment: string;\n moduleFileExtensions: Array;\n snapshotSerializers: Array;\n extensionsToTreatAsEsm: Array;\n transformIgnorePatterns: Array;\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': ['jest-preset-angular', EsmPresetTransformerOptions];\n };\n};\n"})}),"\n",(0,r.jsx)(s.h4,{id:"example-1",children:"Example:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts"',children:"import presets from 'jest-preset-angular/presets';\nimport type { Config } from 'jest';\n\nconst presetConfig = presets.createEsmPreset({\n //...options\n});\n\nexport default {\n ...presetConfig,\n} satisfies Config;\n"})}),"\n",(0,r.jsx)(s.h3,{id:"legacy-presets",children:"Legacy presets"}),"\n",(0,r.jsx)(s.admonition,{type:"warning",children:(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular"})," ",(0,r.jsx)(s.strong,{children:"DON'T RECOMMEND"})," to use legacy presets because this approach is not flexible to configure Jest configuration.\nThese legacy presets will be removed in the next major release and users are ",(0,r.jsx)(s.strong,{children:"HIGHLY RECOMMENDED"})," to migrate to use the above utility functions."]})}),"\n",(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"Preset name"}),(0,r.jsx)(s.th,{children:"Description"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsxs)(s.td,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular/presets/default"}),(0,r.jsx)("br",{}),"or ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})]}),(0,r.jsxs)(s.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(s.code,{children:"js"}),", ",(0,r.jsx)(s.code,{children:".ts"}),", ",(0,r.jsx)(s.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(s.strong,{children:"CommonJS"})," syntax."]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsxs)(s.td,{children:[(0,r.jsx)(s.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,r.jsx)("br",{})]}),(0,r.jsxs)(s.td,{children:["TypeScript, JavaScript and HTML files (",(0,r.jsx)(s.code,{children:"js"}),", ",(0,r.jsx)(s.code,{children:".ts"}),", ",(0,r.jsx)(s.code,{children:".html"}),") will be transformed by ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," to ",(0,r.jsx)(s.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,r.jsx)(s.h4,{id:"example-2",children:"Example"}),"\n",(0,r.jsxs)(o.A,{groupId:"code-examples",children:[(0,r.jsx)(a.A,{value:"typescript-cjs",label:"TypeScript CJS",children:(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.ts" tab={"label": "TypeScript CJS"}',children:"import type { Config } from 'jest';\n\nexport default {\n preset: 'jest-preset-angular',\n} satisfies Config;\n"})})}),(0,r.jsx)(a.A,{value:"typescript-esm",label:"TypeScript ESM",children:(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",metastring:'title="jest.config.mts" tab={"label": "TypeScript ESM"}',children:"import type { Config } from 'jest';\n\nexport default {\n preset: 'jest-preset-angular/presets/defaults-esm',\n} satisfies Config;\n"})})})]})]})}function j(e={}){const{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(g,{...e})}):g(e)}}}]); \ No newline at end of file diff --git a/assets/js/fea96f18.072648db.js b/assets/js/fea96f18.4d2b903f.js similarity index 99% rename from assets/js/fea96f18.072648db.js rename to assets/js/fea96f18.4d2b903f.js index 7df1e0ab24..262de205d0 100644 --- a/assets/js/fea96f18.072648db.js +++ b/assets/js/fea96f18.4d2b903f.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3309],{7125:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-12.0/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/12.0/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/guides/troubleshooting.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740315715000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/12.0/guides/absolute-imports"}}');var t=s(4848),o=s(8453);const i={id:"troubleshooting",title:"Troubleshooting"},a=void 0,l={},d=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["You can check Jest ",(0,t.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,t.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,t.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,t.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,t.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,t.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,t.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,t.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,t.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,t.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,t.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,t.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,t.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,t.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,t.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,t.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Add this to your ",(0,t.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,t.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,t.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,t.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,t.jsx)(n.code,{children:"JS"})," file with ",(0,t.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,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,t.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,t.jsx)(n.code,{children:"@angular"}),", ",(0,t.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,t.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,t.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,t.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,t.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,t.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,t.jsx)(n.p,{children:"or"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,t.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,t.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,t.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,t.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Install ",(0,t.jsx)(n.code,{children:"babel-jest"}),", ",(0,t.jsx)(n.code,{children:"@babel/core"})," and ",(0,t.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,t.jsxs)(n.li,{children:["Create a ",(0,t.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,t.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Define the usage of ",(0,t.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,t.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,t.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,t.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,t.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,t.jsx)(n.code,{children:"firebase"})," and ",(0,t.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,t.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,t.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,t.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,t.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,t.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,t.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,t.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,t.jsxs)(n.p,{children:["In these cases, a ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,t.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,t.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,t.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.resolver.js\nmodule.exports = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\n...\nresolver: '/src/jest.resolver.js',\n...\n"})})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>a});var r=s(6540);const t={},o=r.createContext(t);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3309],{7125:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>i,metadata:()=>r,toc:()=>d});const r=JSON.parse('{"id":"guides/troubleshooting","title":"Troubleshooting","description":"You can check Jest troubleshooting guide","source":"@site/versioned_docs/version-12.0/guides/troubleshooting.md","sourceDirName":"guides","slug":"/guides/troubleshooting","permalink":"/jest-preset-angular/docs/12.0/guides/troubleshooting","draft":false,"unlisted":false,"editUrl":"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/guides/troubleshooting.md","tags":[],"version":"12.0","lastUpdatedBy":"renovate[bot]","lastUpdatedAt":1740328366000,"frontMatter":{"id":"troubleshooting","title":"Troubleshooting"},"sidebar":"docs","previous":{"title":"Absolute Imports","permalink":"/jest-preset-angular/docs/12.0/guides/absolute-imports"}}');var t=s(4848),o=s(8453);const i={id:"troubleshooting",title:"Troubleshooting"},a=void 0,l={},d=[{value:"Common issues",id:"common-issues",level:2},{value:"Can't resolve all parameters for SomeClass(?)",id:"cant-resolve-all-parameters-for-someclass",level:3},{value:"@Input() bindings are not reflected into fixture when 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,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["You can check Jest ",(0,t.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,t.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,t.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,t.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,t.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,t.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,t.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,t.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,t.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,t.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,t.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,t.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,t.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,t.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,t.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,t.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,t.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,t.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Add this to your ",(0,t.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,t.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,t.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,t.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,t.jsx)(n.code,{children:"JS"})," file with ",(0,t.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,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"({\"Object.\":function(module,exports,require,__dirname,__filename,jest){import * as i0 from '@angular/core';\n ^^^^^^\n SyntaxError: Cannot use import statement outside a module\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix the issue, one needs to adjust ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelist:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!@angular|@ngrx)'],\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["By default, Jest doesn't transform ",(0,t.jsx)(n.code,{children:"node_modules"}),", because they should be valid JavaScript files. However, it happens that\nlibrary authors assume that you'll compile their sources. So you have to tell this to Jest explicitly.\nAbove snippet means that ",(0,t.jsx)(n.code,{children:"@angular"}),", ",(0,t.jsx)(n.code,{children:"@ngrx"})," will be transformed, even though they're ",(0,t.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["If the dependency causing the issue is a sub dependency of a ",(0,t.jsx)(n.code,{children:"node_modules"})," packages or a module designed to be used with nodeJS, a custom resolver could be required to fix the issue. ",(0,t.jsx)(n.a,{href:"#resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"See below"})," for more information."]}),"\n",(0,t.jsx)(n.h3,{id:"allow-vendor-libraries-like-jquery-etc",children:"Allow vendor libraries like jQuery, etc..."}),"\n",(0,t.jsxs)(n.p,{children:["The same like normal Jest configuration, you can load jQuery in your Jest setup file. For example your Jest setup file is ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," you can declare jQuery:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"window.$ = require('path/to/jquery');\n"})}),"\n",(0,t.jsx)(n.p,{children:"or"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import $ from 'jquery';\nglobal.$ = global.jQuery = $;\n"})}),"\n",(0,t.jsx)(n.p,{children:"The same declaration can be applied to other vendor libraries."}),"\n",(0,t.jsxs)(n.p,{children:["Reference: ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/jest/issues/708",children:"https://github.com/facebook/jest/issues/708"})]}),"\n",(0,t.jsx)(n.h3,{id:"coverage-fail-but-tests-pass",children:"Coverage fail but tests pass"}),"\n",(0,t.jsxs)(n.p,{children:["This issue happens because Jest uses ",(0,t.jsx)(n.code,{children:"Babel"})," behind the screen to create coverage reporter. To fix this issue, one can do the following:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Install ",(0,t.jsx)(n.code,{children:"babel-jest"}),", ",(0,t.jsx)(n.code,{children:"@babel/core"})," and ",(0,t.jsx)(n.code,{children:"@babel/preset-env"})]}),"\n",(0,t.jsxs)(n.li,{children:["Create a ",(0,t.jsx)(n.code,{children:".babelrc"})," at the same place where Jest config file locates and define the necessary ",(0,t.jsx)(n.code,{children:"Babel"})," plugins.\nFor example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:'{\n // this plugin will fix issue with class inheritance\n "plugins": ["@babel/plugin-transform-classes"]\n}\n'})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Define the usage of ",(0,t.jsx)(n.code,{children:"Babel"})," in Jest config via ",(0,t.jsx)(n.code,{children:"ts-jest"})," option, for example"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\n"})}),"\n",(0,t.jsx)(n.h3,{id:"resolver-needed-for-some-javascript-library-or-nested-dependencies",children:"Resolver needed for some javascript library or nested dependencies"}),"\n",(0,t.jsx)(n.p,{children:"This can happen in two identified cases."}),"\n",(0,t.jsx)(n.h4,{id:"javascript-library",children:"Javascript library"}),"\n",(0,t.jsxs)(n.p,{children:["When using a javascript SDK/Library in Angular, some javascript methods could fail to be properly rendered in tests. Some examples are the ",(0,t.jsx)(n.code,{children:"firebase"})," and ",(0,t.jsx)(n.code,{children:"firebase/compat"})," SDK."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"TypeError: Cannot read properties of undefined (reading 'FacebookAuthProvider')\n import firebase from 'firebase/compat/app';\n\n > export const facebookAuthProvider = new firebase.auth.FacebookAuthProvider();\n"})}),"\n",(0,t.jsxs)(n.h4,{id:"nested-dependency-node_modules-package-within-another-package-node_nodules",children:["Nested dependency (",(0,t.jsx)(n.code,{children:"node_modules"})," package within another package ",(0,t.jsx)(n.code,{children:"node_nodules"}),")"]}),"\n",(0,t.jsxs)(n.p,{children:["Some nested dependency tree could trigger some errors while running the tests because some bundles (especially ESM ones) could be somehow errored. An example is the ",(0,t.jsx)(n.code,{children:"@angular/fire"})," package which uses the ",(0,t.jsx)(n.code,{children:"@firebase/firestore"})," package."]}),"\n",(0,t.jsx)(n.p,{children:"A typical error could appear as:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"node_modules\\@angular\\fire\\node_modules\\@firebase\\firestore\\dist\\index.esm2017.js:12705\n function (t, e) {\n ^^^^^^^^\n\n SyntaxError: Function statements require a function name\n"})}),"\n",(0,t.jsx)(n.h4,{id:"resolution",children:"Resolution"}),"\n",(0,t.jsxs)(n.p,{children:["In these cases, a ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting could not fix the issue. The solution here is to use a custom ",(0,t.jsx)(n.code,{children:"resolver"}),". You may or may not need to remove entries from ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," whitelisting."]}),"\n",(0,t.jsxs)(n.p,{children:["Here is an example of a resolver which would fix ",(0,t.jsx)(n.code,{children:"firebase"})," related packages."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.resolver.js\nmodule.exports = (path, options) => {\n // Call the defaultResolver, so we leverage its cache, error handling, etc.\n return options.defaultResolver(path, {\n ...options,\n // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)\n packageFilter: (pkg) => {\n const pkgNamesToTarget = new Set([\n 'rxjs',\n '@firebase/auth',\n '@firebase/storage',\n '@firebase/functions',\n '@firebase/database',\n '@firebase/auth-compat',\n '@firebase/database-compat',\n '@firebase/app-compat',\n '@firebase/firestore',\n '@firebase/firestore-compat',\n '@firebase/messaging',\n '@firebase/util',\n 'firebase',\n ]);\n\n if (pkgNamesToTarget.has(pkg.name)) {\n // console.log('>>>', pkg.name)\n delete pkg['exports'];\n delete pkg['module'];\n }\n\n return pkg;\n },\n });\n};\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"// jest.config.js\n...\nresolver: '/src/jest.resolver.js',\n...\n"})})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},8453:(e,n,s)=>{s.d(n,{R:()=>i,x:()=>a});var r=s(6540);const t={},o=r.createContext(t);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/main.d10c95b2.js b/assets/js/main.57796e52.js similarity index 95% rename from assets/js/main.d10c95b2.js rename to assets/js/main.57796e52.js index b60abe46e5..c20b561933 100644 --- a/assets/js/main.d10c95b2.js +++ b/assets/js/main.57796e52.js @@ -1,2 +1,2 @@ -/*! For license information please see main.d10c95b2.js.LICENSE.txt */ -(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8792],{3219:(e,t,n)=>{"use strict";n.d(t,{Bc:()=>C,E8:()=>Zn,a1:()=>Yn});var r=n(6540);n(961);function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n=0;--a){var s=this.tryEntries[a],i=s.completion;if("root"===s.tryLoc)return o("end");if(s.tryLoc<=this.prev){var l=r.call(s,"catchLoc"),c=r.call(s,"finallyLoc");if(l&&c){if(this.prev=0;--n){var o=this.tryEntries[n];if(o.tryLoc<=this.prev&&r.call(o,"finallyLoc")&&this.prev=0;--t){var n=this.tryEntries[t];if(n.finallyLoc===e)return this.complete(n.completion,n.afterLoc),P(n),h}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.tryLoc===e){var r=n.completion;if("throw"===r.type){var o=r.arg;P(n)}return o}}throw Error("illegal catch attempt")},delegateYield:function(t,n,r){return this.delegate={iterator:I(t),resultName:n,nextLoc:r},"next"===this.method&&(this.arg=e),h}},t}function y(e,t){return y=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},y(e,t)}function w(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a,s,i=[],l=!0,c=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=a.call(n)).done)&&(i.push(r.value),i.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(c)throw o}}return i}}(e,t)||j(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function x(e){return function(e){if(Array.isArray(e))return o(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||j(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function j(e,t){if(e){if("string"==typeof e)return o(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?o(e,t):void 0}}function k(e){var t="function"==typeof Map?new Map:void 0;return k=function(e){if(null===e||!function(e){try{return-1!==Function.toString.call(e).indexOf("[native code]")}catch(t){return"function"==typeof e}}(e))return e;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,n)}function n(){return function(e,t,n){if(g())return Reflect.construct.apply(null,arguments);var r=[null];r.push.apply(r,t);var o=new(e.bind.apply(e,r));return n&&y(o,n.prototype),o}(e,arguments,p(this).constructor)}return n.prototype=Object.create(e.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),y(n,e)},k(e)}function S(){return r.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},r.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}function _(){return r.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20","aria-hidden":"true"},r.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}var E=["translations"],O="Ctrl",C=r.forwardRef((function(e,t){var n=e.translations,o=void 0===n?{}:n,a=b(e,E),s=o.buttonText,i=void 0===s?"Search":s,l=o.buttonAriaLabel,c=void 0===l?"Search":l,u=w((0,r.useState)(null),2),p=u[0],f=u[1];(0,r.useEffect)((function(){"undefined"!=typeof navigator&&(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?f("\u2318"):f(O))}),[]);var g=w(p===O?[O,"Ctrl",r.createElement(S,null)]:["Meta","Command",p],3),m=g[0],h=g[1],v=g[2];return r.createElement("button",d({type:"button",className:"DocSearch DocSearch-Button","aria-label":"".concat(c," (").concat(h,"+K)")},a,{ref:t}),r.createElement("span",{className:"DocSearch-Button-Container"},r.createElement(_,null),r.createElement("span",{className:"DocSearch-Button-Placeholder"},i)),r.createElement("span",{className:"DocSearch-Button-Keys"},null!==p&&r.createElement(r.Fragment,null,r.createElement(A,{reactsToKey:m},v),r.createElement(A,{reactsToKey:"k"},"K"))))}));function A(e){var t=e.reactsToKey,n=e.children,o=w((0,r.useState)(!1),2),a=o[0],s=o[1];return(0,r.useEffect)((function(){if(t)return window.addEventListener("keydown",e),window.addEventListener("keyup",n),function(){window.removeEventListener("keydown",e),window.removeEventListener("keyup",n)};function e(e){e.key===t&&s(!0)}function n(e){e.key!==t&&"Meta"!==e.key||s(!1)}}),[t]),r.createElement("kbd",{className:a?"DocSearch-Button-Key DocSearch-Button-Key--pressed":"DocSearch-Button-Key"},n)}function P(e,t){var n=void 0;return function(){for(var r=arguments.length,o=new Array(r),a=0;ae.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);n=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function G(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function W(e){for(var t=1;t=3||2===n&&r>=4||1===n&&r>=10);function a(t,n,r){if(o&&void 0!==r){var a=r[0].__autocomplete_algoliaCredentials,s={"X-Algolia-Application-Id":a.appId,"X-Algolia-API-Key":a.apiKey};e.apply(void 0,[t].concat($(n),[{headers:s}]))}else e.apply(void 0,[t].concat($(n)))}return{init:function(t,n){e("init",{appId:t,apiKey:n})},setAuthenticatedUserToken:function(t){e("setAuthenticatedUserToken",t)},setUserToken:function(t){e("setUserToken",t)},clickedObjectIDsAfterSearch:function(){for(var e=arguments.length,t=new Array(e),n=0;n0&&a("clickedObjectIDsAfterSearch",Q(t),t[0].items)},clickedObjectIDs:function(){for(var e=arguments.length,t=new Array(e),n=0;n0&&a("clickedObjectIDs",Q(t),t[0].items)},clickedFilters:function(){for(var t=arguments.length,n=new Array(t),r=0;r0&&e.apply(void 0,["clickedFilters"].concat(n))},convertedObjectIDsAfterSearch:function(){for(var e=arguments.length,t=new Array(e),n=0;n0&&a("convertedObjectIDsAfterSearch",Q(t),t[0].items)},convertedObjectIDs:function(){for(var e=arguments.length,t=new Array(e),n=0;n0&&a("convertedObjectIDs",Q(t),t[0].items)},convertedFilters:function(){for(var t=arguments.length,n=new Array(t),r=0;r0&&e.apply(void 0,["convertedFilters"].concat(n))},viewedObjectIDs:function(){for(var e=arguments.length,t=new Array(e),n=0;n0&&t.reduce((function(e,t){var n=t.items,r=V(t,U);return[].concat($(e),$(function(e){for(var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:20,n=[],r=0;r0&&e.apply(void 0,["viewedFilters"].concat(n))}}}function Z(e){var t=e.items.reduce((function(e,t){var n;return e[t.__autocomplete_indexName]=(null!==(n=e[t.__autocomplete_indexName])&&void 0!==n?n:[]).concat(t),e}),{});return Object.keys(t).map((function(e){return{index:e,items:t[e],algoliaSource:["autocomplete"]}}))}function J(e){return e.objectID&&e.__autocomplete_indexName&&e.__autocomplete_queryID}function X(e){return X="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},X(e)}function ee(e){return function(e){if(Array.isArray(e))return te(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return te(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?te(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function te(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n0&&ie({onItemsChange:o,items:n,insights:c,state:t}))}}),0);return{name:"aa.algoliaInsightsPlugin",subscribe:function(e){var t=e.setContext,n=e.onSelect,r=e.onActive,o=!1;function u(e){t({algoliaInsightsPlugin:{__algoliaSearchParameters:re(re({},i?{clickAnalytics:!0}:{}),e?{userToken:ue(e)}:{}),insights:c}})}l("addAlgoliaAgent","insights-plugin"),u(),l("onUserTokenChange",(function(e){o||u(e)})),l("getUserToken",null,(function(e,t){o||u(t)})),l("onAuthenticatedUserTokenChange",(function(e){e?(o=!0,u(e)):(o=!1,l("getUserToken",null,(function(e,t){return u(t)})))})),l("getAuthenticatedUserToken",null,(function(e,t){t&&(o=!0,u(t))})),n((function(e){var t=e.item,n=e.state,r=e.event,o=e.source;J(t)&&a({state:n,event:r,insights:c,item:t,insightsEvents:[re({eventName:"Item Selected"},F({item:t,items:o.getItems().filter(J)}))]})})),r((function(e){var t=e.item,n=e.source,r=e.state,o=e.event;J(t)&&s({state:r,event:o,insights:c,item:t,insightsEvents:[re({eventName:"Item Active"},F({item:t,items:n.getItems().filter(J)}))]})}))},onStateChange:function(e){var t=e.state;d({state:t})},__autocomplete_pluginOptions:e}}function ce(){var e,t=arguments.length>1?arguments[1]:void 0;return[].concat(ee(arguments.length>0&&void 0!==arguments[0]?arguments[0]:[]),["autocomplete-internal"],ee(null!==(e=t.algoliaInsightsPlugin)&&void 0!==e&&e.__automaticInsights?["autocomplete-automatic"]:[]))}function ue(e){return"number"==typeof e?e.toString():e}function de(e,t){var n=t;return{then:function(t,r){return de(e.then(fe(t,n,e),fe(r,n,e)),n)},catch:function(t){return de(e.catch(fe(t,n,e)),n)},finally:function(t){return t&&n.onCancelList.push(t),de(e.finally(fe(t&&function(){return n.onCancelList=[],t()},n,e)),n)},cancel:function(){n.isCanceled=!0;var e=n.onCancelList;n.onCancelList=[],e.forEach((function(e){e()}))},isCanceled:function(){return!0===n.isCanceled}}}function pe(e){return de(e,{isCanceled:!1,onCancelList:[]})}function fe(e,t,n){return e?function(n){return t.isCanceled?n:e(n)}:n}function ge(e,t,n,r){if(!n)return null;if(e<0&&(null===t||null!==r&&0===t))return n+e;var o=(null===t?-1:t)+e;return o<=-1||o>=n?null===r?null:0:o}function me(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function he(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n0},reshape:function(e){return e.sources}},e),{},{id:null!==(n=e.id)&&void 0!==n?n:"autocomplete-".concat(I++),plugins:o,initialState:Re({activeItemId:null,query:"",completion:null,collections:[],isOpen:!1,status:"idle",context:{}},e.initialState),onStateChange:function(t){var n;null===(n=e.onStateChange)||void 0===n||n.call(e,t),o.forEach((function(e){var n;return null===(n=e.onStateChange)||void 0===n?void 0:n.call(e,t)}))},onSubmit:function(t){var n;null===(n=e.onSubmit)||void 0===n||n.call(e,t),o.forEach((function(e){var n;return null===(n=e.onSubmit)||void 0===n?void 0:n.call(e,t)}))},onReset:function(t){var n;null===(n=e.onReset)||void 0===n||n.call(e,t),o.forEach((function(e){var n;return null===(n=e.onReset)||void 0===n?void 0:n.call(e,t)}))},getSources:function(n){return Promise.all([].concat(function(e){return function(e){if(Array.isArray(e))return Te(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return Te(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Te(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(o.map((function(e){return e.getSources}))),[e.getSources]).filter(Boolean).map((function(e){return function(e,t){var n=[];return Promise.resolve(e(t)).then((function(e){return Promise.all(e.filter((function(e){return Boolean(e)})).map((function(e){if(e.sourceId,n.includes(e.sourceId))throw new Error("[Autocomplete] The `sourceId` ".concat(JSON.stringify(e.sourceId)," is not unique."));n.push(e.sourceId);var t={getItemInputValue:function(e){return e.state.query},getItemUrl:function(){},onSelect:function(e){(0,e.setIsOpen)(!1)},onActive:D,onResolve:D};Object.keys(t).forEach((function(e){t[e].__default=!0}));var r=he(he({},t),e);return Promise.resolve(r)})))}))}(e,n)}))).then((function(e){return T(e)})).then((function(e){return e.map((function(e){return Re(Re({},e),{},{onSelect:function(n){e.onSelect(n),t.forEach((function(e){var t;return null===(t=e.onSelect)||void 0===t?void 0:t.call(e,n)}))},onActive:function(n){e.onActive(n),t.forEach((function(e){var t;return null===(t=e.onActive)||void 0===t?void 0:t.call(e,n)}))},onResolve:function(n){e.onResolve(n),t.forEach((function(e){var t;return null===(t=e.onResolve)||void 0===t?void 0:t.call(e,n)}))}})}))}))},navigator:Re({navigate:function(e){var t=e.itemUrl;r.location.assign(t)},navigateNewTab:function(e){var t=e.itemUrl,n=r.open(t,"_blank","noopener");null==n||n.focus()},navigateNewWindow:function(e){var t=e.itemUrl;r.open(t,"_blank","noopener")}},e.navigator)})}function De(e){return De="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},De(e)}function Me(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Fe(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,Qe);nt&&o.environment.clearTimeout(nt);var c=l.setCollections,u=l.setIsOpen,d=l.setQuery,p=l.setActiveItemId,f=l.setStatus,g=l.setContext;if(d(a),p(o.defaultActiveItemId),!a&&!1===o.openOnFocus){var m,h=i.getState().collections.map((function(e){return Ze(Ze({},e),{},{items:[]})}));f("idle"),c(h),u(null!==(m=r.isOpen)&&void 0!==m?m:o.shouldPanelOpen({state:i.getState()}));var b=pe(rt(h).then((function(){return Promise.resolve()})));return i.pendingRequests.add(b)}f("loading"),nt=o.environment.setTimeout((function(){f("stalled")}),o.stallThreshold);var v=pe(rt(o.getSources(Ze({query:a,refresh:s,state:i.getState()},l)).then((function(e){return Promise.all(e.map((function(e){return Promise.resolve(e.getItems(Ze({query:a,refresh:s,state:i.getState()},l))).then((function(t){return function(e,t,n){if(o=e,Boolean(null==o?void 0:o.execute)){var r="algolia"===e.requesterId?Object.assign.apply(Object,[{}].concat(He(Object.keys(n.context).map((function(e){var t;return null===(t=n.context[e])||void 0===t?void 0:t.__algoliaSearchParameters}))))):{};return qe(qe({},e),{},{requests:e.queries.map((function(n){return{query:"algolia"===e.requesterId?qe(qe({},n),{},{params:qe(qe({},r),n.params)}):n,sourceId:t,transformResponse:e.transformResponse}}))})}var o;return{items:e,sourceId:t}}(t,e.sourceId,i.getState())}))}))).then(We).then((function(t){var n,r=t.some((function(e){return function(e){return!Array.isArray(e)&&Boolean(null==e?void 0:e._automaticInsights)}(e.items)}));return r&&g({algoliaInsightsPlugin:Ze(Ze({},(null===(n=i.getState().context)||void 0===n?void 0:n.algoliaInsightsPlugin)||{}),{},{__automaticInsights:r})}),function(e,t,n){return t.map((function(t){var r,o=e.filter((function(e){return e.sourceId===t.sourceId})),a=o.map((function(e){return e.items})),s=o[0].transformResponse,i=s?s({results:r=a,hits:r.map((function(e){return e.hits})).filter(Boolean),facetHits:r.map((function(e){var t;return null===(t=e.facetHits)||void 0===t?void 0:t.map((function(e){return{label:e.value,count:e.count,_highlightResult:{label:{value:e.highlighted}}}}))})).filter(Boolean)}):a;return t.onResolve({source:t,results:a,items:i,state:n.getState()}),i.every(Boolean),'The `getItems` function from source "'.concat(t.sourceId,'" must return an array of items but returned ').concat(JSON.stringify(void 0),".\n\nDid you forget to return items?\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems"),{source:t,items:i}}))}(t,e,i)})).then((function(e){return function(e){var t=e.props,n=e.state,r=e.collections.reduce((function(e,t){return Fe(Fe({},e),{},Be({},t.source.sourceId,Fe(Fe({},t.source),{},{getItems:function(){return T(t.items)}})))}),{}),o=t.plugins.reduce((function(e,t){return t.reshape?t.reshape(e):e}),{sourcesBySourceId:r,state:n}).sourcesBySourceId;return T(t.reshape({sourcesBySourceId:o,sources:Object.values(o),state:n})).filter(Boolean).map((function(e){return{source:e,items:e.getItems()}}))}({collections:e,props:o,state:i.getState()})}))})))).then((function(e){var n;f("idle"),c(e);var d=o.shouldPanelOpen({state:i.getState()});u(null!==(n=r.isOpen)&&void 0!==n?n:o.openOnFocus&&!a&&d||d);var p=ye(i.getState());if(null!==i.getState().activeItemId&&p){var g=p.item,m=p.itemInputValue,h=p.itemUrl,b=p.source;b.onActive(Ze({event:t,item:g,itemInputValue:m,itemUrl:h,refresh:s,source:b,state:i.getState()},l))}})).finally((function(){f("idle"),nt&&o.environment.clearTimeout(nt)}));return i.pendingRequests.add(v)}function at(e){return at="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},at(e)}var st=["event","props","refresh","store"];function it(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function lt(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function xt(e){var t=e.props,n=e.refresh,r=e.store,o=wt(e,dt);return{getEnvironmentProps:function(e){var n=e.inputElement,o=e.formElement,a=e.panelElement;function s(e){!r.getState().isOpen&&r.pendingRequests.isEmpty()||e.target===n||!1===[o,a].some((function(t){return(n=t)===(r=e.target)||n.contains(r);var n,r}))&&(r.dispatch("blur",null),t.debug||r.pendingRequests.cancelAll())}return vt({onTouchStart:s,onMouseDown:s,onTouchMove:function(e){!1!==r.getState().isOpen&&n===t.environment.document.activeElement&&e.target!==n&&n.blur()}},wt(e,pt))},getRootProps:function(e){return vt({role:"combobox","aria-expanded":r.getState().isOpen,"aria-haspopup":"listbox","aria-controls":r.getState().isOpen?r.getState().collections.map((function(e){var n=e.source;return we(t.id,"list",n)})).join(" "):void 0,"aria-labelledby":we(t.id,"label")},e)},getFormProps:function(e){return e.inputElement,vt({action:"",noValidate:!0,role:"search",onSubmit:function(a){var s;a.preventDefault(),t.onSubmit(vt({event:a,refresh:n,state:r.getState()},o)),r.dispatch("submit",null),null===(s=e.inputElement)||void 0===s||s.blur()},onReset:function(a){var s;a.preventDefault(),t.onReset(vt({event:a,refresh:n,state:r.getState()},o)),r.dispatch("reset",null),null===(s=e.inputElement)||void 0===s||s.focus()}},wt(e,ft))},getLabelProps:function(e){return vt({htmlFor:we(t.id,"input"),id:we(t.id,"label")},e)},getInputProps:function(e){var a;function s(e){(t.openOnFocus||Boolean(r.getState().query))&&ot(vt({event:e,props:t,query:r.getState().completion||r.getState().query,refresh:n,store:r},o)),r.dispatch("focus",null)}var i=e||{};i.inputElement;var l=i.maxLength,c=void 0===l?512:l,u=wt(i,gt),d=ye(r.getState()),p=function(e){return Boolean(e&&e.match(xe))}((null===(a=t.environment.navigator)||void 0===a?void 0:a.userAgent)||""),f=t.enterKeyHint||(null!=d&&d.itemUrl&&!p?"go":"search");return vt({"aria-autocomplete":"both","aria-activedescendant":r.getState().isOpen&&null!==r.getState().activeItemId?we(t.id,"item-".concat(r.getState().activeItemId),null==d?void 0:d.source):void 0,"aria-controls":r.getState().isOpen?r.getState().collections.map((function(e){var n=e.source;return we(t.id,"list",n)})).join(" "):void 0,"aria-labelledby":we(t.id,"label"),value:r.getState().completion||r.getState().query,id:we(t.id,"input"),autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",enterKeyHint:f,spellCheck:"false",autoFocus:t.autoFocus,placeholder:t.placeholder,maxLength:c,type:"search",onChange:function(e){var a=e.currentTarget.value;t.ignoreCompositionEvents&&je(e).isComposing?o.setQuery(a):ot(vt({event:e,props:t,query:a.slice(0,c),refresh:n,store:r},o))},onCompositionEnd:function(e){ot(vt({event:e,props:t,query:e.currentTarget.value.slice(0,c),refresh:n,store:r},o))},onKeyDown:function(e){je(e).isComposing||function(e){var t=e.event,n=e.props,r=e.refresh,o=e.store,a=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,st);if("ArrowUp"===t.key||"ArrowDown"===t.key){var s=function(){var e=ye(o.getState()),t=n.environment.document.getElementById(we(n.id,"item-".concat(o.getState().activeItemId),null==e?void 0:e.source));t&&(t.scrollIntoViewIfNeeded?t.scrollIntoViewIfNeeded(!1):t.scrollIntoView(!1))},i=function(){var e=ye(o.getState());if(null!==o.getState().activeItemId&&e){var n=e.item,s=e.itemInputValue,i=e.itemUrl,l=e.source;l.onActive(lt({event:t,item:n,itemInputValue:s,itemUrl:i,refresh:r,source:l,state:o.getState()},a))}};t.preventDefault(),!1===o.getState().isOpen&&(n.openOnFocus||Boolean(o.getState().query))?ot(lt({event:t,props:n,query:o.getState().query,refresh:r,store:o},a)).then((function(){o.dispatch(t.key,{nextActiveItemId:n.defaultActiveItemId}),i(),setTimeout(s,0)})):(o.dispatch(t.key,{}),i(),s())}else if("Escape"===t.key)t.preventDefault(),o.dispatch(t.key,null),o.pendingRequests.cancelAll();else if("Tab"===t.key)o.dispatch("blur",null),o.pendingRequests.cancelAll();else if("Enter"===t.key){if(null===o.getState().activeItemId||o.getState().collections.every((function(e){return 0===e.items.length})))return void(n.debug||o.pendingRequests.cancelAll());t.preventDefault();var l=ye(o.getState()),c=l.item,u=l.itemInputValue,d=l.itemUrl,p=l.source;if(t.metaKey||t.ctrlKey)void 0!==d&&(p.onSelect(lt({event:t,item:c,itemInputValue:u,itemUrl:d,refresh:r,source:p,state:o.getState()},a)),n.navigator.navigateNewTab({itemUrl:d,item:c,state:o.getState()}));else if(t.shiftKey)void 0!==d&&(p.onSelect(lt({event:t,item:c,itemInputValue:u,itemUrl:d,refresh:r,source:p,state:o.getState()},a)),n.navigator.navigateNewWindow({itemUrl:d,item:c,state:o.getState()}));else if(t.altKey);else{if(void 0!==d)return p.onSelect(lt({event:t,item:c,itemInputValue:u,itemUrl:d,refresh:r,source:p,state:o.getState()},a)),void n.navigator.navigate({itemUrl:d,item:c,state:o.getState()});ot(lt({event:t,nextState:{isOpen:!1},props:n,query:u,refresh:r,store:o},a)).then((function(){p.onSelect(lt({event:t,item:c,itemInputValue:u,itemUrl:d,refresh:r,source:p,state:o.getState()},a))}))}}}(vt({event:e,props:t,refresh:n,store:r},o))},onFocus:s,onBlur:D,onClick:function(n){e.inputElement!==t.environment.document.activeElement||r.getState().isOpen||s(n)}},u)},getPanelProps:function(e){return vt({onMouseDown:function(e){e.preventDefault()},onMouseLeave:function(){r.dispatch("mouseleave",null)}},e)},getListProps:function(e){var n=e||{},r=n.source,o=wt(n,mt);return vt({role:"listbox","aria-labelledby":we(t.id,"label"),id:we(t.id,"list",r)},o)},getItemProps:function(e){var a=e.item,s=e.source,i=wt(e,ht);return vt({id:we(t.id,"item-".concat(a.__autocomplete_id),s),role:"option","aria-selected":r.getState().activeItemId===a.__autocomplete_id,onMouseMove:function(e){if(a.__autocomplete_id!==r.getState().activeItemId){r.dispatch("mousemove",a.__autocomplete_id);var t=ye(r.getState());if(null!==r.getState().activeItemId&&t){var s=t.item,i=t.itemInputValue,l=t.itemUrl,c=t.source;c.onActive(vt({event:e,item:s,itemInputValue:i,itemUrl:l,refresh:n,source:c,state:r.getState()},o))}}},onMouseDown:function(e){e.preventDefault()},onClick:function(e){var i=s.getItemInputValue({item:a,state:r.getState()}),l=s.getItemUrl({item:a,state:r.getState()});(l?Promise.resolve():ot(vt({event:e,nextState:{isOpen:!1},props:t,query:i,refresh:n,store:r},o))).then((function(){s.onSelect(vt({event:e,item:a,itemInputValue:i,itemUrl:l,refresh:n,source:s,state:r.getState()},o))}))}},i)}}}function jt(e){return jt="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},jt(e)}function kt(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function St(e){for(var t=1;t0&&r.createElement("div",{className:"DocSearch-NoResults-Prefill-List"},r.createElement("p",{className:"DocSearch-Help"},l,":"),r.createElement("ul",null,f.slice(0,3).reduce((function(e,t){return[].concat(x(e),[r.createElement("li",{key:t},r.createElement("button",{className:"DocSearch-Prefill",key:t,type:"button",onClick:function(){o.setQuery(t.toLowerCase()+" "),o.refresh(),o.inputRef.current.focus()}},t))])}),[]))),o.getMissingResultsUrl&&r.createElement("p",{className:"DocSearch-Help"},"".concat(u," "),r.createElement("a",{href:o.getMissingResultsUrl({query:o.state.query}),target:"_blank",rel:"noopener noreferrer"},p)))}var nn=["hit","attribute","tagName"];function rn(e,t){return t.split(".").reduce((function(e,t){return null!=e&&e[t]?e[t]:null}),e)}function on(e){var t=e.hit,n=e.attribute,o=e.tagName,a=void 0===o?"span":o,s=b(e,nn);return(0,r.createElement)(a,h(h({},s),{},{dangerouslySetInnerHTML:{__html:rn(t,"_snippetResult.".concat(n,".value"))||rn(t,n)}}))}function an(e){return e.collection&&0!==e.collection.items.length?r.createElement("section",{className:"DocSearch-Hits"},r.createElement("div",{className:"DocSearch-Hit-source"},e.title),r.createElement("ul",e.getListProps(),e.collection.items.map((function(t,n){return r.createElement(sn,d({key:[e.title,t.objectID].join(":"),item:t,index:n},e))})))):null}function sn(e){var t=e.item,n=e.index,o=e.renderIcon,a=e.renderAction,s=e.getItemProps,i=e.onItemClick,l=e.collection,c=e.hitComponent,u=w(r.useState(!1),2),p=u[0],f=u[1],g=w(r.useState(!1),2),m=g[0],h=g[1],b=r.useRef(null),v=c;return r.createElement("li",d({className:["DocSearch-Hit",t.__docsearch_parent&&"DocSearch-Hit--Child",p&&"DocSearch-Hit--deleting",m&&"DocSearch-Hit--favoriting"].filter(Boolean).join(" "),onTransitionEnd:function(){b.current&&b.current()}},s({item:t,source:l.source,onClick:function(e){i(t,e)}})),r.createElement(v,{hit:t},r.createElement("div",{className:"DocSearch-Hit-Container"},o({item:t,index:n}),t.hierarchy[t.type]&&"lvl1"===t.type&&r.createElement("div",{className:"DocSearch-Hit-content-wrapper"},r.createElement(on,{className:"DocSearch-Hit-title",hit:t,attribute:"hierarchy.lvl1"}),t.content&&r.createElement(on,{className:"DocSearch-Hit-path",hit:t,attribute:"content"})),t.hierarchy[t.type]&&("lvl2"===t.type||"lvl3"===t.type||"lvl4"===t.type||"lvl5"===t.type||"lvl6"===t.type)&&r.createElement("div",{className:"DocSearch-Hit-content-wrapper"},r.createElement(on,{className:"DocSearch-Hit-title",hit:t,attribute:"hierarchy.".concat(t.type)}),r.createElement(on,{className:"DocSearch-Hit-path",hit:t,attribute:"hierarchy.lvl1"})),"content"===t.type&&r.createElement("div",{className:"DocSearch-Hit-content-wrapper"},r.createElement(on,{className:"DocSearch-Hit-title",hit:t,attribute:"content"}),r.createElement(on,{className:"DocSearch-Hit-path",hit:t,attribute:"hierarchy.lvl1"})),a({item:t,runDeleteTransition:function(e){f(!0),b.current=e},runFavoriteTransition:function(e){h(!0),b.current=e}}))))}function ln(e,t,n){return e.reduce((function(e,r){var o=t(r);return e.hasOwnProperty(o)||(e[o]=[]),e[o].length<(n||5)&&e[o].push(r),e}),{})}function cn(e){return e}function un(e){return 1===e.button||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey}function dn(){}var pn=/(|<\/mark>)/g,fn=RegExp(pn.source);function gn(e){var t,n,r=e;if(!r.__docsearch_parent&&!e._highlightResult)return e.hierarchy.lvl0;var o=r.__docsearch_parent?null===(t=r.__docsearch_parent)||void 0===t||null===(t=t._highlightResult)||void 0===t||null===(t=t.hierarchy)||void 0===t?void 0:t.lvl0:null===(n=e._highlightResult)||void 0===n||null===(n=n.hierarchy)||void 0===n?void 0:n.lvl0;return o?o.value&&fn.test(o.value)?o.value.replace(pn,""):o.value:e.hierarchy.lvl0}function mn(e){return r.createElement("div",{className:"DocSearch-Dropdown-Container"},e.state.collections.map((function(t){if(0===t.items.length)return null;var n=gn(t.items[0]);return r.createElement(an,d({},e,{key:t.source.sourceId,title:n,collection:t,renderIcon:function(e){var n,o=e.item,a=e.index;return r.createElement(r.Fragment,null,o.__docsearch_parent&&r.createElement("svg",{className:"DocSearch-Hit-Tree",viewBox:"0 0 24 54"},r.createElement("g",{stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"},o.__docsearch_parent!==(null===(n=t.items[a+1])||void 0===n?void 0:n.__docsearch_parent)?r.createElement("path",{d:"M8 6v21M20 27H8.3"}):r.createElement("path",{d:"M8 6v42M20 27H8.3"}))),r.createElement("div",{className:"DocSearch-Hit-icon"},r.createElement(Wt,{type:o.type})))},renderAction:function(){return r.createElement("div",{className:"DocSearch-Hit-action"},r.createElement(Vt,null))}}))})),e.resultsFooterComponent&&r.createElement("section",{className:"DocSearch-HitsFooter"},r.createElement(e.resultsFooterComponent,{state:e.state})))}var hn=["translations"];function bn(e){var t=e.translations,n=void 0===t?{}:t,o=b(e,hn),a=n.recentSearchesTitle,s=void 0===a?"Recent":a,i=n.noRecentSearchesText,l=void 0===i?"No recent searches":i,c=n.saveRecentSearchButtonTitle,u=void 0===c?"Save this search":c,p=n.removeRecentSearchButtonTitle,f=void 0===p?"Remove this search from history":p,g=n.favoriteSearchesTitle,m=void 0===g?"Favorite":g,h=n.removeFavoriteSearchButtonTitle,v=void 0===h?"Remove this search from favorites":h;return"idle"===o.state.status&&!1===o.hasCollections?o.disableUserPersonalization?null:r.createElement("div",{className:"DocSearch-StartScreen"},r.createElement("p",{className:"DocSearch-Help"},l)):!1===o.hasCollections?null:r.createElement("div",{className:"DocSearch-Dropdown-Container"},r.createElement(an,d({},o,{title:s,collection:o.state.collections[0],renderIcon:function(){return r.createElement("div",{className:"DocSearch-Hit-icon"},r.createElement($t,null))},renderAction:function(e){var t=e.item,n=e.runFavoriteTransition,a=e.runDeleteTransition;return r.createElement(r.Fragment,null,r.createElement("div",{className:"DocSearch-Hit-action"},r.createElement("button",{className:"DocSearch-Hit-action-button",title:u,type:"submit",onClick:function(e){e.preventDefault(),e.stopPropagation(),n((function(){o.favoriteSearches.add(t),o.recentSearches.remove(t),o.refresh()}))}},r.createElement(Yt,null))),r.createElement("div",{className:"DocSearch-Hit-action"},r.createElement("button",{className:"DocSearch-Hit-action-button",title:f,type:"submit",onClick:function(e){e.preventDefault(),e.stopPropagation(),a((function(){o.recentSearches.remove(t),o.refresh()}))}},r.createElement(Ht,null))))}})),r.createElement(an,d({},o,{title:m,collection:o.state.collections[1],renderIcon:function(){return r.createElement("div",{className:"DocSearch-Hit-icon"},r.createElement(Yt,null))},renderAction:function(e){var t=e.item,n=e.runDeleteTransition;return r.createElement("div",{className:"DocSearch-Hit-action"},r.createElement("button",{className:"DocSearch-Hit-action-button",title:v,type:"submit",onClick:function(e){e.preventDefault(),e.stopPropagation(),n((function(){o.favoriteSearches.remove(t),o.refresh()}))}},r.createElement(Ht,null)))}})))}var vn=["translations"],yn=r.memo((function(e){var t=e.translations,n=void 0===t?{}:t,o=b(e,vn);if("error"===o.state.status)return r.createElement(Xt,{translations:null==n?void 0:n.errorScreen});var a=o.state.collections.some((function(e){return e.items.length>0}));return o.state.query?!1===a?r.createElement(tn,d({},o,{translations:null==n?void 0:n.noResultsScreen})):r.createElement(mn,o):r.createElement(bn,d({},o,{hasCollections:a,translations:null==n?void 0:n.startScreen}))}),(function(e,t){return"loading"===t.state.status||"stalled"===t.state.status})),wn=["translations"];function xn(e){var t=e.translations,n=void 0===t?{}:t,o=b(e,wn),a=n.resetButtonTitle,s=void 0===a?"Clear the query":a,i=n.resetButtonAriaLabel,l=void 0===i?"Clear the query":i,c=n.cancelButtonText,u=void 0===c?"Cancel":c,p=n.cancelButtonAriaLabel,f=void 0===p?"Cancel":p,g=n.searchInputLabel,m=void 0===g?"Search":g,h=o.getFormProps({inputElement:o.inputRef.current}).onReset;return r.useEffect((function(){o.autoFocus&&o.inputRef.current&&o.inputRef.current.focus()}),[o.autoFocus,o.inputRef]),r.useEffect((function(){o.isFromSelection&&o.inputRef.current&&o.inputRef.current.select()}),[o.isFromSelection,o.inputRef]),r.createElement(r.Fragment,null,r.createElement("form",{className:"DocSearch-Form",onSubmit:function(e){e.preventDefault()},onReset:h},r.createElement("label",d({className:"DocSearch-MagnifierLabel"},o.getLabelProps()),r.createElement(_,null),r.createElement("span",{className:"DocSearch-VisuallyHiddenForAccessibility"},m)),r.createElement("div",{className:"DocSearch-LoadingIndicator"},r.createElement(qt,null)),r.createElement("input",d({className:"DocSearch-Input",ref:o.inputRef},o.getInputProps({inputElement:o.inputRef.current,autoFocus:o.autoFocus,maxLength:64}))),r.createElement("button",{type:"reset",title:s,className:"DocSearch-Reset","aria-label":l,hidden:!o.state.query},r.createElement(Ht,null))),r.createElement("button",{className:"DocSearch-Cancel",type:"reset","aria-label":f,onClick:o.onClose},u))}var jn=["_highlightResult","_snippetResult"];function kn(e){var t=e.key,n=e.limit,r=void 0===n?5:n,o=function(e){return!1===function(){var e="__TEST_KEY__";try{return localStorage.setItem(e,""),localStorage.removeItem(e),!0}catch(e){return!1}}()?{setItem:function(){},getItem:function(){return[]}}:{setItem:function(t){return window.localStorage.setItem(e,JSON.stringify(t))},getItem:function(){var t=window.localStorage.getItem(e);return t?JSON.parse(t):[]}}}(t),a=o.getItem().slice(0,r);return{add:function(e){var t=e;t._highlightResult,t._snippetResult;var n=b(t,jn),s=a.findIndex((function(e){return e.objectID===n.objectID}));s>-1&&a.splice(s,1),a.unshift(n),a=a.slice(0,r),o.setItem(a)},remove:function(e){a=a.filter((function(t){return t.objectID!==e.objectID})),o.setItem(a)},getAll:function(){return a}}}function Sn(e){var t,n="algolia-client-js-".concat(e.key);function r(){return void 0===t&&(t=e.localStorage||window.localStorage),t}function o(){return JSON.parse(r().getItem(n)||"{}")}function a(e){r().setItem(n,JSON.stringify(e))}return{get:function(t,n){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return Promise.resolve().then((function(){var n,r,s;return n=e.timeToLive?1e3*e.timeToLive:null,r=o(),a(s=Object.fromEntries(Object.entries(r).filter((function(e){return void 0!==w(e,2)[1].timestamp})))),n&&a(Object.fromEntries(Object.entries(s).filter((function(e){var t=w(e,2)[1],r=(new Date).getTime();return!(t.timestamp+n2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return t().then((function(e){return Promise.all([e,n.miss(e)])})).then((function(e){return w(e,1)[0]}))},set:function(e,t){return Promise.resolve(t)},delete:function(e){return Promise.resolve()},clear:function(){return Promise.resolve()}}:{get:function(e,r){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return n.get(e,r,o).catch((function(){return _n({caches:t}).get(e,r,o)}))},set:function(e,r){return n.set(e,r).catch((function(){return _n({caches:t}).set(e,r)}))},delete:function(e){return n.delete(e).catch((function(){return _n({caches:t}).delete(e)}))},clear:function(){return n.clear().catch((function(){return _n({caches:t}).clear()}))}}}function En(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{serializable:!0},t={};return{get:function(n,r){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},a=JSON.stringify(n);if(a in t)return Promise.resolve(e.serializable?JSON.parse(t[a]):t[a]);var s=r();return s.then((function(e){return o.miss(e)})).then((function(){return s}))},set:function(n,r){return t[JSON.stringify(n)]=e.serializable?JSON.stringify(r):r,Promise.resolve(r)},delete:function(e){return delete t[JSON.stringify(e)],Promise.resolve()},clear:function(){return t={},Promise.resolve()}}}function On(e){var t=e.algoliaAgents,n=e.client,r=e.version,o=function(e){var t={value:"Algolia for JavaScript (".concat(e,")"),add:function(e){var n="; ".concat(e.segment).concat(void 0!==e.version?" (".concat(e.version,")"):"");return-1===t.value.indexOf(n)&&(t.value="".concat(t.value).concat(n)),t}};return t}(r).add({segment:n,version:r});return t.forEach((function(e){return o.add(e)})),o}var Cn=12e4;function An(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"up",n=Date.now();return h(h({},e),{},{status:t,lastUpdate:n,isUp:function(){return"up"===t||Date.now()-n>Cn},isTimedOut:function(){return"timed out"===t&&Date.now()-n<=Cn}})}var Pn=function(){function e(t,n){var r;return l(this,e),u(r=i(this,e,[t]),"name","AlgoliaError"),n&&(r.name=n),r}return f(e,k(Error)),c(e)}(),Tn=function(){function e(t,n,r){var o;return l(this,e),u(o=i(this,e,[t,r]),"stackTrace",void 0),o.stackTrace=n,o}return f(e,Pn),c(e)}(),In=function(){function e(t){return l(this,e),i(this,e,["Unreachable hosts - your application id may be incorrect. If the error persists, please reach out to the Algolia Support team: https://alg.li/support.",t,"RetryError"])}return f(e,Tn),c(e)}(),Rn=function(){function e(t,n,r){var o,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"ApiError";return l(this,e),u(o=i(this,e,[t,r,a]),"status",void 0),o.status=n,o}return f(e,Tn),c(e)}(),Nn=function(){function e(t,n){var r;return l(this,e),u(r=i(this,e,[t,"DeserializationError"]),"response",void 0),r.response=n,r}return f(e,Pn),c(e)}(),Ln=function(){function e(t,n,r,o){var a;return l(this,e),u(a=i(this,e,[t,n,o,"DetailedApiError"]),"error",void 0),a.error=r,a}return f(e,Rn),c(e)}();function Dn(e,t,n){var r,o=(r=n,Object.keys(r).filter((function(e){return void 0!==r[e]})).sort().map((function(e){return"".concat(e,"=").concat(encodeURIComponent("[object Array]"===Object.prototype.toString.call(r[e])?r[e].join(","):r[e]).replace(/\+/g,"%20"))})).join("&")),a="".concat(e.protocol,"://").concat(e.url).concat(e.port?":".concat(e.port):"","/").concat("/"===t.charAt(0)?t.substring(1):t);return o.length&&(a+="?".concat(o)),a}function Mn(e,t){if("GET"!==e.method&&(void 0!==e.data||void 0!==t.data)){var n=Array.isArray(e.data)?e.data:h(h({},e.data),t.data);return JSON.stringify(n)}}function Fn(e,t,n){var r=h(h(h({Accept:"application/json"},e),t),n),o={};return Object.keys(r).forEach((function(e){var t=r[e];o[e.toLowerCase()]=t})),o}function Bn(e){try{return JSON.parse(e.content)}catch(t){throw new Nn(t.message,e)}}function zn(e,t){var n=e.content,r=e.status;try{var o=JSON.parse(n);return"error"in o?new Ln(o.message,r,o.error,t):new Rn(o.message,r,t)}catch(e){}return new Rn(n,r,t)}function Un(e){return e.map((function(e){return qn(e)}))}function qn(e){var t=e.request.headers["x-algolia-api-key"]?{"x-algolia-api-key":"*****"}:{};return h(h({},e),{},{request:h(h({},e.request),{},{headers:h(h({},e.request.headers),t)})})}var $n=["appId","apiKey","authMode","algoliaAgents"],Hn=["params"],Vn="5.14.2";function Gn(e){return[{url:"".concat(e,"-dsn.algolia.net"),accept:"read",protocol:"https"},{url:"".concat(e,".algolia.net"),accept:"write",protocol:"https"}].concat(function(e){for(var t=e,n=e.length-1;n>0;n--){var r=Math.floor(Math.random()*(n+1)),o=e[n];t[n]=e[r],t[r]=o}return t}([{url:"".concat(e,"-1.algolianet.com"),accept:"readWrite",protocol:"https"},{url:"".concat(e,"-2.algolianet.com"),accept:"readWrite",protocol:"https"},{url:"".concat(e,"-3.algolianet.com"),accept:"readWrite",protocol:"https"}]))}var Wn="3.8.2";function Kn(e,t,n){return r.useMemo((function(){var r=function(e,t,n){if(!e||"string"!=typeof e)throw new Error("`appId` is missing.");if(!t||"string"!=typeof t)throw new Error("`apiKey` is missing.");return function(e){var t=e.appId,n=e.apiKey,r=e.authMode,o=e.algoliaAgents,a=b(e,$n),i=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"WithinHeaders",r={"x-algolia-api-key":t,"x-algolia-application-id":e};return{headers:function(){return"WithinHeaders"===n?r:{}},queryParameters:function(){return"WithinQueryParameters"===n?r:{}}}}(t,n,r),l=function(e){var t=e.hosts,n=e.hostsCache,r=e.baseHeaders,o=e.logger,a=e.baseQueryParameters,i=e.algoliaAgent,l=e.timeouts,c=e.requester,u=e.requestsCache,d=e.responsesCache;function p(e){return f.apply(this,arguments)}function f(){return(f=s(v().mark((function e(t){var r,o,a,s,i;return v().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,Promise.all(t.map((function(e){return n.get(e,(function(){return Promise.resolve(An(e))}))})));case 2:return r=e.sent,o=r.filter((function(e){return e.isUp()})),a=r.filter((function(e){return e.isTimedOut()})),s=[].concat(x(o),x(a)),i=s.length>0?s:t,e.abrupt("return",{hosts:i,getTimeout:function(e,t){return(0===a.length&&0===e?1:a.length+3+e)*t}});case 8:case"end":return e.stop()}}),e)})))).apply(this,arguments)}function g(e,t){return m.apply(this,arguments)}function m(){return m=s(v().mark((function e(u,d){var f,g,m,b,y,w,j,k,S,_,E,O,C,A=arguments;return v().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(f=!(A.length>2&&void 0!==A[2])||A[2],g=[],m=Mn(u,d),b=Fn(r,u.headers,d.headers),y="GET"===u.method?h(h({},u.data),d.data):{},w=h(h(h({},a),u.queryParameters),y),i.value&&(w["x-algolia-agent"]=i.value),d&&d.queryParameters)for(j=0,k=Object.keys(d.queryParameters);j1&&void 0!==arguments[1]?arguments[1]:{},n=e.useReadTransporter||"GET"===e.method;if(!n)return g(e,t,n);var o=function(){return g(e,t)};if(!0!==(t.cacheable||e.cacheable))return o();var s={request:e,requestOptions:t,transporter:{queryParameters:a,headers:r}};return d.get(s,(function(){return u.get(s,(function(){return u.set(s,o()).then((function(e){return Promise.all([u.delete(s),e])}),(function(e){return Promise.all([u.delete(s),Promise.reject(e)])})).then((function(e){var t=w(e,2);return t[0],t[1]}))}))}),{miss:function(e){return d.set(s,e)}})},requestsCache:u,responsesCache:d}}(h(h({hosts:Gn(t)},a),{},{algoliaAgent:On({algoliaAgents:o,client:"Lite",version:Vn}),baseHeaders:h(h({"content-type":"text/plain"},i.headers()),a.baseHeaders),baseQueryParameters:h(h({},i.queryParameters()),a.baseQueryParameters)}));return{transporter:l,appId:t,clearCache:function(){return Promise.all([l.requestsCache.clear(),l.responsesCache.clear()]).then((function(){}))},get _ua(){return l.algoliaAgent.value},addAlgoliaAgent:function(e,t){l.algoliaAgent.add({segment:e,version:t})},setClientApiKey:function(e){var t=e.apiKey;r&&"WithinHeaders"!==r?l.baseQueryParameters["x-algolia-api-key"]=t:l.baseHeaders["x-algolia-api-key"]=t},searchForHits:function(e,t){return this.search(e,t)},searchForFacets:function(e,t){return this.search(e,t)},customPost:function(e,t){var n=e.path,r=e.parameters,o=e.body;if(!n)throw new Error("Parameter `path` is required when calling `customPost`.");var a={method:"POST",path:"/{path}".replace("{path}",n),queryParameters:r||{},headers:{},data:o||{}};return l.request(a,t)},getRecommendations:function(e,t){if(e&&Array.isArray(e)&&(e={requests:e}),!e)throw new Error("Parameter `getRecommendationsParams` is required when calling `getRecommendations`.");if(!e.requests)throw new Error("Parameter `getRecommendationsParams.requests` is required when calling `getRecommendations`.");var n={method:"POST",path:"/1/indexes/*/recommendations",queryParameters:{},headers:{},data:e,useReadTransporter:!0,cacheable:!0};return l.request(n,t)},search:function(e,t){if(e&&Array.isArray(e)){var n={requests:e.map((function(e){var t=e.params,n=b(e,Hn);return"facet"===n.type?h(h(h({},n),t),{},{type:"facet"}):h(h(h({},n),t),{},{facet:void 0,maxFacetHits:void 0,facetQuery:void 0})}))};e=n}if(!e)throw new Error("Parameter `searchMethodParams` is required when calling `search`.");if(!e.requests)throw new Error("Parameter `searchMethodParams.requests` is required when calling `search`.");var r={method:"POST",path:"/1/indexes/*/queries",queryParameters:{},headers:{},data:e,useReadTransporter:!0,cacheable:!0};return l.request(r,t)}}}(h({appId:e,apiKey:t,timeouts:{connect:1e3,read:2e3,write:3e4},logger:{debug:function(e,t){return Promise.resolve()},info:function(e,t){return Promise.resolve()},error:function(e,t){return Promise.resolve()}},requester:{send:function(e){return new Promise((function(t){var n=new XMLHttpRequest;n.open(e.method,e.url,!0),Object.keys(e.headers).forEach((function(t){return n.setRequestHeader(t,e.headers[t])}));var r,o=function(e,r){return setTimeout((function(){n.abort(),t({status:0,content:r,isTimedOut:!0})}),e)},a=o(e.connectTimeout,"Connection timeout");n.onreadystatechange=function(){n.readyState>n.OPENED&&void 0===r&&(clearTimeout(a),r=o(e.responseTimeout,"Socket timeout"))},n.onerror=function(){0===n.status&&(clearTimeout(a),clearTimeout(r),t({content:n.responseText||"Network request failed",status:n.status,isTimedOut:!1}))},n.onload=function(){clearTimeout(a),clearTimeout(r),t({content:n.responseText,status:n.status,isTimedOut:!1})},n.send(e.data)}))}},algoliaAgents:[{segment:"Browser"}],authMode:"WithinQueryParameters",responsesCache:En(),requestsCache:En({serializable:!1}),hostsCache:_n({caches:[Sn({key:"".concat(Vn,"-").concat(e)}),En()]})},void 0))}(e,t);return r.addAlgoliaAgent("docsearch",Wn),!1===/docsearch.js \(.*\)/.test(r.transporter.algoliaAgent.value)&&r.addAlgoliaAgent("docsearch-react",Wn),n(r)}),[e,t,n])}var Qn=["footer","searchBox"];function Yn(e){var t=e.appId,n=e.apiKey,o=e.indexName,a=e.placeholder,s=void 0===a?"Search docs":a,i=e.searchParameters,l=e.maxResultsPerGroup,c=e.onClose,u=void 0===c?dn:c,p=e.transformItems,f=void 0===p?cn:p,g=e.hitComponent,m=void 0===g?Ut:g,v=e.resultsFooterComponent,y=void 0===v?function(){return null}:v,x=e.navigator,j=e.initialScrollY,k=void 0===j?0:j,S=e.transformSearchClient,_=void 0===S?cn:S,E=e.disableUserPersonalization,O=void 0!==E&&E,C=e.initialQuery,A=void 0===C?"":C,P=e.translations,T=void 0===P?{}:P,I=e.getMissingResultsUrl,R=e.insights,N=void 0!==R&&R,L=T.footer,D=T.searchBox,M=b(T,Qn),F=w(r.useState({query:"",collections:[],completion:null,context:{},isOpen:!1,activeItemId:null,status:"idle"}),2),B=F[0],z=F[1],U=r.useRef(null),q=r.useRef(null),$=r.useRef(null),H=r.useRef(null),V=r.useRef(null),G=r.useRef(10),W=r.useRef("undefined"!=typeof window?window.getSelection().toString().slice(0,64):"").current,K=r.useRef(A||W).current,Q=Kn(t,n,_),Y=r.useRef(kn({key:"__DOCSEARCH_FAVORITE_SEARCHES__".concat(o),limit:10})).current,Z=r.useRef(kn({key:"__DOCSEARCH_RECENT_SEARCHES__".concat(o),limit:0===Y.getAll().length?7:4})).current,J=r.useCallback((function(e){if(!O){var t="content"===e.type?e.__docsearch_parent:e;t&&-1===Y.getAll().findIndex((function(e){return e.objectID===t.objectID}))&&Z.add(t)}}),[Y,Z,O]),X=r.useCallback((function(e){if(B.context.algoliaInsightsPlugin&&e.__autocomplete_id){var t=e,n={eventName:"Item Selected",index:t.__autocomplete_indexName,items:[t],positions:[e.__autocomplete_id],queryID:t.__autocomplete_queryID};B.context.algoliaInsightsPlugin.insights.clickedObjectIDsAfterSearch(n)}}),[B.context.algoliaInsightsPlugin]),ee=r.useMemo((function(){return Mt({id:"docsearch",defaultActiveItemId:0,placeholder:s,openOnFocus:!0,initialState:{query:K,context:{searchSuggestions:[]}},insights:N,navigator:x,onStateChange:function(e){z(e.state)},getSources:function(e){var r=e.query,a=e.state,s=e.setContext,c=e.setStatus;if(!r)return O?[]:[{sourceId:"recentSearches",onSelect:function(e){var t=e.item,n=e.event;J(t),un(n)||u()},getItemUrl:function(e){return e.item.url},getItems:function(){return Z.getAll()}},{sourceId:"favoriteSearches",onSelect:function(e){var t=e.item,n=e.event;J(t),un(n)||u()},getItemUrl:function(e){return e.item.url},getItems:function(){return Y.getAll()}}];var d=Boolean(N);return Q.search({requests:[h({query:r,indexName:o,attributesToRetrieve:["hierarchy.lvl0","hierarchy.lvl1","hierarchy.lvl2","hierarchy.lvl3","hierarchy.lvl4","hierarchy.lvl5","hierarchy.lvl6","content","type","url"],attributesToSnippet:["hierarchy.lvl1:".concat(G.current),"hierarchy.lvl2:".concat(G.current),"hierarchy.lvl3:".concat(G.current),"hierarchy.lvl4:".concat(G.current),"hierarchy.lvl5:".concat(G.current),"hierarchy.lvl6:".concat(G.current),"content:".concat(G.current)],snippetEllipsisText:"\u2026",highlightPreTag:"",highlightPostTag:"",hitsPerPage:20,clickAnalytics:d},i)]}).catch((function(e){throw"RetryError"===e.name&&c("error"),e})).then((function(e){var r=e.results[0],i=r.hits,c=r.nbHits,p=ln(i,(function(e){return gn(e)}),l);a.context.searchSuggestions.length0&&(re(),V.current&&V.current.focus())}),[K,re]),r.useEffect((function(){function e(){if(q.current){var e=.01*window.innerHeight;q.current.style.setProperty("--docsearch-vh","".concat(e,"px"))}}return e(),window.addEventListener("resize",e),function(){window.removeEventListener("resize",e)}}),[]),r.createElement("div",d({ref:U},ne({"aria-expanded":!0}),{className:["DocSearch","DocSearch-Container","stalled"===B.status&&"DocSearch-Container--Stalled","error"===B.status&&"DocSearch-Container--Errored"].filter(Boolean).join(" "),role:"button",tabIndex:0,onMouseDown:function(e){e.target===e.currentTarget&&u()}}),r.createElement("div",{className:"DocSearch-Modal",ref:q},r.createElement("header",{className:"DocSearch-SearchBar",ref:$},r.createElement(xn,d({},ee,{state:B,autoFocus:0===K.length,inputRef:V,isFromSelection:Boolean(K)&&K===W,translations:D,onClose:u}))),r.createElement("div",{className:"DocSearch-Dropdown",ref:H},r.createElement(yn,d({},ee,{indexName:o,state:B,hitComponent:m,resultsFooterComponent:y,disableUserPersonalization:O,recentSearches:Z,favoriteSearches:Y,inputRef:V,translations:M,getMissingResultsUrl:I,onItemClick:function(e,t){X(e),J(e),un(t)||u()}}))),r.createElement("footer",{className:"DocSearch-Footer"},r.createElement(zt,{translations:L}))))}function Zn(e){var t=e.isOpen,n=e.onOpen,o=e.onClose,a=e.onInput,s=e.searchButtonRef;r.useEffect((function(){function e(e){var r;if("Escape"===e.code&&t||"k"===(null===(r=e.key)||void 0===r?void 0:r.toLowerCase())&&(e.metaKey||e.ctrlKey)||!function(e){var t=e.target,n=t.tagName;return t.isContentEditable||"INPUT"===n||"SELECT"===n||"TEXTAREA"===n}(e)&&"/"===e.key&&!t)return e.preventDefault(),void(t?o():document.body.classList.contains("DocSearch--active")||n());s&&s.current===document.activeElement&&a&&/[a-zA-Z0-9]/.test(String.fromCharCode(e.keyCode))&&a(e)}return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}}),[t,n,o,a,s])}},8328:(e,t,n)=>{"use strict";n.d(t,{A:()=>p});n(6540);var r=n(3259),o=n.n(r),a=n(4054);const s={"029bedf1":[()=>n.e(1180).then(n.bind(n,1152)),"@site/versioned_docs/version-11.1/guides/using-with-babel.md",1152],"02a1e558":[()=>Promise.all([n.e(1869),n.e(4026)]).then(n.bind(n,3937)),"@site/versioned_docs/version-8.x/getting-started/installation.md",3937],"03be7dae":[()=>Promise.all([n.e(1869),n.e(4768)]).then(n.bind(n,2152)),"@site/docs/guides/troubleshooting.md",2152],"04ae74d1":[()=>Promise.all([n.e(1869),n.e(8889)]).then(n.bind(n,8533)),"@site/versioned_docs/version-12.0/getting-started/presets.md",8533],"04b3fc6c":[()=>n.e(8582).then(n.bind(n,7334)),"@site/versioned_docs/version-10.x/getting-started/presets.md",7334],"05916282":[()=>n.e(2502).then(n.bind(n,9387)),"@site/versioned_docs/version-14.0/guides/absolute-imports.md",9387],"05feec41":[()=>n.e(2032).then(n.bind(n,5553)),"@site/versioned_docs/version-14.5/processing.md",5553],"08804573":[()=>Promise.all([n.e(1869),n.e(108)]).then(n.bind(n,175)),"@site/versioned_docs/version-14.3/guides/troubleshooting.md",175],"097bb47a":[()=>n.e(3803).then(n.bind(n,1928)),"@site/versioned_docs/version-14.3/processing.md",1928],"09df063d":[()=>Promise.all([n.e(1869),n.e(5027)]).then(n.bind(n,7646)),"@site/versioned_docs/version-14.4/getting-started/installation.md",7646],"0d71a3f1":[()=>n.e(3316).then(n.bind(n,3961)),"@site/versioned_docs/version-9.x/getting-started/test-environment.md",3961],"0dc350cc":[()=>Promise.all([n.e(1869),n.e(9800)]).then(n.bind(n,2869)),"@site/versioned_docs/version-14.0/guides/jsdom-version.md",2869],"0e35f71d":[()=>Promise.all([n.e(1869),n.e(1672)]).then(n.bind(n,3230)),"@site/versioned_docs/version-12.0/guides/using-with-babel.md",3230],"13973f06":[()=>n.e(1446).then(n.bind(n,5842)),"@site/versioned_docs/version-12.0/processing.md",5842],"1438ea8f":[()=>Promise.all([n.e(1869),n.e(853)]).then(n.bind(n,5959)),"@site/versioned_docs/version-14.2/guides/jsdom-version.md",5959],"14b133ce":[()=>Promise.all([n.e(1869),n.e(1653)]).then(n.bind(n,1772)),"@site/docs/guides/angular-ivy.md",1772],"151633a5":[()=>n.e(4528).then(n.bind(n,5571)),"@site/versioned_docs/version-11.0/introduction.md",5571],"15a051c9":[()=>Promise.all([n.e(1869),n.e(1116)]).then(n.bind(n,8583)),"@site/versioned_docs/version-14.3/guides/using-with-babel.md",8583],"164a8de7":[()=>Promise.all([n.e(1869),n.e(1795)]).then(n.bind(n,905)),"@site/versioned_docs/version-14.3/guides/jsdom-version.md",905],17896441:[()=>Promise.all([n.e(1869),n.e(8401)]).then(n.bind(n,5744)),"@theme/DocItem",5744],"1a421168":[()=>Promise.all([n.e(1869),n.e(8737),n.e(9631)]).then(n.bind(n,7723)),"@site/docs/getting-started/test-environment.md",7723],"1a4e3797":[()=>Promise.all([n.e(1869),n.e(2138)]).then(n.bind(n,917)),"@theme/SearchPage",917],"1a5572f6":[()=>Promise.all([n.e(1869),n.e(3676)]).then(n.bind(n,1037)),"@site/versioned_docs/version-14.0/guides/angular-ivy.md",1037],"1d8e39f8":[()=>Promise.all([n.e(1869),n.e(4611)]).then(n.bind(n,365)),"@site/versioned_docs/version-14.4/guides/jsdom-version.md",365],"1df93b7f":[()=>Promise.all([n.e(1869),n.e(4583)]).then(n.bind(n,9008)),"@site/src/pages/index.tsx",9008],"1e388ac9":[()=>Promise.all([n.e(1869),n.e(6969)]).then(n.bind(n,8449)),"@site/versioned_docs/version-14.2/getting-started/presets.md",8449],"203fc93e":[()=>Promise.all([n.e(1869),n.e(6038)]).then(n.bind(n,647)),"@site/versioned_docs/version-14.2/guides/angular-ivy.md",647],"22e4d634":[()=>n.e(5559).then(n.bind(n,9153)),"@site/versioned_docs/version-10.x/guides/troubleshooting.md",9153],"23a80e44":[()=>Promise.all([n.e(1869),n.e(3588)]).then(n.bind(n,4893)),"@site/versioned_docs/version-14.5/guides/jsdom-environment.md",4893],"252e2b80":[()=>n.e(8955).then(n.bind(n,8227)),"@site/versioned_docs/version-10.x/getting-started/options.md",8227],"25e9e857":[()=>n.e(4393).then(n.t.bind(n,3809,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-next-3ad.json",3809],"26cb42b7":[()=>Promise.all([n.e(1869),n.e(179)]).then(n.bind(n,477)),"@site/versioned_docs/version-14.0/guides/esm-support.md",477],"27299a3b":[()=>Promise.all([n.e(1869),n.e(7036)]).then(n.bind(n,7536)),"@site/versioned_docs/version-9.x/getting-started/installation.md",7536],"27af8d7b":[()=>n.e(4868).then(n.bind(n,337)),"@site/versioned_docs/version-14.3/guides/esm-support.md",337],"296cbb95":[()=>n.e(143).then(n.bind(n,9297)),"@site/versioned_docs/version-14.5/guides/esm-support.md",9297],"29d26392":[()=>n.e(8626).then(n.bind(n,4736)),"@site/versioned_docs/version-11.1/getting-started/presets.md",4736],"2a474b18":[()=>Promise.all([n.e(1869),n.e(8737),n.e(2822)]).then(n.bind(n,1898)),"@site/versioned_docs/version-14.3/getting-started/test-environment.md",1898],"2ab18ce5":[()=>n.e(6530).then(n.bind(n,2704)),"@site/versioned_docs/version-14.2/introduction.md",2704],"2ae17008":[()=>n.e(1635).then(n.bind(n,4140)),"@site/versioned_docs/version-8.x/guides/esm-support.md",4140],"2e81e74f":[()=>Promise.all([n.e(1869),n.e(647)]).then(n.bind(n,7303)),"@site/versioned_docs/version-13.0/guides/angular-ivy.md",7303],30388853:[()=>n.e(9075).then(n.bind(n,2385)),"@site/versioned_docs/version-13.0/processing.md",2385],"327b6d8e":[()=>n.e(6968).then(n.bind(n,3135)),"@site/versioned_docs/version-14.3/introduction.md",3135],"33a5adb4":[()=>Promise.all([n.e(1869),n.e(8737),n.e(2758)]).then(n.bind(n,2944)),"@site/versioned_docs/version-14.2/guides/snapshot-testing.md",2944],"357d33d4":[()=>n.e(5492).then(n.bind(n,5912)),"@site/versioned_docs/version-14.4/guides/esm-support.md",5912],"388d3430":[()=>Promise.all([n.e(1869),n.e(9762)]).then(n.bind(n,3085)),"@site/versioned_docs/version-14.0/guides/angular-13+.md",3085],"3b270bcb":[()=>Promise.all([n.e(1869),n.e(8388)]).then(n.bind(n,9276)),"@site/versioned_docs/version-14.4/guides/angular-ivy.md",9276],"3c7caf67":[()=>Promise.all([n.e(1869),n.e(7375)]).then(n.bind(n,3448)),"@site/versioned_docs/version-14.2/getting-started/installation.md",3448],"3d3ed64e":[()=>n.e(9157).then(n.bind(n,1546)),"@site/versioned_docs/version-14.5/introduction.md",1546],"407f8801":[()=>Promise.all([n.e(1869),n.e(6261)]).then(n.bind(n,9160)),"@site/versioned_docs/version-9.x/guides/jsdom-version.md",9160],"433cefd8":[()=>Promise.all([n.e(1869),n.e(403)]).then(n.bind(n,6770)),"@site/versioned_docs/version-12.0/guides/angular-ivy.md",6770],"4351d34b":[()=>Promise.all([n.e(1869),n.e(3095)]).then(n.bind(n,3062)),"@site/docs/guides/jsdom-version.md",3062],44821296:[()=>Promise.all([n.e(1869),n.e(8737),n.e(509)]).then(n.bind(n,596)),"@site/versioned_docs/version-14.3/guides/snapshot-testing.md",596],"44b4d73b":[()=>Promise.all([n.e(1869),n.e(9829)]).then(n.bind(n,9004)),"@site/versioned_docs/version-13.0/guides/angular-13+.md",9004],"44e72a25":[()=>Promise.all([n.e(1869),n.e(2007)]).then(n.bind(n,9847)),"@site/versioned_docs/version-14.5/guides/troubleshooting.md",9847],"47c825a2":[()=>Promise.all([n.e(1869),n.e(8879)]).then(n.bind(n,9582)),"@site/docs/guides/using-with-babel.md",9582],"47cccd8d":[()=>n.e(6323).then(n.bind(n,4423)),"@site/versioned_docs/version-12.0/guides/absolute-imports.md",4423],"48dd39e2":[()=>Promise.all([n.e(1869),n.e(2442)]).then(n.bind(n,6990)),"@site/versioned_docs/version-12.0/getting-started/options.md",6990],"4941928a":[()=>Promise.all([n.e(1869),n.e(2703)]).then(n.bind(n,8260)),"@site/versioned_docs/version-14.3/guides/angular-13+.md",8260],"494f4f5e":[()=>n.e(8108).then(n.bind(n,2697)),"@site/versioned_docs/version-10.x/guides/angular-ivy.md",2697],"4b3f866b":[()=>Promise.all([n.e(1869),n.e(7400)]).then(n.bind(n,9197)),"@site/versioned_docs/version-14.2/guides/esm-support.md",9197],"4d5b4aa7":[()=>n.e(8563).then(n.t.bind(n,6826,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-14-4-389.json",6826],"4e0c07c5":[()=>Promise.all([n.e(1869),n.e(5250)]).then(n.bind(n,7872)),"@site/docs/getting-started/options.md",7872],"51d67042":[()=>n.e(6060).then(n.bind(n,9697)),"@site/versioned_docs/version-11.0/guides/using-with-babel.md",9697],"5253afba":[()=>Promise.all([n.e(1869),n.e(7832)]).then(n.bind(n,9011)),"@site/versioned_docs/version-14.3/guides/angular-ivy.md",9011],54071611:[()=>Promise.all([n.e(1869),n.e(6448)]).then(n.bind(n,4730)),"@site/versioned_docs/version-10.x/getting-started/installation.md",4730],"5465ebbc":[()=>n.e(6883).then(n.bind(n,2601)),"@site/versioned_docs/version-14.3/guides/absolute-imports.md",2601],"54f44165":[()=>Promise.all([n.e(1869),n.e(7924)]).then(n.bind(n,7668)),"@site/docs/getting-started/installation.md",7668],"5635425a":[()=>n.e(9806).then(n.bind(n,2699)),"@site/versioned_docs/version-9.x/guides/esm-support.md",2699],"56acf0ae":[()=>Promise.all([n.e(1869),n.e(1694)]).then(n.bind(n,687)),"@site/versioned_docs/version-13.0/guides/jsdom-version.md",687],"58f4fbf7":[()=>n.e(4787).then(n.t.bind(n,4985,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-8-x-495.json",4985],"5ae6b2db":[()=>n.e(6358).then(n.bind(n,8111)),"@site/versioned_docs/version-11.1/introduction.md",8111],"5b125e0e":[()=>Promise.all([n.e(1869),n.e(8904)]).then(n.bind(n,8422)),"@site/docs/guides/angular-13+.md",8422],"5b1cb890":[()=>Promise.all([n.e(1869),n.e(4827)]).then(n.bind(n,499)),"@site/versioned_docs/version-13.0/getting-started/presets.md",499],"5d23d50c":[()=>n.e(7168).then(n.t.bind(n,7896,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-12-0-4a9.json",7896],"5e95c892":[()=>n.e(9647).then(n.bind(n,7121)),"@theme/DocsRoot",7121],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,4784)),"@generated/docusaurus.config",4784],"5ee9d842":[()=>n.e(6917).then(n.bind(n,781)),"@site/versioned_docs/version-11.1/getting-started/test-environment.md",781],"5f85402d":[()=>Promise.all([n.e(1869),n.e(3489)]).then(n.bind(n,6570)),"@site/versioned_docs/version-12.0/getting-started/installation.md",6570],"6059e070":[()=>Promise.all([n.e(1869),n.e(8649)]).then(n.bind(n,3118)),"@site/versioned_docs/version-13.0/getting-started/installation.md",3118],"6266f1ba":[()=>n.e(5883).then(n.bind(n,5911)),"@site/versioned_docs/version-8.x/getting-started/options.md",5911],"63150b11":[()=>n.e(3596).then(n.bind(n,4383)),"@site/versioned_docs/version-9.x/getting-started/options.md",4383],"651850eb":[()=>n.e(9461).then(n.bind(n,4866)),"@site/versioned_docs/version-8.x/introduction.md",4866],"6608151e":[()=>n.e(2891).then(n.bind(n,185)),"@site/versioned_docs/version-10.x/introduction.md",185],"67b82ef4":[()=>Promise.all([n.e(1869),n.e(7569)]).then(n.bind(n,4987)),"@site/versioned_docs/version-14.5/guides/using-with-babel.md",4987],68240572:[()=>Promise.all([n.e(1869),n.e(8737),n.e(689)]).then(n.bind(n,4564)),"@site/docs/guides/snapshot-testing.md",4564],"68e3f1d5":[()=>Promise.all([n.e(1869),n.e(7367)]).then(n.bind(n,4713)),"@site/versioned_docs/version-12.0/guides/angular-13+.md",4713],"6916680a":[()=>Promise.all([n.e(1869),n.e(3818)]).then(n.bind(n,6696)),"@site/versioned_docs/version-11.0/getting-started/installation.md",6696],"6a6dcee7":[()=>n.e(7466).then(n.bind(n,3577)),"@site/versioned_docs/version-14.2/getting-started/test-environment.md",3577],"6d1ddfa7":[()=>n.e(4240).then(n.bind(n,6021)),"@site/versioned_docs/version-13.0/guides/absolute-imports.md",6021],"6d98fde5":[()=>Promise.all([n.e(1869),n.e(8737),n.e(9726)]).then(n.bind(n,8869)),"@site/versioned_docs/version-14.5/getting-started/presets.md",8869],"6f809103":[()=>Promise.all([n.e(1869),n.e(646)]).then(n.bind(n,9258)),"@site/versioned_docs/version-14.0/guides/using-with-babel.md",9258],"710ad8a9":[()=>Promise.all([n.e(1869),n.e(8828)]).then(n.bind(n,2067)),"@site/versioned_docs/version-11.0/guides/jsdom-version.md",2067],"72f058d3":[()=>n.e(7330).then(n.bind(n,6489)),"@site/versioned_docs/version-8.x/guides/troubleshooting.md",6489],"732c3ce9":[()=>n.e(4340).then(n.bind(n,3381)),"@site/versioned_docs/version-13.0/getting-started/test-environment.md",3381],"79ea3e73":[()=>n.e(795).then(n.bind(n,9892)),"@site/versioned_docs/version-9.x/getting-started/presets.md",9892],"7aeeadd4":[()=>n.e(8654).then(n.bind(n,3004)),"@site/versioned_docs/version-8.x/getting-started/test-environment.md",3004],"7d7dbec2":[()=>n.e(1315).then(n.t.bind(n,3925,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-9-x-465.json",3925],"80b4c599":[()=>n.e(131).then(n.bind(n,7087)),"@site/versioned_docs/version-12.0/getting-started/test-environment.md",7087],"85e14910":[()=>Promise.all([n.e(1869),n.e(3170)]).then(n.bind(n,8779)),"@site/versioned_docs/version-14.0/getting-started/installation.md",8779],"8665e647":[()=>Promise.all([n.e(1869),n.e(5700)]).then(n.bind(n,3852)),"@site/versioned_docs/version-11.1/getting-started/installation.md",3852],"8afa1348":[()=>n.e(2341).then(n.bind(n,747)),"@site/versioned_docs/version-10.x/processing.md",747],"8b263414":[()=>n.e(347).then(n.bind(n,6102)),"@site/versioned_docs/version-11.0/guides/angular-ivy.md",6102],"8b615392":[()=>Promise.all([n.e(1869),n.e(7511)]).then(n.bind(n,3124)),"@site/versioned_docs/version-14.5/guides/jsdom-version.md",3124],"8e1736e0":[()=>n.e(4394).then(n.t.bind(n,5833,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-14-3-a8a.json",5833],"8f3baa16":[()=>Promise.all([n.e(1869),n.e(217)]).then(n.bind(n,182)),"@site/versioned_docs/version-14.3/getting-started/options.md",182],"915eea02":[()=>n.e(1263).then(n.bind(n,3367)),"@site/versioned_docs/version-14.4/introduction.md",3367],"9251a350":[()=>n.e(5075).then(n.bind(n,798)),"@site/versioned_docs/version-11.0/guides/esm-support.md",798],"93f0793d":[()=>n.e(1352).then(n.bind(n,9928)),"@site/versioned_docs/version-9.x/guides/using-with-babel.md",9928],"94ea83e2":[()=>Promise.all([n.e(1869),n.e(8737),n.e(4156)]).then(n.bind(n,9080)),"@site/versioned_docs/version-14.5/guides/snapshot-testing.md",9080],"95451dd5":[()=>n.e(6201).then(n.bind(n,9584)),"@site/versioned_docs/version-14.4/processing.md",9584],"9798ce17":[()=>Promise.all([n.e(1869),n.e(6224)]).then(n.bind(n,9854)),"@site/versioned_docs/version-14.0/getting-started/presets.md",9854],"9903dc99":[()=>n.e(5487).then(n.bind(n,96)),"@site/versioned_docs/version-8.x/guides/angular-ivy.md",96],"9a2fa73a":[()=>Promise.all([n.e(1869),n.e(8937)]).then(n.bind(n,4241)),"@site/versioned_docs/version-13.0/guides/using-with-babel.md",4241],"9bc9e25c":[()=>n.e(223).then(n.bind(n,8946)),"@site/versioned_docs/version-13.0/introduction.md",8946],"9d48492b":[()=>n.e(3737).then(n.bind(n,5452)),"@site/versioned_docs/version-14.0/getting-started/test-environment.md",5452],"9fc1d339":[()=>n.e(8201).then(n.bind(n,1223)),"@site/versioned_docs/version-11.1/guides/troubleshooting.md",1223],a05464cd:[()=>Promise.all([n.e(1869),n.e(8737),n.e(1832)]).then(n.bind(n,4121)),"@site/versioned_docs/version-14.4/guides/snapshot-testing.md",4121],a09c2993:[()=>n.e(5899).then(n.bind(n,1920)),"@site/docs/introduction.md",1920],a389e28e:[()=>Promise.all([n.e(1869),n.e(7554)]).then(n.bind(n,8827)),"@site/versioned_docs/version-12.0/guides/esm-support.md",8827],a7456010:[()=>n.e(1235).then(n.t.bind(n,8552,19)),"@generated/docusaurus-plugin-content-pages/default/__plugin.json",8552],a74b641e:[()=>n.e(1841).then(n.bind(n,6092)),"@site/versioned_docs/version-9.x/guides/absolute-imports.md",6092],a7bd4aaa:[()=>n.e(7098).then(n.bind(n,4532)),"@theme/DocVersionRoot",4532],a7be2bd2:[()=>n.e(686).then(n.bind(n,1717)),"@site/versioned_docs/version-14.5/guides/absolute-imports.md",1717],a7d04da7:[()=>Promise.all([n.e(1869),n.e(2363)]).then(n.bind(n,7080)),"@site/versioned_docs/version-14.4/guides/troubleshooting.md",7080],a7d61b99:[()=>Promise.all([n.e(1869),n.e(2766)]).then(n.bind(n,3011)),"@site/versioned_docs/version-12.0/guides/jsdom-version.md",3011],a89007e0:[()=>Promise.all([n.e(1869),n.e(3767)]).then(n.bind(n,5858)),"@site/versioned_docs/version-14.2/guides/angular-13+.md",5858],a94703ab:[()=>Promise.all([n.e(1869),n.e(9048)]).then(n.bind(n,1377)),"@theme/DocRoot",1377],a9789633:[()=>n.e(3543).then(n.bind(n,9131)),"@site/versioned_docs/version-9.x/guides/troubleshooting.md",9131],a97c21bc:[()=>Promise.all([n.e(1869),n.e(2133)]).then(n.bind(n,1213)),"@site/versioned_docs/version-14.5/getting-started/options.md",1213],aa079c8b:[()=>Promise.all([n.e(1869),n.e(2772)]).then(n.bind(n,374)),"@site/versioned_docs/version-13.0/getting-started/options.md",374],aad144a3:[()=>n.e(9104).then(n.bind(n,568)),"@site/versioned_docs/version-11.1/guides/angular-13+.md",568],aba21aa0:[()=>n.e(5742).then(n.t.bind(n,7093,19)),"@generated/docusaurus-plugin-content-docs/default/__plugin.json",7093],adb64ee2:[()=>n.e(8480).then(n.bind(n,5622)),"@site/versioned_docs/version-8.x/processing.md",5622],af572879:[()=>Promise.all([n.e(1869),n.e(6308)]).then(n.bind(n,2630)),"@site/versioned_docs/version-14.3/getting-started/installation.md",2630],af78d9c9:[()=>Promise.all([n.e(1869),n.e(5810)]).then(n.bind(n,2465)),"@site/docs/guides/jsdom-environment.md",2465],afba4106:[()=>n.e(1942).then(n.bind(n,5831)),"@site/versioned_docs/version-11.0/getting-started/test-environment.md",5831],b2161dc5:[()=>n.e(709).then(n.bind(n,8615)),"@site/versioned_docs/version-14.0/processing.md",8615],b347685f:[()=>Promise.all([n.e(1869),n.e(7826)]).then(n.bind(n,2861)),"@site/versioned_docs/version-14.5/guides/angular-ivy.md",2861],b4c5bdfe:[()=>n.e(4344).then(n.bind(n,8556)),"@site/versioned_docs/version-14.2/processing.md",8556],b647df5a:[()=>n.e(2624).then(n.bind(n,31)),"@site/versioned_docs/version-8.x/guides/using-with-babel.md",31],b83f237d:[()=>n.e(8930).then(n.bind(n,5804)),"@site/versioned_docs/version-14.2/guides/absolute-imports.md",5804],bb70b9c8:[()=>n.e(9760).then(n.t.bind(n,5673,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-3da.json",5673],c00c612c:[()=>n.e(5603).then(n.bind(n,4126)),"@site/versioned_docs/version-10.x/getting-started/test-environment.md",4126],c141421f:[()=>n.e(957).then(n.t.bind(n,936,19)),"@generated/docusaurus-theme-search-algolia/default/__plugin.json",936],c1865e7c:[()=>n.e(1049).then(n.t.bind(n,9636,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-14-0-33f.json",9636],c1bdbc58:[()=>n.e(9467).then(n.bind(n,9159)),"@site/versioned_docs/version-14.0/introduction.md",9159],c44fa306:[()=>n.e(2274).then(n.bind(n,4044)),"@site/versioned_docs/version-8.x/getting-started/presets.md",4044],c49413db:[()=>n.e(1767).then(n.bind(n,2575)),"@site/versioned_docs/version-10.x/guides/esm-support.md",2575],c4ba122c:[()=>Promise.all([n.e(1869),n.e(4769)]).then(n.bind(n,5747)),"@site/versioned_docs/version-14.2/guides/using-with-babel.md",5747],c62dfc48:[()=>n.e(51).then(n.bind(n,7704)),"@site/versioned_docs/version-14.0/guides/troubleshooting.md",7704],c7279284:[()=>n.e(1605).then(n.bind(n,3063)),"@site/versioned_docs/version-11.0/getting-started/options.md",3063],c9f7f11b:[()=>n.e(2052).then(n.t.bind(n,8454,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-10-x-ab5.json",8454],cd9c57cb:[()=>n.e(5297).then(n.bind(n,4710)),"@site/versioned_docs/version-10.x/guides/absolute-imports.md",4710],d069ae84:[()=>n.e(1454).then(n.bind(n,9453)),"@site/versioned_docs/version-11.0/guides/angular-13+.md",9453],d19b9e8a:[()=>n.e(5240).then(n.bind(n,4521)),"@site/docs/guides/absolute-imports.md",4521],d1b207fe:[()=>n.e(1090).then(n.bind(n,7972)),"@site/versioned_docs/version-13.0/guides/troubleshooting.md",7972],d2df711a:[()=>n.e(2601).then(n.bind(n,7498)),"@site/versioned_docs/version-11.0/guides/absolute-imports.md",7498],d30d9744:[()=>n.e(3344).then(n.t.bind(n,9560,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-13-0-e91.json",9560],d38e9ca0:[()=>Promise.all([n.e(1869),n.e(8737),n.e(8782)]).then(n.bind(n,3358)),"@site/versioned_docs/version-14.5/getting-started/testbed-environment.md",3358],d4836a8e:[()=>n.e(106).then(n.bind(n,248)),"@site/docs/guides/esm-support.md",248],d720bb60:[()=>n.e(5596).then(n.bind(n,6281)),"@site/versioned_docs/version-9.x/guides/angular-ivy.md",6281],d9330f66:[()=>Promise.all([n.e(1869),n.e(8678)]).then(n.bind(n,7587)),"@site/versioned_docs/version-13.0/guides/esm-support.md",7587],d957c22b:[()=>Promise.all([n.e(1869),n.e(9353)]).then(n.bind(n,5867)),"@site/versioned_docs/version-14.4/guides/angular-13+.md",5867],daab97c5:[()=>n.e(1555).then(n.bind(n,648)),"@site/versioned_docs/version-11.1/processing.md",648],dc033a20:[()=>n.e(949).then(n.t.bind(n,9466,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-11-0-0a4.json",9466],dd1da75d:[()=>Promise.all([n.e(1869),n.e(8737),n.e(7951)]).then(n.bind(n,9747)),"@site/versioned_docs/version-14.4/getting-started/test-environment.md",9747],dd8b0175:[()=>Promise.all([n.e(1869),n.e(2972)]).then(n.bind(n,4125)),"@site/versioned_docs/version-11.1/guides/jsdom-version.md",4125],df70a34a:[()=>n.e(9197).then(n.bind(n,7267)),"@site/versioned_docs/version-10.x/guides/using-with-babel.md",7267],dff5aaca:[()=>n.e(744).then(n.bind(n,7707)),"@site/versioned_docs/version-14.2/guides/troubleshooting.md",7707],e0a3f9c8:[()=>n.e(46).then(n.bind(n,1438)),"@site/versioned_docs/version-11.1/guides/esm-support.md",1438],e1715838:[()=>n.e(6603).then(n.bind(n,3804)),"@site/versioned_docs/version-9.x/introduction.md",3804],e21d93aa:[()=>Promise.all([n.e(1869),n.e(587)]).then(n.bind(n,3691)),"@site/versioned_docs/version-14.5/guides/angular-13+.md",3691],e36b815f:[()=>n.e(2659).then(n.bind(n,6146)),"@site/versioned_docs/version-14.4/guides/absolute-imports.md",6146],e437670d:[()=>Promise.all([n.e(1869),n.e(3179)]).then(n.bind(n,2360)),"@site/versioned_docs/version-14.5/getting-started/installation.md",2360],e59053ae:[()=>Promise.all([n.e(1869),n.e(8737),n.e(2008)]).then(n.bind(n,5500)),"@site/versioned_docs/version-14.4/getting-started/presets.md",5500],e5a27df7:[()=>Promise.all([n.e(1869),n.e(2416)]).then(n.bind(n,8159)),"@site/versioned_docs/version-14.4/getting-started/options.md",8159],e7ca0543:[()=>Promise.all([n.e(1869),n.e(8737),n.e(3793)]).then(n.bind(n,9587)),"@site/versioned_docs/version-14.5/getting-started/test-environment.md",9587],ea131d77:[()=>n.e(8624).then(n.bind(n,1313)),"@site/versioned_docs/version-11.1/guides/absolute-imports.md",1313],eabdbf07:[()=>n.e(5100).then(n.bind(n,2997)),"@site/docs/processing.md",2997],eae657ee:[()=>n.e(4134).then(n.bind(n,4880)),"@site/versioned_docs/version-11.1/getting-started/options.md",4880],ebf39289:[()=>Promise.all([n.e(1869),n.e(8715)]).then(n.bind(n,9546)),"@site/versioned_docs/version-14.0/getting-started/options.md",9546],ec1d9510:[()=>n.e(3421).then(n.bind(n,6418)),"@site/versioned_docs/version-11.0/guides/troubleshooting.md",6418],ec7d5e88:[()=>Promise.all([n.e(1869),n.e(9896)]).then(n.bind(n,7988)),"@site/versioned_docs/version-14.3/getting-started/presets.md",7988],ecfacc56:[()=>n.e(1019).then(n.bind(n,1811)),"@site/versioned_docs/version-11.0/processing.md",1811],ef2f3ccd:[()=>Promise.all([n.e(1869),n.e(6741)]).then(n.bind(n,6979)),"@site/versioned_docs/version-14.2/getting-started/options.md",6979],f0447160:[()=>Promise.all([n.e(1869),n.e(499)]).then(n.bind(n,7727)),"@site/versioned_docs/version-8.x/guides/jsdom-version.md",7727],f071d7c3:[()=>Promise.all([n.e(1869),n.e(8737),n.e(8048)]).then(n.bind(n,5938)),"@site/docs/getting-started/testbed-environment.md",5938],f14ecac0:[()=>n.e(8704).then(n.bind(n,9088)),"@site/versioned_docs/version-12.0/introduction.md",9088],f2ed1a27:[()=>n.e(667).then(n.t.bind(n,6011,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-14-2-238.json",6011],f3212b1e:[()=>Promise.all([n.e(1869),n.e(9892)]).then(n.bind(n,5496)),"@site/versioned_docs/version-10.x/guides/jsdom-version.md",5496],f43def45:[()=>Promise.all([n.e(1869),n.e(2656)]).then(n.bind(n,1524)),"@site/versioned_docs/version-11.1/guides/angular-ivy.md",1524],f546eb96:[()=>n.e(6370).then(n.bind(n,8115)),"@site/versioned_docs/version-9.x/processing.md",8115],f67ebb5d:[()=>n.e(5416).then(n.t.bind(n,5200,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-11-1-cd3.json",5200],f97daad0:[()=>n.e(5243).then(n.bind(n,560)),"@site/versioned_docs/version-8.x/guides/absolute-imports.md",560],fa17a3e5:[()=>n.e(8054).then(n.bind(n,3303)),"@site/src/pages/versions.tsx",3303],fa9f2ace:[()=>n.e(742).then(n.bind(n,5034)),"@site/versioned_docs/version-11.0/getting-started/presets.md",5034],fbd32610:[()=>Promise.all([n.e(1869),n.e(6543)]).then(n.bind(n,9570)),"@site/versioned_docs/version-14.4/guides/using-with-babel.md",9570],fc80686b:[()=>Promise.all([n.e(1869),n.e(8737),n.e(2440)]).then(n.bind(n,4160)),"@site/docs/getting-started/presets.md",4160],fea96f18:[()=>n.e(3309).then(n.bind(n,7125)),"@site/versioned_docs/version-12.0/guides/troubleshooting.md",7125]};var i=n(4848);function l(e){let{error:t,retry:n,pastDelay:r}=e;return t?(0,i.jsxs)("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"},children:[(0,i.jsx)("p",{children:String(t)}),(0,i.jsx)("div",{children:(0,i.jsx)("button",{type:"button",onClick:n,children:"Retry"})})]}):r?(0,i.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,i.jsx)("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb",children:(0,i.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,i.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,i.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,i.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,i.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,i.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,i.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,i.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,i.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,i.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,i.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var c=n(6921),u=n(3102);function d(e,t){if("*"===e)return o()({loading:l,loader:()=>n.e(2237).then(n.bind(n,2237)),modules:["@theme/NotFound"],webpack:()=>[2237],render(e,t){const n=e.default;return(0,i.jsx)(u.W,{value:{plugin:{name:"native",id:"default"}},children:(0,i.jsx)(n,{...t})})}});const r=a[`${e}-${t}`],d={},p=[],f=[],g=(0,c.A)(r);return Object.entries(g).forEach((e=>{let[t,n]=e;const r=s[n];r&&(d[t]=r[0],p.push(r[1]),f.push(r[2]))})),o().Map({loading:l,loader:d,modules:p,webpack:()=>f,render(t,n){const o=JSON.parse(JSON.stringify(r));Object.entries(t).forEach((t=>{let[n,r]=t;const a=r.default;if(!a)throw new Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);"object"!=typeof a&&"function"!=typeof a||Object.keys(r).filter((e=>"default"!==e)).forEach((e=>{a[e]=r[e]}));let s=o;const i=n.split(".");i.slice(0,-1).forEach((e=>{s=s[e]})),s[i[i.length-1]]=a}));const a=o.__comp;delete o.__comp;const s=o.__context;delete o.__context;const l=o.__props;return delete o.__props,(0,i.jsx)(u.W,{value:s,children:(0,i.jsx)(a,{...o,...l,...n})})}})}const p=[{path:"/jest-preset-angular/search",component:d("/jest-preset-angular/search","948"),exact:!0},{path:"/jest-preset-angular/versions",component:d("/jest-preset-angular/versions","4c3"),exact:!0},{path:"/jest-preset-angular/docs",component:d("/jest-preset-angular/docs","d19"),routes:[{path:"/jest-preset-angular/docs/10.x",component:d("/jest-preset-angular/docs/10.x","8e4"),routes:[{path:"/jest-preset-angular/docs/10.x",component:d("/jest-preset-angular/docs/10.x","24c"),routes:[{path:"/jest-preset-angular/docs/10.x/",component:d("/jest-preset-angular/docs/10.x/","052"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/10.x/getting-started/installation",component:d("/jest-preset-angular/docs/10.x/getting-started/installation","0bf"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/10.x/getting-started/options",component:d("/jest-preset-angular/docs/10.x/getting-started/options","826"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/10.x/getting-started/presets",component:d("/jest-preset-angular/docs/10.x/getting-started/presets","269"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/10.x/getting-started/test-environment",component:d("/jest-preset-angular/docs/10.x/getting-started/test-environment","c8b"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/10.x/guides/absolute-imports",component:d("/jest-preset-angular/docs/10.x/guides/absolute-imports","d70"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/10.x/guides/angular-ivy",component:d("/jest-preset-angular/docs/10.x/guides/angular-ivy","42f"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/10.x/guides/esm-support",component:d("/jest-preset-angular/docs/10.x/guides/esm-support","ef9"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/10.x/guides/jsdom-version",component:d("/jest-preset-angular/docs/10.x/guides/jsdom-version","5bc"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/10.x/guides/troubleshooting",component:d("/jest-preset-angular/docs/10.x/guides/troubleshooting","670"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/10.x/guides/using-with-babel",component:d("/jest-preset-angular/docs/10.x/guides/using-with-babel","ea6"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/10.x/processing",component:d("/jest-preset-angular/docs/10.x/processing","618"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/11.0",component:d("/jest-preset-angular/docs/11.0","c0d"),routes:[{path:"/jest-preset-angular/docs/11.0",component:d("/jest-preset-angular/docs/11.0","55d"),routes:[{path:"/jest-preset-angular/docs/11.0/",component:d("/jest-preset-angular/docs/11.0/","40e"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.0/getting-started/installation",component:d("/jest-preset-angular/docs/11.0/getting-started/installation","0a6"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.0/getting-started/options",component:d("/jest-preset-angular/docs/11.0/getting-started/options","9d1"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.0/getting-started/presets",component:d("/jest-preset-angular/docs/11.0/getting-started/presets","ede"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.0/getting-started/test-environment",component:d("/jest-preset-angular/docs/11.0/getting-started/test-environment","8b5"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.0/guides/absolute-imports",component:d("/jest-preset-angular/docs/11.0/guides/absolute-imports","d68"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.0/guides/angular-13+",component:d("/jest-preset-angular/docs/11.0/guides/angular-13+","2e0"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.0/guides/angular-ivy",component:d("/jest-preset-angular/docs/11.0/guides/angular-ivy","15e"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.0/guides/esm-support",component:d("/jest-preset-angular/docs/11.0/guides/esm-support","d7a"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.0/guides/jsdom-version",component:d("/jest-preset-angular/docs/11.0/guides/jsdom-version","207"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.0/guides/troubleshooting",component:d("/jest-preset-angular/docs/11.0/guides/troubleshooting","abd"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.0/guides/using-with-babel",component:d("/jest-preset-angular/docs/11.0/guides/using-with-babel","054"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.0/processing",component:d("/jest-preset-angular/docs/11.0/processing","369"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/11.1",component:d("/jest-preset-angular/docs/11.1","af5"),routes:[{path:"/jest-preset-angular/docs/11.1",component:d("/jest-preset-angular/docs/11.1","818"),routes:[{path:"/jest-preset-angular/docs/11.1/",component:d("/jest-preset-angular/docs/11.1/","f22"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.1/getting-started/installation",component:d("/jest-preset-angular/docs/11.1/getting-started/installation","a54"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.1/getting-started/options",component:d("/jest-preset-angular/docs/11.1/getting-started/options","f8d"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.1/getting-started/presets",component:d("/jest-preset-angular/docs/11.1/getting-started/presets","eb8"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.1/getting-started/test-environment",component:d("/jest-preset-angular/docs/11.1/getting-started/test-environment","a2e"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.1/guides/absolute-imports",component:d("/jest-preset-angular/docs/11.1/guides/absolute-imports","d88"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.1/guides/angular-13+",component:d("/jest-preset-angular/docs/11.1/guides/angular-13+","c08"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.1/guides/angular-ivy",component:d("/jest-preset-angular/docs/11.1/guides/angular-ivy","af2"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.1/guides/esm-support",component:d("/jest-preset-angular/docs/11.1/guides/esm-support","95b"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.1/guides/jsdom-version",component:d("/jest-preset-angular/docs/11.1/guides/jsdom-version","3fb"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.1/guides/troubleshooting",component:d("/jest-preset-angular/docs/11.1/guides/troubleshooting","529"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.1/guides/using-with-babel",component:d("/jest-preset-angular/docs/11.1/guides/using-with-babel","13e"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.1/processing",component:d("/jest-preset-angular/docs/11.1/processing","d69"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/12.0",component:d("/jest-preset-angular/docs/12.0","e24"),routes:[{path:"/jest-preset-angular/docs/12.0",component:d("/jest-preset-angular/docs/12.0","82a"),routes:[{path:"/jest-preset-angular/docs/12.0/",component:d("/jest-preset-angular/docs/12.0/","abe"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/12.0/getting-started/installation",component:d("/jest-preset-angular/docs/12.0/getting-started/installation","b3a"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/12.0/getting-started/options",component:d("/jest-preset-angular/docs/12.0/getting-started/options","5ec"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/12.0/getting-started/presets",component:d("/jest-preset-angular/docs/12.0/getting-started/presets","4e4"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/12.0/getting-started/test-environment",component:d("/jest-preset-angular/docs/12.0/getting-started/test-environment","6b4"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/12.0/guides/absolute-imports",component:d("/jest-preset-angular/docs/12.0/guides/absolute-imports","29c"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/12.0/guides/angular-13+",component:d("/jest-preset-angular/docs/12.0/guides/angular-13+","067"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/12.0/guides/angular-ivy",component:d("/jest-preset-angular/docs/12.0/guides/angular-ivy","e18"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/12.0/guides/esm-support",component:d("/jest-preset-angular/docs/12.0/guides/esm-support","612"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/12.0/guides/jsdom-version",component:d("/jest-preset-angular/docs/12.0/guides/jsdom-version","783"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/12.0/guides/troubleshooting",component:d("/jest-preset-angular/docs/12.0/guides/troubleshooting","8a8"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/12.0/guides/using-with-babel",component:d("/jest-preset-angular/docs/12.0/guides/using-with-babel","a10"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/12.0/processing",component:d("/jest-preset-angular/docs/12.0/processing","2de"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/13.0",component:d("/jest-preset-angular/docs/13.0","75d"),routes:[{path:"/jest-preset-angular/docs/13.0",component:d("/jest-preset-angular/docs/13.0","e4b"),routes:[{path:"/jest-preset-angular/docs/13.0/",component:d("/jest-preset-angular/docs/13.0/","356"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/13.0/getting-started/installation",component:d("/jest-preset-angular/docs/13.0/getting-started/installation","e30"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/13.0/getting-started/options",component:d("/jest-preset-angular/docs/13.0/getting-started/options","c9c"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/13.0/getting-started/presets",component:d("/jest-preset-angular/docs/13.0/getting-started/presets","0d4"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/13.0/getting-started/test-environment",component:d("/jest-preset-angular/docs/13.0/getting-started/test-environment","0de"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/13.0/guides/absolute-imports",component:d("/jest-preset-angular/docs/13.0/guides/absolute-imports","36d"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/13.0/guides/angular-13+",component:d("/jest-preset-angular/docs/13.0/guides/angular-13+","fde"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/13.0/guides/angular-ivy",component:d("/jest-preset-angular/docs/13.0/guides/angular-ivy","557"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/13.0/guides/esm-support",component:d("/jest-preset-angular/docs/13.0/guides/esm-support","14e"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/13.0/guides/jsdom-version",component:d("/jest-preset-angular/docs/13.0/guides/jsdom-version","0a9"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/13.0/guides/troubleshooting",component:d("/jest-preset-angular/docs/13.0/guides/troubleshooting","efd"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/13.0/guides/using-with-babel",component:d("/jest-preset-angular/docs/13.0/guides/using-with-babel","522"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/13.0/processing",component:d("/jest-preset-angular/docs/13.0/processing","b3d"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/14.0",component:d("/jest-preset-angular/docs/14.0","0e1"),routes:[{path:"/jest-preset-angular/docs/14.0",component:d("/jest-preset-angular/docs/14.0","467"),routes:[{path:"/jest-preset-angular/docs/14.0/",component:d("/jest-preset-angular/docs/14.0/","1ba"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.0/getting-started/installation",component:d("/jest-preset-angular/docs/14.0/getting-started/installation","74b"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.0/getting-started/options",component:d("/jest-preset-angular/docs/14.0/getting-started/options","de6"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.0/getting-started/presets",component:d("/jest-preset-angular/docs/14.0/getting-started/presets","65f"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.0/getting-started/test-environment",component:d("/jest-preset-angular/docs/14.0/getting-started/test-environment","280"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.0/guides/absolute-imports",component:d("/jest-preset-angular/docs/14.0/guides/absolute-imports","51f"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.0/guides/angular-13+",component:d("/jest-preset-angular/docs/14.0/guides/angular-13+","e8a"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.0/guides/angular-ivy",component:d("/jest-preset-angular/docs/14.0/guides/angular-ivy","4f2"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.0/guides/esm-support",component:d("/jest-preset-angular/docs/14.0/guides/esm-support","c65"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.0/guides/jsdom-version",component:d("/jest-preset-angular/docs/14.0/guides/jsdom-version","682"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.0/guides/troubleshooting",component:d("/jest-preset-angular/docs/14.0/guides/troubleshooting","5fa"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.0/guides/using-with-babel",component:d("/jest-preset-angular/docs/14.0/guides/using-with-babel","001"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.0/processing",component:d("/jest-preset-angular/docs/14.0/processing","b96"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/14.2",component:d("/jest-preset-angular/docs/14.2","fb3"),routes:[{path:"/jest-preset-angular/docs/14.2",component:d("/jest-preset-angular/docs/14.2","917"),routes:[{path:"/jest-preset-angular/docs/14.2/",component:d("/jest-preset-angular/docs/14.2/","e32"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.2/getting-started/installation",component:d("/jest-preset-angular/docs/14.2/getting-started/installation","f93"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.2/getting-started/options",component:d("/jest-preset-angular/docs/14.2/getting-started/options","3fe"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.2/getting-started/presets",component:d("/jest-preset-angular/docs/14.2/getting-started/presets","eba"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.2/getting-started/test-environment",component:d("/jest-preset-angular/docs/14.2/getting-started/test-environment","1a8"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.2/guides/absolute-imports",component:d("/jest-preset-angular/docs/14.2/guides/absolute-imports","7d9"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.2/guides/angular-13+",component:d("/jest-preset-angular/docs/14.2/guides/angular-13+","a1d"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.2/guides/angular-ivy",component:d("/jest-preset-angular/docs/14.2/guides/angular-ivy","701"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.2/guides/esm-support",component:d("/jest-preset-angular/docs/14.2/guides/esm-support","2a9"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.2/guides/jsdom-version",component:d("/jest-preset-angular/docs/14.2/guides/jsdom-version","81f"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.2/guides/snapshot-testing",component:d("/jest-preset-angular/docs/14.2/guides/snapshot-testing","a12"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.2/guides/troubleshooting",component:d("/jest-preset-angular/docs/14.2/guides/troubleshooting","f16"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.2/guides/using-with-babel",component:d("/jest-preset-angular/docs/14.2/guides/using-with-babel","fcd"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.2/processing",component:d("/jest-preset-angular/docs/14.2/processing","bee"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/14.3",component:d("/jest-preset-angular/docs/14.3","d51"),routes:[{path:"/jest-preset-angular/docs/14.3",component:d("/jest-preset-angular/docs/14.3","0e7"),routes:[{path:"/jest-preset-angular/docs/14.3/",component:d("/jest-preset-angular/docs/14.3/","46f"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.3/getting-started/installation",component:d("/jest-preset-angular/docs/14.3/getting-started/installation","29f"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.3/getting-started/options",component:d("/jest-preset-angular/docs/14.3/getting-started/options","37c"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.3/getting-started/presets",component:d("/jest-preset-angular/docs/14.3/getting-started/presets","df9"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.3/getting-started/test-environment",component:d("/jest-preset-angular/docs/14.3/getting-started/test-environment","9cb"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.3/guides/absolute-imports",component:d("/jest-preset-angular/docs/14.3/guides/absolute-imports","db9"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.3/guides/angular-13+",component:d("/jest-preset-angular/docs/14.3/guides/angular-13+","cb9"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.3/guides/angular-ivy",component:d("/jest-preset-angular/docs/14.3/guides/angular-ivy","000"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.3/guides/esm-support",component:d("/jest-preset-angular/docs/14.3/guides/esm-support","307"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.3/guides/jsdom-version",component:d("/jest-preset-angular/docs/14.3/guides/jsdom-version","96c"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.3/guides/snapshot-testing",component:d("/jest-preset-angular/docs/14.3/guides/snapshot-testing","986"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.3/guides/troubleshooting",component:d("/jest-preset-angular/docs/14.3/guides/troubleshooting","e9a"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.3/guides/using-with-babel",component:d("/jest-preset-angular/docs/14.3/guides/using-with-babel","1b6"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.3/processing",component:d("/jest-preset-angular/docs/14.3/processing","653"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/14.4",component:d("/jest-preset-angular/docs/14.4","51e"),routes:[{path:"/jest-preset-angular/docs/14.4",component:d("/jest-preset-angular/docs/14.4","806"),routes:[{path:"/jest-preset-angular/docs/14.4/",component:d("/jest-preset-angular/docs/14.4/","c0a"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.4/getting-started/installation",component:d("/jest-preset-angular/docs/14.4/getting-started/installation","d84"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.4/getting-started/options",component:d("/jest-preset-angular/docs/14.4/getting-started/options","54c"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.4/getting-started/presets",component:d("/jest-preset-angular/docs/14.4/getting-started/presets","863"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.4/getting-started/test-environment",component:d("/jest-preset-angular/docs/14.4/getting-started/test-environment","6ab"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.4/guides/absolute-imports",component:d("/jest-preset-angular/docs/14.4/guides/absolute-imports","a4a"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.4/guides/angular-13+",component:d("/jest-preset-angular/docs/14.4/guides/angular-13+","0e6"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.4/guides/angular-ivy",component:d("/jest-preset-angular/docs/14.4/guides/angular-ivy","4fb"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.4/guides/esm-support",component:d("/jest-preset-angular/docs/14.4/guides/esm-support","cd1"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.4/guides/jsdom-version",component:d("/jest-preset-angular/docs/14.4/guides/jsdom-version","6de"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.4/guides/snapshot-testing",component:d("/jest-preset-angular/docs/14.4/guides/snapshot-testing","86d"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.4/guides/troubleshooting",component:d("/jest-preset-angular/docs/14.4/guides/troubleshooting","c43"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.4/guides/using-with-babel",component:d("/jest-preset-angular/docs/14.4/guides/using-with-babel","a54"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.4/processing",component:d("/jest-preset-angular/docs/14.4/processing","8cb"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/8.x",component:d("/jest-preset-angular/docs/8.x","e41"),routes:[{path:"/jest-preset-angular/docs/8.x",component:d("/jest-preset-angular/docs/8.x","c1d"),routes:[{path:"/jest-preset-angular/docs/8.x/",component:d("/jest-preset-angular/docs/8.x/","ae7"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/8.x/getting-started/installation",component:d("/jest-preset-angular/docs/8.x/getting-started/installation","d74"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/8.x/getting-started/options",component:d("/jest-preset-angular/docs/8.x/getting-started/options","d5e"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/8.x/getting-started/presets",component:d("/jest-preset-angular/docs/8.x/getting-started/presets","8d2"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/8.x/getting-started/test-environment",component:d("/jest-preset-angular/docs/8.x/getting-started/test-environment","905"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/8.x/guides/absolute-imports",component:d("/jest-preset-angular/docs/8.x/guides/absolute-imports","164"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/8.x/guides/angular-ivy",component:d("/jest-preset-angular/docs/8.x/guides/angular-ivy","c87"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/8.x/guides/esm-support",component:d("/jest-preset-angular/docs/8.x/guides/esm-support","20f"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/8.x/guides/jsdom-version",component:d("/jest-preset-angular/docs/8.x/guides/jsdom-version","87f"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/8.x/guides/troubleshooting",component:d("/jest-preset-angular/docs/8.x/guides/troubleshooting","140"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/8.x/guides/using-with-babel",component:d("/jest-preset-angular/docs/8.x/guides/using-with-babel","baa"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/8.x/processing",component:d("/jest-preset-angular/docs/8.x/processing","742"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/9.x",component:d("/jest-preset-angular/docs/9.x","2ab"),routes:[{path:"/jest-preset-angular/docs/9.x",component:d("/jest-preset-angular/docs/9.x","e1d"),routes:[{path:"/jest-preset-angular/docs/9.x/",component:d("/jest-preset-angular/docs/9.x/","14c"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/9.x/getting-started/installation",component:d("/jest-preset-angular/docs/9.x/getting-started/installation","f88"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/9.x/getting-started/options",component:d("/jest-preset-angular/docs/9.x/getting-started/options","325"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/9.x/getting-started/presets",component:d("/jest-preset-angular/docs/9.x/getting-started/presets","282"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/9.x/getting-started/test-environment",component:d("/jest-preset-angular/docs/9.x/getting-started/test-environment","9e8"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/9.x/guides/absolute-imports",component:d("/jest-preset-angular/docs/9.x/guides/absolute-imports","da9"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/9.x/guides/angular-ivy",component:d("/jest-preset-angular/docs/9.x/guides/angular-ivy","f78"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/9.x/guides/esm-support",component:d("/jest-preset-angular/docs/9.x/guides/esm-support","dda"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/9.x/guides/jsdom-version",component:d("/jest-preset-angular/docs/9.x/guides/jsdom-version","a2b"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/9.x/guides/troubleshooting",component:d("/jest-preset-angular/docs/9.x/guides/troubleshooting","7c6"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/9.x/guides/using-with-babel",component:d("/jest-preset-angular/docs/9.x/guides/using-with-babel","da4"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/9.x/processing",component:d("/jest-preset-angular/docs/9.x/processing","55c"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/next",component:d("/jest-preset-angular/docs/next","6a1"),routes:[{path:"/jest-preset-angular/docs/next",component:d("/jest-preset-angular/docs/next","2a4"),routes:[{path:"/jest-preset-angular/docs/next/",component:d("/jest-preset-angular/docs/next/","b59"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/getting-started/installation",component:d("/jest-preset-angular/docs/next/getting-started/installation","d51"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/getting-started/options",component:d("/jest-preset-angular/docs/next/getting-started/options","e6f"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/getting-started/presets",component:d("/jest-preset-angular/docs/next/getting-started/presets","679"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/getting-started/test-environment",component:d("/jest-preset-angular/docs/next/getting-started/test-environment","75e"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/getting-started/testbed-environment",component:d("/jest-preset-angular/docs/next/getting-started/testbed-environment","435"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/absolute-imports",component:d("/jest-preset-angular/docs/next/guides/absolute-imports","760"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/angular-13+",component:d("/jest-preset-angular/docs/next/guides/angular-13+","c06"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/angular-ivy",component:d("/jest-preset-angular/docs/next/guides/angular-ivy","52c"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/esm-support",component:d("/jest-preset-angular/docs/next/guides/esm-support","de9"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/jsdom-environment",component:d("/jest-preset-angular/docs/next/guides/jsdom-environment","9ad"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/jsdom-version",component:d("/jest-preset-angular/docs/next/guides/jsdom-version","33d"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/snapshot-testing",component:d("/jest-preset-angular/docs/next/guides/snapshot-testing","14b"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/troubleshooting",component:d("/jest-preset-angular/docs/next/guides/troubleshooting","eea"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/using-with-babel",component:d("/jest-preset-angular/docs/next/guides/using-with-babel","57a"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/processing",component:d("/jest-preset-angular/docs/next/processing","a91"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs",component:d("/jest-preset-angular/docs","9d6"),routes:[{path:"/jest-preset-angular/docs",component:d("/jest-preset-angular/docs","c28"),routes:[{path:"/jest-preset-angular/docs/",component:d("/jest-preset-angular/docs/","ffe"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/getting-started/installation",component:d("/jest-preset-angular/docs/getting-started/installation","556"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/getting-started/options",component:d("/jest-preset-angular/docs/getting-started/options","c62"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/getting-started/presets",component:d("/jest-preset-angular/docs/getting-started/presets","9bf"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/getting-started/test-environment",component:d("/jest-preset-angular/docs/getting-started/test-environment","0a4"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/getting-started/testbed-environment",component:d("/jest-preset-angular/docs/getting-started/testbed-environment","f0c"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/absolute-imports",component:d("/jest-preset-angular/docs/guides/absolute-imports","a3f"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/angular-13+",component:d("/jest-preset-angular/docs/guides/angular-13+","35f"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/angular-ivy",component:d("/jest-preset-angular/docs/guides/angular-ivy","b55"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/esm-support",component:d("/jest-preset-angular/docs/guides/esm-support","148"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/jsdom-environment",component:d("/jest-preset-angular/docs/guides/jsdom-environment","067"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/jsdom-version",component:d("/jest-preset-angular/docs/guides/jsdom-version","9b0"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/snapshot-testing",component:d("/jest-preset-angular/docs/guides/snapshot-testing","e78"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/troubleshooting",component:d("/jest-preset-angular/docs/guides/troubleshooting","8c0"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/using-with-babel",component:d("/jest-preset-angular/docs/guides/using-with-babel","fb1"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/processing",component:d("/jest-preset-angular/docs/processing","2c6"),exact:!0,sidebar:"docs"}]}]}]},{path:"/jest-preset-angular/",component:d("/jest-preset-angular/","c4f"),exact:!0},{path:"*",component:d("*")}]},6125:(e,t,n)=>{"use strict";n.d(t,{o:()=>a,x:()=>s});var r=n(6540),o=n(4848);const a=r.createContext(!1);function s(e){let{children:t}=e;const[n,s]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{s(!0)}),[]),(0,o.jsx)(a.Provider,{value:n,children:t})}},8536:(e,t,n)=>{"use strict";var r=n(6540),o=n(5338),a=n(545),s=n(4625),i=n(4784),l=n(8193);const c=[n(119),n(6134),n(6294),n(1043),n(4096)];var u=n(8328),d=n(6347),p=n(2831),f=n(4848);function g(e){let{children:t}=e;return(0,f.jsx)(f.Fragment,{children:t})}var m=n(5260),h=n(4586),b=n(6025),v=n(6342),y=n(9024),w=n(2131),x=n(4090),j=n(2967),k=n(440),S=n(1463);function _(){const{i18n:{currentLocale:e,defaultLocale:t,localeConfigs:n}}=(0,h.A)(),r=(0,w.o)(),o=n[e].htmlLang,a=e=>e.replace("-","_");return(0,f.jsxs)(m.A,{children:[Object.entries(n).map((e=>{let[t,{htmlLang:n}]=e;return(0,f.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:n},t)})),(0,f.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:"x-default"}),(0,f.jsx)("meta",{property:"og:locale",content:a(o)}),Object.values(n).filter((e=>o!==e.htmlLang)).map((e=>(0,f.jsx)("meta",{property:"og:locale:alternate",content:a(e.htmlLang)},`meta-og-${e.htmlLang}`)))]})}function E(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,h.A)(),r=function(){const{siteConfig:{url:e,baseUrl:t,trailingSlash:n}}=(0,h.A)(),{pathname:r}=(0,d.zy)();return e+(0,k.Ks)((0,b.Ay)(r),{trailingSlash:n,baseUrl:t})}(),o=t?`${n}${t}`:r;return(0,f.jsxs)(m.A,{children:[(0,f.jsx)("meta",{property:"og:url",content:o}),(0,f.jsx)("link",{rel:"canonical",href:o})]})}function O(){const{i18n:{currentLocale:e}}=(0,h.A)(),{metadata:t,image:n}=(0,v.p)();return(0,f.jsxs)(f.Fragment,{children:[(0,f.jsxs)(m.A,{children:[(0,f.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,f.jsx)("body",{className:x.w})]}),n&&(0,f.jsx)(y.be,{image:n}),(0,f.jsx)(E,{}),(0,f.jsx)(_,{}),(0,f.jsx)(S.A,{tag:j.C,locale:e}),(0,f.jsx)(m.A,{children:t.map(((e,t)=>(0,f.jsx)("meta",{...e},t)))})]})}const C=new Map;var A=n(6125),P=n(6988),T=n(205);function I(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r{const r=t.default?.[e]??t[e];return r?.(...n)}));return()=>o.forEach((e=>e?.()))}const R=function(e){let{children:t,location:n,previousLocation:r}=e;return(0,T.A)((()=>{r!==n&&(!function(e){let{location:t,previousLocation:n}=e;if(!n)return;const r=t.pathname===n.pathname,o=t.hash===n.hash,a=t.search===n.search;if(r&&o&&!a)return;const{hash:s}=t;if(s){const e=decodeURIComponent(s.substring(1)),t=document.getElementById(e);t?.scrollIntoView()}else window.scrollTo(0,0)}({location:n,previousLocation:r}),I("onRouteDidUpdate",{previousLocation:r,location:n}))}),[r,n]),t};function N(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,p.u)(u.A,e))).flat();return Promise.all(t.map((e=>e.route.component.preload?.())))}class L extends r.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=l.A.canUseDOM?I("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=I("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),N(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return(0,f.jsx)(R,{previousLocation:this.previousLocation,location:t,children:(0,f.jsx)(d.qh,{location:t,render:()=>e})})}}const D=L,M="__docusaurus-base-url-issue-banner-container",F="__docusaurus-base-url-issue-banner",B="__docusaurus-base-url-issue-banner-suggestion-container";function z(e){return`\ndocument.addEventListener('DOMContentLoaded', function maybeInsertBanner() {\n var shouldInsert = typeof window['docusaurus'] === 'undefined';\n shouldInsert && insertBanner();\n});\n\nfunction insertBanner() {\n var bannerContainer = document.createElement('div');\n bannerContainer.id = '${M}';\n var bannerHtml = ${JSON.stringify(function(e){return`\n
\n

Your Docusaurus site did not load properly.

\n

A very common reason is a wrong site baseUrl configuration.

\n

Current configured baseUrl = ${e} ${"/"===e?" (default value)":""}

\n

We suggest trying baseUrl =

\n
\n`}(e)).replace(/{let{route:t}=e;return!0===t.exact})))return C.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return C.set(e.pathname,t),{...e,pathname:t}}((0,d.zy)());return(0,f.jsx)(D,{location:e,children:W})}function Q(){return(0,f.jsx)(H.A,{children:(0,f.jsx)(P.l,{children:(0,f.jsxs)(A.x,{children:[(0,f.jsxs)(g,{children:[(0,f.jsx)($,{}),(0,f.jsx)(O,{}),(0,f.jsx)(q,{}),(0,f.jsx)(K,{})]}),(0,f.jsx)(G,{})]})})})}var Y=n(4054);const Z=function(e){try{return document.createElement("link").relList.supports(e)}catch{return!1}}("prefetch")?function(e){return new Promise(((t,n)=>{if("undefined"==typeof document)return void n();const r=document.createElement("link");r.setAttribute("rel","prefetch"),r.setAttribute("href",e),r.onload=()=>t(),r.onerror=()=>n();const o=document.getElementsByTagName("head")[0]??document.getElementsByName("script")[0]?.parentNode;o?.appendChild(r)}))}:function(e){return new Promise(((t,n)=>{const r=new XMLHttpRequest;r.open("GET",e,!0),r.withCredentials=!0,r.onload=()=>{200===r.status?t():n()},r.send(null)}))};var J=n(6921);const X=new Set,ee=new Set,te=()=>navigator.connection?.effectiveType.includes("2g")||navigator.connection?.saveData,ne={prefetch:e=>{if(!(e=>!te()&&!ee.has(e)&&!X.has(e))(e))return!1;X.add(e);const t=(0,p.u)(u.A,e).flatMap((e=>{return t=e.route.path,Object.entries(Y).filter((e=>{let[n]=e;return n.replace(/-[^-]+$/,"")===t})).flatMap((e=>{let[,t]=e;return Object.values((0,J.A)(t))}));var t}));return Promise.all(t.map((e=>{const t=n.gca(e);return t&&!t.includes("undefined")?Z(t).catch((()=>{})):Promise.resolve()})))},preload:e=>!!(e=>!te()&&!ee.has(e))(e)&&(ee.add(e),N(e))},re=Object.freeze(ne);function oe(e){let{children:t}=e;return"hash"===i.default.future.experimental_router?(0,f.jsx)(s.I9,{children:t}):(0,f.jsx)(s.Kd,{children:t})}const ae=Boolean(!0);if(l.A.canUseDOM){window.docusaurus=re;const e=document.getElementById("__docusaurus"),t=(0,f.jsx)(a.vd,{children:(0,f.jsx)(oe,{children:(0,f.jsx)(Q,{})})}),n=(e,t)=>{console.error("Docusaurus React Root onRecoverableError:",e,t)},s=()=>{if(window.docusaurusRoot)window.docusaurusRoot.render(t);else if(ae)window.docusaurusRoot=o.hydrateRoot(e,t,{onRecoverableError:n});else{const r=o.createRoot(e,{onRecoverableError:n});r.render(t),window.docusaurusRoot=r}};N(window.location.pathname).then((()=>{(0,r.startTransition)(s)}))}},6988:(e,t,n)=>{"use strict";n.d(t,{o:()=>d,l:()=>p});var r=n(6540),o=n(4784);const a=JSON.parse('{"docusaurus-plugin-content-docs":{"default":{"path":"/jest-preset-angular/docs","versions":[{"name":"current","label":"Next","isLast":false,"path":"/jest-preset-angular/docs/next","mainDocId":"introduction","docs":[{"id":"getting-started/installation","path":"/jest-preset-angular/docs/next/getting-started/installation","sidebar":"docs"},{"id":"getting-started/options","path":"/jest-preset-angular/docs/next/getting-started/options","sidebar":"docs"},{"id":"getting-started/presets","path":"/jest-preset-angular/docs/next/getting-started/presets","sidebar":"docs"},{"id":"getting-started/test-environment","path":"/jest-preset-angular/docs/next/getting-started/test-environment","sidebar":"docs"},{"id":"getting-started/testbed-environment","path":"/jest-preset-angular/docs/next/getting-started/testbed-environment","sidebar":"docs"},{"id":"guides/absolute-imports","path":"/jest-preset-angular/docs/next/guides/absolute-imports","sidebar":"docs"},{"id":"guides/angular-13+","path":"/jest-preset-angular/docs/next/guides/angular-13+","sidebar":"docs"},{"id":"guides/angular-ivy","path":"/jest-preset-angular/docs/next/guides/angular-ivy","sidebar":"docs"},{"id":"guides/esm-support","path":"/jest-preset-angular/docs/next/guides/esm-support","sidebar":"docs"},{"id":"guides/jsdom-environment","path":"/jest-preset-angular/docs/next/guides/jsdom-environment","sidebar":"docs"},{"id":"guides/jsdom-version","path":"/jest-preset-angular/docs/next/guides/jsdom-version","sidebar":"docs"},{"id":"guides/snapshot-testing","path":"/jest-preset-angular/docs/next/guides/snapshot-testing","sidebar":"docs"},{"id":"guides/troubleshooting","path":"/jest-preset-angular/docs/next/guides/troubleshooting","sidebar":"docs"},{"id":"guides/using-with-babel","path":"/jest-preset-angular/docs/next/guides/using-with-babel","sidebar":"docs"},{"id":"introduction","path":"/jest-preset-angular/docs/next/","sidebar":"docs"},{"id":"processing","path":"/jest-preset-angular/docs/next/processing","sidebar":"docs"}],"draftIds":[],"sidebars":{"docs":{"link":{"path":"/jest-preset-angular/docs/next/","label":"introduction"}}}},{"name":"14.5","label":"14.5","isLast":true,"path":"/jest-preset-angular/docs","mainDocId":"introduction","docs":[{"id":"getting-started/installation","path":"/jest-preset-angular/docs/getting-started/installation","sidebar":"docs"},{"id":"getting-started/options","path":"/jest-preset-angular/docs/getting-started/options","sidebar":"docs"},{"id":"getting-started/presets","path":"/jest-preset-angular/docs/getting-started/presets","sidebar":"docs"},{"id":"getting-started/test-environment","path":"/jest-preset-angular/docs/getting-started/test-environment","sidebar":"docs"},{"id":"getting-started/testbed-environment","path":"/jest-preset-angular/docs/getting-started/testbed-environment","sidebar":"docs"},{"id":"guides/absolute-imports","path":"/jest-preset-angular/docs/guides/absolute-imports","sidebar":"docs"},{"id":"guides/angular-13+","path":"/jest-preset-angular/docs/guides/angular-13+","sidebar":"docs"},{"id":"guides/angular-ivy","path":"/jest-preset-angular/docs/guides/angular-ivy","sidebar":"docs"},{"id":"guides/esm-support","path":"/jest-preset-angular/docs/guides/esm-support","sidebar":"docs"},{"id":"guides/jsdom-environment","path":"/jest-preset-angular/docs/guides/jsdom-environment","sidebar":"docs"},{"id":"guides/jsdom-version","path":"/jest-preset-angular/docs/guides/jsdom-version","sidebar":"docs"},{"id":"guides/snapshot-testing","path":"/jest-preset-angular/docs/guides/snapshot-testing","sidebar":"docs"},{"id":"guides/troubleshooting","path":"/jest-preset-angular/docs/guides/troubleshooting","sidebar":"docs"},{"id":"guides/using-with-babel","path":"/jest-preset-angular/docs/guides/using-with-babel","sidebar":"docs"},{"id":"introduction","path":"/jest-preset-angular/docs/","sidebar":"docs"},{"id":"processing","path":"/jest-preset-angular/docs/processing","sidebar":"docs"}],"draftIds":[],"sidebars":{"docs":{"link":{"path":"/jest-preset-angular/docs/","label":"introduction"}}}},{"name":"14.4","label":"14.4","isLast":false,"path":"/jest-preset-angular/docs/14.4","mainDocId":"introduction","docs":[{"id":"getting-started/installation","path":"/jest-preset-angular/docs/14.4/getting-started/installation","sidebar":"docs"},{"id":"getting-started/options","path":"/jest-preset-angular/docs/14.4/getting-started/options","sidebar":"docs"},{"id":"getting-started/presets","path":"/jest-preset-angular/docs/14.4/getting-started/presets","sidebar":"docs"},{"id":"getting-started/test-environment","path":"/jest-preset-angular/docs/14.4/getting-started/test-environment","sidebar":"docs"},{"id":"guides/absolute-imports","path":"/jest-preset-angular/docs/14.4/guides/absolute-imports","sidebar":"docs"},{"id":"guides/angular-13+","path":"/jest-preset-angular/docs/14.4/guides/angular-13+","sidebar":"docs"},{"id":"guides/angular-ivy","path":"/jest-preset-angular/docs/14.4/guides/angular-ivy","sidebar":"docs"},{"id":"guides/esm-support","path":"/jest-preset-angular/docs/14.4/guides/esm-support","sidebar":"docs"},{"id":"guides/jsdom-version","path":"/jest-preset-angular/docs/14.4/guides/jsdom-version","sidebar":"docs"},{"id":"guides/snapshot-testing","path":"/jest-preset-angular/docs/14.4/guides/snapshot-testing","sidebar":"docs"},{"id":"guides/troubleshooting","path":"/jest-preset-angular/docs/14.4/guides/troubleshooting","sidebar":"docs"},{"id":"guides/using-with-babel","path":"/jest-preset-angular/docs/14.4/guides/using-with-babel","sidebar":"docs"},{"id":"introduction","path":"/jest-preset-angular/docs/14.4/","sidebar":"docs"},{"id":"processing","path":"/jest-preset-angular/docs/14.4/processing","sidebar":"docs"}],"draftIds":[],"sidebars":{"docs":{"link":{"path":"/jest-preset-angular/docs/14.4/","label":"introduction"}}}},{"name":"14.3","label":"14.3","isLast":false,"path":"/jest-preset-angular/docs/14.3","mainDocId":"introduction","docs":[{"id":"getting-started/installation","path":"/jest-preset-angular/docs/14.3/getting-started/installation","sidebar":"docs"},{"id":"getting-started/options","path":"/jest-preset-angular/docs/14.3/getting-started/options","sidebar":"docs"},{"id":"getting-started/presets","path":"/jest-preset-angular/docs/14.3/getting-started/presets","sidebar":"docs"},{"id":"getting-started/test-environment","path":"/jest-preset-angular/docs/14.3/getting-started/test-environment","sidebar":"docs"},{"id":"guides/absolute-imports","path":"/jest-preset-angular/docs/14.3/guides/absolute-imports","sidebar":"docs"},{"id":"guides/angular-13+","path":"/jest-preset-angular/docs/14.3/guides/angular-13+","sidebar":"docs"},{"id":"guides/angular-ivy","path":"/jest-preset-angular/docs/14.3/guides/angular-ivy","sidebar":"docs"},{"id":"guides/esm-support","path":"/jest-preset-angular/docs/14.3/guides/esm-support","sidebar":"docs"},{"id":"guides/jsdom-version","path":"/jest-preset-angular/docs/14.3/guides/jsdom-version","sidebar":"docs"},{"id":"guides/snapshot-testing","path":"/jest-preset-angular/docs/14.3/guides/snapshot-testing","sidebar":"docs"},{"id":"guides/troubleshooting","path":"/jest-preset-angular/docs/14.3/guides/troubleshooting","sidebar":"docs"},{"id":"guides/using-with-babel","path":"/jest-preset-angular/docs/14.3/guides/using-with-babel","sidebar":"docs"},{"id":"introduction","path":"/jest-preset-angular/docs/14.3/","sidebar":"docs"},{"id":"processing","path":"/jest-preset-angular/docs/14.3/processing","sidebar":"docs"}],"draftIds":[],"sidebars":{"docs":{"link":{"path":"/jest-preset-angular/docs/14.3/","label":"introduction"}}}},{"name":"14.2","label":"14.2","isLast":false,"path":"/jest-preset-angular/docs/14.2","mainDocId":"introduction","docs":[{"id":"getting-started/installation","path":"/jest-preset-angular/docs/14.2/getting-started/installation","sidebar":"docs"},{"id":"getting-started/options","path":"/jest-preset-angular/docs/14.2/getting-started/options","sidebar":"docs"},{"id":"getting-started/presets","path":"/jest-preset-angular/docs/14.2/getting-started/presets","sidebar":"docs"},{"id":"getting-started/test-environment","path":"/jest-preset-angular/docs/14.2/getting-started/test-environment","sidebar":"docs"},{"id":"guides/absolute-imports","path":"/jest-preset-angular/docs/14.2/guides/absolute-imports","sidebar":"docs"},{"id":"guides/angular-13+","path":"/jest-preset-angular/docs/14.2/guides/angular-13+","sidebar":"docs"},{"id":"guides/angular-ivy","path":"/jest-preset-angular/docs/14.2/guides/angular-ivy","sidebar":"docs"},{"id":"guides/esm-support","path":"/jest-preset-angular/docs/14.2/guides/esm-support","sidebar":"docs"},{"id":"guides/jsdom-version","path":"/jest-preset-angular/docs/14.2/guides/jsdom-version","sidebar":"docs"},{"id":"guides/snapshot-testing","path":"/jest-preset-angular/docs/14.2/guides/snapshot-testing","sidebar":"docs"},{"id":"guides/troubleshooting","path":"/jest-preset-angular/docs/14.2/guides/troubleshooting","sidebar":"docs"},{"id":"guides/using-with-babel","path":"/jest-preset-angular/docs/14.2/guides/using-with-babel","sidebar":"docs"},{"id":"introduction","path":"/jest-preset-angular/docs/14.2/","sidebar":"docs"},{"id":"processing","path":"/jest-preset-angular/docs/14.2/processing","sidebar":"docs"}],"draftIds":[],"sidebars":{"docs":{"link":{"path":"/jest-preset-angular/docs/14.2/","label":"introduction"}}}},{"name":"14.0","label":"14.0","isLast":false,"path":"/jest-preset-angular/docs/14.0","mainDocId":"introduction","docs":[{"id":"getting-started/installation","path":"/jest-preset-angular/docs/14.0/getting-started/installation","sidebar":"docs"},{"id":"getting-started/options","path":"/jest-preset-angular/docs/14.0/getting-started/options","sidebar":"docs"},{"id":"getting-started/presets","path":"/jest-preset-angular/docs/14.0/getting-started/presets","sidebar":"docs"},{"id":"getting-started/test-environment","path":"/jest-preset-angular/docs/14.0/getting-started/test-environment","sidebar":"docs"},{"id":"guides/absolute-imports","path":"/jest-preset-angular/docs/14.0/guides/absolute-imports","sidebar":"docs"},{"id":"guides/angular-13+","path":"/jest-preset-angular/docs/14.0/guides/angular-13+","sidebar":"docs"},{"id":"guides/angular-ivy","path":"/jest-preset-angular/docs/14.0/guides/angular-ivy","sidebar":"docs"},{"id":"guides/esm-support","path":"/jest-preset-angular/docs/14.0/guides/esm-support","sidebar":"docs"},{"id":"guides/jsdom-version","path":"/jest-preset-angular/docs/14.0/guides/jsdom-version","sidebar":"docs"},{"id":"guides/troubleshooting","path":"/jest-preset-angular/docs/14.0/guides/troubleshooting","sidebar":"docs"},{"id":"guides/using-with-babel","path":"/jest-preset-angular/docs/14.0/guides/using-with-babel","sidebar":"docs"},{"id":"introduction","path":"/jest-preset-angular/docs/14.0/","sidebar":"docs"},{"id":"processing","path":"/jest-preset-angular/docs/14.0/processing","sidebar":"docs"}],"draftIds":[],"sidebars":{"docs":{"link":{"path":"/jest-preset-angular/docs/14.0/","label":"introduction"}}}},{"name":"13.0","label":"13.0","isLast":false,"path":"/jest-preset-angular/docs/13.0","mainDocId":"introduction","docs":[{"id":"getting-started/installation","path":"/jest-preset-angular/docs/13.0/getting-started/installation","sidebar":"docs"},{"id":"getting-started/options","path":"/jest-preset-angular/docs/13.0/getting-started/options","sidebar":"docs"},{"id":"getting-started/presets","path":"/jest-preset-angular/docs/13.0/getting-started/presets","sidebar":"docs"},{"id":"getting-started/test-environment","path":"/jest-preset-angular/docs/13.0/getting-started/test-environment","sidebar":"docs"},{"id":"guides/absolute-imports","path":"/jest-preset-angular/docs/13.0/guides/absolute-imports","sidebar":"docs"},{"id":"guides/angular-13+","path":"/jest-preset-angular/docs/13.0/guides/angular-13+","sidebar":"docs"},{"id":"guides/angular-ivy","path":"/jest-preset-angular/docs/13.0/guides/angular-ivy","sidebar":"docs"},{"id":"guides/esm-support","path":"/jest-preset-angular/docs/13.0/guides/esm-support","sidebar":"docs"},{"id":"guides/jsdom-version","path":"/jest-preset-angular/docs/13.0/guides/jsdom-version","sidebar":"docs"},{"id":"guides/troubleshooting","path":"/jest-preset-angular/docs/13.0/guides/troubleshooting","sidebar":"docs"},{"id":"guides/using-with-babel","path":"/jest-preset-angular/docs/13.0/guides/using-with-babel","sidebar":"docs"},{"id":"introduction","path":"/jest-preset-angular/docs/13.0/","sidebar":"docs"},{"id":"processing","path":"/jest-preset-angular/docs/13.0/processing","sidebar":"docs"}],"draftIds":[],"sidebars":{"docs":{"link":{"path":"/jest-preset-angular/docs/13.0/","label":"introduction"}}}},{"name":"12.0","label":"12.0","isLast":false,"path":"/jest-preset-angular/docs/12.0","mainDocId":"introduction","docs":[{"id":"getting-started/installation","path":"/jest-preset-angular/docs/12.0/getting-started/installation","sidebar":"docs"},{"id":"getting-started/options","path":"/jest-preset-angular/docs/12.0/getting-started/options","sidebar":"docs"},{"id":"getting-started/presets","path":"/jest-preset-angular/docs/12.0/getting-started/presets","sidebar":"docs"},{"id":"getting-started/test-environment","path":"/jest-preset-angular/docs/12.0/getting-started/test-environment","sidebar":"docs"},{"id":"guides/absolute-imports","path":"/jest-preset-angular/docs/12.0/guides/absolute-imports","sidebar":"docs"},{"id":"guides/angular-13+","path":"/jest-preset-angular/docs/12.0/guides/angular-13+","sidebar":"docs"},{"id":"guides/angular-ivy","path":"/jest-preset-angular/docs/12.0/guides/angular-ivy","sidebar":"docs"},{"id":"guides/esm-support","path":"/jest-preset-angular/docs/12.0/guides/esm-support","sidebar":"docs"},{"id":"guides/jsdom-version","path":"/jest-preset-angular/docs/12.0/guides/jsdom-version","sidebar":"docs"},{"id":"guides/troubleshooting","path":"/jest-preset-angular/docs/12.0/guides/troubleshooting","sidebar":"docs"},{"id":"guides/using-with-babel","path":"/jest-preset-angular/docs/12.0/guides/using-with-babel","sidebar":"docs"},{"id":"introduction","path":"/jest-preset-angular/docs/12.0/","sidebar":"docs"},{"id":"processing","path":"/jest-preset-angular/docs/12.0/processing","sidebar":"docs"}],"draftIds":[],"sidebars":{"docs":{"link":{"path":"/jest-preset-angular/docs/12.0/","label":"introduction"}}}},{"name":"11.1","label":"11.1","isLast":false,"path":"/jest-preset-angular/docs/11.1","mainDocId":"introduction","docs":[{"id":"getting-started/installation","path":"/jest-preset-angular/docs/11.1/getting-started/installation","sidebar":"docs"},{"id":"getting-started/options","path":"/jest-preset-angular/docs/11.1/getting-started/options","sidebar":"docs"},{"id":"getting-started/presets","path":"/jest-preset-angular/docs/11.1/getting-started/presets","sidebar":"docs"},{"id":"getting-started/test-environment","path":"/jest-preset-angular/docs/11.1/getting-started/test-environment","sidebar":"docs"},{"id":"guides/absolute-imports","path":"/jest-preset-angular/docs/11.1/guides/absolute-imports","sidebar":"docs"},{"id":"guides/angular-13+","path":"/jest-preset-angular/docs/11.1/guides/angular-13+","sidebar":"docs"},{"id":"guides/angular-ivy","path":"/jest-preset-angular/docs/11.1/guides/angular-ivy","sidebar":"docs"},{"id":"guides/esm-support","path":"/jest-preset-angular/docs/11.1/guides/esm-support","sidebar":"docs"},{"id":"guides/jsdom-version","path":"/jest-preset-angular/docs/11.1/guides/jsdom-version","sidebar":"docs"},{"id":"guides/troubleshooting","path":"/jest-preset-angular/docs/11.1/guides/troubleshooting","sidebar":"docs"},{"id":"guides/using-with-babel","path":"/jest-preset-angular/docs/11.1/guides/using-with-babel","sidebar":"docs"},{"id":"introduction","path":"/jest-preset-angular/docs/11.1/","sidebar":"docs"},{"id":"processing","path":"/jest-preset-angular/docs/11.1/processing","sidebar":"docs"}],"draftIds":[],"sidebars":{"docs":{"link":{"path":"/jest-preset-angular/docs/11.1/","label":"introduction"}}}},{"name":"11.0","label":"11.0","isLast":false,"path":"/jest-preset-angular/docs/11.0","mainDocId":"introduction","docs":[{"id":"getting-started/installation","path":"/jest-preset-angular/docs/11.0/getting-started/installation","sidebar":"docs"},{"id":"getting-started/options","path":"/jest-preset-angular/docs/11.0/getting-started/options","sidebar":"docs"},{"id":"getting-started/presets","path":"/jest-preset-angular/docs/11.0/getting-started/presets","sidebar":"docs"},{"id":"getting-started/test-environment","path":"/jest-preset-angular/docs/11.0/getting-started/test-environment","sidebar":"docs"},{"id":"guides/absolute-imports","path":"/jest-preset-angular/docs/11.0/guides/absolute-imports","sidebar":"docs"},{"id":"guides/angular-13+","path":"/jest-preset-angular/docs/11.0/guides/angular-13+","sidebar":"docs"},{"id":"guides/angular-ivy","path":"/jest-preset-angular/docs/11.0/guides/angular-ivy","sidebar":"docs"},{"id":"guides/esm-support","path":"/jest-preset-angular/docs/11.0/guides/esm-support","sidebar":"docs"},{"id":"guides/jsdom-version","path":"/jest-preset-angular/docs/11.0/guides/jsdom-version","sidebar":"docs"},{"id":"guides/troubleshooting","path":"/jest-preset-angular/docs/11.0/guides/troubleshooting","sidebar":"docs"},{"id":"guides/using-with-babel","path":"/jest-preset-angular/docs/11.0/guides/using-with-babel","sidebar":"docs"},{"id":"introduction","path":"/jest-preset-angular/docs/11.0/","sidebar":"docs"},{"id":"processing","path":"/jest-preset-angular/docs/11.0/processing","sidebar":"docs"}],"draftIds":[],"sidebars":{"docs":{"link":{"path":"/jest-preset-angular/docs/11.0/","label":"introduction"}}}},{"name":"10.x","label":"10.x","isLast":false,"path":"/jest-preset-angular/docs/10.x","mainDocId":"introduction","docs":[{"id":"getting-started/installation","path":"/jest-preset-angular/docs/10.x/getting-started/installation","sidebar":"docs"},{"id":"getting-started/options","path":"/jest-preset-angular/docs/10.x/getting-started/options","sidebar":"docs"},{"id":"getting-started/presets","path":"/jest-preset-angular/docs/10.x/getting-started/presets","sidebar":"docs"},{"id":"getting-started/test-environment","path":"/jest-preset-angular/docs/10.x/getting-started/test-environment","sidebar":"docs"},{"id":"guides/absolute-imports","path":"/jest-preset-angular/docs/10.x/guides/absolute-imports","sidebar":"docs"},{"id":"guides/angular-ivy","path":"/jest-preset-angular/docs/10.x/guides/angular-ivy","sidebar":"docs"},{"id":"guides/esm-support","path":"/jest-preset-angular/docs/10.x/guides/esm-support","sidebar":"docs"},{"id":"guides/jsdom-version","path":"/jest-preset-angular/docs/10.x/guides/jsdom-version","sidebar":"docs"},{"id":"guides/troubleshooting","path":"/jest-preset-angular/docs/10.x/guides/troubleshooting","sidebar":"docs"},{"id":"guides/using-with-babel","path":"/jest-preset-angular/docs/10.x/guides/using-with-babel","sidebar":"docs"},{"id":"introduction","path":"/jest-preset-angular/docs/10.x/","sidebar":"docs"},{"id":"processing","path":"/jest-preset-angular/docs/10.x/processing","sidebar":"docs"}],"draftIds":[],"sidebars":{"docs":{"link":{"path":"/jest-preset-angular/docs/10.x/","label":"introduction"}}}},{"name":"9.x","label":"9.x","isLast":false,"path":"/jest-preset-angular/docs/9.x","mainDocId":"introduction","docs":[{"id":"getting-started/installation","path":"/jest-preset-angular/docs/9.x/getting-started/installation","sidebar":"docs"},{"id":"getting-started/options","path":"/jest-preset-angular/docs/9.x/getting-started/options","sidebar":"docs"},{"id":"getting-started/presets","path":"/jest-preset-angular/docs/9.x/getting-started/presets","sidebar":"docs"},{"id":"getting-started/test-environment","path":"/jest-preset-angular/docs/9.x/getting-started/test-environment","sidebar":"docs"},{"id":"guides/absolute-imports","path":"/jest-preset-angular/docs/9.x/guides/absolute-imports","sidebar":"docs"},{"id":"guides/angular-ivy","path":"/jest-preset-angular/docs/9.x/guides/angular-ivy","sidebar":"docs"},{"id":"guides/esm-support","path":"/jest-preset-angular/docs/9.x/guides/esm-support","sidebar":"docs"},{"id":"guides/jsdom-version","path":"/jest-preset-angular/docs/9.x/guides/jsdom-version","sidebar":"docs"},{"id":"guides/troubleshooting","path":"/jest-preset-angular/docs/9.x/guides/troubleshooting","sidebar":"docs"},{"id":"guides/using-with-babel","path":"/jest-preset-angular/docs/9.x/guides/using-with-babel","sidebar":"docs"},{"id":"introduction","path":"/jest-preset-angular/docs/9.x/","sidebar":"docs"},{"id":"processing","path":"/jest-preset-angular/docs/9.x/processing","sidebar":"docs"}],"draftIds":[],"sidebars":{"docs":{"link":{"path":"/jest-preset-angular/docs/9.x/","label":"introduction"}}}},{"name":"8.x","label":"8.x","isLast":false,"path":"/jest-preset-angular/docs/8.x","mainDocId":"introduction","docs":[{"id":"getting-started/installation","path":"/jest-preset-angular/docs/8.x/getting-started/installation","sidebar":"docs"},{"id":"getting-started/options","path":"/jest-preset-angular/docs/8.x/getting-started/options","sidebar":"docs"},{"id":"getting-started/presets","path":"/jest-preset-angular/docs/8.x/getting-started/presets","sidebar":"docs"},{"id":"getting-started/test-environment","path":"/jest-preset-angular/docs/8.x/getting-started/test-environment","sidebar":"docs"},{"id":"guides/absolute-imports","path":"/jest-preset-angular/docs/8.x/guides/absolute-imports","sidebar":"docs"},{"id":"guides/angular-ivy","path":"/jest-preset-angular/docs/8.x/guides/angular-ivy","sidebar":"docs"},{"id":"guides/esm-support","path":"/jest-preset-angular/docs/8.x/guides/esm-support","sidebar":"docs"},{"id":"guides/jsdom-version","path":"/jest-preset-angular/docs/8.x/guides/jsdom-version","sidebar":"docs"},{"id":"guides/troubleshooting","path":"/jest-preset-angular/docs/8.x/guides/troubleshooting","sidebar":"docs"},{"id":"guides/using-with-babel","path":"/jest-preset-angular/docs/8.x/guides/using-with-babel","sidebar":"docs"},{"id":"introduction","path":"/jest-preset-angular/docs/8.x/","sidebar":"docs"},{"id":"processing","path":"/jest-preset-angular/docs/8.x/processing","sidebar":"docs"}],"draftIds":[],"sidebars":{"docs":{"link":{"path":"/jest-preset-angular/docs/8.x/","label":"introduction"}}}}],"breadcrumbs":true}}}'),s=JSON.parse('{"defaultLocale":"en","locales":["en"],"path":"i18n","currentLocale":"en","localeConfigs":{"en":{"label":"English","direction":"ltr","htmlLang":"en","calendar":"gregory","path":"en"}}}');var i=n(2654);const l=JSON.parse('{"docusaurusVersion":"3.7.0","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"3.7.0"},"docusaurus-plugin-content-blog":{"type":"package","name":"@docusaurus/plugin-content-blog","version":"3.7.0"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"3.7.0"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"3.7.0"},"docusaurus-plugin-svgr":{"type":"package","name":"@docusaurus/plugin-svgr","version":"3.7.0"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"3.7.0"},"docusaurus-theme-search-algolia":{"type":"package","name":"@docusaurus/theme-search-algolia","version":"3.7.0"},"docusaurus-plugin-ideal-image":{"type":"package","name":"@docusaurus/plugin-ideal-image","version":"3.7.0"},"docusaurus-plugin-pwa":{"type":"package","name":"@docusaurus/plugin-pwa","version":"3.7.0"}}}');var c=n(4848);const u={siteConfig:o.default,siteMetadata:l,globalData:a,i18n:s,codeTranslations:i},d=r.createContext(u);function p(e){let{children:t}=e;return(0,c.jsx)(d.Provider,{value:u,children:t})}},7489:(e,t,n)=>{"use strict";n.d(t,{A:()=>m});var r=n(6540),o=n(8193),a=n(5260),s=n(440),i=n(1957),l=n(3102),c=n(4848);function u(e){let{error:t,tryAgain:n}=e;return(0,c.jsxs)("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-start",minHeight:"100vh",width:"100%",maxWidth:"80ch",fontSize:"20px",margin:"0 auto",padding:"1rem"},children:[(0,c.jsx)("h1",{style:{fontSize:"3rem"},children:"This page crashed"}),(0,c.jsx)("button",{type:"button",onClick:n,style:{margin:"1rem 0",fontSize:"2rem",cursor:"pointer",borderRadius:20,padding:"1rem"},children:"Try again"}),(0,c.jsx)(d,{error:t})]})}function d(e){let{error:t}=e;const n=(0,s.rA)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,c.jsx)("p",{style:{whiteSpace:"pre-wrap"},children:n})}function p(e){let{children:t}=e;return(0,c.jsx)(l.W,{value:{plugin:{name:"docusaurus-core-error-boundary",id:"default"}},children:t})}function f(e){let{error:t,tryAgain:n}=e;return(0,c.jsx)(p,{children:(0,c.jsxs)(m,{fallback:()=>(0,c.jsx)(u,{error:t,tryAgain:n}),children:[(0,c.jsx)(a.A,{children:(0,c.jsx)("title",{children:"Page Error"})}),(0,c.jsx)(i.A,{children:(0,c.jsx)(u,{error:t,tryAgain:n})})]})})}const g=e=>(0,c.jsx)(f,{...e});class m extends r.Component{constructor(e){super(e),this.state={error:null}}componentDidCatch(e){o.A.canUseDOM&&this.setState({error:e})}render(){const{children:e}=this.props,{error:t}=this.state;if(t){const e={error:t,tryAgain:()=>this.setState({error:null})};return(this.props.fallback??g)(e)}return e??null}}},8193:(e,t,n)=>{"use strict";n.d(t,{A:()=>o});const r="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,o={canUseDOM:r,canUseEventListeners:r&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:r&&"IntersectionObserver"in window,canUseViewport:r&&"screen"in window}},5260:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});n(6540);var r=n(545),o=n(4848);function a(e){return(0,o.jsx)(r.mg,{...e})}},8774:(e,t,n)=>{"use strict";n.d(t,{A:()=>f});var r=n(6540),o=n(4625),a=n(440),s=n(4586),i=n(6654),l=n(8193),c=n(3427),u=n(6025),d=n(4848);function p(e,t){let{isNavLink:n,to:p,href:f,activeClassName:g,isActive:m,"data-noBrokenLinkCheck":h,autoAddBaseUrl:b=!0,...v}=e;const{siteConfig:y}=(0,s.A)(),{trailingSlash:w,baseUrl:x}=y,j=y.future.experimental_router,{withBaseUrl:k}=(0,u.hH)(),S=(0,c.A)(),_=(0,r.useRef)(null);(0,r.useImperativeHandle)(t,(()=>_.current));const E=p||f;const O=(0,i.A)(E),C=E?.replace("pathname://","");let A=void 0!==C?(P=C,b&&(e=>e.startsWith("/"))(P)?k(P):P):void 0;var P;"hash"===j&&A?.startsWith("./")&&(A=A?.slice(1)),A&&O&&(A=(0,a.Ks)(A,{trailingSlash:w,baseUrl:x}));const T=(0,r.useRef)(!1),I=n?o.k2:o.N_,R=l.A.canUseIntersectionObserver,N=(0,r.useRef)(),L=()=>{T.current||null==A||(window.docusaurus.preload(A),T.current=!0)};(0,r.useEffect)((()=>(!R&&O&&l.A.canUseDOM&&null!=A&&window.docusaurus.prefetch(A),()=>{R&&N.current&&N.current.disconnect()})),[N,A,R,O]);const D=A?.startsWith("#")??!1,M=!v.target||"_self"===v.target,F=!A||!O||!M||D&&"hash"!==j;h||!D&&F||S.collectLink(A),v.id&&S.collectAnchor(v.id);const B={};return F?(0,d.jsx)("a",{ref:_,href:A,...E&&!O&&{target:"_blank",rel:"noopener noreferrer"},...v,...B}):(0,d.jsx)(I,{...v,onMouseEnter:L,onTouchStart:L,innerRef:e=>{_.current=e,R&&e&&O&&(N.current=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(N.current.unobserve(e),N.current.disconnect(),null!=A&&window.docusaurus.prefetch(A))}))})),N.current.observe(e))},to:A,...n&&{isActive:m,activeClassName:g},...B})}const f=r.forwardRef(p)},1312:(e,t,n)=>{"use strict";n.d(t,{A:()=>c,T:()=>l});var r=n(6540),o=n(4848);function a(e,t){const n=e.split(/(\{\w+\})/).map(((e,n)=>{if(n%2==1){const n=t?.[e.slice(1,-1)];if(void 0!==n)return n}return e}));return n.some((e=>(0,r.isValidElement)(e)))?n.map(((e,t)=>(0,r.isValidElement)(e)?r.cloneElement(e,{key:t}):e)).filter((e=>""!==e)):n.join("")}var s=n(2654);function i(e){let{id:t,message:n}=e;if(void 0===t&&void 0===n)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return s[t??n]??n??t}function l(e,t){let{message:n,id:r}=e;return a(i({message:n,id:r}),t)}function c(e){let{children:t,id:n,values:r}=e;if(t&&"string"!=typeof t)throw console.warn("Illegal children",t),new Error("The Docusaurus component only accept simple string values");const s=i({message:t,id:n});return(0,o.jsx)(o.Fragment,{children:a(s,r)})}},7065:(e,t,n)=>{"use strict";n.d(t,{W:()=>r});const r="default"},6654:(e,t,n)=>{"use strict";function r(e){return/^(?:\w*:|\/\/)/.test(e)}function o(e){return void 0!==e&&!r(e)}n.d(t,{A:()=>o,z:()=>r})},6025:(e,t,n)=>{"use strict";n.d(t,{Ay:()=>i,hH:()=>s});var r=n(6540),o=n(4586),a=n(6654);function s(){const{siteConfig:e}=(0,o.A)(),{baseUrl:t,url:n}=e,s=e.future.experimental_router,i=(0,r.useCallback)(((e,r)=>function(e){let{siteUrl:t,baseUrl:n,url:r,options:{forcePrependBaseUrl:o=!1,absolute:s=!1}={},router:i}=e;if(!r||r.startsWith("#")||(0,a.z)(r))return r;if("hash"===i)return r.startsWith("/")?`.${r}`:`./${r}`;if(o)return n+r.replace(/^\//,"");if(r===n.replace(/\/$/,""))return n;const l=r.startsWith(n)?r:n+r.replace(/^\//,"");return s?t+l:l}({siteUrl:n,baseUrl:t,url:e,options:r,router:s})),[n,t,s]);return{withBaseUrl:i}}function i(e,t){void 0===t&&(t={});const{withBaseUrl:n}=s();return n(e,t)}},3427:(e,t,n)=>{"use strict";n.d(t,{A:()=>s});var r=n(6540);n(4848);const o=r.createContext({collectAnchor:()=>{},collectLink:()=>{}}),a=()=>(0,r.useContext)(o);function s(){return a()}},4586:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});var r=n(6540),o=n(6988);function a(){return(0,r.useContext)(o.o)}},2303:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});var r=n(6540),o=n(6125);function a(){return(0,r.useContext)(o.o)}},205:(e,t,n)=>{"use strict";n.d(t,{A:()=>o});var r=n(6540);const o=n(8193).A.canUseDOM?r.useLayoutEffect:r.useEffect},6921:(e,t,n)=>{"use strict";n.d(t,{A:()=>o});const r=e=>"object"==typeof e&&!!e&&Object.keys(e).length>0;function o(e){const t={};return function e(n,o){Object.entries(n).forEach((n=>{let[a,s]=n;const i=o?`${o}.${a}`:a;r(s)?e(s,i):t[i]=s}))}(e),t}},3102:(e,t,n)=>{"use strict";n.d(t,{W:()=>s,o:()=>a});var r=n(6540),o=n(4848);const a=r.createContext(null);function s(e){let{children:t,value:n}=e;const s=r.useContext(a),i=(0,r.useMemo)((()=>function(e){let{parent:t,value:n}=e;if(!t){if(!n)throw new Error("Unexpected: no Docusaurus route context found");if(!("plugin"in n))throw new Error("Unexpected: Docusaurus topmost route context has no `plugin` attribute");return n}const r={...t.data,...n?.data};return{plugin:t.plugin,data:r}}({parent:s,value:n})),[s,n]);return(0,o.jsx)(a.Provider,{value:i,children:t})}},3886:(e,t,n)=>{"use strict";n.d(t,{VQ:()=>h,XK:()=>y,g1:()=>v});var r=n(6540),o=n(4070),a=n(7065),s=n(6342),i=n(679),l=n(9532),c=n(4848);const u=e=>`docs-preferred-version-${e}`,d={save:(e,t,n)=>{(0,i.Wf)(u(e),{persistence:t}).set(n)},read:(e,t)=>(0,i.Wf)(u(e),{persistence:t}).get(),clear:(e,t)=>{(0,i.Wf)(u(e),{persistence:t}).del()}},p=e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}])));const f=r.createContext(null);function g(){const e=(0,o.Gy)(),t=(0,s.p)().docs.versionPersistence,n=(0,r.useMemo)((()=>Object.keys(e)),[e]),[a,i]=(0,r.useState)((()=>p(n)));(0,r.useEffect)((()=>{i(function(e){let{pluginIds:t,versionPersistence:n,allDocsData:r}=e;function o(e){const t=d.read(e,n);return r[e].versions.some((e=>e.name===t))?{preferredVersionName:t}:(d.clear(e,n),{preferredVersionName:null})}return Object.fromEntries(t.map((e=>[e,o(e)])))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]);return[a,(0,r.useMemo)((()=>({savePreferredVersion:function(e,n){d.save(e,t,n),i((t=>({...t,[e]:{preferredVersionName:n}})))}})),[t])]}function m(e){let{children:t}=e;const n=g();return(0,c.jsx)(f.Provider,{value:n,children:t})}function h(e){let{children:t}=e;return(0,c.jsx)(m,{children:t})}function b(){const e=(0,r.useContext)(f);if(!e)throw new l.dV("DocsPreferredVersionContextProvider");return e}function v(e){void 0===e&&(e=a.W);const t=(0,o.ht)(e),[n,s]=b(),{preferredVersionName:i}=n[e];return{preferredVersion:t.versions.find((e=>e.name===i))??null,savePreferredVersionName:(0,r.useCallback)((t=>{s.savePreferredVersion(e,t)}),[s,e])}}function y(){const e=(0,o.Gy)(),[t]=b();function n(n){const r=e[n],{preferredVersionName:o}=t[n];return r.versions.find((e=>e.name===o))??null}const r=Object.keys(e);return Object.fromEntries(r.map((e=>[e,n(e)])))}},2565:(e,t,n)=>{"use strict";n.d(t,{k:()=>a,v:()=>s});var r=n(4070),o=n(3886);function a(e,t){return`docs-${e}-${t}`}function s(){const e=(0,r.Gy)(),t=(0,r.gk)(),n=(0,o.XK)();return[...Object.keys(e).map((function(r){const o=t?.activePlugin.pluginId===r?t.activeVersion:void 0,s=n[r],i=e[r].versions.find((e=>e.isLast));return a(r,(o??s??i).name)}))]}},609:(e,t,n)=>{"use strict";n.d(t,{V:()=>l,t:()=>c});var r=n(6540),o=n(9532),a=n(4848);const s=Symbol("EmptyContext"),i=r.createContext(s);function l(e){let{children:t,name:n,items:o}=e;const s=(0,r.useMemo)((()=>n&&o?{name:n,items:o}:null),[n,o]);return(0,a.jsx)(i.Provider,{value:s,children:t})}function c(){const e=(0,r.useContext)(i);if(e===s)throw new o.dV("DocsSidebarProvider");return e}},6972:(e,t,n)=>{"use strict";n.d(t,{B5:()=>k,Nr:()=>p,OF:()=>y,QB:()=>j,Vd:()=>w,Y:()=>b,fW:()=>x,w8:()=>m});var r=n(6540),o=n(6347),a=n(2831),s=n(4070),i=n(9169),l=n(1682),c=n(3886),u=n(3025),d=n(609);function p(e){return"link"!==e.type||e.unlisted?"category"===e.type?function(e){if(e.href&&!e.linkUnlisted)return e.href;for(const t of e.items){const e=p(t);if(e)return e}}(e):void 0:e.href}const f=(e,t)=>void 0!==e&&(0,i.ys)(e,t),g=(e,t)=>e.some((e=>m(e,t)));function m(e,t){return"link"===e.type?f(e.href,t):"category"===e.type&&(f(e.href,t)||g(e.items,t))}function h(e,t){switch(e.type){case"category":return m(e,t)||void 0!==e.href&&!e.linkUnlisted||e.items.some((e=>h(e,t)));case"link":return!e.unlisted||m(e,t);default:return!0}}function b(e,t){return(0,r.useMemo)((()=>e.filter((e=>h(e,t)))),[e,t])}function v(e){let{sidebarItems:t,pathname:n,onlyCategories:r=!1}=e;const o=[];return function e(t){for(const a of t)if("category"===a.type&&((0,i.ys)(a.href,n)||e(a.items))||"link"===a.type&&(0,i.ys)(a.href,n)){return r&&"category"!==a.type||o.unshift(a),!0}return!1}(t),o}function y(){const e=(0,d.t)(),{pathname:t}=(0,o.zy)(),n=(0,s.vT)()?.pluginData.breadcrumbs;return!1!==n&&e?v({sidebarItems:e.items,pathname:t}):null}function w(e){const{activeVersion:t}=(0,s.zK)(e),{preferredVersion:n}=(0,c.g1)(e),o=(0,s.r7)(e);return(0,r.useMemo)((()=>(0,l.sb)([t,n,o].filter(Boolean))),[t,n,o])}function x(e,t){const n=w(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.sidebars?Object.entries(e.sidebars):[])),r=t.find((t=>t[0]===e));if(!r)throw new Error(`Can't find any sidebar with id "${e}" in version${n.length>1?"s":""} ${n.map((e=>e.name)).join(", ")}".\nAvailable sidebar ids are:\n- ${t.map((e=>e[0])).join("\n- ")}`);return r[1]}),[e,n])}function j(e,t){const n=w(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.docs)),r=t.find((t=>t.id===e));if(!r){if(n.flatMap((e=>e.draftIds)).includes(e))return null;throw new Error(`Couldn't find any doc with id "${e}" in version${n.length>1?"s":""} "${n.map((e=>e.name)).join(", ")}".\nAvailable doc ids are:\n- ${(0,l.sb)(t.map((e=>e.id))).join("\n- ")}`)}return r}),[e,n])}function k(e){let{route:t}=e;const n=(0,o.zy)(),r=(0,u.r)(),s=t.routes,i=s.find((e=>(0,o.B6)(n.pathname,e)));if(!i)return null;const l=i.sidebar,c=l?r.docsSidebars[l]:void 0;return{docElement:(0,a.v)(s),sidebarName:l,sidebarItems:c}}},3025:(e,t,n)=>{"use strict";n.d(t,{n:()=>i,r:()=>l});var r=n(6540),o=n(9532),a=n(4848);const s=r.createContext(null);function i(e){let{children:t,version:n}=e;return(0,a.jsx)(s.Provider,{value:n,children:t})}function l(){const e=(0,r.useContext)(s);if(null===e)throw new o.dV("DocsVersionProvider");return e}},4070:(e,t,n)=>{"use strict";n.d(t,{zK:()=>b,vT:()=>f,gk:()=>g,Gy:()=>d,HW:()=>v,ht:()=>p,r7:()=>h,jh:()=>m});var r=n(6347),o=n(4586),a=n(7065);function s(e,t){void 0===t&&(t={});const n=function(){const{globalData:e}=(0,o.A)();return e}()[e];if(!n&&t.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin.`);return n}const i=e=>e.versions.find((e=>e.isLast));function l(e,t){return[...e.versions].sort(((e,t)=>e.path===t.path?0:e.path.includes(t.path)?-1:t.path.includes(e.path)?1:0)).find((e=>!!(0,r.B6)(t,{path:e.path,exact:!1,strict:!1})))}function c(e,t){const n=l(e,t),o=n?.docs.find((e=>!!(0,r.B6)(t,{path:e.path,exact:!0,strict:!1})));return{activeVersion:n,activeDoc:o,alternateDocVersions:o?function(t){const n={};return e.versions.forEach((e=>{e.docs.forEach((r=>{r.id===t&&(n[e.name]=r)}))})),n}(o.id):{}}}const u={},d=()=>s("docusaurus-plugin-content-docs")??u,p=e=>{try{return function(e,t,n){void 0===t&&(t=a.W),void 0===n&&(n={});const r=s(e),o=r?.[t];if(!o&&n.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${t}".`);return o}("docusaurus-plugin-content-docs",e,{failfast:!0})}catch(t){throw new Error("You are using a feature of the Docusaurus docs plugin, but this plugin does not seem to be enabled"+("Default"===e?"":` (pluginId=${e}`),{cause:t})}};function f(e){void 0===e&&(e={});const t=d(),{pathname:n}=(0,r.zy)();return function(e,t,n){void 0===n&&(n={});const o=Object.entries(e).sort(((e,t)=>t[1].path.localeCompare(e[1].path))).find((e=>{let[,n]=e;return!!(0,r.B6)(t,{path:n.path,exact:!1,strict:!1})})),a=o?{pluginId:o[0],pluginData:o[1]}:void 0;if(!a&&n.failfast)throw new Error(`Can't find active docs plugin for "${t}" pathname, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(e).map((e=>e.path)).join(", ")}`);return a}(t,n,e)}function g(e){void 0===e&&(e={});const t=f(e),{pathname:n}=(0,r.zy)();if(!t)return;return{activePlugin:t,activeVersion:l(t.pluginData,n)}}function m(e){return p(e).versions}function h(e){const t=p(e);return i(t)}function b(e){const t=p(e),{pathname:n}=(0,r.zy)();return c(t,n)}function v(e){const t=p(e),{pathname:n}=(0,r.zy)();return function(e,t){const n=i(e);return{latestDocSuggestion:c(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(t,n)}},4096:(e,t,n)=>{"use strict";n.r(t);var r=n(8193),o=n(679);const a="/jest-preset-angular/sw.js",s=["appInstalled","queryString"],i=!1,l=(0,o.Wf)("docusaurus.pwa.event.appInstalled.fired");function c(e,t){i&&(void 0===t?console.log(`[Docusaurus-PWA][registerSw]: ${e}`):console.log(`[Docusaurus-PWA][registerSw]: ${e}`,t))}async function u(){const e=await navigator.serviceWorker.getRegistrations();c("will unregister all service workers",{registrations:e}),await Promise.all(e.map((e=>e.unregister().then((t=>c("unregister service worker",{registration:e,result:t})))))),c("unregistered all service workers",{registrations:e}),window.location.reload()}const d={always:()=>!0,mobile:()=>window.innerWidth<=996,saveData:()=>!!navigator.connection?.saveData,appInstalled:()=>"true"===l.get()||async function(){if(!("getInstalledRelatedApps"in window.navigator))return!1;try{return(await navigator.getInstalledRelatedApps()).some((e=>"webapp"===e.platform))}catch(e){return!1}}(),standalone:()=>window.matchMedia("(display-mode: standalone)").matches,queryString:()=>"true"===new URLSearchParams(window.location.search).get("offlineMode")};async function p(){const e=await async function(){return(await Promise.all(s.map((e=>Promise.resolve(d[e]()).then((t=>t?e:void 0)))))).filter(Boolean)}(),t=e.length>0;return c(t?"offline mode enabled, because of activation strategies":"offline mode disabled, because none of the offlineModeActivationStrategies could be used",{activeStrategies:e,availableStrategies:s}),t}r.A.canUseDOM&&(c("debug mode enabled"),"serviceWorker"in navigator&&(c("addLegacyAppInstalledEventsListeners"),window.addEventListener("appinstalled",(e=>{c("event appinstalled",{event:e}),l.set("true"),c("AppInstalledEventFiredStorage.set('true')"),u()})),window.addEventListener("beforeinstallprompt",(e=>{c("event beforeinstallprompt",{event:e});const t=l.get();c("AppInstalledEventFiredStorage.get()",{appInstalledEventFired:t}),t&&(l.del(),c("AppInstalledEventFiredStorage.del()"),u())})),c("legacy appinstalled and beforeinstallprompt event listeners installed"),async function(){const[{Workbox:e},t]=await Promise.all([n.e(9730).then(n.bind(n,9730)),p()]),r=new e(function(e){const t=JSON.stringify(e),n=`${a}?params=${encodeURIComponent(t)}`;return c("service worker url",{url:n,params:e}),n}({offlineMode:t,debug:i})),o=()=>r.messageSW({type:"SKIP_WAITING"}),s=()=>(c("handleServiceWorkerWaiting"),t?n.e(4334).then(n.bind(n,4334)).then((e=>{let{renderReloadPopup:t}=e;return t({onReload(){r.addEventListener("controlling",(()=>{window.location.reload()})),o()}})})):o());r.addEventListener("waiting",(e=>{c("event waiting",{event:e}),s()})),r.addEventListener("externalwaiting",(e=>{c("event externalwaiting",{event:e}),s()}));const l=await r.register();l&&(l.active&&c("registration.active",{registration:l}),l.installing&&c("registration.installing",{registration:l}),l.waiting&&(c("registration.waiting",{registration:l}),await s()))}().catch((e=>console.error("registerSW failed",e)))))},6294:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>a});var r=n(5947),o=n.n(r);o().configure({showSpinner:!1});const a={onRouteUpdate(e){let{location:t,previousLocation:n}=e;if(n&&t.pathname!==n.pathname){const e=window.setTimeout((()=>{o().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){o().done()}}},6134:(e,t,n)=>{"use strict";var r=n(1765),o=n(4784);!function(e){const{themeConfig:{prism:t}}=o.default,{additionalLanguages:r}=t,a=globalThis.Prism;globalThis.Prism=e,r.forEach((e=>{"php"===e&&n(9700),n(8692)(`./prism-${e}`)})),delete globalThis.Prism,void 0!==a&&(globalThis.Prism=e)}(r.My)},1107:(e,t,n)=>{"use strict";n.d(t,{A:()=>u});n(6540);var r=n(4164),o=n(1312),a=n(6342),s=n(8774),i=n(3427);const l={anchorWithStickyNavbar:"anchorWithStickyNavbar_LWe7",anchorWithHideOnScrollNavbar:"anchorWithHideOnScrollNavbar_WYt5"};var c=n(4848);function u(e){let{as:t,id:n,...u}=e;const d=(0,i.A)(),{navbar:{hideOnScroll:p}}=(0,a.p)();if("h1"===t||!n)return(0,c.jsx)(t,{...u,id:void 0});d.collectAnchor(n);const f=(0,o.T)({id:"theme.common.headingLinkTitle",message:"Direct link to {heading}",description:"Title for link to heading"},{heading:"string"==typeof u.children?u.children:n});return(0,c.jsxs)(t,{...u,className:(0,r.A)("anchor",p?l.anchorWithHideOnScrollNavbar:l.anchorWithStickyNavbar,u.className),id:n,children:[u.children,(0,c.jsx)(s.A,{className:"hash-link",to:`#${n}`,"aria-label":f,title:f,children:"\u200b"})]})}},3186:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});n(6540);const r={iconExternalLink:"iconExternalLink_nPIU"};var o=n(4848);function a(e){let{width:t=13.5,height:n=13.5}=e;return(0,o.jsx)("svg",{width:t,height:n,"aria-hidden":"true",viewBox:"0 0 24 24",className:r.iconExternalLink,children:(0,o.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})}},1957:(e,t,n)=>{"use strict";n.d(t,{A:()=>Ot});var r=n(6540),o=n(4164),a=n(7489),s=n(9024),i=n(6347),l=n(1312),c=n(5062),u=n(4848);const d="__docusaurus_skipToContent_fallback";function p(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}function f(){const e=(0,r.useRef)(null),{action:t}=(0,i.W6)(),n=(0,r.useCallback)((e=>{e.preventDefault();const t=document.querySelector("main:first-of-type")??document.getElementById(d);t&&p(t)}),[]);return(0,c.$)((n=>{let{location:r}=n;e.current&&!r.hash&&"PUSH"===t&&p(e.current)})),{containerRef:e,onClick:n}}const g=(0,l.T)({id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",message:"Skip to main content"});function m(e){const t=e.children??g,{containerRef:n,onClick:r}=f();return(0,u.jsx)("div",{ref:n,role:"region","aria-label":g,children:(0,u.jsx)("a",{...e,href:`#${d}`,onClick:r,children:t})})}var h=n(7559),b=n(4090);const v={skipToContent:"skipToContent_fXgn"};function y(){return(0,u.jsx)(m,{className:v.skipToContent})}var w=n(6342),x=n(5041);function j(e){let{width:t=21,height:n=21,color:r="currentColor",strokeWidth:o=1.2,className:a,...s}=e;return(0,u.jsx)("svg",{viewBox:"0 0 15 15",width:t,height:n,...s,children:(0,u.jsx)("g",{stroke:r,strokeWidth:o,children:(0,u.jsx)("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})})})}const k={closeButton:"closeButton_CVFx"};function S(e){return(0,u.jsx)("button",{type:"button","aria-label":(0,l.T)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"}),...e,className:(0,o.A)("clean-btn close",k.closeButton,e.className),children:(0,u.jsx)(j,{width:14,height:14,strokeWidth:3.1})})}const _={content:"content_knG7"};function E(e){const{announcementBar:t}=(0,w.p)(),{content:n}=t;return(0,u.jsx)("div",{...e,className:(0,o.A)(_.content,e.className),dangerouslySetInnerHTML:{__html:n}})}const O={announcementBar:"announcementBar_mb4j",announcementBarPlaceholder:"announcementBarPlaceholder_vyr4",announcementBarClose:"announcementBarClose_gvF7",announcementBarContent:"announcementBarContent_xLdY"};function C(){const{announcementBar:e}=(0,w.p)(),{isActive:t,close:n}=(0,x.M)();if(!t)return null;const{backgroundColor:r,textColor:o,isCloseable:a}=e;return(0,u.jsxs)("div",{className:O.announcementBar,style:{backgroundColor:r,color:o},role:"banner",children:[a&&(0,u.jsx)("div",{className:O.announcementBarPlaceholder}),(0,u.jsx)(E,{className:O.announcementBarContent}),a&&(0,u.jsx)(S,{onClick:n,className:O.announcementBarClose})]})}var A=n(2069),P=n(3104);var T=n(9532),I=n(5600);const R=r.createContext(null);function N(e){let{children:t}=e;const n=function(){const e=(0,A.M)(),t=(0,I.YL)(),[n,o]=(0,r.useState)(!1),a=null!==t.component,s=(0,T.ZC)(a);return(0,r.useEffect)((()=>{a&&!s&&o(!0)}),[a,s]),(0,r.useEffect)((()=>{a?e.shown||o(!0):o(!1)}),[e.shown,a]),(0,r.useMemo)((()=>[n,o]),[n])}();return(0,u.jsx)(R.Provider,{value:n,children:t})}function L(e){if(e.component){const t=e.component;return(0,u.jsx)(t,{...e.props})}}function D(){const e=(0,r.useContext)(R);if(!e)throw new T.dV("NavbarSecondaryMenuDisplayProvider");const[t,n]=e,o=(0,r.useCallback)((()=>n(!1)),[n]),a=(0,I.YL)();return(0,r.useMemo)((()=>({shown:t,hide:o,content:L(a)})),[o,a,t])}function M(e){let{header:t,primaryMenu:n,secondaryMenu:r}=e;const{shown:a}=D();return(0,u.jsxs)("div",{className:"navbar-sidebar",children:[t,(0,u.jsxs)("div",{className:(0,o.A)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":a}),children:[(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:n}),(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:r})]})]})}var F=n(5293),B=n(2303);function z(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"})})}function U(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"})})}const q={toggle:"toggle_vylO",toggleButton:"toggleButton_gllP",darkToggleIcon:"darkToggleIcon_wfgR",lightToggleIcon:"lightToggleIcon_pyhR",toggleButtonDisabled:"toggleButtonDisabled_aARS"};function $(e){let{className:t,buttonClassName:n,value:r,onChange:a}=e;const s=(0,B.A)(),i=(0,l.T)({message:"Switch between dark and light mode (currently {mode})",id:"theme.colorToggle.ariaLabel",description:"The ARIA label for the navbar color mode toggle"},{mode:"dark"===r?(0,l.T)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,l.T)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return(0,u.jsx)("div",{className:(0,o.A)(q.toggle,t),children:(0,u.jsxs)("button",{className:(0,o.A)("clean-btn",q.toggleButton,!s&&q.toggleButtonDisabled,n),type:"button",onClick:()=>a("dark"===r?"light":"dark"),disabled:!s,title:i,"aria-label":i,"aria-live":"polite","aria-pressed":"dark"===r?"true":"false",children:[(0,u.jsx)(z,{className:(0,o.A)(q.toggleIcon,q.lightToggleIcon)}),(0,u.jsx)(U,{className:(0,o.A)(q.toggleIcon,q.darkToggleIcon)})]})})}const H=r.memo($),V={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_X3D1"};function G(e){let{className:t}=e;const n=(0,w.p)().navbar.style,r=(0,w.p)().colorMode.disableSwitch,{colorMode:o,setColorMode:a}=(0,F.G)();return r?null:(0,u.jsx)(H,{className:t,buttonClassName:"dark"===n?V.darkNavbarColorModeToggle:void 0,value:o,onChange:a})}var W=n(3465);function K(){return(0,u.jsx)(W.A,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function Q(){const e=(0,A.M)();return(0,u.jsx)("button",{type:"button","aria-label":(0,l.T)({id:"theme.docs.sidebar.closeSidebarButtonAriaLabel",message:"Close navigation bar",description:"The ARIA label for close button of mobile sidebar"}),className:"clean-btn navbar-sidebar__close",onClick:()=>e.toggle(),children:(0,u.jsx)(j,{color:"var(--ifm-color-emphasis-600)"})})}function Y(){return(0,u.jsxs)("div",{className:"navbar-sidebar__brand",children:[(0,u.jsx)(K,{}),(0,u.jsx)(G,{className:"margin-right--md"}),(0,u.jsx)(Q,{})]})}var Z=n(8774),J=n(6025),X=n(6654),ee=n(1252),te=n(3186);function ne(e){let{activeBasePath:t,activeBaseRegex:n,to:r,href:o,label:a,html:s,isDropdownLink:i,prependBaseUrlToHref:l,...c}=e;const d=(0,J.Ay)(r),p=(0,J.Ay)(t),f=(0,J.Ay)(o,{forcePrependBaseUrl:!0}),g=a&&o&&!(0,X.A)(o),m=s?{dangerouslySetInnerHTML:{__html:s}}:{children:(0,u.jsxs)(u.Fragment,{children:[a,g&&(0,u.jsx)(te.A,{...i&&{width:12,height:12}})]})};return o?(0,u.jsx)(Z.A,{href:l?f:o,...c,...m}):(0,u.jsx)(Z.A,{to:d,isNavLink:!0,...(t||n)&&{isActive:(e,t)=>n?(0,ee.G)(n,t.pathname):t.pathname.startsWith(p)},...c,...m})}function re(e){let{className:t,isDropdownItem:n=!1,...r}=e;const a=(0,u.jsx)(ne,{className:(0,o.A)(n?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:n,...r});return n?(0,u.jsx)("li",{children:a}):a}function oe(e){let{className:t,isDropdownItem:n,...r}=e;return(0,u.jsx)("li",{className:"menu__list-item",children:(0,u.jsx)(ne,{className:(0,o.A)("menu__link",t),...r})})}function ae(e){let{mobile:t=!1,position:n,...r}=e;const o=t?oe:re;return(0,u.jsx)(o,{...r,activeClassName:r.activeClassName??(t?"menu__link--active":"navbar__link--active")})}var se=n(1422),ie=n(9169),le=n(4586);const ce={dropdownNavbarItemMobile:"dropdownNavbarItemMobile_S0Fm"};function ue(e,t){return e.some((e=>function(e,t){return!!(0,ie.ys)(e.to,t)||!!(0,ee.G)(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)))}function de(e){let{items:t,position:n,className:a,onClick:s,...i}=e;const l=(0,r.useRef)(null),[c,d]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{const e=e=>{l.current&&!l.current.contains(e.target)&&d(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),document.addEventListener("focusin",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e),document.removeEventListener("focusin",e)}}),[l]),(0,u.jsxs)("div",{ref:l,className:(0,o.A)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===n,"dropdown--show":c}),children:[(0,u.jsx)(ne,{"aria-haspopup":"true","aria-expanded":c,role:"button",href:i.to?void 0:"#",className:(0,o.A)("navbar__link",a),...i,onClick:i.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),d(!c))},children:i.children??i.label}),(0,u.jsx)("ul",{className:"dropdown__menu",children:t.map(((e,t)=>(0,r.createElement)(Be,{isDropdownItem:!0,activeClassName:"dropdown__link--active",...e,key:t})))})]})}function pe(e){let{items:t,className:n,position:a,onClick:s,...l}=e;const c=function(){const{siteConfig:{baseUrl:e}}=(0,le.A)(),{pathname:t}=(0,i.zy)();return t.replace(e,"/")}(),d=ue(t,c),{collapsed:p,toggleCollapsed:f,setCollapsed:g}=(0,se.u)({initialState:()=>!d});return(0,r.useEffect)((()=>{d&&g(!d)}),[c,d,g]),(0,u.jsxs)("li",{className:(0,o.A)("menu__list-item",{"menu__list-item--collapsed":p}),children:[(0,u.jsx)(ne,{role:"button",className:(0,o.A)(ce.dropdownNavbarItemMobile,"menu__link menu__link--sublist menu__link--sublist-caret",n),...l,onClick:e=>{e.preventDefault(),f()},children:l.children??l.label}),(0,u.jsx)(se.N,{lazy:!0,as:"ul",className:"menu__list",collapsed:p,children:t.map(((e,t)=>(0,r.createElement)(Be,{mobile:!0,isDropdownItem:!0,onClick:s,activeClassName:"menu__link--active",...e,key:t})))})]})}function fe(e){let{mobile:t=!1,...n}=e;const r=t?pe:de;return(0,u.jsx)(r,{...n})}var ge=n(2131);function me(e){let{width:t=20,height:n=20,...r}=e;return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:t,height:n,"aria-hidden":!0,...r,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"})})}const he="iconLanguage_nlXk";var be=n(961),ve=n(3219),ye=n(5260),we=n(4255),xe=n(1062),je=n(2967),ke=n(2565);function Se(){return[`language:${(0,le.A)().i18n.currentLocale}`,function(){const e=(0,ke.v)();return[je.C,...e]}().map((e=>`docusaurus_tag:${e}`))]}const _e={button:{buttonText:(0,l.T)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"}),buttonAriaLabel:(0,l.T)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"})},modal:{searchBox:{resetButtonTitle:(0,l.T)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),resetButtonAriaLabel:(0,l.T)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),cancelButtonText:(0,l.T)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"}),cancelButtonAriaLabel:(0,l.T)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"})},startScreen:{recentSearchesTitle:(0,l.T)({id:"theme.SearchModal.startScreen.recentSearchesTitle",message:"Recent",description:"The title for recent searches"}),noRecentSearchesText:(0,l.T)({id:"theme.SearchModal.startScreen.noRecentSearchesText",message:"No recent searches",description:"The text when no recent searches"}),saveRecentSearchButtonTitle:(0,l.T)({id:"theme.SearchModal.startScreen.saveRecentSearchButtonTitle",message:"Save this search",description:"The label for save recent search button"}),removeRecentSearchButtonTitle:(0,l.T)({id:"theme.SearchModal.startScreen.removeRecentSearchButtonTitle",message:"Remove this search from history",description:"The label for remove recent search button"}),favoriteSearchesTitle:(0,l.T)({id:"theme.SearchModal.startScreen.favoriteSearchesTitle",message:"Favorite",description:"The title for favorite searches"}),removeFavoriteSearchButtonTitle:(0,l.T)({id:"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle",message:"Remove this search from favorites",description:"The label for remove favorite search button"})},errorScreen:{titleText:(0,l.T)({id:"theme.SearchModal.errorScreen.titleText",message:"Unable to fetch results",description:"The title for error screen of search modal"}),helpText:(0,l.T)({id:"theme.SearchModal.errorScreen.helpText",message:"You might want to check your network connection.",description:"The help text for error screen of search modal"})},footer:{selectText:(0,l.T)({id:"theme.SearchModal.footer.selectText",message:"to select",description:"The explanatory text of the action for the enter key"}),selectKeyAriaLabel:(0,l.T)({id:"theme.SearchModal.footer.selectKeyAriaLabel",message:"Enter key",description:"The ARIA label for the Enter key button that makes the selection"}),navigateText:(0,l.T)({id:"theme.SearchModal.footer.navigateText",message:"to navigate",description:"The explanatory text of the action for the Arrow up and Arrow down key"}),navigateUpKeyAriaLabel:(0,l.T)({id:"theme.SearchModal.footer.navigateUpKeyAriaLabel",message:"Arrow up",description:"The ARIA label for the Arrow up key button that makes the navigation"}),navigateDownKeyAriaLabel:(0,l.T)({id:"theme.SearchModal.footer.navigateDownKeyAriaLabel",message:"Arrow down",description:"The ARIA label for the Arrow down key button that makes the navigation"}),closeText:(0,l.T)({id:"theme.SearchModal.footer.closeText",message:"to close",description:"The explanatory text of the action for Escape key"}),closeKeyAriaLabel:(0,l.T)({id:"theme.SearchModal.footer.closeKeyAriaLabel",message:"Escape key",description:"The ARIA label for the Escape key button that close the modal"}),searchByText:(0,l.T)({id:"theme.SearchModal.footer.searchByText",message:"Search by",description:"The text explain that the search is making by Algolia"})},noResultsScreen:{noResultsText:(0,l.T)({id:"theme.SearchModal.noResultsScreen.noResultsText",message:"No results for",description:"The text explains that there are no results for the following search"}),suggestedQueryText:(0,l.T)({id:"theme.SearchModal.noResultsScreen.suggestedQueryText",message:"Try searching for",description:"The text for the suggested query when no results are found for the following search"}),reportMissingResultsText:(0,l.T)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsText",message:"Believe this query should return results?",description:"The text for the question where the user thinks there are missing results"}),reportMissingResultsLinkText:(0,l.T)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText",message:"Let us know.",description:"The text for the link to report missing results"})}},placeholder:(0,l.T)({id:"theme.SearchModal.placeholder",message:"Search docs",description:"The placeholder of the input of the DocSearch pop-up modal"})};let Ee=null;function Oe(){return Ee?Promise.resolve():Promise.all([n.e(8158).then(n.bind(n,8158)),Promise.all([n.e(1869),n.e(8913)]).then(n.bind(n,8913)),Promise.all([n.e(1869),n.e(416)]).then(n.bind(n,416))]).then((e=>{let[{DocSearchModal:t}]=e;Ee=t}))}function Ce(e){let{hit:t,children:n}=e;return(0,u.jsx)(Z.A,{to:t.url,children:n})}function Ae(e){let{state:t,onClose:n}=e;const r=(0,we.w)();return(0,u.jsx)(Z.A,{to:r(t.query),onClick:n,children:(0,u.jsx)(l.A,{id:"theme.SearchBar.seeAll",values:{count:t.context.nbHits},children:"See all {count} results"})})}function Pe(e){let{externalUrlRegex:t,...n}=e;const o=function(e){let{externalUrlRegex:t}=e;const n=(0,i.W6)(),[o]=(0,r.useState)((()=>({navigate(e){(0,ee.G)(t,e.itemUrl)?window.location.href=e.itemUrl:n.push(e.itemUrl)}})));return o}({externalUrlRegex:t}),a=function(e){let{contextualSearch:t,...n}=e;const r=Se(),o=n.searchParameters?.facetFilters??[],a=t?function(e,t){const n=e=>"string"==typeof e?[e]:e;return[...n(e),...n(t)]}(r,o):o;return{...n.searchParameters,facetFilters:a}}({...n}),s=function(e){const t=(0,xe.C)(),[n]=(0,r.useState)((()=>n=>e.transformItems?e.transformItems(n):n.map((e=>({...e,url:t(e.url)})))));return n}(n),l=function(){const{siteMetadata:{docusaurusVersion:e}}=(0,le.A)();return(0,r.useCallback)((t=>(t.addAlgoliaAgent("docusaurus",e),t)),[e])}(),c=(0,r.useRef)(null),d=(0,r.useRef)(null),[p,f]=(0,r.useState)(!1),[g,m]=(0,r.useState)(void 0),h=(0,r.useCallback)((()=>{if(!c.current){const e=document.createElement("div");c.current=e,document.body.insertBefore(e,document.body.firstChild)}}),[]),b=(0,r.useCallback)((()=>{h(),Oe().then((()=>f(!0)))}),[h]),v=(0,r.useCallback)((()=>{f(!1),d.current?.focus(),m(void 0)}),[]),y=(0,r.useCallback)((e=>{"f"===e.key&&(e.metaKey||e.ctrlKey)||(e.preventDefault(),m(e.key),b())}),[b]),w=function(e){let{closeModal:t}=e;return(0,r.useMemo)((()=>e=>{let{state:n}=e;return(0,u.jsx)(Ae,{state:n,onClose:t})}),[t])}({closeModal:v});return(0,ve.E8)({isOpen:p,onOpen:b,onClose:v,onInput:y,searchButtonRef:d}),(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(ye.A,{children:(0,u.jsx)("link",{rel:"preconnect",href:`https://${n.appId}-dsn.algolia.net`,crossOrigin:"anonymous"})}),(0,u.jsx)(ve.Bc,{onTouchStart:Oe,onFocus:Oe,onMouseOver:Oe,onClick:b,ref:d,translations:n.translations?.button??_e.button}),p&&Ee&&c.current&&(0,be.createPortal)((0,u.jsx)(Ee,{onClose:v,initialScrollY:window.scrollY,initialQuery:g,navigator:o,transformItems:s,hitComponent:Ce,transformSearchClient:l,...n.searchPagePath&&{resultsFooterComponent:w},placeholder:_e.placeholder,...n,translations:n.translations?.modal??_e.modal,searchParameters:a}),c.current)]})}function Te(){const{siteConfig:e}=(0,le.A)();return(0,u.jsx)(Pe,{...e.themeConfig.algolia})}const Ie={navbarSearchContainer:"navbarSearchContainer_Bca1"};function Re(e){let{children:t,className:n}=e;return(0,u.jsx)("div",{className:(0,o.A)(n,Ie.navbarSearchContainer),children:t})}var Ne=n(4070),Le=n(6972);var De=n(3886);function Me(e,t){return t.alternateDocVersions[e.name]??function(e){return e.docs.find((t=>t.id===e.mainDocId))}(e)}const Fe={default:ae,localeDropdown:function(e){let{mobile:t,dropdownItemsBefore:n,dropdownItemsAfter:r,queryString:o="",...a}=e;const{i18n:{currentLocale:s,locales:c,localeConfigs:d}}=(0,le.A)(),p=(0,ge.o)(),{search:f,hash:g}=(0,i.zy)(),m=[...n,...c.map((e=>{const n=`${`pathname://${p.createUrl({locale:e,fullyQualified:!1})}`}${f}${g}${o}`;return{label:d[e].label,lang:d[e].htmlLang,to:n,target:"_self",autoAddBaseUrl:!1,className:e===s?t?"menu__link--active":"dropdown__link--active":""}})),...r],h=t?(0,l.T)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):d[s].label;return(0,u.jsx)(fe,{...a,mobile:t,label:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(me,{className:he}),h]}),items:m})},search:function(e){let{mobile:t,className:n}=e;return t?null:(0,u.jsx)(Re,{className:n,children:(0,u.jsx)(Te,{})})},dropdown:fe,html:function(e){let{value:t,className:n,mobile:r=!1,isDropdownItem:a=!1}=e;const s=a?"li":"div";return(0,u.jsx)(s,{className:(0,o.A)({navbar__item:!r&&!a,"menu__list-item":r},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){let{docId:t,label:n,docsPluginId:r,...o}=e;const{activeDoc:a}=(0,Ne.zK)(r),s=(0,Le.QB)(t,r),i=a?.path===s?.path;return null===s||s.unlisted&&!i?null:(0,u.jsx)(ae,{exact:!0,...o,isActive:()=>i||!!a?.sidebar&&a.sidebar===s.sidebar,label:n??s.id,to:s.path})},docSidebar:function(e){let{sidebarId:t,label:n,docsPluginId:r,...o}=e;const{activeDoc:a}=(0,Ne.zK)(r),s=(0,Le.fW)(t,r).link;if(!s)throw new Error(`DocSidebarNavbarItem: Sidebar with ID "${t}" doesn't have anything to be linked to.`);return(0,u.jsx)(ae,{exact:!0,...o,isActive:()=>a?.sidebar===t,label:n??s.label,to:s.path})},docsVersion:function(e){let{label:t,to:n,docsPluginId:r,...o}=e;const a=(0,Le.Vd)(r)[0],s=t??a.label,i=n??(e=>e.docs.find((t=>t.id===e.mainDocId)))(a).path;return(0,u.jsx)(ae,{...o,label:s,to:i})},docsVersionDropdown:function(e){let{mobile:t,docsPluginId:n,dropdownActiveClassDisabled:r,dropdownItemsBefore:o,dropdownItemsAfter:a,...s}=e;const{search:c,hash:d}=(0,i.zy)(),p=(0,Ne.zK)(n),f=(0,Ne.jh)(n),{savePreferredVersionName:g}=(0,De.g1)(n),m=[...o,...f.map((function(e){const t=Me(e,p);return{label:e.label,to:`${t.path}${c}${d}`,isActive:()=>e===p.activeVersion,onClick:()=>g(e.name)}})),...a],h=(0,Le.Vd)(n)[0],b=t&&m.length>1?(0,l.T)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):h.label,v=t&&m.length>1?void 0:Me(h,p).path;return m.length<=1?(0,u.jsx)(ae,{...s,mobile:t,label:b,to:v,isActive:r?()=>!1:void 0}):(0,u.jsx)(fe,{...s,mobile:t,label:b,to:v,items:m,isActive:r?()=>!1:void 0})}};function Be(e){let{type:t,...n}=e;const r=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(t,n),o=Fe[r];if(!o)throw new Error(`No NavbarItem component found for type "${t}".`);return(0,u.jsx)(o,{...n})}function ze(){const e=(0,A.M)(),t=(0,w.p)().navbar.items;return(0,u.jsx)("ul",{className:"menu__list",children:t.map(((t,n)=>(0,r.createElement)(Be,{mobile:!0,...t,onClick:()=>e.toggle(),key:n})))})}function Ue(e){return(0,u.jsx)("button",{...e,type:"button",className:"clean-btn navbar-sidebar__back",children:(0,u.jsx)(l.A,{id:"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",description:"The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)",children:"\u2190 Back to main menu"})})}function qe(){const e=0===(0,w.p)().navbar.items.length,t=D();return(0,u.jsxs)(u.Fragment,{children:[!e&&(0,u.jsx)(Ue,{onClick:()=>t.hide()}),t.content]})}function $e(){const e=(0,A.M)();var t;return void 0===(t=e.shown)&&(t=!0),(0,r.useEffect)((()=>(document.body.style.overflow=t?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[t]),e.shouldRender?(0,u.jsx)(M,{header:(0,u.jsx)(Y,{}),primaryMenu:(0,u.jsx)(ze,{}),secondaryMenu:(0,u.jsx)(qe,{})}):null}const He={navbarHideable:"navbarHideable_m1mJ",navbarHidden:"navbarHidden_jGov"};function Ve(e){return(0,u.jsx)("div",{role:"presentation",...e,className:(0,o.A)("navbar-sidebar__backdrop",e.className)})}function Ge(e){let{children:t}=e;const{navbar:{hideOnScroll:n,style:a}}=(0,w.p)(),s=(0,A.M)(),{navbarRef:i,isNavbarVisible:d}=function(e){const[t,n]=(0,r.useState)(e),o=(0,r.useRef)(!1),a=(0,r.useRef)(0),s=(0,r.useCallback)((e=>{null!==e&&(a.current=e.getBoundingClientRect().height)}),[]);return(0,P.Mq)(((t,r)=>{let{scrollY:s}=t;if(!e)return;if(s=i?n(!1):s+c{if(!e)return;const r=t.location.hash;if(r?document.getElementById(r.substring(1)):void 0)return o.current=!0,void n(!1);n(!0)})),{navbarRef:s,isNavbarVisible:t}}(n);return(0,u.jsxs)("nav",{ref:i,"aria-label":(0,l.T)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,o.A)("navbar","navbar--fixed-top",n&&[He.navbarHideable,!d&&He.navbarHidden],{"navbar--dark":"dark"===a,"navbar--primary":"primary"===a,"navbar-sidebar--show":s.shown}),children:[t,(0,u.jsx)(Ve,{onClick:s.toggle}),(0,u.jsx)($e,{})]})}var We=n(440);const Ke={errorBoundaryError:"errorBoundaryError_a6uf",errorBoundaryFallback:"errorBoundaryFallback_VBag"};function Qe(e){return(0,u.jsx)("button",{type:"button",...e,children:(0,u.jsx)(l.A,{id:"theme.ErrorPageContent.tryAgain",description:"The label of the button to try again rendering when the React error boundary captures an error",children:"Try again"})})}function Ye(e){let{error:t}=e;const n=(0,We.rA)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,u.jsx)("p",{className:Ke.errorBoundaryError,children:n})}class Ze extends r.Component{componentDidCatch(e,t){throw this.props.onError(e,t)}render(){return this.props.children}}const Je="right";function Xe(e){let{width:t=30,height:n=30,className:r,...o}=e;return(0,u.jsx)("svg",{className:r,width:t,height:n,viewBox:"0 0 30 30","aria-hidden":"true",...o,children:(0,u.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"})})}function et(){const{toggle:e,shown:t}=(0,A.M)();return(0,u.jsx)("button",{onClick:e,"aria-label":(0,l.T)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":t,className:"navbar__toggle clean-btn",type:"button",children:(0,u.jsx)(Xe,{})})}const tt={colorModeToggle:"colorModeToggle_DEke"};function nt(e){let{items:t}=e;return(0,u.jsx)(u.Fragment,{children:t.map(((e,t)=>(0,u.jsx)(Ze,{onError:t=>new Error(`A theme navbar item failed to render.\nPlease double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:\n${JSON.stringify(e,null,2)}`,{cause:t}),children:(0,u.jsx)(Be,{...e})},t)))})}function rt(e){let{left:t,right:n}=e;return(0,u.jsxs)("div",{className:"navbar__inner",children:[(0,u.jsx)("div",{className:"navbar__items",children:t}),(0,u.jsx)("div",{className:"navbar__items navbar__items--right",children:n})]})}function ot(){const e=(0,A.M)(),t=(0,w.p)().navbar.items,[n,r]=function(e){function t(e){return"left"===(e.position??Je)}return[e.filter(t),e.filter((e=>!t(e)))]}(t),o=t.find((e=>"search"===e.type));return(0,u.jsx)(rt,{left:(0,u.jsxs)(u.Fragment,{children:[!e.disabled&&(0,u.jsx)(et,{}),(0,u.jsx)(K,{}),(0,u.jsx)(nt,{items:n})]}),right:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(nt,{items:r}),(0,u.jsx)(G,{className:tt.colorModeToggle}),!o&&(0,u.jsx)(Re,{children:(0,u.jsx)(Te,{})})]})})}function at(){return(0,u.jsx)(Ge,{children:(0,u.jsx)(ot,{})})}function st(e){let{item:t}=e;const{to:n,href:r,label:a,prependBaseUrlToHref:s,className:i,...l}=t,c=(0,J.Ay)(n),d=(0,J.Ay)(r,{forcePrependBaseUrl:!0});return(0,u.jsxs)(Z.A,{className:(0,o.A)("footer__link-item",i),...r?{href:s?d:r}:{to:c},...l,children:[a,r&&!(0,X.A)(r)&&(0,u.jsx)(te.A,{})]})}function it(e){let{item:t}=e;return t.html?(0,u.jsx)("li",{className:(0,o.A)("footer__item",t.className),dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)("li",{className:"footer__item",children:(0,u.jsx)(st,{item:t})},t.href??t.to)}function lt(e){let{column:t}=e;return(0,u.jsxs)("div",{className:(0,o.A)("col footer__col",t.className),children:[(0,u.jsx)("div",{className:"footer__title",children:t.title}),(0,u.jsx)("ul",{className:"footer__items clean-list",children:t.items.map(((e,t)=>(0,u.jsx)(it,{item:e},t)))})]})}function ct(e){let{columns:t}=e;return(0,u.jsx)("div",{className:"row footer__links",children:t.map(((e,t)=>(0,u.jsx)(lt,{column:e},t)))})}function ut(){return(0,u.jsx)("span",{className:"footer__link-separator",children:"\xb7"})}function dt(e){let{item:t}=e;return t.html?(0,u.jsx)("span",{className:(0,o.A)("footer__link-item",t.className),dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)(st,{item:t})}function pt(e){let{links:t}=e;return(0,u.jsx)("div",{className:"footer__links text--center",children:(0,u.jsx)("div",{className:"footer__links",children:t.map(((e,n)=>(0,u.jsxs)(r.Fragment,{children:[(0,u.jsx)(dt,{item:e}),t.length!==n+1&&(0,u.jsx)(ut,{})]},n)))})})}function ft(e){let{links:t}=e;return function(e){return"title"in e[0]}(t)?(0,u.jsx)(ct,{columns:t}):(0,u.jsx)(pt,{links:t})}var gt=n(1122);const mt={footerLogoLink:"footerLogoLink_BH7S"};function ht(e){let{logo:t}=e;const{withBaseUrl:n}=(0,J.hH)(),r={light:n(t.src),dark:n(t.srcDark??t.src)};return(0,u.jsx)(gt.A,{className:(0,o.A)("footer__logo",t.className),alt:t.alt,sources:r,width:t.width,height:t.height,style:t.style})}function bt(e){let{logo:t}=e;return t.href?(0,u.jsx)(Z.A,{href:t.href,className:mt.footerLogoLink,target:t.target,children:(0,u.jsx)(ht,{logo:t})}):(0,u.jsx)(ht,{logo:t})}function vt(e){let{copyright:t}=e;return(0,u.jsx)("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}})}function yt(e){let{style:t,links:n,logo:r,copyright:a}=e;return(0,u.jsx)("footer",{className:(0,o.A)("footer",{"footer--dark":"dark"===t}),children:(0,u.jsxs)("div",{className:"container container-fluid",children:[n,(r||a)&&(0,u.jsxs)("div",{className:"footer__bottom text--center",children:[r&&(0,u.jsx)("div",{className:"margin-bottom--sm",children:r}),a]})]})})}function wt(){const{footer:e}=(0,w.p)();if(!e)return null;const{copyright:t,links:n,logo:r,style:o}=e;return(0,u.jsx)(yt,{style:o,links:n&&n.length>0&&(0,u.jsx)(ft,{links:n}),logo:r&&(0,u.jsx)(bt,{logo:r}),copyright:t&&(0,u.jsx)(vt,{copyright:t})})}const xt=r.memo(wt),jt=(0,T.fM)([F.a,x.o,P.Tv,De.VQ,s.Jx,function(e){let{children:t}=e;return(0,u.jsx)(I.y_,{children:(0,u.jsx)(A.e,{children:(0,u.jsx)(N,{children:t})})})}]);function kt(e){let{children:t}=e;return(0,u.jsx)(jt,{children:t})}var St=n(1107);function _t(e){let{error:t,tryAgain:n}=e;return(0,u.jsx)("main",{className:"container margin-vert--xl",children:(0,u.jsx)("div",{className:"row",children:(0,u.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,u.jsx)(St.A,{as:"h1",className:"hero__title",children:(0,u.jsx)(l.A,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed",children:"This page crashed."})}),(0,u.jsx)("div",{className:"margin-vert--lg",children:(0,u.jsx)(Qe,{onClick:n,className:"button button--primary shadow--lw"})}),(0,u.jsx)("hr",{}),(0,u.jsx)("div",{className:"margin-vert--md",children:(0,u.jsx)(Ye,{error:t})})]})})})}const Et={mainWrapper:"mainWrapper_z2l0"};function Ot(e){const{children:t,noFooter:n,wrapperClassName:r,title:i,description:l}=e;return(0,b.J)(),(0,u.jsxs)(kt,{children:[(0,u.jsx)(s.be,{title:i,description:l}),(0,u.jsx)(y,{}),(0,u.jsx)(C,{}),(0,u.jsx)(at,{}),(0,u.jsx)("div",{id:d,className:(0,o.A)(h.G.wrapper.main,Et.mainWrapper,r),children:(0,u.jsx)(a.A,{fallback:e=>(0,u.jsx)(_t,{...e}),children:t})}),!n&&(0,u.jsx)(xt,{})]})}},3465:(e,t,n)=>{"use strict";n.d(t,{A:()=>u});n(6540);var r=n(8774),o=n(6025),a=n(4586),s=n(6342),i=n(1122),l=n(4848);function c(e){let{logo:t,alt:n,imageClassName:r}=e;const a={light:(0,o.Ay)(t.src),dark:(0,o.Ay)(t.srcDark||t.src)},s=(0,l.jsx)(i.A,{className:t.className,sources:a,height:t.height,width:t.width,alt:n,style:t.style});return r?(0,l.jsx)("div",{className:r,children:s}):s}function u(e){const{siteConfig:{title:t}}=(0,a.A)(),{navbar:{title:n,logo:i}}=(0,s.p)(),{imageClassName:u,titleClassName:d,...p}=e,f=(0,o.Ay)(i?.href||"/"),g=n?"":t,m=i?.alt??g;return(0,l.jsxs)(r.A,{to:f,...p,...i?.target&&{target:i.target},children:[i&&(0,l.jsx)(c,{logo:i,alt:m,imageClassName:u}),null!=n&&(0,l.jsx)("b",{className:d,children:n})]})}},1463:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});n(6540);var r=n(5260),o=n(4848);function a(e){let{locale:t,version:n,tag:a}=e;const s=t;return(0,o.jsxs)(r.A,{children:[t&&(0,o.jsx)("meta",{name:"docusaurus_locale",content:t}),n&&(0,o.jsx)("meta",{name:"docusaurus_version",content:n}),a&&(0,o.jsx)("meta",{name:"docusaurus_tag",content:a}),s&&(0,o.jsx)("meta",{name:"docsearch:language",content:s}),n&&(0,o.jsx)("meta",{name:"docsearch:version",content:n}),a&&(0,o.jsx)("meta",{name:"docsearch:docusaurus_tag",content:a})]})}},1122:(e,t,n)=>{"use strict";n.d(t,{A:()=>u});var r=n(6540),o=n(4164),a=n(2303),s=n(5293);const i={themedComponent:"themedComponent_mlkZ","themedComponent--light":"themedComponent--light_NVdE","themedComponent--dark":"themedComponent--dark_xIcU"};var l=n(4848);function c(e){let{className:t,children:n}=e;const c=(0,a.A)(),{colorMode:u}=(0,s.G)();return(0,l.jsx)(l.Fragment,{children:(c?"dark"===u?["dark"]:["light"]:["light","dark"]).map((e=>{const a=n({theme:e,className:(0,o.A)(t,i.themedComponent,i[`themedComponent--${e}`])});return(0,l.jsx)(r.Fragment,{children:a},e)}))})}function u(e){const{sources:t,className:n,alt:r,...o}=e;return(0,l.jsx)(c,{className:n,children:e=>{let{theme:n,className:a}=e;return(0,l.jsx)("img",{src:t[n],alt:r,className:a,...o})}})}},1422:(e,t,n)=>{"use strict";n.d(t,{N:()=>b,u:()=>c});var r=n(6540),o=n(2303),a=n(205),s=n(3109),i=n(4848);const l="ease-in-out";function c(e){let{initialState:t}=e;const[n,o]=(0,r.useState)(t??!1),a=(0,r.useCallback)((()=>{o((e=>!e))}),[]);return{collapsed:n,setCollapsed:o,toggleCollapsed:a}}const u={display:"none",overflow:"hidden",height:"0px"},d={display:"block",overflow:"visible",height:"auto"};function p(e,t){const n=t?u:d;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function f(e){let{collapsibleRef:t,collapsed:n,animation:o}=e;const a=(0,r.useRef)(!1);(0,r.useEffect)((()=>{const e=t.current;function r(){const t=e.scrollHeight,n=o?.duration??function(e){if((0,s.O)())return 1;const t=e/36;return Math.round(10*(4+15*t**.25+t/5))}(t);return{transition:`height ${n}ms ${o?.easing??l}`,height:`${t}px`}}function i(){const t=r();e.style.transition=t.transition,e.style.height=t.height}if(!a.current)return p(e,n),void(a.current=!0);return e.style.willChange="height",function(){const t=requestAnimationFrame((()=>{n?(i(),requestAnimationFrame((()=>{e.style.height=u.height,e.style.overflow=u.overflow}))):(e.style.display="block",requestAnimationFrame((()=>{i()})))}));return()=>cancelAnimationFrame(t)}()}),[t,n,o])}function g(e){let{collapsed:t,isBrowser:n}=e;if(!n)return t?u:d}function m(e){let{as:t="div",collapsed:n,children:a,animation:s,onCollapseTransitionEnd:l,className:c,disableSSRStyle:u}=e;const d=(0,o.A)(),m=(0,r.useRef)(null);return f({collapsibleRef:m,collapsed:n,animation:s}),(0,i.jsx)(t,{ref:m,style:u?void 0:g({collapsed:n,isBrowser:d}),onTransitionEnd:e=>{"height"===e.propertyName&&(p(m.current,n),l?.(n))},className:c,children:a})}function h(e){let{collapsed:t,...n}=e;const[o,s]=(0,r.useState)(!t),[l,c]=(0,r.useState)(t);return(0,a.A)((()=>{t||s(!0)}),[t]),(0,a.A)((()=>{o&&c(t)}),[o,t]),o?(0,i.jsx)(m,{...n,collapsed:l}):null}function b(e){let{lazy:t,...n}=e;const r=t?h:m;return(0,i.jsx)(r,{...n})}},5041:(e,t,n)=>{"use strict";n.d(t,{M:()=>m,o:()=>g});var r=n(6540),o=n(2303),a=n(679),s=n(9532),i=n(6342),l=n(4848);const c=(0,a.Wf)("docusaurus.announcement.dismiss"),u=(0,a.Wf)("docusaurus.announcement.id"),d=()=>"true"===c.get(),p=e=>c.set(String(e)),f=r.createContext(null);function g(e){let{children:t}=e;const n=function(){const{announcementBar:e}=(0,i.p)(),t=(0,o.A)(),[n,a]=(0,r.useState)((()=>!!t&&d()));(0,r.useEffect)((()=>{a(d())}),[]);const s=(0,r.useCallback)((()=>{p(!0),a(!0)}),[]);return(0,r.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=u.get();"annoucement-bar"===n&&(n="announcement-bar");const r=t!==n;u.set(t),r&&p(!1),!r&&d()||a(!1)}),[e]),(0,r.useMemo)((()=>({isActive:!!e&&!n,close:s})),[e,n,s])}();return(0,l.jsx)(f.Provider,{value:n,children:t})}function m(){const e=(0,r.useContext)(f);if(!e)throw new s.dV("AnnouncementBarProvider");return e}},5293:(e,t,n)=>{"use strict";n.d(t,{G:()=>b,a:()=>h});var r=n(6540),o=n(8193),a=n(9532),s=n(679),i=n(6342),l=n(4848);const c=r.createContext(void 0),u="theme",d=(0,s.Wf)(u),p={light:"light",dark:"dark"},f=e=>e===p.dark?p.dark:p.light,g=e=>o.A.canUseDOM?f(document.documentElement.getAttribute("data-theme")):f(e),m=e=>{d.set(f(e))};function h(e){let{children:t}=e;const n=function(){const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:n}}=(0,i.p)(),[o,a]=(0,r.useState)(g(e));(0,r.useEffect)((()=>{t&&d.del()}),[t]);const s=(0,r.useCallback)((function(t,r){void 0===r&&(r={});const{persist:o=!0}=r;t?(a(t),o&&m(t)):(a(n?window.matchMedia("(prefers-color-scheme: dark)").matches?p.dark:p.light:e),d.del())}),[n,e]);(0,r.useEffect)((()=>{document.documentElement.setAttribute("data-theme",f(o))}),[o]),(0,r.useEffect)((()=>{if(t)return;const e=e=>{if(e.key!==u)return;const t=d.get();null!==t&&s(f(t))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)}),[t,s]);const l=(0,r.useRef)(!1);return(0,r.useEffect)((()=>{if(t&&!n)return;const e=window.matchMedia("(prefers-color-scheme: dark)"),r=()=>{window.matchMedia("print").matches||l.current?l.current=window.matchMedia("print").matches:s(null)};return e.addListener(r),()=>e.removeListener(r)}),[s,t,n]),(0,r.useMemo)((()=>({colorMode:o,setColorMode:s,get isDarkTheme(){return o===p.dark},setLightTheme(){s(p.light)},setDarkTheme(){s(p.dark)}})),[o,s])}();return(0,l.jsx)(c.Provider,{value:n,children:t})}function b(){const e=(0,r.useContext)(c);if(null==e)throw new a.dV("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},2069:(e,t,n)=>{"use strict";n.d(t,{M:()=>f,e:()=>p});var r=n(6540),o=n(5600),a=n(4581),s=n(7485),i=n(6342),l=n(9532),c=n(4848);const u=r.createContext(void 0);function d(){const e=function(){const e=(0,o.YL)(),{items:t}=(0,i.p)().navbar;return 0===t.length&&!e.component}(),t=(0,a.l)(),n=!e&&"mobile"===t,[l,c]=(0,r.useState)(!1);(0,s.$Z)((()=>{if(l)return c(!1),!1}));const u=(0,r.useCallback)((()=>{c((e=>!e))}),[]);return(0,r.useEffect)((()=>{"desktop"===t&&c(!1)}),[t]),(0,r.useMemo)((()=>({disabled:e,shouldRender:n,toggle:u,shown:l})),[e,n,u,l])}function p(e){let{children:t}=e;const n=d();return(0,c.jsx)(u.Provider,{value:n,children:t})}function f(){const e=r.useContext(u);if(void 0===e)throw new l.dV("NavbarMobileSidebarProvider");return e}},5600:(e,t,n)=>{"use strict";n.d(t,{GX:()=>c,YL:()=>l,y_:()=>i});var r=n(6540),o=n(9532),a=n(4848);const s=r.createContext(null);function i(e){let{children:t}=e;const n=(0,r.useState)({component:null,props:null});return(0,a.jsx)(s.Provider,{value:n,children:t})}function l(){const e=(0,r.useContext)(s);if(!e)throw new o.dV("NavbarSecondaryMenuContentProvider");return e[0]}function c(e){let{component:t,props:n}=e;const a=(0,r.useContext)(s);if(!a)throw new o.dV("NavbarSecondaryMenuContentProvider");const[,i]=a,l=(0,o.Be)(n);return(0,r.useEffect)((()=>{i({component:t,props:l})}),[i,t,l]),(0,r.useEffect)((()=>()=>i({component:null,props:null})),[i]),null}},4090:(e,t,n)=>{"use strict";n.d(t,{w:()=>o,J:()=>a});var r=n(6540);const o="navigation-with-keyboard";function a(){(0,r.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(o),"mousedown"===e.type&&document.body.classList.remove(o)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(o),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},4255:(e,t,n)=>{"use strict";n.d(t,{b:()=>i,w:()=>l});var r=n(6540),o=n(4586),a=n(7485);const s="q";function i(){return(0,a.l)(s)}function l(){const{siteConfig:{baseUrl:e,themeConfig:t}}=(0,o.A)(),{algolia:{searchPagePath:n}}=t;return(0,r.useCallback)((t=>`${e}${n}?${s}=${encodeURIComponent(t)}`),[e,n])}},4581:(e,t,n)=>{"use strict";n.d(t,{l:()=>i});var r=n(6540),o=n(8193);const a={desktop:"desktop",mobile:"mobile",ssr:"ssr"},s=996;function i(e){let{desktopBreakpoint:t=s}=void 0===e?{}:e;const[n,i]=(0,r.useState)((()=>"ssr"));return(0,r.useEffect)((()=>{function e(){i(function(e){if(!o.A.canUseDOM)throw new Error("getWindowSize() should only be called after React hydration");return window.innerWidth>e?a.desktop:a.mobile}(t))}return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[t]),n}},7559:(e,t,n)=>{"use strict";n.d(t,{G:()=>r});const r={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-page",blogAuthorsListPage:"blog-authors-list-page",blogAuthorsPostsPage:"blog-authors-posts-page",docsDocPage:"docs-doc-page",docsTagsListPage:"docs-tags-list-page",docsTagDocListPage:"docs-tags-doc-list-page",mdxPage:"mdx-page"},wrapper:{main:"main-wrapper",blogPages:"blog-wrapper",docsPages:"docs-wrapper",mdxPages:"mdx-wrapper"},common:{editThisPage:"theme-edit-this-page",lastUpdated:"theme-last-updated",backToTopButton:"theme-back-to-top-button",codeBlock:"theme-code-block",admonition:"theme-admonition",unlistedBanner:"theme-unlisted-banner",draftBanner:"theme-draft-banner",admonitionType:e=>`theme-admonition-${e}`},layout:{},docs:{docVersionBanner:"theme-doc-version-banner",docVersionBadge:"theme-doc-version-badge",docBreadcrumbs:"theme-doc-breadcrumbs",docMarkdown:"theme-doc-markdown",docTocMobile:"theme-doc-toc-mobile",docTocDesktop:"theme-doc-toc-desktop",docFooter:"theme-doc-footer",docFooterTagsRow:"theme-doc-footer-tags-row",docFooterEditMetaRow:"theme-doc-footer-edit-meta-row",docSidebarContainer:"theme-doc-sidebar-container",docSidebarMenu:"theme-doc-sidebar-menu",docSidebarItemCategory:"theme-doc-sidebar-item-category",docSidebarItemLink:"theme-doc-sidebar-item-link",docSidebarItemCategoryLevel:e=>`theme-doc-sidebar-item-category-level-${e}`,docSidebarItemLinkLevel:e=>`theme-doc-sidebar-item-link-level-${e}`},blog:{blogFooterTagsRow:"theme-blog-footer-tags-row",blogFooterEditMetaRow:"theme-blog-footer-edit-meta-row"},pages:{pageFooterEditMetaRow:"theme-pages-footer-edit-meta-row"}}},3109:(e,t,n)=>{"use strict";function r(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}n.d(t,{O:()=>r})},481:(e,t,n)=>{"use strict";n.d(t,{s:()=>o});var r=n(4586);function o(e){const{siteConfig:t}=(0,r.A)(),{title:n,titleDelimiter:o}=t;return e?.trim().length?`${e.trim()} ${o} ${n}`:n}},7485:(e,t,n)=>{"use strict";n.d(t,{$Z:()=>s,aZ:()=>l,l:()=>c});var r=n(6540),o=n(6347),a=n(9532);function s(e){!function(e){const t=(0,o.W6)(),n=(0,a._q)(e);(0,r.useEffect)((()=>t.block(((e,t)=>n(e,t)))),[t,n])}(((t,n)=>{if("POP"===n)return e(t,n)}))}function i(e){const t=(0,o.W6)();return(0,r.useSyncExternalStore)(t.listen,(()=>e(t)),(()=>e(t)))}function l(e){return i((t=>null===e?null:new URLSearchParams(t.location.search).get(e)))}function c(e){const t=l(e)??"",n=function(e){const t=(0,o.W6)();return(0,r.useCallback)(((n,r)=>{const o=new URLSearchParams(t.location.search);n?o.set(e,n):o.delete(e),(r?.push?t.push:t.replace)({search:o.toString()})}),[e,t])}(e);return[t,n]}},1682:(e,t,n)=>{"use strict";function r(e,t){return void 0===t&&(t=(e,t)=>e===t),e.filter(((n,r)=>e.findIndex((e=>t(e,n)))!==r))}function o(e){return Array.from(new Set(e))}n.d(t,{XI:()=>r,sb:()=>o})},9024:(e,t,n)=>{"use strict";n.d(t,{e3:()=>f,be:()=>d,Jx:()=>g});var r=n(6540),o=n(4164),a=n(5260),s=n(3102);function i(){const e=r.useContext(s.o);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}var l=n(6025),c=n(481),u=n(4848);function d(e){let{title:t,description:n,keywords:r,image:o,children:s}=e;const i=(0,c.s)(t),{withBaseUrl:d}=(0,l.hH)(),p=o?d(o,{absolute:!0}):void 0;return(0,u.jsxs)(a.A,{children:[t&&(0,u.jsx)("title",{children:i}),t&&(0,u.jsx)("meta",{property:"og:title",content:i}),n&&(0,u.jsx)("meta",{name:"description",content:n}),n&&(0,u.jsx)("meta",{property:"og:description",content:n}),r&&(0,u.jsx)("meta",{name:"keywords",content:Array.isArray(r)?r.join(","):r}),p&&(0,u.jsx)("meta",{property:"og:image",content:p}),p&&(0,u.jsx)("meta",{name:"twitter:image",content:p}),s]})}const p=r.createContext(void 0);function f(e){let{className:t,children:n}=e;const s=r.useContext(p),i=(0,o.A)(s,t);return(0,u.jsxs)(p.Provider,{value:i,children:[(0,u.jsx)(a.A,{children:(0,u.jsx)("html",{className:i})}),n]})}function g(e){let{children:t}=e;const n=i(),r=`plugin-${n.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"")}`;const a=`plugin-id-${n.plugin.id}`;return(0,u.jsx)(f,{className:(0,o.A)(r,a),children:t})}},9532:(e,t,n)=>{"use strict";n.d(t,{Be:()=>c,ZC:()=>i,_q:()=>s,dV:()=>l,fM:()=>u});var r=n(6540),o=n(205),a=n(4848);function s(e){const t=(0,r.useRef)(e);return(0,o.A)((()=>{t.current=e}),[e]),(0,r.useCallback)((function(){return t.current(...arguments)}),[])}function i(e){const t=(0,r.useRef)();return(0,o.A)((()=>{t.current=e})),t.current}class l extends Error{constructor(e,t){super(),this.name="ReactContextError",this.message=`Hook ${this.stack?.split("\n")[1]?.match(/at (?:\w+\.)?(?\w+)/)?.groups.name??""} is called outside the <${e}>. ${t??""}`}}function c(e){const t=Object.entries(e);return t.sort(((e,t)=>e[0].localeCompare(t[0]))),(0,r.useMemo)((()=>e),t.flat())}function u(e){return t=>{let{children:n}=t;return(0,a.jsx)(a.Fragment,{children:e.reduceRight(((e,t)=>(0,a.jsx)(t,{children:e})),n)})}}},1252:(e,t,n)=>{"use strict";function r(e,t){return void 0!==e&&void 0!==t&&new RegExp(e,"gi").test(t)}n.d(t,{G:()=>r})},9169:(e,t,n)=>{"use strict";n.d(t,{Dt:()=>i,ys:()=>s});var r=n(6540),o=n(8328),a=n(4586);function s(e,t){const n=e=>(!e||e.endsWith("/")?e:`${e}/`)?.toLowerCase();return n(e)===n(t)}function i(){const{baseUrl:e}=(0,a.A)().siteConfig;return(0,r.useMemo)((()=>function(e){let{baseUrl:t,routes:n}=e;function r(e){return e.path===t&&!0===e.exact}function o(e){return e.path===t&&!e.exact}return function e(t){if(0===t.length)return;return t.find(r)||e(t.filter(o).flatMap((e=>e.routes??[])))}(n)}({routes:o.A,baseUrl:e})),[e])}},3104:(e,t,n)=>{"use strict";n.d(t,{Mq:()=>f,Tv:()=>u,a_:()=>g,gk:()=>m});var r=n(6540),o=n(8193),a=n(2303),s=n(205),i=n(9532),l=n(4848);const c=r.createContext(void 0);function u(e){let{children:t}=e;const n=function(){const e=(0,r.useRef)(!0);return(0,r.useMemo)((()=>({scrollEventsEnabledRef:e,enableScrollEvents:()=>{e.current=!0},disableScrollEvents:()=>{e.current=!1}})),[])}();return(0,l.jsx)(c.Provider,{value:n,children:t})}function d(){const e=(0,r.useContext)(c);if(null==e)throw new i.dV("ScrollControllerProvider");return e}const p=()=>o.A.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function f(e,t){void 0===t&&(t=[]);const{scrollEventsEnabledRef:n}=d(),o=(0,r.useRef)(p()),a=(0,i._q)(e);(0,r.useEffect)((()=>{const e=()=>{if(!n.current)return;const e=p();a(e,o.current),o.current=e},t={passive:!0};return e(),window.addEventListener("scroll",e,t),()=>window.removeEventListener("scroll",e,t)}),[a,n,...t])}function g(){const e=d(),t=function(){const e=(0,r.useRef)({elem:null,top:0}),t=(0,r.useCallback)((t=>{e.current={elem:t,top:t.getBoundingClientRect().top}}),[]),n=(0,r.useCallback)((()=>{const{current:{elem:t,top:n}}=e;if(!t)return{restored:!1};const r=t.getBoundingClientRect().top-n;return r&&window.scrollBy({left:0,top:r}),e.current={elem:null,top:0},{restored:0!==r}}),[]);return(0,r.useMemo)((()=>({save:t,restore:n})),[n,t])}(),n=(0,r.useRef)(void 0),o=(0,r.useCallback)((r=>{t.save(r),e.disableScrollEvents(),n.current=()=>{const{restored:r}=t.restore();if(n.current=void 0,r){const t=()=>{e.enableScrollEvents(),window.removeEventListener("scroll",t)};window.addEventListener("scroll",t)}else e.enableScrollEvents()}}),[e,t]);return(0,s.A)((()=>{queueMicrotask((()=>n.current?.()))})),{blockElementScrollPositionUntilNextRender:o}}function m(){const e=(0,r.useRef)(null),t=(0,a.A)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:n=>{e.current=t?function(e){return window.scrollTo({top:e,behavior:"smooth"}),()=>{}}(n):function(e){let t=null;const n=document.documentElement.scrollTop>e;return function r(){const o=document.documentElement.scrollTop;(n&&o>e||!n&&ot&&cancelAnimationFrame(t)}(n)},cancelScroll:()=>e.current?.()}}},2967:(e,t,n)=>{"use strict";n.d(t,{C:()=>r});const r="default"},679:(e,t,n)=>{"use strict";n.d(t,{Wf:()=>u,Dv:()=>d});var r=n(6540);const o=JSON.parse('{"N":"localStorage","M":""}'),a=o.N;function s(e){let{key:t,oldValue:n,newValue:r,storage:o}=e;if(n===r)return;const a=document.createEvent("StorageEvent");a.initStorageEvent("storage",!1,!1,t,n,r,window.location.href,o),window.dispatchEvent(a)}function i(e){if(void 0===e&&(e=a),"undefined"==typeof window)throw new Error("Browser storage is not available on Node.js/Docusaurus SSR process.");if("none"===e)return null;try{return window[e]}catch(n){return t=n,l||(console.warn("Docusaurus browser storage is not available.\nPossible reasons: running Docusaurus in an iframe, in an incognito browser session, or using too strict browser privacy settings.",t),l=!0),null}var t}let l=!1;const c={get:()=>null,set:()=>{},del:()=>{},listen:()=>()=>{}};function u(e,t){const n=`${e}${o.M}`;if("undefined"==typeof window)return function(e){function t(){throw new Error(`Illegal storage API usage for storage key "${e}".\nDocusaurus storage APIs are not supposed to be called on the server-rendering process.\nPlease only call storage APIs in effects and event handlers.`)}return{get:t,set:t,del:t,listen:t}}(n);const r=i(t?.persistence);return null===r?c:{get:()=>{try{return r.getItem(n)}catch(e){return console.error(`Docusaurus storage error, can't get key=${n}`,e),null}},set:e=>{try{const t=r.getItem(n);r.setItem(n,e),s({key:n,oldValue:t,newValue:e,storage:r})}catch(t){console.error(`Docusaurus storage error, can't set ${n}=${e}`,t)}},del:()=>{try{const e=r.getItem(n);r.removeItem(n),s({key:n,oldValue:e,newValue:null,storage:r})}catch(e){console.error(`Docusaurus storage error, can't delete key=${n}`,e)}},listen:e=>{try{const t=t=>{t.storageArea===r&&t.key===n&&e(t)};return window.addEventListener("storage",t),()=>window.removeEventListener("storage",t)}catch(t){return console.error(`Docusaurus storage error, can't listen for changes of key=${n}`,t),()=>{}}}}}function d(e,t){const n=(0,r.useRef)((()=>null===e?c:u(e,t))).current(),o=(0,r.useCallback)((e=>"undefined"==typeof window?()=>{}:n.listen(e)),[n]);return[(0,r.useSyncExternalStore)(o,(()=>n.get()),(()=>null)),n]}},2131:(e,t,n)=>{"use strict";n.d(t,{o:()=>s});var r=n(4586),o=n(6347),a=n(440);function s(){const{siteConfig:{baseUrl:e,url:t,trailingSlash:n},i18n:{defaultLocale:s,currentLocale:i}}=(0,r.A)(),{pathname:l}=(0,o.zy)(),c=(0,a.Ks)(l,{trailingSlash:n,baseUrl:e}),u=i===s?e:e.replace(`/${i}/`,"/"),d=c.replace(e,"");return{createUrl:function(e){let{locale:n,fullyQualified:r}=e;return`${r?t:""}${function(e){return e===s?`${u}`:`${u}${e}/`}(n)}${d}`}}}},5062:(e,t,n)=>{"use strict";n.d(t,{$:()=>s});var r=n(6540),o=n(6347),a=n(9532);function s(e){const t=(0,o.zy)(),n=(0,a.ZC)(t),s=(0,a._q)(e);(0,r.useEffect)((()=>{n&&t!==n&&s({location:t,previousLocation:n})}),[s,t,n])}},6342:(e,t,n)=>{"use strict";n.d(t,{p:()=>o});var r=n(4586);function o(){return(0,r.A)().siteConfig.themeConfig}},8126:(e,t,n)=>{"use strict";n.d(t,{c:()=>o});var r=n(4586);function o(){const{siteConfig:{themeConfig:e}}=(0,r.A)();return e}},1062:(e,t,n)=>{"use strict";n.d(t,{C:()=>i});var r=n(6540),o=n(1252),a=n(6025),s=n(8126);function i(){const{withBaseUrl:e}=(0,a.hH)(),{algolia:{externalUrlRegex:t,replaceSearchResultPathname:n}}=(0,s.c)();return(0,r.useCallback)((r=>{const a=new URL(r);if((0,o.G)(t,a.href))return r;const s=`${a.pathname+a.hash}`;return e(function(e,t){return t?e.replaceAll(new RegExp(t.from,"g"),t.to):e}(s,n))}),[e,t,n])}},2983:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addTrailingSlash=o,t.default=function(e,t){const{trailingSlash:n,baseUrl:r}=t;if(e.startsWith("#"))return e;if(void 0===n)return e;const[s]=e.split(/[#?]/),i="/"===s||s===r?s:(l=s,c=n,c?o(l):a(l));var l,c;return e.replace(s,i)},t.addLeadingSlash=function(e){return(0,r.addPrefix)(e,"/")},t.removeTrailingSlash=a;const r=n(2566);function o(e){return e.endsWith("/")?e:`${e}/`}function a(e){return(0,r.removeSuffix)(e,"/")}},253:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=function e(t){if(t.cause)return[t,...e(t.cause)];return[t]}},440:(e,t,n)=>{"use strict";t.rA=t.Ks=void 0;const r=n(1635);var o=n(2983);Object.defineProperty(t,"Ks",{enumerable:!0,get:function(){return r.__importDefault(o).default}});var a=n(2566);var s=n(253);Object.defineProperty(t,"rA",{enumerable:!0,get:function(){return s.getErrorCausalChain}})},2566:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addPrefix=function(e,t){return e.startsWith(t)?e:`${t}${e}`},t.removeSuffix=function(e,t){if(""===t)return e;return e.endsWith(t)?e.slice(0,-t.length):e},t.addSuffix=function(e,t){return e.endsWith(t)?e:`${e}${t}`},t.removePrefix=function(e,t){return e.startsWith(t)?e.slice(t.length):e}},1513:(e,t,n)=>{"use strict";n.d(t,{zR:()=>w,TM:()=>E,yJ:()=>f,sC:()=>C,AO:()=>p});var r=n(8168);function o(e){return"/"===e.charAt(0)}function a(e,t){for(var n=t,r=n+1,o=e.length;r=0;p--){var f=s[p];"."===f?a(s,p):".."===f?(a(s,p),d++):d&&(a(s,p),d--)}if(!c)for(;d--;d)s.unshift("..");!c||""===s[0]||s[0]&&o(s[0])||s.unshift("");var g=s.join("/");return n&&"/"!==g.substr(-1)&&(g+="/"),g};var i=n(8997);function l(e){return"/"===e.charAt(0)?e:"/"+e}function c(e){return"/"===e.charAt(0)?e.substr(1):e}function u(e,t){return function(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))}(e,t)?e.substr(t.length):e}function d(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function p(e){var t=e.pathname,n=e.search,r=e.hash,o=t||"/";return n&&"?"!==n&&(o+="?"===n.charAt(0)?n:"?"+n),r&&"#"!==r&&(o+="#"===r.charAt(0)?r:"#"+r),o}function f(e,t,n,o){var a;"string"==typeof e?(a=function(e){var t=e||"/",n="",r="",o=t.indexOf("#");-1!==o&&(r=t.substr(o),t=t.substr(0,o));var a=t.indexOf("?");return-1!==a&&(n=t.substr(a),t=t.substr(0,a)),{pathname:t,search:"?"===n?"":n,hash:"#"===r?"":r}}(e),a.state=t):(void 0===(a=(0,r.A)({},e)).pathname&&(a.pathname=""),a.search?"?"!==a.search.charAt(0)&&(a.search="?"+a.search):a.search="",a.hash?"#"!==a.hash.charAt(0)&&(a.hash="#"+a.hash):a.hash="",void 0!==t&&void 0===a.state&&(a.state=t));try{a.pathname=decodeURI(a.pathname)}catch(i){throw i instanceof URIError?new URIError('Pathname "'+a.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):i}return n&&(a.key=n),o?a.pathname?"/"!==a.pathname.charAt(0)&&(a.pathname=s(a.pathname,o.pathname)):a.pathname=o.pathname:a.pathname||(a.pathname="/"),a}function g(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,r,o){if(null!=e){var a="function"==typeof e?e(t,n):e;"string"==typeof a?"function"==typeof r?r(a,o):o(!0):o(!1!==a)}else o(!0)},appendListener:function(e){var n=!0;function r(){n&&e.apply(void 0,arguments)}return t.push(r),function(){n=!1,t=t.filter((function(e){return e!==r}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),r=0;rt?n.splice(t,n.length-t,o):n.push(o),d({action:r,location:o,index:t,entries:n})}}))},replace:function(e,t){var r="REPLACE",o=f(e,t,m(),w.location);u.confirmTransitionTo(o,r,n,(function(e){e&&(w.entries[w.index]=o,d({action:r,location:o}))}))},go:y,goBack:function(){y(-1)},goForward:function(){y(1)},canGo:function(e){var t=w.index+e;return t>=0&&t{"use strict";var r=n(4363),o={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},a={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},s={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},i={};function l(e){return r.isMemo(e)?s:i[e.$$typeof]||o}i[r.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},i[r.Memo]=s;var c=Object.defineProperty,u=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,p=Object.getOwnPropertyDescriptor,f=Object.getPrototypeOf,g=Object.prototype;e.exports=function e(t,n,r){if("string"!=typeof n){if(g){var o=f(n);o&&o!==g&&e(t,o,r)}var s=u(n);d&&(s=s.concat(d(n)));for(var i=l(t),m=l(n),h=0;h{"use strict";e.exports=function(e,t,n,r,o,a,s,i){if(!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,o,a,s,i],u=0;(l=new Error(t.replace(/%s/g,(function(){return c[u++]})))).name="Invariant Violation"}throw l.framesToPop=1,l}}},4634:e=>{e.exports=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)}},119:(e,t,n)=>{"use strict";n.r(t)},1043:(e,t,n)=>{"use strict";n.r(t)},5947:function(e,t,n){var r,o;r=function(){var e,t,n={version:"0.2.0"},r=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'
'};function o(e,t,n){return en?n:e}function a(e){return 100*(-1+e)}function s(e,t,n){var o;return(o="translate3d"===r.positionUsing?{transform:"translate3d("+a(e)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+a(e)+"%,0)"}:{"margin-left":a(e)+"%"}).transition="all "+t+"ms "+n,o}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(r[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=o(e,r.minimum,1),n.status=1===e?null:e;var a=n.render(!t),c=a.querySelector(r.barSelector),u=r.speed,d=r.easing;return a.offsetWidth,i((function(t){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),l(c,s(e,u,d)),1===e?(l(a,{transition:"none",opacity:1}),a.offsetWidth,setTimeout((function(){l(a,{transition:"all "+u+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),u)}),u)):setTimeout(t,u)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),r.trickleSpeed)};return r.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*o(Math.random()*t,.1,.95)),t=o(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},e=0,t=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===t&&n.start(),e++,t++,r.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=r.template;var o,s=t.querySelector(r.barSelector),i=e?"-100":a(n.status||0),c=document.querySelector(r.parent);return l(s,{transition:"all 0 linear",transform:"translate3d("+i+"%,0,0)"}),r.showSpinner||(o=t.querySelector(r.spinnerSelector))&&f(o),c!=document.body&&u(c,"nprogress-custom-parent"),c.appendChild(t),t},n.remove=function(){d(document.documentElement,"nprogress-busy"),d(document.querySelector(r.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&f(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var i=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),l=function(){var e=["Webkit","O","Moz","ms"],t={};function n(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()}))}function r(t){var n=document.body.style;if(t in n)return t;for(var r,o=e.length,a=t.charAt(0).toUpperCase()+t.slice(1);o--;)if((r=e[o]+a)in n)return r;return t}function o(e){return e=n(e),t[e]||(t[e]=r(e))}function a(e,t,n){t=o(t),e.style[t]=n}return function(e,t){var n,r,o=arguments;if(2==o.length)for(n in t)void 0!==(r=t[n])&&t.hasOwnProperty(n)&&a(e,n,r);else a(e,o[1],o[2])}}();function c(e,t){return("string"==typeof e?e:p(e)).indexOf(" "+t+" ")>=0}function u(e,t){var n=p(e),r=n+t;c(n,t)||(e.className=r.substring(1))}function d(e,t){var n,r=p(e);c(e,t)&&(n=r.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function p(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n},void 0===(o="function"==typeof r?r.call(t,n,t,e):r)||(e.exports=o)},6969:e=>{e.exports&&(e.exports={core:{meta:{path:"components/prism-core.js",option:"mandatory"},core:"Core"},themes:{meta:{path:"themes/{id}.css",link:"index.html?theme={id}",exclusive:!0},prism:{title:"Default",option:"default"},"prism-dark":"Dark","prism-funky":"Funky","prism-okaidia":{title:"Okaidia",owner:"ocodia"},"prism-twilight":{title:"Twilight",owner:"remybach"},"prism-coy":{title:"Coy",owner:"tshedor"},"prism-solarizedlight":{title:"Solarized Light",owner:"hectormatos2011 "},"prism-tomorrow":{title:"Tomorrow Night",owner:"Rosey"}},languages:{meta:{path:"components/prism-{id}",noCSS:!0,examplesPath:"examples/prism-{id}",addCheckAll:!0},markup:{title:"Markup",alias:["html","xml","svg","mathml","ssml","atom","rss"],aliasTitles:{html:"HTML",xml:"XML",svg:"SVG",mathml:"MathML",ssml:"SSML",atom:"Atom",rss:"RSS"},option:"default"},css:{title:"CSS",option:"default",modify:"markup"},clike:{title:"C-like",option:"default"},javascript:{title:"JavaScript",require:"clike",modify:"markup",optional:"regex",alias:"js",option:"default"},abap:{title:"ABAP",owner:"dellagustin"},abnf:{title:"ABNF",owner:"RunDevelopment"},actionscript:{title:"ActionScript",require:"javascript",modify:"markup",owner:"Golmote"},ada:{title:"Ada",owner:"Lucretia"},agda:{title:"Agda",owner:"xy-ren"},al:{title:"AL",owner:"RunDevelopment"},antlr4:{title:"ANTLR4",alias:"g4",owner:"RunDevelopment"},apacheconf:{title:"Apache Configuration",owner:"GuiTeK"},apex:{title:"Apex",require:["clike","sql"],owner:"RunDevelopment"},apl:{title:"APL",owner:"ngn"},applescript:{title:"AppleScript",owner:"Golmote"},aql:{title:"AQL",owner:"RunDevelopment"},arduino:{title:"Arduino",require:"cpp",alias:"ino",owner:"dkern"},arff:{title:"ARFF",owner:"Golmote"},armasm:{title:"ARM Assembly",alias:"arm-asm",owner:"RunDevelopment"},arturo:{title:"Arturo",alias:"art",optional:["bash","css","javascript","markup","markdown","sql"],owner:"drkameleon"},asciidoc:{alias:"adoc",title:"AsciiDoc",owner:"Golmote"},aspnet:{title:"ASP.NET (C#)",require:["markup","csharp"],owner:"nauzilus"},asm6502:{title:"6502 Assembly",owner:"kzurawel"},asmatmel:{title:"Atmel AVR Assembly",owner:"cerkit"},autohotkey:{title:"AutoHotkey",owner:"aviaryan"},autoit:{title:"AutoIt",owner:"Golmote"},avisynth:{title:"AviSynth",alias:"avs",owner:"Zinfidel"},"avro-idl":{title:"Avro IDL",alias:"avdl",owner:"RunDevelopment"},awk:{title:"AWK",alias:"gawk",aliasTitles:{gawk:"GAWK"},owner:"RunDevelopment"},bash:{title:"Bash",alias:["sh","shell"],aliasTitles:{sh:"Shell",shell:"Shell"},owner:"zeitgeist87"},basic:{title:"BASIC",owner:"Golmote"},batch:{title:"Batch",owner:"Golmote"},bbcode:{title:"BBcode",alias:"shortcode",aliasTitles:{shortcode:"Shortcode"},owner:"RunDevelopment"},bbj:{title:"BBj",owner:"hyyan"},bicep:{title:"Bicep",owner:"johnnyreilly"},birb:{title:"Birb",require:"clike",owner:"Calamity210"},bison:{title:"Bison",require:"c",owner:"Golmote"},bnf:{title:"BNF",alias:"rbnf",aliasTitles:{rbnf:"RBNF"},owner:"RunDevelopment"},bqn:{title:"BQN",owner:"yewscion"},brainfuck:{title:"Brainfuck",owner:"Golmote"},brightscript:{title:"BrightScript",owner:"RunDevelopment"},bro:{title:"Bro",owner:"wayward710"},bsl:{title:"BSL (1C:Enterprise)",alias:"oscript",aliasTitles:{oscript:"OneScript"},owner:"Diversus23"},c:{title:"C",require:"clike",owner:"zeitgeist87"},csharp:{title:"C#",require:"clike",alias:["cs","dotnet"],owner:"mvalipour"},cpp:{title:"C++",require:"c",owner:"zeitgeist87"},cfscript:{title:"CFScript",require:"clike",alias:"cfc",owner:"mjclemente"},chaiscript:{title:"ChaiScript",require:["clike","cpp"],owner:"RunDevelopment"},cil:{title:"CIL",owner:"sbrl"},cilkc:{title:"Cilk/C",require:"c",alias:"cilk-c",owner:"OpenCilk"},cilkcpp:{title:"Cilk/C++",require:"cpp",alias:["cilk-cpp","cilk"],owner:"OpenCilk"},clojure:{title:"Clojure",owner:"troglotit"},cmake:{title:"CMake",owner:"mjrogozinski"},cobol:{title:"COBOL",owner:"RunDevelopment"},coffeescript:{title:"CoffeeScript",require:"javascript",alias:"coffee",owner:"R-osey"},concurnas:{title:"Concurnas",alias:"conc",owner:"jasontatton"},csp:{title:"Content-Security-Policy",owner:"ScottHelme"},cooklang:{title:"Cooklang",owner:"ahue"},coq:{title:"Coq",owner:"RunDevelopment"},crystal:{title:"Crystal",require:"ruby",owner:"MakeNowJust"},"css-extras":{title:"CSS Extras",require:"css",modify:"css",owner:"milesj"},csv:{title:"CSV",owner:"RunDevelopment"},cue:{title:"CUE",owner:"RunDevelopment"},cypher:{title:"Cypher",owner:"RunDevelopment"},d:{title:"D",require:"clike",owner:"Golmote"},dart:{title:"Dart",require:"clike",owner:"Golmote"},dataweave:{title:"DataWeave",owner:"machaval"},dax:{title:"DAX",owner:"peterbud"},dhall:{title:"Dhall",owner:"RunDevelopment"},diff:{title:"Diff",owner:"uranusjr"},django:{title:"Django/Jinja2",require:"markup-templating",alias:"jinja2",owner:"romanvm"},"dns-zone-file":{title:"DNS zone file",owner:"RunDevelopment",alias:"dns-zone"},docker:{title:"Docker",alias:"dockerfile",owner:"JustinBeckwith"},dot:{title:"DOT (Graphviz)",alias:"gv",optional:"markup",owner:"RunDevelopment"},ebnf:{title:"EBNF",owner:"RunDevelopment"},editorconfig:{title:"EditorConfig",owner:"osipxd"},eiffel:{title:"Eiffel",owner:"Conaclos"},ejs:{title:"EJS",require:["javascript","markup-templating"],owner:"RunDevelopment",alias:"eta",aliasTitles:{eta:"Eta"}},elixir:{title:"Elixir",owner:"Golmote"},elm:{title:"Elm",owner:"zwilias"},etlua:{title:"Embedded Lua templating",require:["lua","markup-templating"],owner:"RunDevelopment"},erb:{title:"ERB",require:["ruby","markup-templating"],owner:"Golmote"},erlang:{title:"Erlang",owner:"Golmote"},"excel-formula":{title:"Excel Formula",alias:["xlsx","xls"],owner:"RunDevelopment"},fsharp:{title:"F#",require:"clike",owner:"simonreynolds7"},factor:{title:"Factor",owner:"catb0t"},false:{title:"False",owner:"edukisto"},"firestore-security-rules":{title:"Firestore security rules",require:"clike",owner:"RunDevelopment"},flow:{title:"Flow",require:"javascript",owner:"Golmote"},fortran:{title:"Fortran",owner:"Golmote"},ftl:{title:"FreeMarker Template Language",require:"markup-templating",owner:"RunDevelopment"},gml:{title:"GameMaker Language",alias:"gamemakerlanguage",require:"clike",owner:"LiarOnce"},gap:{title:"GAP (CAS)",owner:"RunDevelopment"},gcode:{title:"G-code",owner:"RunDevelopment"},gdscript:{title:"GDScript",owner:"RunDevelopment"},gedcom:{title:"GEDCOM",owner:"Golmote"},gettext:{title:"gettext",alias:"po",owner:"RunDevelopment"},gherkin:{title:"Gherkin",owner:"hason"},git:{title:"Git",owner:"lgiraudel"},glsl:{title:"GLSL",require:"c",owner:"Golmote"},gn:{title:"GN",alias:"gni",owner:"RunDevelopment"},"linker-script":{title:"GNU Linker Script",alias:"ld",owner:"RunDevelopment"},go:{title:"Go",require:"clike",owner:"arnehormann"},"go-module":{title:"Go module",alias:"go-mod",owner:"RunDevelopment"},gradle:{title:"Gradle",require:"clike",owner:"zeabdelkhalek-badido18"},graphql:{title:"GraphQL",optional:"markdown",owner:"Golmote"},groovy:{title:"Groovy",require:"clike",owner:"robfletcher"},haml:{title:"Haml",require:"ruby",optional:["css","css-extras","coffeescript","erb","javascript","less","markdown","scss","textile"],owner:"Golmote"},handlebars:{title:"Handlebars",require:"markup-templating",alias:["hbs","mustache"],aliasTitles:{mustache:"Mustache"},owner:"Golmote"},haskell:{title:"Haskell",alias:"hs",owner:"bholst"},haxe:{title:"Haxe",require:"clike",optional:"regex",owner:"Golmote"},hcl:{title:"HCL",owner:"outsideris"},hlsl:{title:"HLSL",require:"c",owner:"RunDevelopment"},hoon:{title:"Hoon",owner:"matildepark"},http:{title:"HTTP",optional:["csp","css","hpkp","hsts","javascript","json","markup","uri"],owner:"danielgtaylor"},hpkp:{title:"HTTP Public-Key-Pins",owner:"ScottHelme"},hsts:{title:"HTTP Strict-Transport-Security",owner:"ScottHelme"},ichigojam:{title:"IchigoJam",owner:"BlueCocoa"},icon:{title:"Icon",owner:"Golmote"},"icu-message-format":{title:"ICU Message Format",owner:"RunDevelopment"},idris:{title:"Idris",alias:"idr",owner:"KeenS",require:"haskell"},ignore:{title:".ignore",owner:"osipxd",alias:["gitignore","hgignore","npmignore"],aliasTitles:{gitignore:".gitignore",hgignore:".hgignore",npmignore:".npmignore"}},inform7:{title:"Inform 7",owner:"Golmote"},ini:{title:"Ini",owner:"aviaryan"},io:{title:"Io",owner:"AlesTsurko"},j:{title:"J",owner:"Golmote"},java:{title:"Java",require:"clike",owner:"sherblot"},javadoc:{title:"JavaDoc",require:["markup","java","javadoclike"],modify:"java",optional:"scala",owner:"RunDevelopment"},javadoclike:{title:"JavaDoc-like",modify:["java","javascript","php"],owner:"RunDevelopment"},javastacktrace:{title:"Java stack trace",owner:"RunDevelopment"},jexl:{title:"Jexl",owner:"czosel"},jolie:{title:"Jolie",require:"clike",owner:"thesave"},jq:{title:"JQ",owner:"RunDevelopment"},jsdoc:{title:"JSDoc",require:["javascript","javadoclike","typescript"],modify:"javascript",optional:["actionscript","coffeescript"],owner:"RunDevelopment"},"js-extras":{title:"JS Extras",require:"javascript",modify:"javascript",optional:["actionscript","coffeescript","flow","n4js","typescript"],owner:"RunDevelopment"},json:{title:"JSON",alias:"webmanifest",aliasTitles:{webmanifest:"Web App Manifest"},owner:"CupOfTea696"},json5:{title:"JSON5",require:"json",owner:"RunDevelopment"},jsonp:{title:"JSONP",require:"json",owner:"RunDevelopment"},jsstacktrace:{title:"JS stack trace",owner:"sbrl"},"js-templates":{title:"JS Templates",require:"javascript",modify:"javascript",optional:["css","css-extras","graphql","markdown","markup","sql"],owner:"RunDevelopment"},julia:{title:"Julia",owner:"cdagnino"},keepalived:{title:"Keepalived Configure",owner:"dev-itsheng"},keyman:{title:"Keyman",owner:"mcdurdin"},kotlin:{title:"Kotlin",alias:["kt","kts"],aliasTitles:{kts:"Kotlin Script"},require:"clike",owner:"Golmote"},kumir:{title:"KuMir (\u041a\u0443\u041c\u0438\u0440)",alias:"kum",owner:"edukisto"},kusto:{title:"Kusto",owner:"RunDevelopment"},latex:{title:"LaTeX",alias:["tex","context"],aliasTitles:{tex:"TeX",context:"ConTeXt"},owner:"japborst"},latte:{title:"Latte",require:["clike","markup-templating","php"],owner:"nette"},less:{title:"Less",require:"css",optional:"css-extras",owner:"Golmote"},lilypond:{title:"LilyPond",require:"scheme",alias:"ly",owner:"RunDevelopment"},liquid:{title:"Liquid",require:"markup-templating",owner:"cinhtau"},lisp:{title:"Lisp",alias:["emacs","elisp","emacs-lisp"],owner:"JuanCaicedo"},livescript:{title:"LiveScript",owner:"Golmote"},llvm:{title:"LLVM IR",owner:"porglezomp"},log:{title:"Log file",optional:"javastacktrace",owner:"RunDevelopment"},lolcode:{title:"LOLCODE",owner:"Golmote"},lua:{title:"Lua",owner:"Golmote"},magma:{title:"Magma (CAS)",owner:"RunDevelopment"},makefile:{title:"Makefile",owner:"Golmote"},markdown:{title:"Markdown",require:"markup",optional:"yaml",alias:"md",owner:"Golmote"},"markup-templating":{title:"Markup templating",require:"markup",owner:"Golmote"},mata:{title:"Mata",owner:"RunDevelopment"},matlab:{title:"MATLAB",owner:"Golmote"},maxscript:{title:"MAXScript",owner:"RunDevelopment"},mel:{title:"MEL",owner:"Golmote"},mermaid:{title:"Mermaid",owner:"RunDevelopment"},metafont:{title:"METAFONT",owner:"LaeriExNihilo"},mizar:{title:"Mizar",owner:"Golmote"},mongodb:{title:"MongoDB",owner:"airs0urce",require:"javascript"},monkey:{title:"Monkey",owner:"Golmote"},moonscript:{title:"MoonScript",alias:"moon",owner:"RunDevelopment"},n1ql:{title:"N1QL",owner:"TMWilds"},n4js:{title:"N4JS",require:"javascript",optional:"jsdoc",alias:"n4jsd",owner:"bsmith-n4"},"nand2tetris-hdl":{title:"Nand To Tetris HDL",owner:"stephanmax"},naniscript:{title:"Naninovel Script",owner:"Elringus",alias:"nani"},nasm:{title:"NASM",owner:"rbmj"},neon:{title:"NEON",owner:"nette"},nevod:{title:"Nevod",owner:"nezaboodka"},nginx:{title:"nginx",owner:"volado"},nim:{title:"Nim",owner:"Golmote"},nix:{title:"Nix",owner:"Golmote"},nsis:{title:"NSIS",owner:"idleberg"},objectivec:{title:"Objective-C",require:"c",alias:"objc",owner:"uranusjr"},ocaml:{title:"OCaml",owner:"Golmote"},odin:{title:"Odin",owner:"edukisto"},opencl:{title:"OpenCL",require:"c",modify:["c","cpp"],owner:"Milania1"},openqasm:{title:"OpenQasm",alias:"qasm",owner:"RunDevelopment"},oz:{title:"Oz",owner:"Golmote"},parigp:{title:"PARI/GP",owner:"Golmote"},parser:{title:"Parser",require:"markup",owner:"Golmote"},pascal:{title:"Pascal",alias:"objectpascal",aliasTitles:{objectpascal:"Object Pascal"},owner:"Golmote"},pascaligo:{title:"Pascaligo",owner:"DefinitelyNotAGoat"},psl:{title:"PATROL Scripting Language",owner:"bertysentry"},pcaxis:{title:"PC-Axis",alias:"px",owner:"RunDevelopment"},peoplecode:{title:"PeopleCode",alias:"pcode",owner:"RunDevelopment"},perl:{title:"Perl",owner:"Golmote"},php:{title:"PHP",require:"markup-templating",owner:"milesj"},phpdoc:{title:"PHPDoc",require:["php","javadoclike"],modify:"php",owner:"RunDevelopment"},"php-extras":{title:"PHP Extras",require:"php",modify:"php",owner:"milesj"},"plant-uml":{title:"PlantUML",alias:"plantuml",owner:"RunDevelopment"},plsql:{title:"PL/SQL",require:"sql",owner:"Golmote"},powerquery:{title:"PowerQuery",alias:["pq","mscript"],owner:"peterbud"},powershell:{title:"PowerShell",owner:"nauzilus"},processing:{title:"Processing",require:"clike",owner:"Golmote"},prolog:{title:"Prolog",owner:"Golmote"},promql:{title:"PromQL",owner:"arendjr"},properties:{title:".properties",owner:"Golmote"},protobuf:{title:"Protocol Buffers",require:"clike",owner:"just-boris"},pug:{title:"Pug",require:["markup","javascript"],optional:["coffeescript","ejs","handlebars","less","livescript","markdown","scss","stylus","twig"],owner:"Golmote"},puppet:{title:"Puppet",owner:"Golmote"},pure:{title:"Pure",optional:["c","cpp","fortran"],owner:"Golmote"},purebasic:{title:"PureBasic",require:"clike",alias:"pbfasm",owner:"HeX0R101"},purescript:{title:"PureScript",require:"haskell",alias:"purs",owner:"sriharshachilakapati"},python:{title:"Python",alias:"py",owner:"multipetros"},qsharp:{title:"Q#",require:"clike",alias:"qs",owner:"fedonman"},q:{title:"Q (kdb+ database)",owner:"Golmote"},qml:{title:"QML",require:"javascript",owner:"RunDevelopment"},qore:{title:"Qore",require:"clike",owner:"temnroegg"},r:{title:"R",owner:"Golmote"},racket:{title:"Racket",require:"scheme",alias:"rkt",owner:"RunDevelopment"},cshtml:{title:"Razor C#",alias:"razor",require:["markup","csharp"],optional:["css","css-extras","javascript","js-extras"],owner:"RunDevelopment"},jsx:{title:"React JSX",require:["markup","javascript"],optional:["jsdoc","js-extras","js-templates"],owner:"vkbansal"},tsx:{title:"React TSX",require:["jsx","typescript"]},reason:{title:"Reason",require:"clike",owner:"Golmote"},regex:{title:"Regex",owner:"RunDevelopment"},rego:{title:"Rego",owner:"JordanSh"},renpy:{title:"Ren'py",alias:"rpy",owner:"HyuchiaDiego"},rescript:{title:"ReScript",alias:"res",owner:"vmarcosp"},rest:{title:"reST (reStructuredText)",owner:"Golmote"},rip:{title:"Rip",owner:"ravinggenius"},roboconf:{title:"Roboconf",owner:"Golmote"},robotframework:{title:"Robot Framework",alias:"robot",owner:"RunDevelopment"},ruby:{title:"Ruby",require:"clike",alias:"rb",owner:"samflores"},rust:{title:"Rust",owner:"Golmote"},sas:{title:"SAS",optional:["groovy","lua","sql"],owner:"Golmote"},sass:{title:"Sass (Sass)",require:"css",optional:"css-extras",owner:"Golmote"},scss:{title:"Sass (SCSS)",require:"css",optional:"css-extras",owner:"MoOx"},scala:{title:"Scala",require:"java",owner:"jozic"},scheme:{title:"Scheme",owner:"bacchus123"},"shell-session":{title:"Shell session",require:"bash",alias:["sh-session","shellsession"],owner:"RunDevelopment"},smali:{title:"Smali",owner:"RunDevelopment"},smalltalk:{title:"Smalltalk",owner:"Golmote"},smarty:{title:"Smarty",require:"markup-templating",optional:"php",owner:"Golmote"},sml:{title:"SML",alias:"smlnj",aliasTitles:{smlnj:"SML/NJ"},owner:"RunDevelopment"},solidity:{title:"Solidity (Ethereum)",alias:"sol",require:"clike",owner:"glachaud"},"solution-file":{title:"Solution file",alias:"sln",owner:"RunDevelopment"},soy:{title:"Soy (Closure Template)",require:"markup-templating",owner:"Golmote"},sparql:{title:"SPARQL",require:"turtle",owner:"Triply-Dev",alias:"rq"},"splunk-spl":{title:"Splunk SPL",owner:"RunDevelopment"},sqf:{title:"SQF: Status Quo Function (Arma 3)",require:"clike",owner:"RunDevelopment"},sql:{title:"SQL",owner:"multipetros"},squirrel:{title:"Squirrel",require:"clike",owner:"RunDevelopment"},stan:{title:"Stan",owner:"RunDevelopment"},stata:{title:"Stata Ado",require:["mata","java","python"],owner:"RunDevelopment"},iecst:{title:"Structured Text (IEC 61131-3)",owner:"serhioromano"},stylus:{title:"Stylus",owner:"vkbansal"},supercollider:{title:"SuperCollider",alias:"sclang",owner:"RunDevelopment"},swift:{title:"Swift",owner:"chrischares"},systemd:{title:"Systemd configuration file",owner:"RunDevelopment"},"t4-templating":{title:"T4 templating",owner:"RunDevelopment"},"t4-cs":{title:"T4 Text Templates (C#)",require:["t4-templating","csharp"],alias:"t4",owner:"RunDevelopment"},"t4-vb":{title:"T4 Text Templates (VB)",require:["t4-templating","vbnet"],owner:"RunDevelopment"},tap:{title:"TAP",owner:"isaacs",require:"yaml"},tcl:{title:"Tcl",owner:"PeterChaplin"},tt2:{title:"Template Toolkit 2",require:["clike","markup-templating"],owner:"gflohr"},textile:{title:"Textile",require:"markup",optional:"css",owner:"Golmote"},toml:{title:"TOML",owner:"RunDevelopment"},tremor:{title:"Tremor",alias:["trickle","troy"],owner:"darach",aliasTitles:{trickle:"trickle",troy:"troy"}},turtle:{title:"Turtle",alias:"trig",aliasTitles:{trig:"TriG"},owner:"jakubklimek"},twig:{title:"Twig",require:"markup-templating",owner:"brandonkelly"},typescript:{title:"TypeScript",require:"javascript",optional:"js-templates",alias:"ts",owner:"vkbansal"},typoscript:{title:"TypoScript",alias:"tsconfig",aliasTitles:{tsconfig:"TSConfig"},owner:"dkern"},unrealscript:{title:"UnrealScript",alias:["uscript","uc"],owner:"RunDevelopment"},uorazor:{title:"UO Razor Script",owner:"jaseowns"},uri:{title:"URI",alias:"url",aliasTitles:{url:"URL"},owner:"RunDevelopment"},v:{title:"V",require:"clike",owner:"taggon"},vala:{title:"Vala",require:"clike",optional:"regex",owner:"TemplarVolk"},vbnet:{title:"VB.Net",require:"basic",owner:"Bigsby"},velocity:{title:"Velocity",require:"markup",owner:"Golmote"},verilog:{title:"Verilog",owner:"a-rey"},vhdl:{title:"VHDL",owner:"a-rey"},vim:{title:"vim",owner:"westonganger"},"visual-basic":{title:"Visual Basic",alias:["vb","vba"],aliasTitles:{vba:"VBA"},owner:"Golmote"},warpscript:{title:"WarpScript",owner:"RunDevelopment"},wasm:{title:"WebAssembly",owner:"Golmote"},"web-idl":{title:"Web IDL",alias:"webidl",owner:"RunDevelopment"},wgsl:{title:"WGSL",owner:"Dr4gonthree"},wiki:{title:"Wiki markup",require:"markup",owner:"Golmote"},wolfram:{title:"Wolfram language",alias:["mathematica","nb","wl"],aliasTitles:{mathematica:"Mathematica",nb:"Mathematica Notebook"},owner:"msollami"},wren:{title:"Wren",owner:"clsource"},xeora:{title:"Xeora",require:"markup",alias:"xeoracube",aliasTitles:{xeoracube:"XeoraCube"},owner:"freakmaxi"},"xml-doc":{title:"XML doc (.net)",require:"markup",modify:["csharp","fsharp","vbnet"],owner:"RunDevelopment"},xojo:{title:"Xojo (REALbasic)",owner:"Golmote"},xquery:{title:"XQuery",require:"markup",owner:"Golmote"},yaml:{title:"YAML",alias:"yml",owner:"hason"},yang:{title:"YANG",owner:"RunDevelopment"},zig:{title:"Zig",owner:"RunDevelopment"}},plugins:{meta:{path:"plugins/{id}/prism-{id}",link:"plugins/{id}/"},"line-highlight":{title:"Line Highlight",description:"Highlights specific lines and/or line ranges."},"line-numbers":{title:"Line Numbers",description:"Line number at the beginning of code lines.",owner:"kuba-kubula"},"show-invisibles":{title:"Show Invisibles",description:"Show hidden characters such as tabs and line breaks.",optional:["autolinker","data-uri-highlight"]},autolinker:{title:"Autolinker",description:"Converts URLs and emails in code to clickable links. Parses Markdown links in comments."},wpd:{title:"WebPlatform Docs",description:'Makes tokens link to WebPlatform.org documentation. The links open in a new tab.'},"custom-class":{title:"Custom Class",description:"This plugin allows you to prefix Prism's default classes (.comment can become .namespace--comment) or replace them with your defined ones (like .editor__comment). You can even add new classes.",owner:"dvkndn",noCSS:!0},"file-highlight":{title:"File Highlight",description:"Fetch external files and highlight them with Prism. Used on the Prism website itself.",noCSS:!0},"show-language":{title:"Show Language",description:"Display the highlighted language in code blocks (inline code does not show the label).",owner:"nauzilus",noCSS:!0,require:"toolbar"},"jsonp-highlight":{title:"JSONP Highlight",description:"Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).",noCSS:!0,owner:"nauzilus"},"highlight-keywords":{title:"Highlight Keywords",description:"Adds special CSS classes for each keyword for fine-grained highlighting.",owner:"vkbansal",noCSS:!0},"remove-initial-line-feed":{title:"Remove initial line feed",description:"Removes the initial line feed in code blocks.",owner:"Golmote",noCSS:!0},"inline-color":{title:"Inline color",description:"Adds a small inline preview for colors in style sheets.",require:"css-extras",owner:"RunDevelopment"},previewers:{title:"Previewers",description:"Previewers for angles, colors, gradients, easing and time.",require:"css-extras",owner:"Golmote"},autoloader:{title:"Autoloader",description:"Automatically loads the needed languages to highlight the code blocks.",owner:"Golmote",noCSS:!0},"keep-markup":{title:"Keep Markup",description:"Prevents custom markup from being dropped out during highlighting.",owner:"Golmote",optional:"normalize-whitespace",noCSS:!0},"command-line":{title:"Command Line",description:"Display a command line with a prompt and, optionally, the output/response from the commands.",owner:"chriswells0"},"unescaped-markup":{title:"Unescaped Markup",description:"Write markup without having to escape anything."},"normalize-whitespace":{title:"Normalize Whitespace",description:"Supports multiple operations to normalize whitespace in code blocks.",owner:"zeitgeist87",optional:"unescaped-markup",noCSS:!0},"data-uri-highlight":{title:"Data-URI Highlight",description:"Highlights data-URI contents.",owner:"Golmote",noCSS:!0},toolbar:{title:"Toolbar",description:"Attach a toolbar for plugins to easily register buttons on the top of a code block.",owner:"mAAdhaTTah"},"copy-to-clipboard":{title:"Copy to Clipboard Button",description:"Add a button that copies the code block to the clipboard when clicked.",owner:"mAAdhaTTah",require:"toolbar",noCSS:!0},"download-button":{title:"Download Button",description:"A button in the toolbar of a code block adding a convenient way to download a code file.",owner:"Golmote",require:"toolbar",noCSS:!0},"match-braces":{title:"Match braces",description:"Highlights matching braces.",owner:"RunDevelopment"},"diff-highlight":{title:"Diff Highlight",description:"Highlights the code inside diff blocks.",owner:"RunDevelopment",require:"diff"},"filter-highlight-all":{title:"Filter highlightAll",description:"Filters the elements the highlightAll and highlightAllUnder methods actually highlight.",owner:"RunDevelopment",noCSS:!0},treeview:{title:"Treeview",description:"A language with special styles to highlight file system tree structures.",owner:"Golmote"}}})},8722:(e,t,n)=>{const r=n(6969),o=n(8380),a=new Set;function s(e){void 0===e?e=Object.keys(r.languages).filter((e=>"meta"!=e)):Array.isArray(e)||(e=[e]);const t=[...a,...Object.keys(Prism.languages)];o(r,e,t).load((e=>{if(!(e in r.languages))return void(s.silent||console.warn("Language does not exist: "+e));const t="./prism-"+e;delete n.c[n(3157).resolve(t)],delete Prism.languages[e],n(3157)(t),a.add(e)}))}s.silent=!1,e.exports=s},9700:()=>{!function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,r,o,a){if(n.language===r){var s=n.tokenStack=[];n.code=n.code.replace(o,(function(e){if("function"==typeof a&&!a(e))return e;for(var o,i=s.length;-1!==n.code.indexOf(o=t(r,i));)++i;return s[i]=e,o})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,r){if(n.language===r&&n.tokenStack){n.grammar=e.languages[r];var o=0,a=Object.keys(n.tokenStack);!function s(i){for(var l=0;l=a.length);l++){var c=i[l];if("string"==typeof c||c.content&&"string"==typeof c.content){var u=a[o],d=n.tokenStack[u],p="string"==typeof c?c:c.content,f=t(r,u),g=p.indexOf(f);if(g>-1){++o;var m=p.substring(0,g),h=new e.Token(r,e.tokenize(d,n.grammar),"language-"+r,d),b=p.substring(g+f.length),v=[];m&&v.push.apply(v,s([m])),v.push(h),b&&v.push.apply(v,s([b])),"string"==typeof c?i.splice.apply(i,[l,1].concat(v)):c.content=v}}else c.content&&s(c.content)}return i}(n.tokens)}}}})}(Prism)},8692:(e,t,n)=>{var r={"./":8722};function o(e){var t=a(e);return n(t)}function a(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}o.keys=function(){return Object.keys(r)},o.resolve=a,e.exports=o,o.id=8692},3157:(e,t,n)=>{var r={"./":8722};function o(e){var t=a(e);return n(t)}function a(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}o.keys=function(){return Object.keys(r)},o.resolve=a,e.exports=o,o.id=3157},8380:e=>{"use strict";var t=function(){var e=function(){};function t(e,t){Array.isArray(e)?e.forEach(t):null!=e&&t(e,0)}function n(e){for(var t={},n=0,r=e.length;n "));var i={},l=e[r];if(l){function c(t){if(!(t in e))throw new Error(r+" depends on an unknown component "+t);if(!(t in i))for(var s in o(t,a),i[t]=!0,n[t])i[s]=!0}t(l.require,c),t(l.optional,c),t(l.modify,c)}n[r]=i,a.pop()}}return function(e){var t=n[e];return t||(o(e,r),t=n[e]),t}}function o(e){for(var t in e)return!0;return!1}return function(a,s,i){var l=function(e){var t={};for(var n in e){var r=e[n];for(var o in r)if("meta"!=o){var a=r[o];t[o]="string"==typeof a?{title:a}:a}}return t}(a),c=function(e){var n;return function(r){if(r in e)return r;if(!n)for(var o in n={},e){var a=e[o];t(a&&a.alias,(function(t){if(t in n)throw new Error(t+" cannot be alias for both "+o+" and "+n[t]);if(t in e)throw new Error(t+" cannot be alias of "+o+" because it is a component.");n[t]=o}))}return n[r]||r}}(l);s=s.map(c),i=(i||[]).map(c);var u=n(s),d=n(i);s.forEach((function e(n){var r=l[n];t(r&&r.require,(function(t){t in d||(u[t]=!0,e(t))}))}));for(var p,f=r(l),g=u;o(g);){for(var m in p={},g){var h=l[m];t(h&&h.modify,(function(e){e in d&&(p[e]=!0)}))}for(var b in d)if(!(b in u))for(var v in f(b))if(v in u){p[b]=!0;break}for(var y in g=p)u[y]=!0}var w={getIds:function(){var e=[];return w.load((function(t){e.push(t)})),e},load:function(t,n){return function(t,n,r,o){var a=o?o.series:void 0,s=o?o.parallel:e,i={},l={};function c(e){if(e in i)return i[e];l[e]=!0;var o,u=[];for(var d in t(e))d in n&&u.push(d);if(0===u.length)o=r(e);else{var p=s(u.map((function(e){var t=c(e);return delete l[e],t})));a?o=a(p,(function(){return r(e)})):r(e)}return i[e]=o}for(var u in n)c(u);var d=[];for(var p in l)d.push(i[p]);return s(d)}(f,u,t,n)}};return w}}();e.exports=t},2694:(e,t,n)=>{"use strict";var r=n(6925);function o(){}function a(){}a.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,a,s){if(s!==r){var i=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw i.name="Invariant Violation",i}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:a,resetWarningCache:o};return n.PropTypes=n,n}},5556:(e,t,n)=>{e.exports=n(2694)()},6925:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},2551:(e,t,n)=>{"use strict";var r=n(6540),o=n(9982);function a(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n