diff --git a/404.html b/404.html index 26173420eb..6d3de7a4f3 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.ad44e546.js b/assets/js/029bedf1.554287b3.js similarity index 98% rename from assets/js/029bedf1.ad44e546.js rename to assets/js/029bedf1.554287b3.js index 0848838608..36efac87aa 100644 --- a/assets/js/029bedf1.ad44e546.js +++ b/assets/js/029bedf1.554287b3.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":1735029809000,"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":1735634382000,"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.9d745bd3.js b/assets/js/02a1e558.e45291e7.js similarity index 99% rename from assets/js/02a1e558.9d745bd3.js rename to assets/js/02a1e558.e45291e7.js index 3e4d23c7ce..98950a5841 100644 --- a/assets/js/02a1e558.9d745bd3.js +++ b/assets/js/02a1e558.e45291e7.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":1735029809000,"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":1735634382000,"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.29b34983.js b/assets/js/03be7dae.35a7d248.js similarity index 99% rename from assets/js/03be7dae.29b34983.js rename to assets/js/03be7dae.35a7d248.js index e52713047b..4fd9b87b74 100644 --- a/assets/js/03be7dae.29b34983.js +++ b/assets/js/03be7dae.35a7d248.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":1735029809000,"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\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([[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":1735634382000,"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\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/04ae74d1.4923c42d.js b/assets/js/04ae74d1.9296140c.js similarity index 99% rename from assets/js/04ae74d1.4923c42d.js rename to assets/js/04ae74d1.9296140c.js index a1142efa48..4d1139c367 100644 --- a/assets/js/04ae74d1.4923c42d.js +++ b/assets/js/04ae74d1.9296140c.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":1735029809000,"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":1735634382000,"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.8fb1477b.js b/assets/js/04b3fc6c.7bf3b6a0.js similarity index 98% rename from assets/js/04b3fc6c.8fb1477b.js rename to assets/js/04b3fc6c.7bf3b6a0.js index a2b491f502..1c34fd18d5 100644 --- a/assets/js/04b3fc6c.8fb1477b.js +++ b/assets/js/04b3fc6c.7bf3b6a0.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":1735029809000,"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":1735634382000,"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.7d5215e3.js b/assets/js/05916282.86477b8a.js similarity index 97% rename from assets/js/05916282.7d5215e3.js rename to assets/js/05916282.86477b8a.js index 92d1692753..7bee8d6c75 100644 --- a/assets/js/05916282.7d5215e3.js +++ b/assets/js/05916282.86477b8a.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":1735029809000,"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":1735634382000,"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/08804573.70599929.js b/assets/js/08804573.0a6b1e32.js similarity index 99% rename from assets/js/08804573.70599929.js rename to assets/js/08804573.0a6b1e32.js index 4b3a4c90eb..55e5ec731d 100644 --- a/assets/js/08804573.70599929.js +++ b/assets/js/08804573.0a6b1e32.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":1735029809000,"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":1735634382000,"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.0f15acaa.js b/assets/js/097bb47a.9367242a.js similarity index 96% rename from assets/js/097bb47a.0f15acaa.js rename to assets/js/097bb47a.9367242a.js index 04d13c7f16..6fc83a0902 100644 --- a/assets/js/097bb47a.0f15acaa.js +++ b/assets/js/097bb47a.9367242a.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":1735029809000,"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":1735634382000,"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.a3ab4269.js b/assets/js/09df063d.4ece039c.js similarity index 99% rename from assets/js/09df063d.a3ab4269.js rename to assets/js/09df063d.4ece039c.js index e3bb3065f5..90f63f47e0 100644 --- a/assets/js/09df063d.a3ab4269.js +++ b/assets/js/09df063d.4ece039c.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/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":1735029809000,"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),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/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":1735634382000,"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),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.f31ccf7c.js b/assets/js/0d71a3f1.364e7c31.js similarity index 97% rename from assets/js/0d71a3f1.f31ccf7c.js rename to assets/js/0d71a3f1.364e7c31.js index 5315bf4b06..8dcc591ae8 100644 --- a/assets/js/0d71a3f1.f31ccf7c.js +++ b/assets/js/0d71a3f1.364e7c31.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":1735029809000,"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":1735634382000,"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.36b27890.js b/assets/js/0dc350cc.36d1137f.js similarity index 99% rename from assets/js/0dc350cc.36b27890.js rename to assets/js/0dc350cc.36d1137f.js index 7647902353..ddb1851700 100644 --- a/assets/js/0dc350cc.36b27890.js +++ b/assets/js/0dc350cc.36d1137f.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":1735029809000,"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":1735634382000,"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.d0361ccc.js b/assets/js/0e35f71d.97d6f6f8.js similarity index 99% rename from assets/js/0e35f71d.d0361ccc.js rename to assets/js/0e35f71d.97d6f6f8.js index ac7b63b798..9bae0710de 100644 --- a/assets/js/0e35f71d.d0361ccc.js +++ b/assets/js/0e35f71d.97d6f6f8.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":1735029809000,"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":1735634382000,"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.45aac155.js b/assets/js/13973f06.27bdaec1.js similarity index 96% rename from assets/js/13973f06.45aac155.js rename to assets/js/13973f06.27bdaec1.js index cdbd2eec25..a8c03e59db 100644 --- a/assets/js/13973f06.45aac155.js +++ b/assets/js/13973f06.27bdaec1.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":1735029809000,"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":1735634382000,"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.ce71650a.js b/assets/js/1438ea8f.66445ba5.js similarity index 99% rename from assets/js/1438ea8f.ce71650a.js rename to assets/js/1438ea8f.66445ba5.js index 95e179c132..71238f1408 100644 --- a/assets/js/1438ea8f.ce71650a.js +++ b/assets/js/1438ea8f.66445ba5.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":1735029809000,"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":1735634382000,"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/151633a5.e7adf69f.js b/assets/js/151633a5.2f5dcee4.js similarity index 95% rename from assets/js/151633a5.e7adf69f.js rename to assets/js/151633a5.2f5dcee4.js index 84a7ed69fb..32f1211793 100644 --- a/assets/js/151633a5.e7adf69f.js +++ b/assets/js/151633a5.2f5dcee4.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":1735029809000,"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":1735634382000,"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.210d9832.js b/assets/js/15a051c9.537a8a45.js similarity index 99% rename from assets/js/15a051c9.210d9832.js rename to assets/js/15a051c9.537a8a45.js index 231269735f..6ed9a051d9 100644 --- a/assets/js/15a051c9.210d9832.js +++ b/assets/js/15a051c9.537a8a45.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":1735029809000,"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":1735634382000,"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.1e70e494.js b/assets/js/164a8de7.2747ccd8.js similarity index 99% rename from assets/js/164a8de7.1e70e494.js rename to assets/js/164a8de7.2747ccd8.js index 4fb87bd127..093f6b67f2 100644 --- a/assets/js/164a8de7.1e70e494.js +++ b/assets/js/164a8de7.2747ccd8.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":1735029809000,"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":1735634382000,"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.9944178b.js b/assets/js/1a421168.7af4f1c4.js similarity index 99% rename from assets/js/1a421168.9944178b.js rename to assets/js/1a421168.7af4f1c4.js index f0b79e4b06..7dffc3545d 100644 --- a/assets/js/1a421168.9944178b.js +++ b/assets/js/1a421168.7af4f1c4.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9631],{7723:(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/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":1735029809000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/next/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/next/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([[9631],{7723:(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/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":1735634382000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/next/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/next/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/1a5572f6.5c0ff7de.js b/assets/js/1a5572f6.dbaaad53.js similarity index 99% rename from assets/js/1a5572f6.5c0ff7de.js rename to assets/js/1a5572f6.dbaaad53.js index afeebd7e27..c8cd58e189 100644 --- a/assets/js/1a5572f6.5c0ff7de.js +++ b/assets/js/1a5572f6.dbaaad53.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":1735029809000,"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":1735634382000,"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.c52cb48c.js b/assets/js/1d8e39f8.fc0b27b1.js similarity index 99% rename from assets/js/1d8e39f8.c52cb48c.js rename to assets/js/1d8e39f8.fc0b27b1.js index 5590132583..7784f3ae9f 100644 --- a/assets/js/1d8e39f8.c52cb48c.js +++ b/assets/js/1d8e39f8.fc0b27b1.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/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":1735029809000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/guides/esm-support"},"next":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/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/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":1735634382000,"frontMatter":{"id":"jsdom-version","title":"Configure other JSDOM versions"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/guides/esm-support"},"next":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/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.37808e16.js b/assets/js/1e388ac9.e7f6548a.js similarity index 99% rename from assets/js/1e388ac9.37808e16.js rename to assets/js/1e388ac9.e7f6548a.js index da17832b78..0e26b5d01a 100644 --- a/assets/js/1e388ac9.37808e16.js +++ b/assets/js/1e388ac9.e7f6548a.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":1735029809000,"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":1735634382000,"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.f300ab1d.js b/assets/js/203fc93e.c5c75614.js similarity index 99% rename from assets/js/203fc93e.f300ab1d.js rename to assets/js/203fc93e.c5c75614.js index 4b54a40cd8..402897d89e 100644 --- a/assets/js/203fc93e.f300ab1d.js +++ b/assets/js/203fc93e.c5c75614.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":1735029809000,"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":1735634382000,"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.4a12f9b4.js b/assets/js/22e4d634.034294ba.js similarity index 99% rename from assets/js/22e4d634.4a12f9b4.js rename to assets/js/22e4d634.034294ba.js index 8e17957b43..f26d7ae212 100644 --- a/assets/js/22e4d634.4a12f9b4.js +++ b/assets/js/22e4d634.034294ba.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":1735029809000,"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":1735634382000,"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/252e2b80.8cfae68c.js b/assets/js/252e2b80.fd6e1ea1.js similarity index 99% rename from assets/js/252e2b80.8cfae68c.js rename to assets/js/252e2b80.fd6e1ea1.js index 8c15c655a1..a4e79ae76e 100644 --- a/assets/js/252e2b80.8cfae68c.js +++ b/assets/js/252e2b80.fd6e1ea1.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":1735029809000,"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":1735634382000,"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.1068b9ef.js b/assets/js/26cb42b7.842bebec.js similarity index 99% rename from assets/js/26cb42b7.1068b9ef.js rename to assets/js/26cb42b7.842bebec.js index 6d27585bc4..cf510c6de1 100644 --- a/assets/js/26cb42b7.1068b9ef.js +++ b/assets/js/26cb42b7.842bebec.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":1735029809000,"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":1735634382000,"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.2461f1fe.js b/assets/js/27299a3b.02f489b3.js similarity index 99% rename from assets/js/27299a3b.2461f1fe.js rename to assets/js/27299a3b.02f489b3.js index 3b98f7b9a6..9029dd37b0 100644 --- a/assets/js/27299a3b.2461f1fe.js +++ b/assets/js/27299a3b.02f489b3.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":1735029809000,"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":1735634382000,"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.523d46b2.js b/assets/js/27af8d7b.5e56336a.js similarity index 98% rename from assets/js/27af8d7b.523d46b2.js rename to assets/js/27af8d7b.5e56336a.js index bd3ecd5928..6f7ef44ea2 100644 --- a/assets/js/27af8d7b.523d46b2.js +++ b/assets/js/27af8d7b.5e56336a.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":1735029809000,"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":1735634382000,"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/29d26392.9bb856ef.js b/assets/js/29d26392.4f77932f.js similarity index 98% rename from assets/js/29d26392.9bb856ef.js rename to assets/js/29d26392.4f77932f.js index c4620e9a91..40e06e01b5 100644 --- a/assets/js/29d26392.9bb856ef.js +++ b/assets/js/29d26392.4f77932f.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":1735029809000,"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":1735634382000,"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.6b2cba82.js b/assets/js/2a474b18.3610569a.js similarity index 99% rename from assets/js/2a474b18.6b2cba82.js rename to assets/js/2a474b18.3610569a.js index 52c4f1c109..209d7ce91b 100644 --- a/assets/js/2a474b18.6b2cba82.js +++ b/assets/js/2a474b18.3610569a.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":1735029809000,"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":1735634382000,"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.0814d542.js b/assets/js/2ab18ce5.be767bbf.js similarity index 95% rename from assets/js/2ab18ce5.0814d542.js rename to assets/js/2ab18ce5.be767bbf.js index a5caabe9c9..1d256b2cd2 100644 --- a/assets/js/2ab18ce5.0814d542.js +++ b/assets/js/2ab18ce5.be767bbf.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":1735029809000,"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":1735634382000,"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.46dc7a20.js b/assets/js/2ae17008.59fdc952.js similarity index 96% rename from assets/js/2ae17008.46dc7a20.js rename to assets/js/2ae17008.59fdc952.js index c7cd33a6b9..e88a218cab 100644 --- a/assets/js/2ae17008.46dc7a20.js +++ b/assets/js/2ae17008.59fdc952.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":1735029809000,"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":1735634382000,"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.1e0024b5.js b/assets/js/2e81e74f.5b257d2f.js similarity index 99% rename from assets/js/2e81e74f.1e0024b5.js rename to assets/js/2e81e74f.5b257d2f.js index 8ca17ed009..78c2b0b357 100644 --- a/assets/js/2e81e74f.1e0024b5.js +++ b/assets/js/2e81e74f.5b257d2f.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":1735029809000,"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":1735634382000,"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.e2dc0b0e.js b/assets/js/30388853.97619423.js similarity index 96% rename from assets/js/30388853.e2dc0b0e.js rename to assets/js/30388853.97619423.js index a92fd2be58..6478f76c46 100644 --- a/assets/js/30388853.e2dc0b0e.js +++ b/assets/js/30388853.97619423.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":1735029809000,"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":1735634382000,"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.9c05d38c.js b/assets/js/327b6d8e.af110dce.js similarity index 95% rename from assets/js/327b6d8e.9c05d38c.js rename to assets/js/327b6d8e.af110dce.js index ab02c88cf0..90739b2335 100644 --- a/assets/js/327b6d8e.9c05d38c.js +++ b/assets/js/327b6d8e.af110dce.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":1735029809000,"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":1735634382000,"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.98b17df4.js b/assets/js/33a5adb4.5afaf9fd.js similarity index 99% rename from assets/js/33a5adb4.98b17df4.js rename to assets/js/33a5adb4.5afaf9fd.js index 55e4d1fa0a..195081a37a 100644 --- a/assets/js/33a5adb4.98b17df4.js +++ b/assets/js/33a5adb4.5afaf9fd.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":1735029809000,"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":1735634382000,"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.f720e597.js b/assets/js/357d33d4.e911d2a0.js similarity index 98% rename from assets/js/357d33d4.f720e597.js rename to assets/js/357d33d4.e911d2a0.js index a67dd339a1..aaad4ec60b 100644 --- a/assets/js/357d33d4.f720e597.js +++ b/assets/js/357d33d4.e911d2a0.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/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":1735029809000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/guides/angular-13+"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/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/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/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":1735634382000,"frontMatter":{"id":"esm-support","title":"ESM Support"},"sidebar":"docs","previous":{"title":"Angular >=13","permalink":"/jest-preset-angular/docs/guides/angular-13+"},"next":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/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/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.a0a277d9.js b/assets/js/388d3430.3969a841.js similarity index 99% rename from assets/js/388d3430.a0a277d9.js rename to assets/js/388d3430.3969a841.js index 5a5f530a08..e79655030d 100644 --- a/assets/js/388d3430.a0a277d9.js +++ b/assets/js/388d3430.3969a841.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":1735029809000,"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":1735634382000,"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.7d7a7941.js b/assets/js/3b270bcb.fa1a55fa.js similarity index 99% rename from assets/js/3b270bcb.7d7a7941.js rename to assets/js/3b270bcb.fa1a55fa.js index 5f19b63327..b2702e7ec6 100644 --- a/assets/js/3b270bcb.7d7a7941.js +++ b/assets/js/3b270bcb.fa1a55fa.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/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":1735029809000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/getting-started/test-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"},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/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":1735634382000,"frontMatter":{"id":"angular-ivy","title":"Angular Ivy"},"sidebar":"docs","previous":{"title":"Test environment","permalink":"/jest-preset-angular/docs/getting-started/test-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"},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.b4a29cf8.js b/assets/js/3c7caf67.36f2011d.js similarity index 99% rename from assets/js/3c7caf67.b4a29cf8.js rename to assets/js/3c7caf67.36f2011d.js index f02c3543a8..caaaf81e85 100644 --- a/assets/js/3c7caf67.b4a29cf8.js +++ b/assets/js/3c7caf67.36f2011d.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":1735029809000,"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":1735634382000,"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/407f8801.9d29b948.js b/assets/js/407f8801.24e1cce2.js similarity index 99% rename from assets/js/407f8801.9d29b948.js rename to assets/js/407f8801.24e1cce2.js index c680250cab..d3df283c02 100644 --- a/assets/js/407f8801.9d29b948.js +++ b/assets/js/407f8801.24e1cce2.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":1735029809000,"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":1735634382000,"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.2379da9b.js b/assets/js/433cefd8.6c3f6b48.js similarity index 99% rename from assets/js/433cefd8.2379da9b.js rename to assets/js/433cefd8.6c3f6b48.js index d70158d09e..e61b63ad03 100644 --- a/assets/js/433cefd8.2379da9b.js +++ b/assets/js/433cefd8.6c3f6b48.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":1735029809000,"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":1735634382000,"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.26e8d588.js b/assets/js/4351d34b.2f4c746e.js similarity index 99% rename from assets/js/4351d34b.26e8d588.js rename to assets/js/4351d34b.2f4c746e.js index 19d6e9dfc2..c0e0c813bc 100644 --- a/assets/js/4351d34b.26e8d588.js +++ b/assets/js/4351d34b.2f4c746e.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3095],{3062:(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-version","title":"JSDOM version","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-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":1735029809000,"frontMatter":{"id":"jsdom-version","title":"JSDOM version"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/next/guides/esm-support"},"next":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/next/guides/snapshot-testing"}}');var s=n(4848),a=n(8453),o=n(1470),l=n(9365);const i={id:"jsdom-version",title:"JSDOM version"},u=void 0,c={},d=[];function p(e){const t={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.code,{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 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\nconst jestConfig: Config = {\n testEnvironment: 'jest-preset-angular/environments/jsdom',\n};\n\nexport default jestConfig;\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\nconst jestConfig: Config = {\n testEnvironment: 'jest-preset-angular/environments/jsdom',\n};\n\nexport default jestConfig;\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([[3095],{3062:(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-version","title":"JSDOM version","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-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":1735634382000,"frontMatter":{"id":"jsdom-version","title":"JSDOM version"},"sidebar":"docs","previous":{"title":"ESM Support","permalink":"/jest-preset-angular/docs/next/guides/esm-support"},"next":{"title":"Snapshot testing","permalink":"/jest-preset-angular/docs/next/guides/snapshot-testing"}}');var s=n(4848),a=n(8453),o=n(1470),l=n(9365);const i={id:"jsdom-version",title:"JSDOM version"},u=void 0,c={},d=[];function p(e){const t={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.code,{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 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\nconst jestConfig: Config = {\n testEnvironment: 'jest-preset-angular/environments/jsdom',\n};\n\nexport default jestConfig;\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\nconst jestConfig: Config = {\n testEnvironment: 'jest-preset-angular/environments/jsdom',\n};\n\nexport default jestConfig;\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/44821296.4c55fc38.js b/assets/js/44821296.4c3af857.js similarity index 99% rename from assets/js/44821296.4c55fc38.js rename to assets/js/44821296.4c3af857.js index ef0242e396..93ba41470f 100644 --- a/assets/js/44821296.4c55fc38.js +++ b/assets/js/44821296.4c3af857.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":1735029809000,"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":1735634382000,"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.acbf1742.js b/assets/js/44b4d73b.448b1aaa.js similarity index 99% rename from assets/js/44b4d73b.acbf1742.js rename to assets/js/44b4d73b.448b1aaa.js index f0b86b1fae..f225f5a7b3 100644 --- a/assets/js/44b4d73b.acbf1742.js +++ b/assets/js/44b4d73b.448b1aaa.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":1735029809000,"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":1735634382000,"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/47c825a2.f431be4d.js b/assets/js/47c825a2.362f7626.js similarity index 99% rename from assets/js/47c825a2.f431be4d.js rename to assets/js/47c825a2.362f7626.js index dfe19dfa50..fcc88e44fa 100644 --- a/assets/js/47c825a2.f431be4d.js +++ b/assets/js/47c825a2.362f7626.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":1735029809000,"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\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 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":1735634382000,"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\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 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.5f1e4b54.js b/assets/js/47cccd8d.3b57cb41.js similarity index 97% rename from assets/js/47cccd8d.5f1e4b54.js rename to assets/js/47cccd8d.3b57cb41.js index 3d13488d53..1be54c3c3a 100644 --- a/assets/js/47cccd8d.5f1e4b54.js +++ b/assets/js/47cccd8d.3b57cb41.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":1735029809000,"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":1735634382000,"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.d6275f21.js b/assets/js/48dd39e2.82b1aefa.js similarity index 99% rename from assets/js/48dd39e2.d6275f21.js rename to assets/js/48dd39e2.82b1aefa.js index 2ed27729bb..68d6ede00a 100644 --- a/assets/js/48dd39e2.d6275f21.js +++ b/assets/js/48dd39e2.82b1aefa.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":1735029809000,"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":1735634382000,"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.34cbbeda.js b/assets/js/4941928a.013d282d.js similarity index 99% rename from assets/js/4941928a.34cbbeda.js rename to assets/js/4941928a.013d282d.js index f23cd3276f..985c021b66 100644 --- a/assets/js/4941928a.34cbbeda.js +++ b/assets/js/4941928a.013d282d.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":1735029809000,"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":1735634382000,"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.52f1ab49.js b/assets/js/494f4f5e.ce842b6a.js similarity index 97% rename from assets/js/494f4f5e.52f1ab49.js rename to assets/js/494f4f5e.ce842b6a.js index c559f33bc7..9c5625e8bb 100644 --- a/assets/js/494f4f5e.52f1ab49.js +++ b/assets/js/494f4f5e.ce842b6a.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":1735029809000,"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":1735634382000,"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.8736ed0c.js b/assets/js/4b3f866b.7a9444da.js similarity index 99% rename from assets/js/4b3f866b.8736ed0c.js rename to assets/js/4b3f866b.7a9444da.js index 755e2a5e9a..4cadba7ea4 100644 --- a/assets/js/4b3f866b.8736ed0c.js +++ b/assets/js/4b3f866b.7a9444da.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":1735029809000,"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":1735634382000,"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.0409bb11.js b/assets/js/4e0c07c5.a948bc56.js similarity index 99% rename from assets/js/4e0c07c5.0409bb11.js rename to assets/js/4e0c07c5.a948bc56.js index 413b92b95e..5d80d9d9ad 100644 --- a/assets/js/4e0c07c5.0409bb11.js +++ b/assets/js/4e0c07c5.a948bc56.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":1735029809000,"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\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/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:()=>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([[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":1735634382000,"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\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/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:()=>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/51d67042.2ebbc019.js b/assets/js/51d67042.a84f2c5b.js similarity index 98% rename from assets/js/51d67042.2ebbc019.js rename to assets/js/51d67042.a84f2c5b.js index 1d9c419a9c..b23365936f 100644 --- a/assets/js/51d67042.2ebbc019.js +++ b/assets/js/51d67042.a84f2c5b.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":1735029809000,"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":1735634382000,"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.cfab21ee.js b/assets/js/5253afba.462c5ed9.js similarity index 99% rename from assets/js/5253afba.cfab21ee.js rename to assets/js/5253afba.462c5ed9.js index b1c449314c..2ebb94eead 100644 --- a/assets/js/5253afba.cfab21ee.js +++ b/assets/js/5253afba.462c5ed9.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":1735029809000,"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":1735634382000,"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.27089a6f.js b/assets/js/54071611.a6c91af3.js similarity index 99% rename from assets/js/54071611.27089a6f.js rename to assets/js/54071611.a6c91af3.js index 9fe60a67cf..d403a5c593 100644 --- a/assets/js/54071611.27089a6f.js +++ b/assets/js/54071611.a6c91af3.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":1735029809000,"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":1735634382000,"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.fa916b29.js b/assets/js/5465ebbc.73acce35.js similarity index 97% rename from assets/js/5465ebbc.fa916b29.js rename to assets/js/5465ebbc.73acce35.js index 01e0a1faee..f03b115ad6 100644 --- a/assets/js/5465ebbc.fa916b29.js +++ b/assets/js/5465ebbc.73acce35.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":1735029809000,"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":1735634382000,"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.06f9f558.js b/assets/js/54f44165.21d177ad.js similarity index 99% rename from assets/js/54f44165.06f9f558.js rename to assets/js/54f44165.21d177ad.js index 8d8976b094..e1cb54d01d 100644 --- a/assets/js/54f44165.06f9f558.js +++ b/assets/js/54f44165.21d177ad.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:()=>h,frontMatter:()=>i,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":1735029809000,"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),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([[7924],{7668:(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/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":1735634382000,"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),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/5635425a.7600f61a.js b/assets/js/5635425a.427f6e85.js similarity index 98% rename from assets/js/5635425a.7600f61a.js rename to assets/js/5635425a.427f6e85.js index 1f53443869..b326ab3615 100644 --- a/assets/js/5635425a.7600f61a.js +++ b/assets/js/5635425a.427f6e85.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":1735029809000,"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":1735634382000,"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.b1aae639.js b/assets/js/56acf0ae.fbebf62a.js similarity index 99% rename from assets/js/56acf0ae.b1aae639.js rename to assets/js/56acf0ae.fbebf62a.js index 694d7f72ae..157acbaf4a 100644 --- a/assets/js/56acf0ae.b1aae639.js +++ b/assets/js/56acf0ae.fbebf62a.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":1735029809000,"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":1735634382000,"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.fc04ae9b.js b/assets/js/5ae6b2db.6c6726af.js similarity index 95% rename from assets/js/5ae6b2db.fc04ae9b.js rename to assets/js/5ae6b2db.6c6726af.js index ef01dd25ea..07463dd2cd 100644 --- a/assets/js/5ae6b2db.fc04ae9b.js +++ b/assets/js/5ae6b2db.6c6726af.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":1735029809000,"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":1735634382000,"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.4771f7c6.js b/assets/js/5b125e0e.2977f500.js similarity index 99% rename from assets/js/5b125e0e.4771f7c6.js rename to assets/js/5b125e0e.2977f500.js index 7762282c32..1f17e522e4 100644 --- a/assets/js/5b125e0e.4771f7c6.js +++ b/assets/js/5b125e0e.2977f500.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8904],{8422:(e,t,n)=>{n.r(t),n.d(t,{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/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":1735029809000,"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=n(4848),a=n(8453),o=n(1470),i=n(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)(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 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 preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\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)(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 { 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)(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 { 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)(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)(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="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.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)(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 // ...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)(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 // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\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)(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 // ...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)(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 // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\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)(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 // ...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)(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 // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(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:()=>S});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 g(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,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 h(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(!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 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}),[h,f]=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??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=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: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,x.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,x.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,x.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=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,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([[8904],{8422:(e,t,n)=>{n.r(t),n.d(t,{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/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":1735634382000,"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=n(4848),a=n(8453),o=n(1470),i=n(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)(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 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 preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\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)(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 { 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)(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 { 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)(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)(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="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.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)(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 // ...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)(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 // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\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)(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 // ...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)(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 // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\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)(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 // ...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)(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 // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(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:()=>S});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 g(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,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 h(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(!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 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}),[h,f]=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??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=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: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,x.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,x.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,x.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=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,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/5b1cb890.88584ec3.js b/assets/js/5b1cb890.5f66cfab.js similarity index 99% rename from assets/js/5b1cb890.88584ec3.js rename to assets/js/5b1cb890.5f66cfab.js index 579453a591..4f849fdb6f 100644 --- a/assets/js/5b1cb890.88584ec3.js +++ b/assets/js/5b1cb890.5f66cfab.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":1735029809000,"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":1735634382000,"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.2e2a38d3.js b/assets/js/5ee9d842.8dd98d40.js similarity index 97% rename from assets/js/5ee9d842.2e2a38d3.js rename to assets/js/5ee9d842.8dd98d40.js index 71fed1dc6c..57749530ea 100644 --- a/assets/js/5ee9d842.2e2a38d3.js +++ b/assets/js/5ee9d842.8dd98d40.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":1735029809000,"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":1735634382000,"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.ebaeebda.js b/assets/js/5f85402d.2b7e7ca6.js similarity index 99% rename from assets/js/5f85402d.ebaeebda.js rename to assets/js/5f85402d.2b7e7ca6.js index 63e23324b6..2bca2396cb 100644 --- a/assets/js/5f85402d.ebaeebda.js +++ b/assets/js/5f85402d.2b7e7ca6.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":1735029809000,"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":1735634382000,"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.5a47e8ed.js b/assets/js/6059e070.0c57532e.js similarity index 99% rename from assets/js/6059e070.5a47e8ed.js rename to assets/js/6059e070.0c57532e.js index 3d2b405d53..854587382c 100644 --- a/assets/js/6059e070.5a47e8ed.js +++ b/assets/js/6059e070.0c57532e.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":1735029809000,"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":1735634382000,"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.932a3bf3.js b/assets/js/6266f1ba.64ac2ef8.js similarity index 99% rename from assets/js/6266f1ba.932a3bf3.js rename to assets/js/6266f1ba.64ac2ef8.js index 5473d48f94..f60cddf234 100644 --- a/assets/js/6266f1ba.932a3bf3.js +++ b/assets/js/6266f1ba.64ac2ef8.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":1735029809000,"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":1735634382000,"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.8d44a0a9.js b/assets/js/63150b11.522ddf33.js similarity index 99% rename from assets/js/63150b11.8d44a0a9.js rename to assets/js/63150b11.522ddf33.js index 67e0ea333a..bac92c93a5 100644 --- a/assets/js/63150b11.8d44a0a9.js +++ b/assets/js/63150b11.522ddf33.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":1735029809000,"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":1735634382000,"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.d532c08a.js b/assets/js/651850eb.71bda44e.js similarity index 97% rename from assets/js/651850eb.d532c08a.js rename to assets/js/651850eb.71bda44e.js index 557a5b57ee..8e3bad33e4 100644 --- a/assets/js/651850eb.d532c08a.js +++ b/assets/js/651850eb.71bda44e.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":1735029809000,"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":1735634382000,"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.61eb264a.js b/assets/js/6608151e.a13408cb.js similarity index 95% rename from assets/js/6608151e.61eb264a.js rename to assets/js/6608151e.a13408cb.js index b6c70ac608..5716723a81 100644 --- a/assets/js/6608151e.61eb264a.js +++ b/assets/js/6608151e.a13408cb.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":1735029809000,"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":1735634382000,"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/68240572.486ac810.js b/assets/js/68240572.34025962.js similarity index 99% rename from assets/js/68240572.486ac810.js rename to assets/js/68240572.34025962.js index 93bd9b1070..c38d7180cd 100644 --- a/assets/js/68240572.486ac810.js +++ b/assets/js/68240572.34025962.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[689],{4564:(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/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":1735029809000,"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=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/next/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([[689],{4564:(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/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":1735634382000,"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=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/next/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/68e3f1d5.f3f2f2dc.js b/assets/js/68e3f1d5.d6f523ad.js similarity index 99% rename from assets/js/68e3f1d5.f3f2f2dc.js rename to assets/js/68e3f1d5.d6f523ad.js index b36a0e8f87..ddba99521b 100644 --- a/assets/js/68e3f1d5.f3f2f2dc.js +++ b/assets/js/68e3f1d5.d6f523ad.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":1735029809000,"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":1735634382000,"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.d18ad14c.js b/assets/js/6916680a.fed0f3c5.js similarity index 99% rename from assets/js/6916680a.d18ad14c.js rename to assets/js/6916680a.fed0f3c5.js index 2e329a1e31..f7f98bd834 100644 --- a/assets/js/6916680a.d18ad14c.js +++ b/assets/js/6916680a.fed0f3c5.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":1735029809000,"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":1735634382000,"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.77005447.js b/assets/js/6a6dcee7.e60237b9.js similarity index 98% rename from assets/js/6a6dcee7.77005447.js rename to assets/js/6a6dcee7.e60237b9.js index 200b3c2eba..4c78948798 100644 --- a/assets/js/6a6dcee7.77005447.js +++ b/assets/js/6a6dcee7.e60237b9.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":1735029809000,"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":1735634382000,"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.c63582d4.js b/assets/js/6d1ddfa7.6bf79768.js similarity index 97% rename from assets/js/6d1ddfa7.c63582d4.js rename to assets/js/6d1ddfa7.6bf79768.js index 1735f7bc98..fd0286a139 100644 --- a/assets/js/6d1ddfa7.c63582d4.js +++ b/assets/js/6d1ddfa7.6bf79768.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":1735029809000,"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":1735634382000,"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/6f809103.c7030008.js b/assets/js/6f809103.c4db68d4.js similarity index 99% rename from assets/js/6f809103.c7030008.js rename to assets/js/6f809103.c4db68d4.js index e34d44171e..e9d8d2f309 100644 --- a/assets/js/6f809103.c7030008.js +++ b/assets/js/6f809103.c4db68d4.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":1735029809000,"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":1735634382000,"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.c8e222ac.js b/assets/js/710ad8a9.721bff68.js similarity index 99% rename from assets/js/710ad8a9.c8e222ac.js rename to assets/js/710ad8a9.721bff68.js index c031c677aa..724916f786 100644 --- a/assets/js/710ad8a9.c8e222ac.js +++ b/assets/js/710ad8a9.721bff68.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":1735029809000,"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":1735634382000,"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.8f9a80ce.js b/assets/js/72f058d3.71ed472c.js similarity index 99% rename from assets/js/72f058d3.8f9a80ce.js rename to assets/js/72f058d3.71ed472c.js index 77837301ad..d8205b444d 100644 --- a/assets/js/72f058d3.8f9a80ce.js +++ b/assets/js/72f058d3.71ed472c.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":1735029809000,"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":1735634382000,"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.be04e461.js b/assets/js/732c3ce9.dcdef48d.js similarity index 98% rename from assets/js/732c3ce9.be04e461.js rename to assets/js/732c3ce9.dcdef48d.js index 88bae60437..00a1b6dc1a 100644 --- a/assets/js/732c3ce9.be04e461.js +++ b/assets/js/732c3ce9.dcdef48d.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":1735029809000,"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":1735634382000,"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.771f973a.js b/assets/js/79ea3e73.45844d09.js similarity index 98% rename from assets/js/79ea3e73.771f973a.js rename to assets/js/79ea3e73.45844d09.js index 505431a682..04074ccfc4 100644 --- a/assets/js/79ea3e73.771f973a.js +++ b/assets/js/79ea3e73.45844d09.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":1735029809000,"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":1735634382000,"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.c321de8b.js b/assets/js/7aeeadd4.dcd0791b.js similarity index 97% rename from assets/js/7aeeadd4.c321de8b.js rename to assets/js/7aeeadd4.dcd0791b.js index 94ddc52588..b585785871 100644 --- a/assets/js/7aeeadd4.c321de8b.js +++ b/assets/js/7aeeadd4.dcd0791b.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":1735029809000,"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":1735634382000,"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.8a5f4069.js b/assets/js/80b4c599.bc3556b9.js similarity index 98% rename from assets/js/80b4c599.8a5f4069.js rename to assets/js/80b4c599.bc3556b9.js index ca8291e606..b42b3ecdcd 100644 --- a/assets/js/80b4c599.8a5f4069.js +++ b/assets/js/80b4c599.bc3556b9.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":1735029809000,"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":1735634382000,"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.f957004d.js b/assets/js/85e14910.0a8f4b07.js similarity index 99% rename from assets/js/85e14910.f957004d.js rename to assets/js/85e14910.0a8f4b07.js index fac4a4397f..f93d9dc7ae 100644 --- a/assets/js/85e14910.f957004d.js +++ b/assets/js/85e14910.0a8f4b07.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":1735029809000,"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":1735634382000,"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.da6859ba.js b/assets/js/8665e647.5fae0771.js similarity index 99% rename from assets/js/8665e647.da6859ba.js rename to assets/js/8665e647.5fae0771.js index 831ea3cfff..9f343212d9 100644 --- a/assets/js/8665e647.da6859ba.js +++ b/assets/js/8665e647.5fae0771.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":1735029809000,"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":1735634382000,"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.5c957e34.js b/assets/js/8afa1348.76071903.js similarity index 96% rename from assets/js/8afa1348.5c957e34.js rename to assets/js/8afa1348.76071903.js index 1c087265e1..c1225cf610 100644 --- a/assets/js/8afa1348.5c957e34.js +++ b/assets/js/8afa1348.76071903.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":1735029809000,"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":1735634382000,"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.111f919e.js b/assets/js/8b263414.c5fd847b.js similarity index 97% rename from assets/js/8b263414.111f919e.js rename to assets/js/8b263414.c5fd847b.js index bd44002453..f936aaf8b3 100644 --- a/assets/js/8b263414.111f919e.js +++ b/assets/js/8b263414.c5fd847b.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":1735029809000,"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":1735634382000,"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/8f3baa16.c7c8a87a.js b/assets/js/8f3baa16.1991da9e.js similarity index 99% rename from assets/js/8f3baa16.c7c8a87a.js rename to assets/js/8f3baa16.1991da9e.js index 76ab1b8dae..004af69203 100644 --- a/assets/js/8f3baa16.c7c8a87a.js +++ b/assets/js/8f3baa16.1991da9e.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":1735029809000,"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":1735634382000,"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.c73dab5e.js b/assets/js/915eea02.02787d2d.js similarity index 97% rename from assets/js/915eea02.c73dab5e.js rename to assets/js/915eea02.02787d2d.js index 915f2278ad..1b3a3a7881 100644 --- a/assets/js/915eea02.c73dab5e.js +++ b/assets/js/915eea02.02787d2d.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/","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":1735029809000,"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([[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/","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":1735634382000,"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/9251a350.f9f248b4.js b/assets/js/9251a350.3796dd47.js similarity index 98% rename from assets/js/9251a350.f9f248b4.js rename to assets/js/9251a350.3796dd47.js index 7b98d89728..8378fd3fe8 100644 --- a/assets/js/9251a350.f9f248b4.js +++ b/assets/js/9251a350.3796dd47.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":1735029809000,"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":1735634382000,"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.6124f0f5.js b/assets/js/93f0793d.85e68909.js similarity index 98% rename from assets/js/93f0793d.6124f0f5.js rename to assets/js/93f0793d.85e68909.js index e1cb5eeded..74f909454f 100644 --- a/assets/js/93f0793d.6124f0f5.js +++ b/assets/js/93f0793d.85e68909.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":1735029809000,"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":1735634382000,"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/95451dd5.835e657a.js b/assets/js/95451dd5.33c381d8.js similarity index 96% rename from assets/js/95451dd5.835e657a.js rename to assets/js/95451dd5.33c381d8.js index b8e23a94e7..7f6eddd589 100644 --- a/assets/js/95451dd5.835e657a.js +++ b/assets/js/95451dd5.33c381d8.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/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":1735029809000,"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([[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/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":1735634382000,"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/9798ce17.6fa9dc65.js b/assets/js/9798ce17.e1fb0582.js similarity index 99% rename from assets/js/9798ce17.6fa9dc65.js rename to assets/js/9798ce17.e1fb0582.js index 3d8f528a2e..803a0b0032 100644 --- a/assets/js/9798ce17.6fa9dc65.js +++ b/assets/js/9798ce17.e1fb0582.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":1735029809000,"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":1735634382000,"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.9890ed25.js b/assets/js/9903dc99.bb878380.js similarity index 97% rename from assets/js/9903dc99.9890ed25.js rename to assets/js/9903dc99.bb878380.js index ad15179af5..e1091f9152 100644 --- a/assets/js/9903dc99.9890ed25.js +++ b/assets/js/9903dc99.bb878380.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":1735029809000,"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":1735634382000,"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.51eb0da4.js b/assets/js/9a2fa73a.12dc0066.js similarity index 99% rename from assets/js/9a2fa73a.51eb0da4.js rename to assets/js/9a2fa73a.12dc0066.js index 929ea1321d..125db09b4e 100644 --- a/assets/js/9a2fa73a.51eb0da4.js +++ b/assets/js/9a2fa73a.12dc0066.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":1735029809000,"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":1735634382000,"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.20d72464.js b/assets/js/9bc9e25c.7061afa3.js similarity index 95% rename from assets/js/9bc9e25c.20d72464.js rename to assets/js/9bc9e25c.7061afa3.js index c89dc0403a..f350b29618 100644 --- a/assets/js/9bc9e25c.20d72464.js +++ b/assets/js/9bc9e25c.7061afa3.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":1735029809000,"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":1735634382000,"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.f5c46122.js b/assets/js/9d48492b.81d03e2c.js similarity index 98% rename from assets/js/9d48492b.f5c46122.js rename to assets/js/9d48492b.81d03e2c.js index 16baa949ba..c2171d2fbc 100644 --- a/assets/js/9d48492b.f5c46122.js +++ b/assets/js/9d48492b.81d03e2c.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":1735029809000,"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":1735634382000,"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.d405d3dc.js b/assets/js/9fc1d339.7e549add.js similarity index 99% rename from assets/js/9fc1d339.d405d3dc.js rename to assets/js/9fc1d339.7e549add.js index 27a327e97d..6bab1476ae 100644 --- a/assets/js/9fc1d339.d405d3dc.js +++ b/assets/js/9fc1d339.7e549add.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":1735029809000,"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":1735634382000,"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.4238a7a2.js b/assets/js/a05464cd.47ea597c.js similarity index 99% rename from assets/js/a05464cd.4238a7a2.js rename to assets/js/a05464cd.47ea597c.js index 77966d042d..f8847e518f 100644 --- a/assets/js/a05464cd.4238a7a2.js +++ b/assets/js/a05464cd.47ea597c.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/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":1735029809000,"frontMatter":{"id":"snapshot-testing","title":"Snapshot testing"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/guides/jsdom-version"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/guides/using-with-babel"}}');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/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/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":1735634382000,"frontMatter":{"id":"snapshot-testing","title":"Snapshot testing"},"sidebar":"docs","previous":{"title":"Configure other JSDOM versions","permalink":"/jest-preset-angular/docs/guides/jsdom-version"},"next":{"title":"Using with Babel","permalink":"/jest-preset-angular/docs/guides/using-with-babel"}}');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/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.772e7233.js b/assets/js/a09c2993.d972cbed.js similarity index 97% rename from assets/js/a09c2993.772e7233.js rename to assets/js/a09c2993.d972cbed.js index bc44e0ff0b..09fbc55fcd 100644 --- a/assets/js/a09c2993.772e7233.js +++ b/assets/js/a09c2993.d972cbed.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":1735029809000,"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":1735634382000,"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.8bbbdfbe.js b/assets/js/a389e28e.e131bc17.js similarity index 99% rename from assets/js/a389e28e.8bbbdfbe.js rename to assets/js/a389e28e.e131bc17.js index 56f66dbee1..aced47afde 100644 --- a/assets/js/a389e28e.8bbbdfbe.js +++ b/assets/js/a389e28e.e131bc17.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":1735029809000,"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":1735634382000,"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.d049d3bb.js b/assets/js/a74b641e.404326d1.js similarity index 97% rename from assets/js/a74b641e.d049d3bb.js rename to assets/js/a74b641e.404326d1.js index 9a3ffdd01c..92af150e86 100644 --- a/assets/js/a74b641e.d049d3bb.js +++ b/assets/js/a74b641e.404326d1.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":1735029809000,"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":1735634382000,"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/a7d04da7.45f1b573.js b/assets/js/a7d04da7.47c02d9c.js similarity index 99% rename from assets/js/a7d04da7.45f1b573.js rename to assets/js/a7d04da7.47c02d9c.js index b2a74fa6b5..4645cef7ff 100644 --- a/assets/js/a7d04da7.45f1b573.js +++ b/assets/js/a7d04da7.47c02d9c.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/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":1735029809000,"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\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/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":1735634382000,"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\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.9132e074.js b/assets/js/a7d61b99.79f394dc.js similarity index 99% rename from assets/js/a7d61b99.9132e074.js rename to assets/js/a7d61b99.79f394dc.js index 9be8c1688a..9c42ff2a85 100644 --- a/assets/js/a7d61b99.9132e074.js +++ b/assets/js/a7d61b99.79f394dc.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":1735029809000,"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":1735634382000,"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.51f0f4ba.js b/assets/js/a89007e0.45567ab5.js similarity index 99% rename from assets/js/a89007e0.51f0f4ba.js rename to assets/js/a89007e0.45567ab5.js index 4fd726c31c..49592f65c0 100644 --- a/assets/js/a89007e0.51f0f4ba.js +++ b/assets/js/a89007e0.45567ab5.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":1735029809000,"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":1735634382000,"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.3695f7b7.js b/assets/js/a9789633.2646ab56.js similarity index 99% rename from assets/js/a9789633.3695f7b7.js rename to assets/js/a9789633.2646ab56.js index 23baa284e6..7348215fab 100644 --- a/assets/js/a9789633.3695f7b7.js +++ b/assets/js/a9789633.2646ab56.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":1735029809000,"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":1735634382000,"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/aa079c8b.48981374.js b/assets/js/aa079c8b.4e66da68.js similarity index 99% rename from assets/js/aa079c8b.48981374.js rename to assets/js/aa079c8b.4e66da68.js index 5349802010..3897079a30 100644 --- a/assets/js/aa079c8b.48981374.js +++ b/assets/js/aa079c8b.4e66da68.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":1735029809000,"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":1735634382000,"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.cbf9dddd.js b/assets/js/aad144a3.53dc42a9.js similarity index 99% rename from assets/js/aad144a3.cbf9dddd.js rename to assets/js/aad144a3.53dc42a9.js index 06167ded51..87af833996 100644 --- a/assets/js/aad144a3.cbf9dddd.js +++ b/assets/js/aad144a3.53dc42a9.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":1735029809000,"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":1735634382000,"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.54b28c69.js b/assets/js/adb64ee2.fb66d77e.js similarity index 96% rename from assets/js/adb64ee2.54b28c69.js rename to assets/js/adb64ee2.fb66d77e.js index 8a99d0157f..403a8c4768 100644 --- a/assets/js/adb64ee2.54b28c69.js +++ b/assets/js/adb64ee2.fb66d77e.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":1735029809000,"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":1735634382000,"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.bedeb5d5.js b/assets/js/af572879.adcff637.js similarity index 99% rename from assets/js/af572879.bedeb5d5.js rename to assets/js/af572879.adcff637.js index 4d7edb4d22..232fd798e9 100644 --- a/assets/js/af572879.bedeb5d5.js +++ b/assets/js/af572879.adcff637.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":1735029809000,"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":1735634382000,"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/afba4106.8df3da62.js b/assets/js/afba4106.ec53a510.js similarity index 97% rename from assets/js/afba4106.8df3da62.js rename to assets/js/afba4106.ec53a510.js index 37cf47905c..3e06d95e17 100644 --- a/assets/js/afba4106.8df3da62.js +++ b/assets/js/afba4106.ec53a510.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":1735029809000,"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":1735634382000,"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.064b0aae.js b/assets/js/b2161dc5.0cf38d68.js similarity index 96% rename from assets/js/b2161dc5.064b0aae.js rename to assets/js/b2161dc5.0cf38d68.js index 1ffb89e02b..570cc87f0f 100644 --- a/assets/js/b2161dc5.064b0aae.js +++ b/assets/js/b2161dc5.0cf38d68.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":1735029809000,"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":1735634382000,"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/b4c5bdfe.9fd975b2.js b/assets/js/b4c5bdfe.37177a4e.js similarity index 96% rename from assets/js/b4c5bdfe.9fd975b2.js rename to assets/js/b4c5bdfe.37177a4e.js index 1c84167644..253492b47f 100644 --- a/assets/js/b4c5bdfe.9fd975b2.js +++ b/assets/js/b4c5bdfe.37177a4e.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":1735029809000,"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":1735634382000,"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.78f5ac30.js b/assets/js/b647df5a.8d93ea2d.js similarity index 98% rename from assets/js/b647df5a.78f5ac30.js rename to assets/js/b647df5a.8d93ea2d.js index 4f2c277136..f18601a003 100644 --- a/assets/js/b647df5a.78f5ac30.js +++ b/assets/js/b647df5a.8d93ea2d.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":1735029809000,"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":1735634382000,"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.ba457084.js b/assets/js/b83f237d.91007f58.js similarity index 97% rename from assets/js/b83f237d.ba457084.js rename to assets/js/b83f237d.91007f58.js index 593c46ec3f..0265d0ea06 100644 --- a/assets/js/b83f237d.ba457084.js +++ b/assets/js/b83f237d.91007f58.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":1735029809000,"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":1735634382000,"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.7f1dbdf6.js b/assets/js/c00c612c.254ef7de.js similarity index 97% rename from assets/js/c00c612c.7f1dbdf6.js rename to assets/js/c00c612c.254ef7de.js index b86139894a..af37af7733 100644 --- a/assets/js/c00c612c.7f1dbdf6.js +++ b/assets/js/c00c612c.254ef7de.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":1735029809000,"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":1735634382000,"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.e533eca0.js b/assets/js/c1bdbc58.3a3a3063.js similarity index 95% rename from assets/js/c1bdbc58.e533eca0.js rename to assets/js/c1bdbc58.3a3a3063.js index 142bdd57fa..288a9d2efd 100644 --- a/assets/js/c1bdbc58.e533eca0.js +++ b/assets/js/c1bdbc58.3a3a3063.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":1735029809000,"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":1735634382000,"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.82a946e1.js b/assets/js/c44fa306.5f7eef80.js similarity index 98% rename from assets/js/c44fa306.82a946e1.js rename to assets/js/c44fa306.5f7eef80.js index 63be8ab518..6adb2f51a8 100644 --- a/assets/js/c44fa306.82a946e1.js +++ b/assets/js/c44fa306.5f7eef80.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":1735029809000,"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":1735634382000,"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.d6fe2931.js b/assets/js/c49413db.c88643d7.js similarity index 98% rename from assets/js/c49413db.d6fe2931.js rename to assets/js/c49413db.c88643d7.js index fd386183da..fb6c94858a 100644 --- a/assets/js/c49413db.d6fe2931.js +++ b/assets/js/c49413db.c88643d7.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":1735029809000,"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":1735634382000,"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.f6bf1010.js b/assets/js/c4ba122c.9e702f3f.js similarity index 99% rename from assets/js/c4ba122c.f6bf1010.js rename to assets/js/c4ba122c.9e702f3f.js index 95bafc89bb..13cd5a2dd0 100644 --- a/assets/js/c4ba122c.f6bf1010.js +++ b/assets/js/c4ba122c.9e702f3f.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":1735029809000,"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":1735634382000,"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.9d3288c5.js b/assets/js/c62dfc48.ba9467b6.js similarity index 99% rename from assets/js/c62dfc48.9d3288c5.js rename to assets/js/c62dfc48.ba9467b6.js index fc2e567e25..461fddabcc 100644 --- a/assets/js/c62dfc48.9d3288c5.js +++ b/assets/js/c62dfc48.ba9467b6.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":1735029809000,"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":1735634382000,"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.62c16e11.js b/assets/js/c7279284.103b5299.js similarity index 99% rename from assets/js/c7279284.62c16e11.js rename to assets/js/c7279284.103b5299.js index a0a6653ff9..e7defca46a 100644 --- a/assets/js/c7279284.62c16e11.js +++ b/assets/js/c7279284.103b5299.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":1735029809000,"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":1735634382000,"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.f18ff039.js b/assets/js/cd9c57cb.c07ee18c.js similarity index 97% rename from assets/js/cd9c57cb.f18ff039.js rename to assets/js/cd9c57cb.c07ee18c.js index d22106b8c5..f10ed57f39 100644 --- a/assets/js/cd9c57cb.f18ff039.js +++ b/assets/js/cd9c57cb.c07ee18c.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":1735029809000,"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":1735634382000,"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.bb7d5158.js b/assets/js/d069ae84.33ea3362.js similarity index 99% rename from assets/js/d069ae84.bb7d5158.js rename to assets/js/d069ae84.33ea3362.js index b565f73d95..d97922356a 100644 --- a/assets/js/d069ae84.bb7d5158.js +++ b/assets/js/d069ae84.33ea3362.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":1735029809000,"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":1735634382000,"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.c33f1e15.js b/assets/js/d19b9e8a.d05ddab0.js similarity index 97% rename from assets/js/d19b9e8a.c33f1e15.js rename to assets/js/d19b9e8a.d05ddab0.js index 99031029b8..1cbe1df2ab 100644 --- a/assets/js/d19b9e8a.c33f1e15.js +++ b/assets/js/d19b9e8a.d05ddab0.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":1735029809000,"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":1735634382000,"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.fceb188a.js b/assets/js/d1b207fe.13dbffca.js similarity index 99% rename from assets/js/d1b207fe.fceb188a.js rename to assets/js/d1b207fe.13dbffca.js index daadee9553..c1341a5524 100644 --- a/assets/js/d1b207fe.fceb188a.js +++ b/assets/js/d1b207fe.13dbffca.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":1735029809000,"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":1735634382000,"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.66ad81da.js b/assets/js/d2df711a.3e107f88.js similarity index 97% rename from assets/js/d2df711a.66ad81da.js rename to assets/js/d2df711a.3e107f88.js index 20df0c3e19..2210c30403 100644 --- a/assets/js/d2df711a.66ad81da.js +++ b/assets/js/d2df711a.3e107f88.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":1735029809000,"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":1735634382000,"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/d4836a8e.17eb21f8.js b/assets/js/d4836a8e.6b69984d.js similarity index 97% rename from assets/js/d4836a8e.17eb21f8.js rename to assets/js/d4836a8e.6b69984d.js index 699e3d6d64..81d206c748 100644 --- a/assets/js/d4836a8e.17eb21f8.js +++ b/assets/js/d4836a8e.6b69984d.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[106],{248:(e,t,s)=>{s.r(t),s.d(t,{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/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":1735029809000,"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 version","permalink":"/jest-preset-angular/docs/next/guides/jsdom-version"}}');var r=s(4848),o=s(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 t={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)(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/next/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.jsx)(t.p,{children:"Besides, there is utility function 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",metastring:'title="setup-jest.ts"',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\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.jsx)(t.pre,{children:(0,r.jsx)(t.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)(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.jsx)(t.pre,{children:(0,r.jsx)(t.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:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>a});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 a(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([[106],{248:(e,t,s)=>{s.r(t),s.d(t,{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/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":1735634382000,"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 version","permalink":"/jest-preset-angular/docs/next/guides/jsdom-version"}}');var r=s(4848),o=s(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 t={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)(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/next/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.jsx)(t.p,{children:"Besides, there is utility function 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",metastring:'title="setup-jest.ts"',children:"import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';\n\nsetupZoneTestEnv();\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.jsx)(t.pre,{children:(0,r.jsx)(t.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)(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.jsx)(t.pre,{children:(0,r.jsx)(t.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:t}={...(0,o.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},8453:(e,t,s)=>{s.d(t,{R:()=>i,x:()=>a});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 a(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/d720bb60.888da372.js b/assets/js/d720bb60.aca53dd8.js similarity index 97% rename from assets/js/d720bb60.888da372.js rename to assets/js/d720bb60.aca53dd8.js index d593d592f7..4d94516ab7 100644 --- a/assets/js/d720bb60.888da372.js +++ b/assets/js/d720bb60.aca53dd8.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":1735029809000,"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":1735634382000,"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.d535eb47.js b/assets/js/d9330f66.744ee173.js similarity index 99% rename from assets/js/d9330f66.d535eb47.js rename to assets/js/d9330f66.744ee173.js index ad02d08828..e07fe05f31 100644 --- a/assets/js/d9330f66.d535eb47.js +++ b/assets/js/d9330f66.744ee173.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":1735029809000,"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":1735634382000,"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.d6b28210.js b/assets/js/d957c22b.64f7c7b1.js similarity index 99% rename from assets/js/d957c22b.d6b28210.js rename to assets/js/d957c22b.64f7c7b1.js index e5fdc94738..52c6a2ac5e 100644 --- a/assets/js/d957c22b.d6b28210.js +++ b/assets/js/d957c22b.64f7c7b1.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/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":1735029809000,"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=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/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/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":1735634382000,"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=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/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.c167dff9.js b/assets/js/daab97c5.d477defc.js similarity index 96% rename from assets/js/daab97c5.c167dff9.js rename to assets/js/daab97c5.d477defc.js index c28f6d06b2..8c5c764ba5 100644 --- a/assets/js/daab97c5.c167dff9.js +++ b/assets/js/daab97c5.d477defc.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":1735029809000,"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":1735634382000,"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.74cd874d.js b/assets/js/dd1da75d.e033d751.js similarity index 99% rename from assets/js/dd1da75d.74cd874d.js rename to assets/js/dd1da75d.e033d751.js index d9b61e8f76..af4e1becdf 100644 --- a/assets/js/dd1da75d.74cd874d.js +++ b/assets/js/dd1da75d.e033d751.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/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":1735029809000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/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/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":1735634382000,"frontMatter":{"id":"test-environment","title":"Test environment"},"sidebar":"docs","previous":{"title":"Options","permalink":"/jest-preset-angular/docs/getting-started/options"},"next":{"title":"Angular Ivy","permalink":"/jest-preset-angular/docs/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.07ca87b2.js b/assets/js/dd8b0175.5351dda3.js similarity index 99% rename from assets/js/dd8b0175.07ca87b2.js rename to assets/js/dd8b0175.5351dda3.js index f710b2b527..226578f754 100644 --- a/assets/js/dd8b0175.07ca87b2.js +++ b/assets/js/dd8b0175.5351dda3.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":1735029809000,"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":1735634382000,"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.60324cb3.js b/assets/js/df70a34a.7642ef38.js similarity index 98% rename from assets/js/df70a34a.60324cb3.js rename to assets/js/df70a34a.7642ef38.js index ea76d0d4e1..f9edd3bb74 100644 --- a/assets/js/df70a34a.60324cb3.js +++ b/assets/js/df70a34a.7642ef38.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":1735029809000,"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":1735634382000,"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.94aeea7f.js b/assets/js/dff5aaca.fb40e867.js similarity index 99% rename from assets/js/dff5aaca.94aeea7f.js rename to assets/js/dff5aaca.fb40e867.js index 3845bde413..c34d150098 100644 --- a/assets/js/dff5aaca.94aeea7f.js +++ b/assets/js/dff5aaca.fb40e867.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":1735029809000,"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":1735634382000,"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.98b3dac6.js b/assets/js/e0a3f9c8.bf5c3ab8.js similarity index 98% rename from assets/js/e0a3f9c8.98b3dac6.js rename to assets/js/e0a3f9c8.bf5c3ab8.js index adde2152e7..7011dbddb7 100644 --- a/assets/js/e0a3f9c8.98b3dac6.js +++ b/assets/js/e0a3f9c8.bf5c3ab8.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":1735029809000,"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":1735634382000,"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.7a153e54.js b/assets/js/e1715838.92203a89.js similarity index 97% rename from assets/js/e1715838.7a153e54.js rename to assets/js/e1715838.92203a89.js index d8a16c40b6..83a3d2d776 100644 --- a/assets/js/e1715838.7a153e54.js +++ b/assets/js/e1715838.92203a89.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":1735029809000,"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":1735634382000,"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/e36b815f.e002062b.js b/assets/js/e36b815f.b35306b9.js similarity index 97% rename from assets/js/e36b815f.e002062b.js rename to assets/js/e36b815f.b35306b9.js index 1bacd45331..918e9110b3 100644 --- a/assets/js/e36b815f.e002062b.js +++ b/assets/js/e36b815f.b35306b9.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/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":1735029809000,"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([[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/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":1735634382000,"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/e59053ae.26a7e745.js b/assets/js/e59053ae.9bd0f09b.js similarity index 99% rename from assets/js/e59053ae.26a7e745.js rename to assets/js/e59053ae.9bd0f09b.js index cc75f0cf5e..f009a4aba8 100644 --- a/assets/js/e59053ae.26a7e745.js +++ b/assets/js/e59053ae.9bd0f09b.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/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":1735029809000,"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\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/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":1735634382000,"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\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.bc92c8bf.js b/assets/js/e5a27df7.c9003a0a.js similarity index 99% rename from assets/js/e5a27df7.bc92c8bf.js rename to assets/js/e5a27df7.c9003a0a.js index 86729c25ba..b6b72b3ea5 100644 --- a/assets/js/e5a27df7.bc92c8bf.js +++ b/assets/js/e5a27df7.c9003a0a.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/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":1735029809000,"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\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/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/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":1735634382000,"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\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/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/ea131d77.a4b2090c.js b/assets/js/ea131d77.c0c510bb.js similarity index 97% rename from assets/js/ea131d77.a4b2090c.js rename to assets/js/ea131d77.c0c510bb.js index f38cf0e558..42aedb9336 100644 --- a/assets/js/ea131d77.a4b2090c.js +++ b/assets/js/ea131d77.c0c510bb.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":1735029809000,"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":1735634382000,"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.009ef5c0.js b/assets/js/eabdbf07.2f27c156.js similarity index 96% rename from assets/js/eabdbf07.009ef5c0.js rename to assets/js/eabdbf07.2f27c156.js index acc4a1d6ce..366ee9140d 100644 --- a/assets/js/eabdbf07.009ef5c0.js +++ b/assets/js/eabdbf07.2f27c156.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":1735029809000,"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":1735634382000,"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.caa9f575.js b/assets/js/eae657ee.1c21e237.js similarity index 99% rename from assets/js/eae657ee.caa9f575.js rename to assets/js/eae657ee.1c21e237.js index 1047ff6900..73f1d9f9bf 100644 --- a/assets/js/eae657ee.caa9f575.js +++ b/assets/js/eae657ee.1c21e237.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":1735029809000,"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":1735634382000,"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.b8eceae1.js b/assets/js/ebf39289.b15fa45c.js similarity index 99% rename from assets/js/ebf39289.b8eceae1.js rename to assets/js/ebf39289.b15fa45c.js index 075cd6e4e0..89ac3ff45a 100644 --- a/assets/js/ebf39289.b8eceae1.js +++ b/assets/js/ebf39289.b15fa45c.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":1735029809000,"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":1735634382000,"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.377fcbbf.js b/assets/js/ec1d9510.70209a88.js similarity index 99% rename from assets/js/ec1d9510.377fcbbf.js rename to assets/js/ec1d9510.70209a88.js index 5e7bf4e727..0272aca420 100644 --- a/assets/js/ec1d9510.377fcbbf.js +++ b/assets/js/ec1d9510.70209a88.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":1735029809000,"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":1735634382000,"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.26a6323d.js b/assets/js/ec7d5e88.daa1c2ac.js similarity index 99% rename from assets/js/ec7d5e88.26a6323d.js rename to assets/js/ec7d5e88.daa1c2ac.js index 813a16ced7..dc3e6db011 100644 --- a/assets/js/ec7d5e88.26a6323d.js +++ b/assets/js/ec7d5e88.daa1c2ac.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":1735029809000,"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":1735634382000,"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.ed59e783.js b/assets/js/ecfacc56.01e1da62.js similarity index 96% rename from assets/js/ecfacc56.ed59e783.js rename to assets/js/ecfacc56.01e1da62.js index 9684291c38..f0dac3f021 100644 --- a/assets/js/ecfacc56.ed59e783.js +++ b/assets/js/ecfacc56.01e1da62.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":1735029809000,"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":1735634382000,"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.fc2c0c28.js b/assets/js/ef2f3ccd.22f4e330.js similarity index 99% rename from assets/js/ef2f3ccd.fc2c0c28.js rename to assets/js/ef2f3ccd.22f4e330.js index 45a5e0e3e1..4b2cb05783 100644 --- a/assets/js/ef2f3ccd.fc2c0c28.js +++ b/assets/js/ef2f3ccd.22f4e330.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":1735029809000,"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":1735634382000,"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.495a0e15.js b/assets/js/f0447160.d860ed84.js similarity index 99% rename from assets/js/f0447160.495a0e15.js rename to assets/js/f0447160.d860ed84.js index 534550fe58..34f001ed57 100644 --- a/assets/js/f0447160.495a0e15.js +++ b/assets/js/f0447160.d860ed84.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":1735029809000,"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":1735634382000,"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/f14ecac0.ff667a3a.js b/assets/js/f14ecac0.7fec1ae2.js similarity index 95% rename from assets/js/f14ecac0.ff667a3a.js rename to assets/js/f14ecac0.7fec1ae2.js index e90f2e3565..aa7cd3d558 100644 --- a/assets/js/f14ecac0.ff667a3a.js +++ b/assets/js/f14ecac0.7fec1ae2.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":1735029809000,"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":1735634382000,"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.45d768dd.js b/assets/js/f3212b1e.bbe450a9.js similarity index 99% rename from assets/js/f3212b1e.45d768dd.js rename to assets/js/f3212b1e.bbe450a9.js index 09e7470f7a..4752a1ef88 100644 --- a/assets/js/f3212b1e.45d768dd.js +++ b/assets/js/f3212b1e.bbe450a9.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7511],{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":1735029809000,"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([[7511],{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":1735634382000,"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.cc44cc07.js b/assets/js/f43def45.cb040f23.js similarity index 99% rename from assets/js/f43def45.cc44cc07.js rename to assets/js/f43def45.cb040f23.js index b69a52c36f..eece0aa1a0 100644 --- a/assets/js/f43def45.cc44cc07.js +++ b/assets/js/f43def45.cb040f23.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":1735029809000,"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":1735634382000,"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.492aa249.js b/assets/js/f546eb96.188c5f73.js similarity index 96% rename from assets/js/f546eb96.492aa249.js rename to assets/js/f546eb96.188c5f73.js index d9a1344b84..630520925e 100644 --- a/assets/js/f546eb96.492aa249.js +++ b/assets/js/f546eb96.188c5f73.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":1735029809000,"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":1735634382000,"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.a4221f1c.js b/assets/js/f97daad0.1f5f98a9.js similarity index 98% rename from assets/js/f97daad0.a4221f1c.js rename to assets/js/f97daad0.1f5f98a9.js index d008e7e3b3..3a3e49c577 100644 --- a/assets/js/f97daad0.a4221f1c.js +++ b/assets/js/f97daad0.1f5f98a9.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":1735029809000,"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":1735634382000,"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.3f1e4b60.js b/assets/js/fa9f2ace.de1f4508.js similarity index 98% rename from assets/js/fa9f2ace.3f1e4b60.js rename to assets/js/fa9f2ace.de1f4508.js index 62732a20f6..5a914f7c5a 100644 --- a/assets/js/fa9f2ace.3f1e4b60.js +++ b/assets/js/fa9f2ace.de1f4508.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":1735029809000,"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":1735634382000,"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.23729e9c.js b/assets/js/fbd32610.0b4021a0.js similarity index 99% rename from assets/js/fbd32610.23729e9c.js rename to assets/js/fbd32610.0b4021a0.js index 45262e192b..5f7eb82b3e 100644 --- a/assets/js/fbd32610.23729e9c.js +++ b/assets/js/fbd32610.0b4021a0.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/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":1735029809000,"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\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/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":1735634382000,"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\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.a5c654e1.js b/assets/js/fc80686b.24aab6b9.js similarity index 98% rename from assets/js/fc80686b.a5c654e1.js rename to assets/js/fc80686b.24aab6b9.js index e77d2c25ba..9700bef020 100644 --- a/assets/js/fc80686b.a5c654e1.js +++ b/assets/js/fc80686b.24aab6b9.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":1735029809000,"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\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([[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":1735634382000,"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\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/fea96f18.5ecf1399.js b/assets/js/fea96f18.b7b58f60.js similarity index 99% rename from assets/js/fea96f18.5ecf1399.js rename to assets/js/fea96f18.b7b58f60.js index 038a821e4e..fe08d1fb72 100644 --- a/assets/js/fea96f18.5ecf1399.js +++ b/assets/js/fea96f18.b7b58f60.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":1735029809000,"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":1735634382000,"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.9babecea.js b/assets/js/main.778ecb2a.js similarity index 96% rename from assets/js/main.9babecea.js rename to assets/js/main.778ecb2a.js index e605337a09..44f8cc7cf5 100644 --- a/assets/js/main.9babecea.js +++ b/assets/js/main.778ecb2a.js @@ -1,2 +1,2 @@ -/*! For license information please see main.9babecea.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],"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],"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],"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],"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],"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],"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],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],"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],"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],"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],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],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],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],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],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],e36b815f:[()=>n.e(2659).then(n.bind(n,6146)),"@site/versioned_docs/version-14.4/guides/absolute-imports.md",6146],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],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],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(7511)]).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","a25"),routes:[{path:"/jest-preset-angular/docs/10.x",component:d("/jest-preset-angular/docs/10.x","e82"),routes:[{path:"/jest-preset-angular/docs/10.x",component:d("/jest-preset-angular/docs/10.x","e3e"),routes:[{path:"/jest-preset-angular/docs/10.x/",component:d("/jest-preset-angular/docs/10.x/","366"),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","0ed"),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","6e4"),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","723"),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","a6d"),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","7b4"),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","792"),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","92f"),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","b44"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/10.x/guides/troubleshooting",component:d("/jest-preset-angular/docs/10.x/guides/troubleshooting","b2d"),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","f60"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/10.x/processing",component:d("/jest-preset-angular/docs/10.x/processing","42b"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/11.0",component:d("/jest-preset-angular/docs/11.0","2af"),routes:[{path:"/jest-preset-angular/docs/11.0",component:d("/jest-preset-angular/docs/11.0","698"),routes:[{path:"/jest-preset-angular/docs/11.0/",component:d("/jest-preset-angular/docs/11.0/","537"),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","37d"),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","ebc"),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","293"),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","2d7"),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","b0a"),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+","c4c"),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","3fb"),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","d89"),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","06d"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.0/guides/troubleshooting",component:d("/jest-preset-angular/docs/11.0/guides/troubleshooting","096"),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","fbb"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.0/processing",component:d("/jest-preset-angular/docs/11.0/processing","3b1"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/11.1",component:d("/jest-preset-angular/docs/11.1","285"),routes:[{path:"/jest-preset-angular/docs/11.1",component:d("/jest-preset-angular/docs/11.1","485"),routes:[{path:"/jest-preset-angular/docs/11.1/",component:d("/jest-preset-angular/docs/11.1/","ef7"),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","bde"),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","660"),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","906"),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","51b"),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","ea0"),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+","606"),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","a32"),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","b59"),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","6b4"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.1/guides/troubleshooting",component:d("/jest-preset-angular/docs/11.1/guides/troubleshooting","716"),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","3f9"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.1/processing",component:d("/jest-preset-angular/docs/11.1/processing","f72"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/12.0",component:d("/jest-preset-angular/docs/12.0","d17"),routes:[{path:"/jest-preset-angular/docs/12.0",component:d("/jest-preset-angular/docs/12.0","349"),routes:[{path:"/jest-preset-angular/docs/12.0/",component:d("/jest-preset-angular/docs/12.0/","06a"),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","8a5"),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","700"),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","cb1"),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","12b"),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","52e"),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+","f22"),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","385"),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","1b3"),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","b2d"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/12.0/guides/troubleshooting",component:d("/jest-preset-angular/docs/12.0/guides/troubleshooting","943"),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","5c8"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/12.0/processing",component:d("/jest-preset-angular/docs/12.0/processing","a0d"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/13.0",component:d("/jest-preset-angular/docs/13.0","a88"),routes:[{path:"/jest-preset-angular/docs/13.0",component:d("/jest-preset-angular/docs/13.0","7f9"),routes:[{path:"/jest-preset-angular/docs/13.0/",component:d("/jest-preset-angular/docs/13.0/","9b1"),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","a79"),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","756"),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","756"),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","2f9"),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","ca7"),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+","e31"),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","ba1"),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","bcb"),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","a5d"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/13.0/guides/troubleshooting",component:d("/jest-preset-angular/docs/13.0/guides/troubleshooting","ea9"),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","858"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/13.0/processing",component:d("/jest-preset-angular/docs/13.0/processing","689"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/14.0",component:d("/jest-preset-angular/docs/14.0","8c5"),routes:[{path:"/jest-preset-angular/docs/14.0",component:d("/jest-preset-angular/docs/14.0","933"),routes:[{path:"/jest-preset-angular/docs/14.0/",component:d("/jest-preset-angular/docs/14.0/","060"),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","2f6"),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","e08"),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","794"),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","0d8"),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","698"),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+","1c1"),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","344"),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","ba7"),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","242"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.0/guides/troubleshooting",component:d("/jest-preset-angular/docs/14.0/guides/troubleshooting","e91"),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","af0"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.0/processing",component:d("/jest-preset-angular/docs/14.0/processing","5cd"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/14.2",component:d("/jest-preset-angular/docs/14.2","1fe"),routes:[{path:"/jest-preset-angular/docs/14.2",component:d("/jest-preset-angular/docs/14.2","02e"),routes:[{path:"/jest-preset-angular/docs/14.2/",component:d("/jest-preset-angular/docs/14.2/","3d9"),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","ccb"),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","7ab"),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","cdf"),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","249"),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","b72"),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+","e2d"),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","d7c"),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","8a6"),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","84c"),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","f99"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.2/guides/troubleshooting",component:d("/jest-preset-angular/docs/14.2/guides/troubleshooting","d9f"),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","c04"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.2/processing",component:d("/jest-preset-angular/docs/14.2/processing","bcf"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/14.3",component:d("/jest-preset-angular/docs/14.3","2db"),routes:[{path:"/jest-preset-angular/docs/14.3",component:d("/jest-preset-angular/docs/14.3","f07"),routes:[{path:"/jest-preset-angular/docs/14.3/",component:d("/jest-preset-angular/docs/14.3/","df0"),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","add"),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","048"),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","88a"),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","237"),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","bb0"),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+","5b6"),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","093"),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","088"),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","733"),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","acd"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.3/guides/troubleshooting",component:d("/jest-preset-angular/docs/14.3/guides/troubleshooting","8a1"),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","47d"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.3/processing",component:d("/jest-preset-angular/docs/14.3/processing","850"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/8.x",component:d("/jest-preset-angular/docs/8.x","5a8"),routes:[{path:"/jest-preset-angular/docs/8.x",component:d("/jest-preset-angular/docs/8.x","013"),routes:[{path:"/jest-preset-angular/docs/8.x/",component:d("/jest-preset-angular/docs/8.x/","d64"),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","d46"),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","8a2"),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","6f0"),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","38b"),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","efb"),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","669"),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","ce0"),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","f77"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/8.x/guides/troubleshooting",component:d("/jest-preset-angular/docs/8.x/guides/troubleshooting","b0c"),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","dc1"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/8.x/processing",component:d("/jest-preset-angular/docs/8.x/processing","ec5"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/9.x",component:d("/jest-preset-angular/docs/9.x","105"),routes:[{path:"/jest-preset-angular/docs/9.x",component:d("/jest-preset-angular/docs/9.x","6d5"),routes:[{path:"/jest-preset-angular/docs/9.x/",component:d("/jest-preset-angular/docs/9.x/","59e"),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","0ef"),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","08c"),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","0c3"),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","1ea"),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","2e3"),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","0d0"),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","72c"),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","154"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/9.x/guides/troubleshooting",component:d("/jest-preset-angular/docs/9.x/guides/troubleshooting","28e"),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","494"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/9.x/processing",component:d("/jest-preset-angular/docs/9.x/processing","c8f"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/next",component:d("/jest-preset-angular/docs/next","d57"),routes:[{path:"/jest-preset-angular/docs/next",component:d("/jest-preset-angular/docs/next","dd1"),routes:[{path:"/jest-preset-angular/docs/next/",component:d("/jest-preset-angular/docs/next/","3f6"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/getting-started/installation",component:d("/jest-preset-angular/docs/next/getting-started/installation","82b"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/getting-started/options",component:d("/jest-preset-angular/docs/next/getting-started/options","c85"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/getting-started/presets",component:d("/jest-preset-angular/docs/next/getting-started/presets","673"),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","c1a"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/absolute-imports",component:d("/jest-preset-angular/docs/next/guides/absolute-imports","3cd"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/angular-13+",component:d("/jest-preset-angular/docs/next/guides/angular-13+","510"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/angular-ivy",component:d("/jest-preset-angular/docs/next/guides/angular-ivy","476"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/esm-support",component:d("/jest-preset-angular/docs/next/guides/esm-support","160"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/jsdom-version",component:d("/jest-preset-angular/docs/next/guides/jsdom-version","c62"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/snapshot-testing",component:d("/jest-preset-angular/docs/next/guides/snapshot-testing","042"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/troubleshooting",component:d("/jest-preset-angular/docs/next/guides/troubleshooting","0ec"),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","ebd"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/processing",component:d("/jest-preset-angular/docs/next/processing","4eb"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs",component:d("/jest-preset-angular/docs","af9"),routes:[{path:"/jest-preset-angular/docs",component:d("/jest-preset-angular/docs","3d7"),routes:[{path:"/jest-preset-angular/docs/",component:d("/jest-preset-angular/docs/","64f"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/getting-started/installation",component:d("/jest-preset-angular/docs/getting-started/installation","599"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/getting-started/options",component:d("/jest-preset-angular/docs/getting-started/options","c01"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/getting-started/presets",component:d("/jest-preset-angular/docs/getting-started/presets","f91"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/getting-started/test-environment",component:d("/jest-preset-angular/docs/getting-started/test-environment","ede"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/absolute-imports",component:d("/jest-preset-angular/docs/guides/absolute-imports","25e"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/angular-13+",component:d("/jest-preset-angular/docs/guides/angular-13+","457"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/angular-ivy",component:d("/jest-preset-angular/docs/guides/angular-ivy","fd7"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/esm-support",component:d("/jest-preset-angular/docs/guides/esm-support","a04"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/jsdom-version",component:d("/jest-preset-angular/docs/guides/jsdom-version","412"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/snapshot-testing",component:d("/jest-preset-angular/docs/guides/snapshot-testing","556"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/troubleshooting",component:d("/jest-preset-angular/docs/guides/troubleshooting","3d3"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/using-with-babel",component:d("/jest-preset-angular/docs/guides/using-with-babel","037"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/processing",component:d("/jest-preset-angular/docs/processing","a14"),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":"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-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.4","label":"14.4","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":"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-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.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