diff --git a/404.html b/404.html index 3d2cc55511..4896e7b6c4 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.8908addd.js b/assets/js/029bedf1.8908addd.js deleted file mode 100644 index 51f13eaf5b..0000000000 --- a/assets/js/029bedf1.8908addd.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7785],{8221:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>a,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>r,toc:()=>c});var t=s(5893),i=s(1151);const o={id:"using-with-babel",title:"Using with Babel"},l=void 0,r={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},c=[];function d(e){const n={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["If you wish to use ",(0,t.jsx)(n.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Install dependencies required by the official Jest documentation for ",(0,t.jsx)(n.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Install ",(0,t.jsx)(n.code,{children:"@babel/preset-env"})," and add ",(0,t.jsx)(n.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.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,t.jsxs)(n.p,{children:[(0,t.jsxs)(n.em,{children:["Note: do not use a ",(0,t.jsx)(n.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,t.jsx)(n.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,t.jsx)(n.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,t.jsxs)(n.ol,{start:"3",children:["\n",(0,t.jsx)(n.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.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:n}={...(0,i.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>r,a:()=>l});var t=s(7294);const i={},o=t.createContext(i);function l(e){const n=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/029bedf1.ea2727ba.js b/assets/js/029bedf1.ea2727ba.js new file mode 100644 index 0000000000..ff8a482c37 --- /dev/null +++ b/assets/js/029bedf1.ea2727ba.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7785],{8221:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>a,contentTitle:()=>r,default:()=>u,frontMatter:()=>o,metadata:()=>l,toc:()=>c});var t=n(5893),i=n(1151);const o={id:"using-with-babel",title:"Using with Babel"},r=void 0,l={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:!1,unlisted:!1,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:1722455661e3,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"}},a={},c=[];function d(e){const s={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(s.p,{children:["If you wish to use ",(0,t.jsx)(s.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,t.jsxs)(s.ol,{children:["\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:["Install dependencies required by the official Jest documentation for ",(0,t.jsx)(s.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:["Install ",(0,t.jsx)(s.code,{children:"@babel/preset-env"})," and add ",(0,t.jsx)(s.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.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,t.jsxs)(s.p,{children:[(0,t.jsxs)(s.em,{children:["Note: do not use a ",(0,t.jsx)(s.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,t.jsx)(s.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,t.jsx)(s.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,t.jsxs)(s.ol,{start:"3",children:["\n",(0,t.jsx)(s.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.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,i.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>l,a:()=>r});var t=n(7294);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.09332979.js b/assets/js/02a1e558.09332979.js deleted file mode 100644 index 7ff4bcb9e7..0000000000 --- a/assets/js/02a1e558.09332979.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4407],{1861:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"installation",title:"Installation"},i=void 0,c={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsxs)(t.p,{children:["You can install ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,s.jsxs)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(l.Z,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,s.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Angular doesn't support native ",(0,s.jsx)(t.code,{children:"async/await"})," in testing with ",(0,s.jsx)(t.code,{children:"target"})," higher than ",(0,s.jsx)(t.code,{children:"ES2016"}),", see ",(0,s.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,s.jsxs)(t.p,{children:["In your project root, create ",(0,s.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,s.jsx)(t.p,{children:"Add 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)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["Adjust your ",(0,s.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:["Adjust ",(0,s.jsx)(t.code,{children:"scripts"})," part your ",(0,s.jsx)(t.code,{children:"package.json"})," to use ",(0,s.jsx)(t.code,{children:"jest"})," instead of ",(0,s.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,s.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,s.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,s.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Create a file ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,s.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.admonition,{type:"tip",children:[(0,s.jsxs)(t.p,{children:["An example for ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,s.jsx)(t.pre,{children:(0,s.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,s.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,s.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,s.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,s.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,s.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,s.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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/02a1e558.c17def21.js b/assets/js/02a1e558.c17def21.js new file mode 100644 index 0000000000..bfabdb3022 --- /dev/null +++ b/assets/js/02a1e558.c17def21.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4407],{1861:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"installation",title:"Installation"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsxs)(t.p,{children:["You can install ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,s.jsxs)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(l.Z,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,s.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Angular doesn't support native ",(0,s.jsx)(t.code,{children:"async/await"})," in testing with ",(0,s.jsx)(t.code,{children:"target"})," higher than ",(0,s.jsx)(t.code,{children:"ES2016"}),", see ",(0,s.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,s.jsxs)(t.p,{children:["In your project root, create ",(0,s.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,s.jsx)(t.p,{children:"Add 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)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["Adjust your ",(0,s.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:["Adjust ",(0,s.jsx)(t.code,{children:"scripts"})," part your ",(0,s.jsx)(t.code,{children:"package.json"})," to use ",(0,s.jsx)(t.code,{children:"jest"})," instead of ",(0,s.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,s.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,s.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,s.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Create a file ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,s.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.admonition,{type:"tip",children:[(0,s.jsxs)(t.p,{children:["An example for ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,s.jsx)(t.pre,{children:(0,s.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,s.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,s.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,s.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,s.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,s.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,s.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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.4707070d.js b/assets/js/03be7dae.4707070d.js new file mode 100644 index 0000000000..5af4b6b935 --- /dev/null +++ b/assets/js/03be7dae.4707070d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7729],{3948:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var r=s(5893),t=s(1151);const o={id:"troubleshooting",title:"Troubleshooting"},i=void 0,a={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/troubleshooting.md",tags:[],version:"current",lastUpdatedBy:"renovate[bot]",lastUpdatedAt:1722455661e3,frontMatter:{id:"troubleshooting",title:"Troubleshooting"},sidebar:"docs",previous:{title:"Absolute Imports",permalink:"/jest-preset-angular/docs/next/guides/absolute-imports"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nrequire('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// jestGlobalMocks.ts\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.\":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.jsx)(n.pre,{children:(0,r.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,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",children:"// setup-jest.ts\nwindow.$ = 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",children:"// setup-jest.ts\nimport $ 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,{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.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\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,{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,{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-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,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n resolver: '/src/jest.resolver.js',\n};\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.io/api/core/inject",children:"inject"})," instead of ",(0,r.jsx)(n.a,{href:"https://angular.io/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 h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>a,a:()=>i});var r=s(7294);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/03be7dae.d488d001.js b/assets/js/03be7dae.d488d001.js deleted file mode 100644 index 8e27bd1797..0000000000 --- a/assets/js/03be7dae.d488d001.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7729],{3948:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var r=s(5893),t=s(1151);const o={id:"troubleshooting",title:"Troubleshooting"},i=void 0,a={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/troubleshooting.md",tags:[],version:"current",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,frontMatter:{id:"troubleshooting",title:"Troubleshooting"},sidebar:"docs",previous:{title:"Absolute Imports",permalink:"/jest-preset-angular/docs/next/guides/absolute-imports"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nrequire('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// jestGlobalMocks.ts\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.\":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.jsx)(n.pre,{children:(0,r.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,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",children:"// setup-jest.ts\nwindow.$ = 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",children:"// setup-jest.ts\nimport $ 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,{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.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\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,{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,{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-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,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n resolver: '/src/jest.resolver.js',\n};\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.io/api/core/inject",children:"inject"})," instead of ",(0,r.jsx)(n.a,{href:"https://angular.io/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 h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>a,a:()=>i});var r=s(7294);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/04ae74d1.0ba7f2e1.js b/assets/js/04ae74d1.0ba7f2e1.js deleted file mode 100644 index 87b0225a1d..0000000000 --- a/assets/js/04ae74d1.0ba7f2e1.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8677],{8428:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>l,metadata:()=>c,toc:()=>d});var n=s(5893),r=s(1151),a=s(3992),o=s(425);const l={id:"presets",title:"Presets"},i=void 0,c={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Preset name"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,n.jsx)("br",{}),"or ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,n.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,n.jsx)(t.code,{children:"js"}),", ",(0,n.jsx)(t.code,{children:".ts"}),", ",(0,n.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,n.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,n.jsx)("br",{})]}),(0,n.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,n.jsx)(t.code,{children:"js"}),", ",(0,n.jsx)(t.code,{children:".ts"}),", ",(0,n.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,n.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,n.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,n.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,n.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,n.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,n.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,n.jsxs)(t.p,{children:["All presets come with default ",(0,n.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,n.jsx)(t.admonition,{type:"important",children:(0,n.jsxs)(t.p,{children:["If you choose to override ",(0,n.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,n.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,n.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},425:(e,t,s)=>{s.d(t,{Z:()=>o});s(7294);var n=s(512);const r={tabItem:"tabItem_Ymn6"};var a=s(5893);function o(e){let{children:t,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.Z)(r.tabItem,o),hidden:s,children:t})}},3992:(e,t,s)=>{s.d(t,{Z:()=>w});var n=s(7294),r=s(512),a=s(2957),o=s(6550),l=s(1270),i=s(5238),c=s(3609),u=s(1027);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.l)(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.k6)(),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._X)(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 j(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}),[j,f]=function(e){let{groupId:t}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Nk)(s);return[r,(0,n.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),m=(()=>{const e=c??j;return h({value:e,tabValues:a})?e:null})();(0,l.Z)((()=>{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),f(e)}),[d,f,a]),tabValues:a}}var f=s(1048);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=s(5893);function x(e){let{className:t,block:s,selectedValue:n,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",m.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:r}=e;const a=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,n.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",m.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,f.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,s)=>{s.d(t,{Z:()=>l,a:()=>o});var n=s(7294);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/04ae74d1.941111ea.js b/assets/js/04ae74d1.941111ea.js new file mode 100644 index 0000000000..b85d637e2f --- /dev/null +++ b/assets/js/04ae74d1.941111ea.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8677],{8428:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>l,metadata:()=>c,toc:()=>d});var n=s(5893),r=s(1151),a=s(3992),o=s(425);const l={id:"presets",title:"Presets"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Preset name"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,n.jsx)("br",{}),"or ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,n.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,n.jsx)(t.code,{children:"js"}),", ",(0,n.jsx)(t.code,{children:".ts"}),", ",(0,n.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,n.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,n.jsx)("br",{})]}),(0,n.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,n.jsx)(t.code,{children:"js"}),", ",(0,n.jsx)(t.code,{children:".ts"}),", ",(0,n.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,n.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,n.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,n.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,n.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,n.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,n.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,n.jsxs)(t.p,{children:["All presets come with default ",(0,n.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,n.jsx)(t.admonition,{type:"important",children:(0,n.jsxs)(t.p,{children:["If you choose to override ",(0,n.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,n.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,n.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},425:(e,t,s)=>{s.d(t,{Z:()=>o});s(7294);var n=s(512);const r={tabItem:"tabItem_Ymn6"};var a=s(5893);function o(e){let{children:t,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.Z)(r.tabItem,o),hidden:s,children:t})}},3992:(e,t,s)=>{s.d(t,{Z:()=>w});var n=s(7294),r=s(512),a=s(2957),o=s(6550),l=s(1270),i=s(5238),c=s(3609),u=s(1027);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.l)(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.k6)(),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._X)(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 j(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}),[j,f]=function(e){let{groupId:t}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Nk)(s);return[r,(0,n.useCallback)((e=>{s&&a.set(e)}),[s,a])]}({groupId:r}),m=(()=>{const e=c??j;return h({value:e,tabValues:a})?e:null})();(0,l.Z)((()=>{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),f(e)}),[d,f,a]),tabValues:a}}var f=s(1048);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=s(5893);function x(e){let{className:t,block:s,selectedValue:n,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",m.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:r}=e;const a=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,n.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",m.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,f.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,s)=>{s.d(t,{Z:()=>l,a:()=>o});var n=s(7294);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.5c041964.js b/assets/js/04b3fc6c.5c041964.js new file mode 100644 index 0000000000..f5b1fe3087 --- /dev/null +++ b/assets/js/04b3fc6c.5c041964.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6925],{4588:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>d,toc:()=>l});var n=s(5893),r=s(1151);const o={id:"presets",title:"Presets"},i=void 0,d={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Preset name"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,n.jsx)("br",{}),"or ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,n.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,n.jsx)(t.code,{children:"js"}),", ",(0,n.jsx)(t.code,{children:".ts"}),", ",(0,n.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,n.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,n.jsx)("br",{})]}),(0,n.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,n.jsx)(t.code,{children:"js"}),", ",(0,n.jsx)(t.code,{children:".ts"}),", ",(0,n.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,n.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,n.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,n.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,n.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,n.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,n.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,n.jsxs)(t.p,{children:["All presets come with default ",(0,n.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,n.jsx)(t.admonition,{type:"important",children:(0,n.jsxs)(t.p,{children:["If you choose to override ",(0,n.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,n.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,n.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,n.jsxs)(t.p,{children:["Or through TypeScript (if ",(0,n.jsx)(t.code,{children:"ts-node"})," is installed):"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>d,a:()=>i});var n=s(7294);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/04b3fc6c.db0da0bb.js b/assets/js/04b3fc6c.db0da0bb.js deleted file mode 100644 index 9e498846ab..0000000000 --- a/assets/js/04b3fc6c.db0da0bb.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6925],{4588:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>d,toc:()=>l});var n=s(5893),r=s(1151);const o={id:"presets",title:"Presets"},i=void 0,d={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Preset name"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,n.jsx)("br",{}),"or ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,n.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,n.jsx)(t.code,{children:"js"}),", ",(0,n.jsx)(t.code,{children:".ts"}),", ",(0,n.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,n.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,n.jsx)("br",{})]}),(0,n.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,n.jsx)(t.code,{children:"js"}),", ",(0,n.jsx)(t.code,{children:".ts"}),", ",(0,n.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,n.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,n.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,n.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,n.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,n.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,n.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,n.jsxs)(t.p,{children:["All presets come with default ",(0,n.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,n.jsx)(t.admonition,{type:"important",children:(0,n.jsxs)(t.p,{children:["If you choose to override ",(0,n.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,n.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,n.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,n.jsxs)(t.p,{children:["Or through TypeScript (if ",(0,n.jsx)(t.code,{children:"ts-node"})," is installed):"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>d,a:()=>i});var n=s(7294);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.2fbd934e.js b/assets/js/05916282.2fbd934e.js deleted file mode 100644 index 4d275d6a19..0000000000 --- a/assets/js/05916282.2fbd934e.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4331],{8977:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>d,frontMatter:()=>n,metadata:()=>a,toc:()=>p});var o=s(5893),i=s(1151);const n={id:"absolute-imports",title:"Absolute Imports"},r=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings 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."]}),"\n",(0,o.jsxs)(t.p,{children:["More information see ",(0,o.jsx)(t.code,{children:"ts-jest"})," ",(0,o.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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>a,a:()=>r});var o=s(7294);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/05916282.7b52fc03.js b/assets/js/05916282.7b52fc03.js new file mode 100644 index 0000000000..4f27d4c705 --- /dev/null +++ b/assets/js/05916282.7b52fc03.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4331],{8977:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>d,frontMatter:()=>n,metadata:()=>a,toc:()=>p});var o=s(5893),i=s(1151);const n={id:"absolute-imports",title:"Absolute Imports"},r=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings 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."]}),"\n",(0,o.jsxs)(t.p,{children:["More information see ",(0,o.jsx)(t.code,{children:"ts-jest"})," ",(0,o.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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>a,a:()=>r});var o=s(7294);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/0d71a3f1.bbe22334.js b/assets/js/0d71a3f1.bbe22334.js new file mode 100644 index 0000000000..d042f1b91c --- /dev/null +++ b/assets/js/0d71a3f1.bbe22334.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9574],{323:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>l,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var s=n(5893),r=n(1151);const i={id:"test-environment",title:"Test environment"},o=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},d={},c=[];function u(e){const t={a:"a",code:"code",p:"p",...(0,r.a)(),...e.components};return(0,s.jsxs)(t.p,{children:["If you look at ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/src/config/setup-jest.ts",children:(0,s.jsx)(t.code,{children:"setup-jest.ts"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,s.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 l(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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/0d71a3f1.ededed51.js b/assets/js/0d71a3f1.ededed51.js deleted file mode 100644 index b43d89a83d..0000000000 --- a/assets/js/0d71a3f1.ededed51.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9574],{323:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var s=n(5893),r=n(1151);const i={id:"test-environment",title:"Test environment"},o=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},d={},c=[];function l(e){const t={a:"a",code:"code",p:"p",...(0,r.a)(),...e.components};return(0,s.jsxs)(t.p,{children:["If you look at ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/src/config/setup-jest.ts",children:(0,s.jsx)(t.code,{children:"setup-jest.ts"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,s.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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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.78282f98.js b/assets/js/0dc350cc.78282f98.js new file mode 100644 index 0000000000..248a3bfcc7 --- /dev/null +++ b/assets/js/0dc350cc.78282f98.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7801],{8978:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),o=n(3992),a=n(425);const i={id:"jsdom-version",title:"Configure other JSDOM versions"},l=void 0,u={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:!1,unlisted:!1,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:1722455661e3,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"}},c={},d=[];function m(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,r.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,r.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,r.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,r.jsxs)(o.Z,{groupId:"code-examples",children:[(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,r.jsx)(t.code,{children:"localStorage"})," or ",(0,r.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,r.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Reference: ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,r.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 p(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var o=n(5893);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,a),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),o=n(2957),a=n(6550),i=n(1270),l=n(5238),u=n(3609),c=n(1027);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 m(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.l)(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,a.k6)(),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._X)(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=m(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(!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: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.Nk)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return p({value:e,tabValues:o})?e:null})();(0,i.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!p({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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var r=n(7294);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/0dc350cc.87c1bffd.js b/assets/js/0dc350cc.87c1bffd.js deleted file mode 100644 index f12eddb8b5..0000000000 --- a/assets/js/0dc350cc.87c1bffd.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7801],{8978:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),o=n(3992),a=n(425);const i={id:"jsdom-version",title:"Configure other JSDOM versions"},l=void 0,u={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},c={},d=[];function m(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,r.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,r.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,r.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,r.jsxs)(o.Z,{groupId:"code-examples",children:[(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,r.jsx)(t.code,{children:"localStorage"})," or ",(0,r.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,r.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Reference: ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,r.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 p(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var o=n(5893);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,a),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),o=n(2957),a=n(6550),i=n(1270),l=n(5238),u=n(3609),c=n(1027);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 m(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.l)(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,a.k6)(),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._X)(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=m(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(!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: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.Nk)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return p({value:e,tabValues:o})?e:null})();(0,i.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!p({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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var r=n(7294);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.63f6ec9e.js b/assets/js/0e35f71d.63f6ec9e.js deleted file mode 100644 index 4aa336b38c..0000000000 --- a/assets/js/0e35f71d.63f6ec9e.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4828],{1297:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>u,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"using-with-babel",title:"Using with Babel"},i=void 0,u={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["If you wish to use ",(0,s.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,s.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Install ",(0,s.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,s.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:[(0,s.jsxs)(t.em,{children:["Note: do not use a ",(0,s.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,s.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,s.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,s.jsxs)(t.ol,{start:"3",children:["\n",(0,s.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,s.jsxs)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})}),(0,s.jsx)(l.Z,{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 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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(5893);function v(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.Z)("tabs-container",g.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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/0e35f71d.85dae0e7.js b/assets/js/0e35f71d.85dae0e7.js new file mode 100644 index 0000000000..d1ec1b6718 --- /dev/null +++ b/assets/js/0e35f71d.85dae0e7.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4828],{1297:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>u,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"using-with-babel",title:"Using with Babel"},i=void 0,u={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:!1,unlisted:!1,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:1722455661e3,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"}},c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["If you wish to use ",(0,s.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,s.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Install ",(0,s.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,s.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:[(0,s.jsxs)(t.em,{children:["Note: do not use a ",(0,s.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,s.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,s.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,s.jsxs)(t.ol,{start:"3",children:["\n",(0,s.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,s.jsxs)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})}),(0,s.jsx)(l.Z,{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 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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(5893);function v(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.Z)("tabs-container",g.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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.8dcaa785.js b/assets/js/13973f06.8dcaa785.js deleted file mode 100644 index 8af74c97c4..0000000000 --- a/assets/js/13973f06.8dcaa785.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4188],{9088:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>d,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var n=s(5893),o=s(1151);const r={id:"processing",title:"Processing flow"},i=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/processing.md",tags:[],version:"12.0",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,o.a)(),...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,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>c,a:()=>i});var n=s(7294);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/13973f06.caa39252.js b/assets/js/13973f06.caa39252.js new file mode 100644 index 0000000000..171a0d5e1b --- /dev/null +++ b/assets/js/13973f06.caa39252.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4188],{9088:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var o=s(5893),n=s(1151);const r={id:"processing",title:"Processing flow"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},a={},l=[];function d(e){const t={a:"a",code:"code",p:"p",...(0,n.a)(),...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 p(e={}){const{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>c,a:()=>i});var o=s(7294);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.4807e616.js b/assets/js/1438ea8f.4807e616.js deleted file mode 100644 index 1ba9663558..0000000000 --- a/assets/js/1438ea8f.4807e616.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2839],{1119:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>m,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),o=n(3992),a=n(425);const i={id:"jsdom-version",title:"Configure other JSDOM versions"},l=void 0,u={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/guides/jsdom-version",draft:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,r.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,r.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,r.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,r.jsxs)(o.Z,{groupId:"code-examples",children:[(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,r.jsx)(t.code,{children:"localStorage"})," or ",(0,r.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,r.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Reference: ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,r.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,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var o=n(5893);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,a),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),o=n(2957),a=n(6550),i=n(1270),l=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",b.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var r=n(7294);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/1438ea8f.f2e148a4.js b/assets/js/1438ea8f.f2e148a4.js new file mode 100644 index 0000000000..3fa4f58e5d --- /dev/null +++ b/assets/js/1438ea8f.f2e148a4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2839],{1119:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>m,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),o=n(3992),a=n(425);const i={id:"jsdom-version",title:"Configure other JSDOM versions"},l=void 0,u={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/guides/jsdom-version",draft:!1,unlisted:!1,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:1722455661e3,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"}},c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,r.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,r.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,r.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,r.jsxs)(o.Z,{groupId:"code-examples",children:[(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,r.jsx)(t.code,{children:"localStorage"})," or ",(0,r.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,r.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Reference: ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,r.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,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var o=n(5893);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,a),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),o=n(2957),a=n(6550),i=n(1270),l=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",b.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var r=n(7294);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/14b133ce.320de5ee.js b/assets/js/14b133ce.320de5ee.js deleted file mode 100644 index e2ffd57d83..0000000000 --- a/assets/js/14b133ce.320de5ee.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7993],{5168:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>g,frontMatter:()=>o,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),a=n(3992),l=n(425);const o={id:"angular-ivy",title:"Angular Ivy"},i=void 0,u={id:"guides/angular-ivy",title:"Angular Ivy",description:"This step is OPTIONAL",source:"@site/docs/guides/angular-ivy.md",sourceDirName:"guides",slug:"/guides/angular-ivy",permalink:"/jest-preset-angular/docs/next/guides/angular-ivy",draft:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/angular-ivy.md",tags:[],version:"current",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,frontMatter:{id:"angular-ivy",title:"Angular Ivy"},sidebar:"docs",previous:{title:"Test environment",permalink:"/jest-preset-angular/docs/next/getting-started/test-environment"},next:{title:"Angular >=13",permalink:"/jest-preset-angular/docs/next/guides/angular-13+"}},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,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["This step is ",(0,r.jsx)(t.strong,{children:"OPTIONAL"})]})}),"\n",(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 a Jest global setup file to help you to run ",(0,r.jsx)(t.code,{children:"ngcc"})," with Jest. Add to the following section:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["to your root ",(0,r.jsx)(t.code,{children:"jest.config.js"})]}),"\n"]}),"\n",(0,r.jsxs)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(l.Z,{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 globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,r.jsx)(l.Z,{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 globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,r.jsx)(t.code,{children:"ngcc"})," via ",(0,r.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,r.jsxs)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(l.Z,{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\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,r.jsx)(l.Z,{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\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,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(5893);function v(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.Z)("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:c,...a,className:(0,s.Z)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,s.Z)("tabs-container",b.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var r=n(7294);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/14b133ce.cdf65fec.js b/assets/js/14b133ce.cdf65fec.js new file mode 100644 index 0000000000..27ca29052c --- /dev/null +++ b/assets/js/14b133ce.cdf65fec.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7993],{5168:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>g,frontMatter:()=>o,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),a=n(3992),l=n(425);const o={id:"angular-ivy",title:"Angular Ivy"},i=void 0,u={id:"guides/angular-ivy",title:"Angular Ivy",description:"This step is OPTIONAL",source:"@site/docs/guides/angular-ivy.md",sourceDirName:"guides",slug:"/guides/angular-ivy",permalink:"/jest-preset-angular/docs/next/guides/angular-ivy",draft:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/angular-ivy.md",tags:[],version:"current",lastUpdatedBy:"renovate[bot]",lastUpdatedAt:1722455661e3,frontMatter:{id:"angular-ivy",title:"Angular Ivy"},sidebar:"docs",previous:{title:"Test environment",permalink:"/jest-preset-angular/docs/next/getting-started/test-environment"},next:{title:"Angular >=13",permalink:"/jest-preset-angular/docs/next/guides/angular-13+"}},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,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["This step is ",(0,r.jsx)(t.strong,{children:"OPTIONAL"})]})}),"\n",(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 a Jest global setup file to help you to run ",(0,r.jsx)(t.code,{children:"ngcc"})," with Jest. Add to the following section:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["to your root ",(0,r.jsx)(t.code,{children:"jest.config.js"})]}),"\n"]}),"\n",(0,r.jsxs)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(l.Z,{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 globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,r.jsx)(l.Z,{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 globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,r.jsx)(t.code,{children:"ngcc"})," via ",(0,r.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,r.jsxs)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(l.Z,{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\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,r.jsx)(l.Z,{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\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,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(5893);function v(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.Z)("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:c,...a,className:(0,s.Z)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,s.Z)("tabs-container",b.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var r=n(7294);const s={},a=r.createContext(s);function l(e){const t=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/151633a5.1815930c.js b/assets/js/151633a5.1815930c.js deleted file mode 100644 index e89bd97236..0000000000 --- a/assets/js/151633a5.1815930c.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6371],{4697:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>u,frontMatter:()=>r,metadata:()=>c,toc:()=>d});var s=n(5893),o=n(1151);const r={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},i=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/introduction.md",tags:[],version:"11.0",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.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,s.jsxs)(t.p,{children:["This is a part of the article: ",(0,s.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,s.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,s.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,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>i});var s=n(7294);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/151633a5.683be84a.js b/assets/js/151633a5.683be84a.js new file mode 100644 index 0000000000..6350d3b659 --- /dev/null +++ b/assets/js/151633a5.683be84a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6371],{4697:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>u,frontMatter:()=>s,metadata:()=>c,toc:()=>d});var o=n(5893),r=n(1151);const s={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.a)(),...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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>i});var o=n(7294);const r={},s=o.createContext(r);function i(e){const t=o.useContext(s);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(r):e.components||r:i(e.components),o.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/1a421168.b1316be9.js b/assets/js/1a421168.b1316be9.js deleted file mode 100644 index ac2da6faaf..0000000000 --- a/assets/js/1a421168.b1316be9.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7119],{829:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var s=n(5893),r=n(1151);const i={id:"test-environment",title:"Test environment"},o=void 0,a={id:"getting-started/test-environment",title:"Test environment",description:"If you look at setup-jest.js,",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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/getting-started/test-environment.md",tags:[],version:"current",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},l={},c=[{value:"Configure test environment",id:"configure-test-environment",level:3}];function d(e){const t={a:"a",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["If you look at ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.js",children:(0,s.jsx)(t.code,{children:"setup-jest.js"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,s.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,s.jsxs)(t.p,{children:["While ",(0,s.jsx)(t.code,{children:"setup-jest.js"})," above is for running Jest with ",(0,s.jsx)(t.strong,{children:"CommonJS"})," mode, we also provide ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.mjs",children:(0,s.jsx)(t.code,{children:"setup-jest.mjs"})}),"\nto run with ",(0,s.jsx)(t.strong,{children:"ESM"})," mode."]}),"\n",(0,s.jsx)(t.h3,{id:"configure-test-environment",children:"Configure test environment"}),"\n",(0,s.jsxs)(t.p,{children:["When creating Angular test environment with ",(0,s.jsx)(t.code,{children:"TestBed"}),", it is possible to specify the ",(0,s.jsx)(t.code,{children:"testEnvironmentOptions"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," in the Jest setup file.\nFor example:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," will look at ",(0,s.jsx)(t.code,{children:"globalThis.ngJest"})," and pass the correct ",(0,s.jsx)(t.a,{href:"https://angular.io/api/core/testing/TestEnvironmentOptions",children:(0,s.jsx)(t.code,{children:"TestEnvironmentOptions"})})," object to ",(0,s.jsx)(t.code,{children:"TestBed"}),"."]})]})}function u(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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/1a421168.e65e19b9.js b/assets/js/1a421168.e65e19b9.js new file mode 100644 index 0000000000..ca3dc68aef --- /dev/null +++ b/assets/js/1a421168.e65e19b9.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7119],{829:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var s=n(5893),r=n(1151);const i={id:"test-environment",title:"Test environment"},o=void 0,a={id:"getting-started/test-environment",title:"Test environment",description:"If you look at setup-jest.js,",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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/getting-started/test-environment.md",tags:[],version:"current",lastUpdatedBy:"renovate[bot]",lastUpdatedAt:1722455661e3,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"}},l={},c=[{value:"Configure test environment",id:"configure-test-environment",level:3}];function d(e){const t={a:"a",code:"code",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["If you look at ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.js",children:(0,s.jsx)(t.code,{children:"setup-jest.js"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,s.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,s.jsxs)(t.p,{children:["While ",(0,s.jsx)(t.code,{children:"setup-jest.js"})," above is for running Jest with ",(0,s.jsx)(t.strong,{children:"CommonJS"})," mode, we also provide ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.mjs",children:(0,s.jsx)(t.code,{children:"setup-jest.mjs"})}),"\nto run with ",(0,s.jsx)(t.strong,{children:"ESM"})," mode."]}),"\n",(0,s.jsx)(t.h3,{id:"configure-test-environment",children:"Configure test environment"}),"\n",(0,s.jsxs)(t.p,{children:["When creating Angular test environment with ",(0,s.jsx)(t.code,{children:"TestBed"}),", it is possible to specify the ",(0,s.jsx)(t.code,{children:"testEnvironmentOptions"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," in the Jest setup file.\nFor example:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," will look at ",(0,s.jsx)(t.code,{children:"globalThis.ngJest"})," and pass the correct ",(0,s.jsx)(t.a,{href:"https://angular.io/api/core/testing/TestEnvironmentOptions",children:(0,s.jsx)(t.code,{children:"TestEnvironmentOptions"})})," object to ",(0,s.jsx)(t.code,{children:"TestBed"}),"."]})]})}function u(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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/1a5572f6.7d018c6c.js b/assets/js/1a5572f6.7d018c6c.js new file mode 100644 index 0000000000..b7fbca7ec0 --- /dev/null +++ b/assets/js/1a5572f6.7d018c6c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2769],{8603:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>g,frontMatter:()=>o,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),a=n(3992),l=n(425);const o={id:"angular-ivy",title:"Angular Ivy"},i=void 0,u={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:!1,unlisted:!1,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:1722455661e3,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+"}},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,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["This step is ",(0,r.jsx)(t.strong,{children:"OPTIONAL"})]})}),"\n",(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 a Jest global setup file to help you to run ",(0,r.jsx)(t.code,{children:"ngcc"})," with Jest. Add to 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)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(l.Z,{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 globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,r.jsx)(l.Z,{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 globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,r.jsx)(t.code,{children:"ngcc"})," via ",(0,r.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,r.jsxs)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(l.Z,{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\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,r.jsx)(l.Z,{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\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,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):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!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var r=n(7294);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/1a5572f6.b1921b55.js b/assets/js/1a5572f6.b1921b55.js deleted file mode 100644 index 45f4382570..0000000000 --- a/assets/js/1a5572f6.b1921b55.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2769],{8603:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>g,frontMatter:()=>o,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),a=n(3992),l=n(425);const o={id:"angular-ivy",title:"Angular Ivy"},i=void 0,u={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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+"}},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,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["This step is ",(0,r.jsx)(t.strong,{children:"OPTIONAL"})]})}),"\n",(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 a Jest global setup file to help you to run ",(0,r.jsx)(t.code,{children:"ngcc"})," with Jest. Add to 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)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(l.Z,{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 globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,r.jsx)(l.Z,{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 globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,r.jsx)(t.code,{children:"ngcc"})," via ",(0,r.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,r.jsxs)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(l.Z,{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\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,r.jsx)(l.Z,{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\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,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):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!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var r=n(7294);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/1e388ac9.85f5f837.js b/assets/js/1e388ac9.85f5f837.js new file mode 100644 index 0000000000..1b45ea3924 --- /dev/null +++ b/assets/js/1e388ac9.85f5f837.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[157],{6802:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>l,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),o=n(425);const l={id:"presets",title:"Presets"},i=void 0,c={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/getting-started/presets",draft:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Preset name"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,s.jsx)("br",{}),"or ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,s.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,s.jsx)(t.code,{children:"js"}),", ",(0,s.jsx)(t.code,{children:".ts"}),", ",(0,s.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,s.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,s.jsx)("br",{})]}),(0,s.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,s.jsx)(t.code,{children:"js"}),", ",(0,s.jsx)(t.code,{children:".ts"}),", ",(0,s.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,s.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,s.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,s.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,s.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,s.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,s.jsxs)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(o.Z,{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 // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n"})})}),(0,s.jsx)(o.Z,{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 // 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,s.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,s.jsxs)(t.p,{children:["All presets come with default ",(0,s.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,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["If you choose to override ",(0,s.jsx)(t.code,{children:"transform"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,s.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,s.jsx)(t.code,{children:"transform"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,s.jsxs)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(o.Z,{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\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,s.jsx)(o.Z,{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';\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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>o});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function o(e){let{children:t,hidden:n,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,o),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),o=n(6550),l=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>l,a:()=>o});var s=n(7294);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/1e388ac9.aaa07706.js b/assets/js/1e388ac9.aaa07706.js deleted file mode 100644 index c19e0b6c2d..0000000000 --- a/assets/js/1e388ac9.aaa07706.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[157],{6802:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>l,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),o=n(425);const l={id:"presets",title:"Presets"},i=void 0,c={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/getting-started/presets",draft:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Preset name"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,s.jsx)("br",{}),"or ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,s.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,s.jsx)(t.code,{children:"js"}),", ",(0,s.jsx)(t.code,{children:".ts"}),", ",(0,s.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,s.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,s.jsx)("br",{})]}),(0,s.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,s.jsx)(t.code,{children:"js"}),", ",(0,s.jsx)(t.code,{children:".ts"}),", ",(0,s.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,s.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,s.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,s.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,s.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,s.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,s.jsxs)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(o.Z,{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 // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n"})})}),(0,s.jsx)(o.Z,{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 // 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,s.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,s.jsxs)(t.p,{children:["All presets come with default ",(0,s.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,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["If you choose to override ",(0,s.jsx)(t.code,{children:"transform"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,s.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,s.jsx)(t.code,{children:"transform"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,s.jsxs)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(o.Z,{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\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,s.jsx)(o.Z,{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';\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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>o});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function o(e){let{children:t,hidden:n,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,o),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),o=n(6550),l=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>l,a:()=>o});var s=n(7294);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.711818d7.js b/assets/js/203fc93e.711818d7.js deleted file mode 100644 index 1770c54903..0000000000 --- a/assets/js/203fc93e.711818d7.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5590],{6577:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>g,frontMatter:()=>o,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),a=n(3992),l=n(425);const o={id:"angular-ivy",title:"Angular Ivy"},i=void 0,u={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/guides/angular-ivy",draft:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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+"}},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,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["This step is ",(0,r.jsx)(t.strong,{children:"OPTIONAL"})]})}),"\n",(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 a Jest global setup file to help you to run ",(0,r.jsx)(t.code,{children:"ngcc"})," with Jest. Add to the following section:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["to your root ",(0,r.jsx)(t.code,{children:"jest.config.js"})]}),"\n"]}),"\n",(0,r.jsxs)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(l.Z,{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 globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,r.jsx)(l.Z,{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 globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,r.jsx)(t.code,{children:"ngcc"})," via ",(0,r.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,r.jsxs)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(l.Z,{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\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,r.jsx)(l.Z,{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\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,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(5893);function v(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.Z)("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:c,...a,className:(0,s.Z)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,s.Z)("tabs-container",b.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var r=n(7294);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/203fc93e.e20c58bb.js b/assets/js/203fc93e.e20c58bb.js new file mode 100644 index 0000000000..eb8cd9d0ca --- /dev/null +++ b/assets/js/203fc93e.e20c58bb.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5590],{6577:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>g,frontMatter:()=>o,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),a=n(3992),l=n(425);const o={id:"angular-ivy",title:"Angular Ivy"},i=void 0,u={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/guides/angular-ivy",draft:!1,unlisted:!1,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:1722455661e3,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+"}},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,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["This step is ",(0,r.jsx)(t.strong,{children:"OPTIONAL"})]})}),"\n",(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 a Jest global setup file to help you to run ",(0,r.jsx)(t.code,{children:"ngcc"})," with Jest. Add to the following section:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["to your root ",(0,r.jsx)(t.code,{children:"jest.config.js"})]}),"\n"]}),"\n",(0,r.jsxs)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(l.Z,{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 globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,r.jsx)(l.Z,{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 globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,r.jsx)(t.code,{children:"ngcc"})," via ",(0,r.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,r.jsxs)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(l.Z,{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\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,r.jsx)(l.Z,{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\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,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(5893);function v(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.Z)("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:c,...a,className:(0,s.Z)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,s.Z)("tabs-container",b.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var r=n(7294);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.1976923d.js b/assets/js/22e4d634.1976923d.js new file mode 100644 index 0000000000..0ce607eaea --- /dev/null +++ b/assets/js/22e4d634.1976923d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6122],{7863:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var r=s(5893),t=s(1151);const o={id:"troubleshooting",title:"Troubleshooting"},i=void 0,a={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:!1,unlisted:!1,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:1722455661e3,frontMatter:{id:"troubleshooting",title:"Troubleshooting"},sidebar:"docs",previous:{title:"Absolute Imports",permalink:"/jest-preset-angular/docs/10.x/guides/absolute-imports"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"Object.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.\":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.jsx)(n.pre,{children:(0,r.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,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-js",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-js",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,{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.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\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,{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,{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-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,r.jsx)(n.pre,{children:(0,r.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,t.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>a,a:()=>i});var r=s(7294);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/22e4d634.f9c709e9.js b/assets/js/22e4d634.f9c709e9.js deleted file mode 100644 index 87da111278..0000000000 --- a/assets/js/22e4d634.f9c709e9.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6122],{7863:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var r=s(5893),t=s(1151);const o={id:"troubleshooting",title:"Troubleshooting"},i=void 0,a={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/guides/troubleshooting.md",tags:[],version:"10.x",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,frontMatter:{id:"troubleshooting",title:"Troubleshooting"},sidebar:"docs",previous:{title:"Absolute Imports",permalink:"/jest-preset-angular/docs/10.x/guides/absolute-imports"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"Object.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.\":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.jsx)(n.pre,{children:(0,r.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,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-js",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-js",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,{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.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\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,{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,{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-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,r.jsx)(n.pre,{children:(0,r.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,t.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>a,a:()=>i});var r=s(7294);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.88536cb3.js b/assets/js/252e2b80.88536cb3.js new file mode 100644 index 0000000000..fe8ca5437d --- /dev/null +++ b/assets/js/252e2b80.88536cb3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9254],{9355:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>i,default:()=>h,frontMatter:()=>r,metadata:()=>c,toc:()=>a});var s=t(5893),o=t(1151);const r={id:"options",title:"Options"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},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,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,s.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,s.jsx)(n.code,{children:"globals"})," of Jest config object\nin the ",(0,s.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,s.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,s.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,s.jsxs)(n.p,{children:["More information about ",(0,s.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,s.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,s.jsxs)(n.admonition,{type:"important",children:[(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,s.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,s.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config"]}),(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.admonition,{type:"important",children:(0,s.jsxs)(n.p,{children:["Jest runs with ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,s.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,s.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,s.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["we're using some ",(0,s.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,s.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,s.jsx)(n.code,{children:"TS"}),", ",(0,s.jsx)(n.code,{children:"JS"}),", ",(0,s.jsx)(n.code,{children:"MJS"}),", ",(0,s.jsx)(n.code,{children:"HTML"}),", or ",(0,s.jsx)(n.code,{children:"SVG"})," file through so called ",(0,s.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,s.jsx)(n.code,{children:"ts"}),"), HTML (",(0,s.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,s.jsx)(n.code,{children:"js"}),") and JSON (",(0,s.jsx)(n.code,{children:"json"}),") files."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.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,s.jsxs)(n.li,{children:[(0,s.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,s.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,s.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,s.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,s.jsx)(n.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,s.jsx)(n.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>i});var s=t(7294);const o={},r=s.createContext(o);function i(e){const n=s.useContext(r);return s.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),s.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/252e2b80.e774845b.js b/assets/js/252e2b80.e774845b.js deleted file mode 100644 index 1167b54a57..0000000000 --- a/assets/js/252e2b80.e774845b.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9254],{9355:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>d,contentTitle:()=>i,default:()=>h,frontMatter:()=>r,metadata:()=>c,toc:()=>a});var t=s(5893),o=s(1151);const r={id:"options",title:"Options"},i=void 0,c={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,t.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,t.jsx)(n.code,{children:"globals"})," of Jest config object\nin the ",(0,t.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,t.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,t.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,t.jsxs)(n.p,{children:["More information about ",(0,t.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,t.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,t.jsxs)(n.admonition,{type:"important",children:[(0,t.jsxs)(n.p,{children:["Since ",(0,t.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,t.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,t.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config"]}),(0,t.jsx)(n.pre,{children:(0,t.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,t.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.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,t.jsx)(n.admonition,{type:"important",children:(0,t.jsxs)(n.p,{children:["Jest runs with ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,t.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,t.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,t.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["we're using some ",(0,t.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,t.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,t.jsx)(n.code,{children:"TS"}),", ",(0,t.jsx)(n.code,{children:"JS"}),", ",(0,t.jsx)(n.code,{children:"MJS"}),", ",(0,t.jsx)(n.code,{children:"HTML"}),", or ",(0,t.jsx)(n.code,{children:"SVG"})," file through so called ",(0,t.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,t.jsx)(n.code,{children:"ts"}),"), HTML (",(0,t.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,t.jsx)(n.code,{children:"js"}),") and JSON (",(0,t.jsx)(n.code,{children:"json"}),") files."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.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,t.jsxs)(n.li,{children:[(0,t.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,t.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,t.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,t.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,t.jsx)(n.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,t.jsx)(n.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(l,{...e})}):l(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>c,a:()=>i});var t=s(7294);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.041484db.js b/assets/js/26cb42b7.041484db.js new file mode 100644 index 0000000000..7845aaec2f --- /dev/null +++ b/assets/js/26cb42b7.041484db.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7079],{3405:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var n=s(5893),r=s(1151),a=s(3992),o=s(425);const i={id:"esm-support",title:"ESM Support"},l=void 0,u={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["To use ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,n.jsx)(t.code,{children:"ts-jest"})," config option ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["There is also a ",(0,n.jsx)(t.a,{href:"/jest-preset-angular/docs/14.0/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,n.jsx)(t.admonition,{type:"tip",children:(0,n.jsxs)(t.p,{children:["We have ",(0,n.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,n.jsxs)(t.p,{children:["Besides, there is ",(0,n.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,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,n.jsx)(t.h3,{id:"examples",children:"Examples"}),"\n",(0,n.jsx)(t.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(t.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,n.jsxs)(t.admonition,{type:"tip",children:[(0,n.jsxs)(t.p,{children:["Jest will attempt to load ",(0,n.jsx)(t.strong,{children:"ESM"})," files from ",(0,n.jsx)(t.code,{children:"node_modules"})," with default ",(0,n.jsx)(t.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,n.jsx)(t.strong,{children:"ESM"})," built files or ",(0,n.jsx)(t.strong,{children:"ESM"})," files which are outside ",(0,n.jsx)(t.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,n.jsxs)(t.p,{children:["To fix that, one can use ",(0,n.jsx)(t.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,n.jsx)(t.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},425:(e,t,s)=>{s.d(t,{Z:()=>o});s(7294);var n=s(512);const r={tabItem:"tabItem_Ymn6"};var a=s(5893);function o(e){let{children:t,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.Z)(r.tabItem,o),hidden:s,children:t})}},3992:(e,t,s)=>{s.d(t,{Z:()=>w});var n=s(7294),r=s(512),a=s(2957),o=s(6550),i=s(1270),l=s(5238),u=s(3609),c=s(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(5893);function b(e){let{className:t,block:s,selectedValue:n,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:r}=e;const a=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,n.cloneElement)(e,{className:"margin-top--md"}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=f(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,s)=>{s.d(t,{Z:()=>i,a:()=>o});var n=s(7294);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/26cb42b7.52d3e650.js b/assets/js/26cb42b7.52d3e650.js deleted file mode 100644 index 8f5d2b88e6..0000000000 --- a/assets/js/26cb42b7.52d3e650.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7079],{3405:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var n=s(5893),r=s(1151),a=s(3992),o=s(425);const i={id:"esm-support",title:"ESM Support"},l=void 0,u={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["To use ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,n.jsx)(t.code,{children:"ts-jest"})," config option ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["There is also a ",(0,n.jsx)(t.a,{href:"/jest-preset-angular/docs/14.0/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,n.jsx)(t.admonition,{type:"tip",children:(0,n.jsxs)(t.p,{children:["We have ",(0,n.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,n.jsxs)(t.p,{children:["Besides, there is ",(0,n.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,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,n.jsx)(t.h3,{id:"examples",children:"Examples"}),"\n",(0,n.jsx)(t.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(t.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,n.jsxs)(t.admonition,{type:"tip",children:[(0,n.jsxs)(t.p,{children:["Jest will attempt to load ",(0,n.jsx)(t.strong,{children:"ESM"})," files from ",(0,n.jsx)(t.code,{children:"node_modules"})," with default ",(0,n.jsx)(t.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,n.jsx)(t.strong,{children:"ESM"})," built files or ",(0,n.jsx)(t.strong,{children:"ESM"})," files which are outside ",(0,n.jsx)(t.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,n.jsxs)(t.p,{children:["To fix that, one can use ",(0,n.jsx)(t.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,n.jsx)(t.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},425:(e,t,s)=>{s.d(t,{Z:()=>o});s(7294);var n=s(512);const r={tabItem:"tabItem_Ymn6"};var a=s(5893);function o(e){let{children:t,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.Z)(r.tabItem,o),hidden:s,children:t})}},3992:(e,t,s)=>{s.d(t,{Z:()=>w});var n=s(7294),r=s(512),a=s(2957),o=s(6550),i=s(1270),l=s(5238),u=s(3609),c=s(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(5893);function b(e){let{className:t,block:s,selectedValue:n,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:r}=e;const a=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,n.cloneElement)(e,{className:"margin-top--md"}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=f(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,s)=>{s.d(t,{Z:()=>i,a:()=>o});var n=s(7294);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/54f44165.5429fa69.js b/assets/js/27299a3b.16576d9e.js similarity index 64% rename from assets/js/54f44165.5429fa69.js rename to assets/js/27299a3b.16576d9e.js index d496af5bc2..1c4efb44bf 100644 --- a/assets/js/54f44165.5429fa69.js +++ b/assets/js/27299a3b.16576d9e.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[152],{4646:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"installation",title:"Installation"},i=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/getting-started/installation.md",tags:[],version:"current",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsxs)(t.p,{children:["You can install ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,s.jsxs)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(l.Z,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,s.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Angular doesn't support native ",(0,s.jsx)(t.code,{children:"async/await"})," in testing with ",(0,s.jsx)(t.code,{children:"target"})," higher than ",(0,s.jsx)(t.code,{children:"ES2016"}),", see ",(0,s.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,s.jsxs)(t.p,{children:["In your project root, create ",(0,s.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,s.jsx)(t.p,{children:"Add 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)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["Adjust your ",(0,s.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:["Adjust ",(0,s.jsx)(t.code,{children:"scripts"})," part your ",(0,s.jsx)(t.code,{children:"package.json"})," to use ",(0,s.jsx)(t.code,{children:"jest"})," instead of ",(0,s.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,s.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,s.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,s.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Create a file ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,s.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.admonition,{type:"tip",children:[(0,s.jsxs)(t.p,{children:["An example for ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,s.jsx)(t.pre,{children:(0,s.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,s.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,s.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,s.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,s.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,s.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,s.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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([[4993],{6436:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"installation",title:"Installation"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsxs)(t.p,{children:["You can install ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,s.jsxs)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(l.Z,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,s.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Angular doesn't support native ",(0,s.jsx)(t.code,{children:"async/await"})," in testing with ",(0,s.jsx)(t.code,{children:"target"})," higher than ",(0,s.jsx)(t.code,{children:"ES2016"}),", see ",(0,s.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,s.jsxs)(t.p,{children:["In your project root, create ",(0,s.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,s.jsx)(t.p,{children:"Add 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)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["Adjust your ",(0,s.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:["Adjust ",(0,s.jsx)(t.code,{children:"scripts"})," part your ",(0,s.jsx)(t.code,{children:"package.json"})," to use ",(0,s.jsx)(t.code,{children:"jest"})," instead of ",(0,s.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,s.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,s.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,s.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Create a file ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,s.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.admonition,{type:"tip",children:[(0,s.jsxs)(t.p,{children:["An example for ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,s.jsx)(t.pre,{children:(0,s.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,s.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,s.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,s.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,s.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,s.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,s.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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/27299a3b.f12501d9.js b/assets/js/27299a3b.f12501d9.js deleted file mode 100644 index ace21a2a01..0000000000 --- a/assets/js/27299a3b.f12501d9.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4993],{6436:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"installation",title:"Installation"},i=void 0,c={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsxs)(t.p,{children:["You can install ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,s.jsxs)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(l.Z,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,s.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Angular doesn't support native ",(0,s.jsx)(t.code,{children:"async/await"})," in testing with ",(0,s.jsx)(t.code,{children:"target"})," higher than ",(0,s.jsx)(t.code,{children:"ES2016"}),", see ",(0,s.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,s.jsxs)(t.p,{children:["In your project root, create ",(0,s.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,s.jsx)(t.p,{children:"Add 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)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["Adjust your ",(0,s.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:["Adjust ",(0,s.jsx)(t.code,{children:"scripts"})," part your ",(0,s.jsx)(t.code,{children:"package.json"})," to use ",(0,s.jsx)(t.code,{children:"jest"})," instead of ",(0,s.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,s.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,s.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,s.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Create a file ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,s.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.admonition,{type:"tip",children:[(0,s.jsxs)(t.p,{children:["An example for ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,s.jsx)(t.pre,{children:(0,s.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,s.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,s.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,s.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,s.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,s.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,s.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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/29d26392.1d112b5c.js b/assets/js/29d26392.1d112b5c.js new file mode 100644 index 0000000000..3b8de58805 --- /dev/null +++ b/assets/js/29d26392.1d112b5c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7552],{6366:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>d,toc:()=>l});var n=s(5893),r=s(1151);const o={id:"presets",title:"Presets"},i=void 0,d={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Preset name"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,n.jsx)("br",{}),"or ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,n.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,n.jsx)(t.code,{children:"js"}),", ",(0,n.jsx)(t.code,{children:".ts"}),", ",(0,n.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,n.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,n.jsx)("br",{})]}),(0,n.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,n.jsx)(t.code,{children:"js"}),", ",(0,n.jsx)(t.code,{children:".ts"}),", ",(0,n.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,n.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,n.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,n.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,n.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,n.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,n.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,n.jsxs)(t.p,{children:["All presets come with default ",(0,n.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,n.jsx)(t.admonition,{type:"important",children:(0,n.jsxs)(t.p,{children:["If you choose to override ",(0,n.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,n.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,n.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,n.jsxs)(t.p,{children:["Or through TypeScript (if ",(0,n.jsx)(t.code,{children:"ts-node"})," is installed):"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>d,a:()=>i});var n=s(7294);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/29d26392.58ea74a0.js b/assets/js/29d26392.58ea74a0.js deleted file mode 100644 index 305c887d64..0000000000 --- a/assets/js/29d26392.58ea74a0.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7552],{6366:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>d,toc:()=>l});var n=s(5893),r=s(1151);const o={id:"presets",title:"Presets"},i=void 0,d={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Preset name"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,n.jsx)("br",{}),"or ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,n.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,n.jsx)(t.code,{children:"js"}),", ",(0,n.jsx)(t.code,{children:".ts"}),", ",(0,n.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,n.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,n.jsx)("br",{})]}),(0,n.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,n.jsx)(t.code,{children:"js"}),", ",(0,n.jsx)(t.code,{children:".ts"}),", ",(0,n.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,n.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,n.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,n.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,n.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,n.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,n.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,n.jsxs)(t.p,{children:["All presets come with default ",(0,n.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,n.jsx)(t.admonition,{type:"important",children:(0,n.jsxs)(t.p,{children:["If you choose to override ",(0,n.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,n.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,n.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,n.jsxs)(t.p,{children:["Or through TypeScript (if ",(0,n.jsx)(t.code,{children:"ts-node"})," is installed):"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>d,a:()=>i});var n=s(7294);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/2ab18ce5.427d9dbf.js b/assets/js/2ab18ce5.427d9dbf.js deleted file mode 100644 index 39283c93e1..0000000000 --- a/assets/js/2ab18ce5.427d9dbf.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2590],{2413:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>u,frontMatter:()=>r,metadata:()=>c,toc:()=>d});var s=n(5893),o=n(1151);const r={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},i=void 0,c={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/",draft:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/introduction.md",tags:[],version:"14.2",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.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,s.jsxs)(t.p,{children:["This is a part of the article: ",(0,s.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,s.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,s.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,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>i});var s=n(7294);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/2ab18ce5.f3682a94.js b/assets/js/2ab18ce5.f3682a94.js new file mode 100644 index 0000000000..dfc42d0e4d --- /dev/null +++ b/assets/js/2ab18ce5.f3682a94.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2590],{2413:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>u,frontMatter:()=>s,metadata:()=>c,toc:()=>d});var o=n(5893),r=n(1151);const s={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},i=void 0,c={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/",draft:!1,unlisted:!1,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:1722455661e3,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"}},a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.a)(),...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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>i});var o=n(7294);const r={},s=o.createContext(r);function i(e){const t=o.useContext(s);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(r):e.components||r:i(e.components),o.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/2ae17008.6ae7d940.js b/assets/js/2ae17008.6ae7d940.js deleted file mode 100644 index 35e3698619..0000000000 --- a/assets/js/2ae17008.6ae7d940.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6550],{2543:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>c,frontMatter:()=>r,metadata:()=>p,toc:()=>u});var n=s(5893),o=s(1151);const r={id:"esm-support",title:"ESM Support"},i=void 0,p={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},u=[];function d(e){const t={admonition:"admonition",p:"p",strong:"strong",...(0,o.a)(),...e.components};return(0,n.jsx)(t.admonition,{type:"important",children:(0,n.jsxs)(t.p,{children:["ESM support is only available in ",(0,n.jsx)(t.strong,{children:"v9.0.0++"})]})})}function c(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>p,a:()=>i});var n=s(7294);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/2ae17008.aabf325b.js b/assets/js/2ae17008.aabf325b.js new file mode 100644 index 0000000000..eb2c40c979 --- /dev/null +++ b/assets/js/2ae17008.aabf325b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6550],{2543:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>p,contentTitle:()=>i,default:()=>c,frontMatter:()=>r,metadata:()=>a,toc:()=>u});var n=s(5893),o=s(1151);const r={id:"esm-support",title:"ESM Support"},i=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},p={},u=[];function d(e){const t={admonition:"admonition",p:"p",strong:"strong",...(0,o.a)(),...e.components};return(0,n.jsx)(t.admonition,{type:"important",children:(0,n.jsxs)(t.p,{children:["ESM support is only available in ",(0,n.jsx)(t.strong,{children:"v9.0.0++"})]})})}function c(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>a,a:()=>i});var n=s(7294);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/2e81e74f.a89e33cd.js b/assets/js/2e81e74f.a89e33cd.js new file mode 100644 index 0000000000..0463299790 --- /dev/null +++ b/assets/js/2e81e74f.a89e33cd.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1753],{1130:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>g,frontMatter:()=>o,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),a=n(3992),l=n(425);const o={id:"angular-ivy",title:"Angular Ivy"},i=void 0,u={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:!1,unlisted:!1,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:1722455661e3,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+"}},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,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["This step is ",(0,r.jsx)(t.strong,{children:"OPTIONAL"})]})}),"\n",(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 a Jest global setup file to help you to run ",(0,r.jsx)(t.code,{children:"ngcc"})," with Jest. Add to 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)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(l.Z,{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 globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,r.jsx)(l.Z,{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 globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,r.jsx)(t.code,{children:"ngcc"})," via ",(0,r.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,r.jsxs)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(l.Z,{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\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,r.jsx)(l.Z,{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\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,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):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!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var r=n(7294);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/2e81e74f.f4df6af6.js b/assets/js/2e81e74f.f4df6af6.js deleted file mode 100644 index 5b2e8e6159..0000000000 --- a/assets/js/2e81e74f.f4df6af6.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1753],{1130:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>g,frontMatter:()=>o,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),a=n(3992),l=n(425);const o={id:"angular-ivy",title:"Angular Ivy"},i=void 0,u={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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+"}},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,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.admonition,{type:"important",children:(0,r.jsxs)(t.p,{children:["This step is ",(0,r.jsx)(t.strong,{children:"OPTIONAL"})]})}),"\n",(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 a Jest global setup file to help you to run ",(0,r.jsx)(t.code,{children:"ngcc"})," with Jest. Add to 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)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(l.Z,{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 globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,r.jsx)(l.Z,{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 globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,r.jsx)(t.code,{children:"ngcc"})," via ",(0,r.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,r.jsxs)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(l.Z,{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\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,r.jsx)(l.Z,{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\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,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):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!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var r=n(7294);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.a779f329.js b/assets/js/30388853.a779f329.js deleted file mode 100644 index 162d414473..0000000000 --- a/assets/js/30388853.a779f329.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2965],{2037:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>d,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var n=s(5893),o=s(1151);const r={id:"processing",title:"Processing flow"},i=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/processing.md",tags:[],version:"13.0",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,o.a)(),...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,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>c,a:()=>i});var n=s(7294);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/30388853.ecdd8b48.js b/assets/js/30388853.ecdd8b48.js new file mode 100644 index 0000000000..112bc3c7db --- /dev/null +++ b/assets/js/30388853.ecdd8b48.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2965],{2037:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var o=s(5893),n=s(1151);const r={id:"processing",title:"Processing flow"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},a={},l=[];function d(e){const t={a:"a",code:"code",p:"p",...(0,n.a)(),...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 p(e={}){const{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>c,a:()=>i});var o=s(7294);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/33a5adb4.0e94b53f.js b/assets/js/33a5adb4.0e94b53f.js deleted file mode 100644 index 8e084656ce..0000000000 --- a/assets/js/33a5adb4.0e94b53f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1591],{2153:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>p,default:()=>j,frontMatter:()=>o,metadata:()=>c,toc:()=>h});var s=t(5893),i=t(1151),r=t(3992),l=t(425),a=t(8839);const o={id:"snapshot-testing",title:"Snapshot testing"},p=void 0,c={id:"guides/snapshot-testing",title:"Snapshot testing",description:"jest-preset-angular provides several snapshot serializers to generate clearer and more human-readable snapshot.",source:"@site/versioned_docs/version-14.2/guides/snapshot-testing.md",sourceDirName:"guides",slug:"/guides/snapshot-testing",permalink:"/jest-preset-angular/docs/guides/snapshot-testing",draft:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/guides/snapshot-testing.md",tags:[],version:"14.2",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,frontMatter:{id:"snapshot-testing",title:"Snapshot testing"},sidebar:"docs",previous:{title:"Configure other JSDOM versions",permalink:"/jest-preset-angular/docs/guides/jsdom-version"},next:{title:"Using with Babel",permalink:"/jest-preset-angular/docs/guides/using-with-babel"}},d={},h=[{value:"Snapshot serializers",id:"snapshot-serializers",level:2},{value:"Reference",id:"reference",level:2},{value:"Remove html comments (html-comment)",id:"remove-html-comments-html-comment",level:3},{value:"In Jest config",id:"in-jest-config",level:4},{value:"Or in setup test environment file",id:"or-in-setup-test-environment-file",level:4},{value:"Or in individual test files",id:"or-in-individual-test-files",level:4},{value:"Display component HTML (ng-snapshot)",id:"display-component-html-ng-snapshot",level:3},{value:"Configuration options",id:"configuration-options",level:4},{value:"In Jest config",id:"in-jest-config-1",level:4},{value:"Or in setup test environment file",id:"or-in-setup-test-environment-file-1",level:4},{value:"Or in individual test files",id:"or-in-individual-test-files-1",level:4},{value:"With options",id:"with-options",level:4},{value:"Remove Angular attributes (no-ng-attributes)",id:"remove-angular-attributes-no-ng-attributes",level:3},{value:"In Jest config",id:"in-jest-config-2",level:4},{value:"Or in setup test environment file",id:"or-in-setup-test-environment-file-2",level:4},{value:"Or in individual test files",id:"or-in-individual-test-files-2",level:4}];function m(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," provides several snapshot serializers to generate clearer and more human-readable snapshot."]}),"\n",(0,s.jsx)(n.admonition,{type:"info",children:(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"BY DEFAULT"}),", the ",(0,s.jsx)(n.a,{href:"/jest-preset-angular/docs/getting-started/presets",children:"preset"})," provides all of the snapshot serializers below."]})}),"\n",(0,s.jsx)(n.h2,{id:"snapshot-serializers",children:"Snapshot serializers"}),"\n","\n",(0,s.jsx)(a.Z,{toc:h.slice(2)}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h2,{id:"reference",children:"Reference"}),"\n",(0,s.jsxs)(n.h3,{id:"remove-html-comments-html-comment",children:["Remove html comments (",(0,s.jsx)(n.code,{children:"html-comment"}),")"]}),"\n",(0,s.jsx)(n.p,{children:"Allow removing all the comments in the component HTML in snapshot."}),"\n",(0,s.jsx)(n.p,{children:"Examples:"}),"\n",(0,s.jsx)(n.h4,{id:"in-jest-config",children:"In Jest config"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/html-comment'],\n //[...]\n};\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/html-comment'],\n //[...]\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-setup-test-environment-file",children:"Or in setup test environment file"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="setup-jest.js"',children:"const removeHtmlCommentsSerializer = require('jest-preset-angular/build/serializers/html-comment');\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import removeHtmlCommentsSerializer from 'jest-preset-angular/build/serializers/html-comment';\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n"})})]})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-individual-test-files",children:"Or in individual test files"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const removeHtmlCommentsSerializer = require('jest-preset-angular/build/serializers/html-comment');\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import removeHtmlCommentsSerializer from 'jest-preset-angular/build/serializers/html-comment';\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})})]}),"\n",(0,s.jsxs)(n.h3,{id:"display-component-html-ng-snapshot",children:["Display component HTML (",(0,s.jsx)(n.code,{children:"ng-snapshot"}),")"]}),"\n",(0,s.jsx)(n.p,{children:"Allow displaying component HTML with data in snapshot."}),"\n",(0,s.jsx)(n.h4,{id:"configuration-options",children:"Configuration options"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"type NgSnapshotOptions = {\n omitAllCompAttrs?: boolean;\n};\n"})}),"\n",(0,s.jsx)(n.p,{children:"Configure snapshot behavior"}),"\n",(0,s.jsx)(n.p,{children:"Examples:"}),"\n",(0,s.jsx)(n.h4,{id:"in-jest-config-1",children:"In Jest config"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/ng-snapshot'],\n //[...]\n};\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/ng-snapshot'],\n //[...]\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-setup-test-environment-file-1",children:"Or in setup test environment file"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="setup-jest.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n"})})]})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-individual-test-files-1",children:"Or in individual test files"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"with-options",children:"With options"}),"\n",(0,s.jsxs)(n.admonition,{title:"Effective priority",type:"info",children:[(0,s.jsx)(n.p,{children:"The configured serializers will have affect in this order:"}),(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"Jest config"})," -> ",(0,s.jsx)(n.code,{children:"setup files"})," -> ",(0,s.jsx)(n.code,{children:"test files"})]}),(0,s.jsx)(n.p,{children:"The later the higher priority. This means that with the same serializer, the later one will override the configuration\nof the previous one in the chain."})]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"In setup files:"}),"\n"]}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="setup-jest.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="setup-jest.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n"})})]})]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"or in individual test files:"}),"\n"]}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n\nit('should work', () => {\n //[...]\n});\n"})})})]}),"\n",(0,s.jsxs)(n.h3,{id:"remove-angular-attributes-no-ng-attributes",children:["Remove Angular attributes (",(0,s.jsx)(n.code,{children:"no-ng-attributes"}),")"]}),"\n",(0,s.jsxs)(n.p,{children:["Allow removing attributes generated by Angular fixture, like ",(0,s.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,s.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,s.jsx)(n.code,{children:"_ngcontent-c*"})," etc., from component snapshot"]}),"\n",(0,s.jsx)(n.p,{children:"Examples:"}),"\n",(0,s.jsx)(n.h4,{id:"in-jest-config-2",children:"In Jest config"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/no-ng-attributes'],\n //[...]\n};\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/no-ng-attributes'],\n //[...]\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-setup-test-environment-file-2",children:"Or in setup test environment file"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="setup-jest.js"',children:"const removeNgAttributes = require('jest-preset-angular/build/serializers/no-ng-attributes');\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import removeNgAttributes from 'jest-preset-angular/build/serializers/no-ng-attributes';\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n"})})]})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-individual-test-files-2",children:"Or in individual test files"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const removeNgAttributes = require('jest-preset-angular/build/serializers/no-ng-attributes');\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import removeNgAttributes from 'jest-preset-angular/build/serializers/no-ng-attributes';\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n\nit('should work', () => {\n //[...]\n});\n"})})})]})]})}function j(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(m,{...e})}):m(e)}}}]); \ No newline at end of file diff --git a/assets/js/33a5adb4.a86e12f0.js b/assets/js/33a5adb4.a86e12f0.js new file mode 100644 index 0000000000..a63950f346 --- /dev/null +++ b/assets/js/33a5adb4.a86e12f0.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1591],{2153:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>p,default:()=>j,frontMatter:()=>o,metadata:()=>c,toc:()=>h});var s=t(5893),i=t(1151),r=t(3992),l=t(425),a=t(8839);const o={id:"snapshot-testing",title:"Snapshot testing"},p=void 0,c={id:"guides/snapshot-testing",title:"Snapshot testing",description:"jest-preset-angular provides several snapshot serializers to generate clearer and more human-readable snapshot.",source:"@site/versioned_docs/version-14.2/guides/snapshot-testing.md",sourceDirName:"guides",slug:"/guides/snapshot-testing",permalink:"/jest-preset-angular/docs/guides/snapshot-testing",draft:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/guides/snapshot-testing.md",tags:[],version:"14.2",lastUpdatedBy:"renovate[bot]",lastUpdatedAt:1722455661e3,frontMatter:{id:"snapshot-testing",title:"Snapshot testing"},sidebar:"docs",previous:{title:"Configure other JSDOM versions",permalink:"/jest-preset-angular/docs/guides/jsdom-version"},next:{title:"Using with Babel",permalink:"/jest-preset-angular/docs/guides/using-with-babel"}},d={},h=[{value:"Snapshot serializers",id:"snapshot-serializers",level:2},{value:"Reference",id:"reference",level:2},{value:"Remove html comments (html-comment)",id:"remove-html-comments-html-comment",level:3},{value:"In Jest config",id:"in-jest-config",level:4},{value:"Or in setup test environment file",id:"or-in-setup-test-environment-file",level:4},{value:"Or in individual test files",id:"or-in-individual-test-files",level:4},{value:"Display component HTML (ng-snapshot)",id:"display-component-html-ng-snapshot",level:3},{value:"Configuration options",id:"configuration-options",level:4},{value:"In Jest config",id:"in-jest-config-1",level:4},{value:"Or in setup test environment file",id:"or-in-setup-test-environment-file-1",level:4},{value:"Or in individual test files",id:"or-in-individual-test-files-1",level:4},{value:"With options",id:"with-options",level:4},{value:"Remove Angular attributes (no-ng-attributes)",id:"remove-angular-attributes-no-ng-attributes",level:3},{value:"In Jest config",id:"in-jest-config-2",level:4},{value:"Or in setup test environment file",id:"or-in-setup-test-environment-file-2",level:4},{value:"Or in individual test files",id:"or-in-individual-test-files-2",level:4}];function m(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," provides several snapshot serializers to generate clearer and more human-readable snapshot."]}),"\n",(0,s.jsx)(n.admonition,{type:"info",children:(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"BY DEFAULT"}),", the ",(0,s.jsx)(n.a,{href:"/jest-preset-angular/docs/getting-started/presets",children:"preset"})," provides all of the snapshot serializers below."]})}),"\n",(0,s.jsx)(n.h2,{id:"snapshot-serializers",children:"Snapshot serializers"}),"\n","\n",(0,s.jsx)(a.Z,{toc:h.slice(2)}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h2,{id:"reference",children:"Reference"}),"\n",(0,s.jsxs)(n.h3,{id:"remove-html-comments-html-comment",children:["Remove html comments (",(0,s.jsx)(n.code,{children:"html-comment"}),")"]}),"\n",(0,s.jsx)(n.p,{children:"Allow removing all the comments in the component HTML in snapshot."}),"\n",(0,s.jsx)(n.p,{children:"Examples:"}),"\n",(0,s.jsx)(n.h4,{id:"in-jest-config",children:"In Jest config"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/html-comment'],\n //[...]\n};\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/html-comment'],\n //[...]\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-setup-test-environment-file",children:"Or in setup test environment file"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="setup-jest.js"',children:"const removeHtmlCommentsSerializer = require('jest-preset-angular/build/serializers/html-comment');\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import removeHtmlCommentsSerializer from 'jest-preset-angular/build/serializers/html-comment';\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n"})})]})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-individual-test-files",children:"Or in individual test files"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const removeHtmlCommentsSerializer = require('jest-preset-angular/build/serializers/html-comment');\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import removeHtmlCommentsSerializer from 'jest-preset-angular/build/serializers/html-comment';\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})})]}),"\n",(0,s.jsxs)(n.h3,{id:"display-component-html-ng-snapshot",children:["Display component HTML (",(0,s.jsx)(n.code,{children:"ng-snapshot"}),")"]}),"\n",(0,s.jsx)(n.p,{children:"Allow displaying component HTML with data in snapshot."}),"\n",(0,s.jsx)(n.h4,{id:"configuration-options",children:"Configuration options"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"type NgSnapshotOptions = {\n omitAllCompAttrs?: boolean;\n};\n"})}),"\n",(0,s.jsx)(n.p,{children:"Configure snapshot behavior"}),"\n",(0,s.jsx)(n.p,{children:"Examples:"}),"\n",(0,s.jsx)(n.h4,{id:"in-jest-config-1",children:"In Jest config"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/ng-snapshot'],\n //[...]\n};\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/ng-snapshot'],\n //[...]\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-setup-test-environment-file-1",children:"Or in setup test environment file"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="setup-jest.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n"})})]})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-individual-test-files-1",children:"Or in individual test files"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"with-options",children:"With options"}),"\n",(0,s.jsxs)(n.admonition,{title:"Effective priority",type:"info",children:[(0,s.jsx)(n.p,{children:"The configured serializers will have affect in this order:"}),(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"Jest config"})," -> ",(0,s.jsx)(n.code,{children:"setup files"})," -> ",(0,s.jsx)(n.code,{children:"test files"})]}),(0,s.jsx)(n.p,{children:"The later the higher priority. This means that with the same serializer, the later one will override the configuration\nof the previous one in the chain."})]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"In setup files:"}),"\n"]}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="setup-jest.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="setup-jest.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n"})})]})]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"or in individual test files:"}),"\n"]}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n\nit('should work', () => {\n //[...]\n});\n"})})})]}),"\n",(0,s.jsxs)(n.h3,{id:"remove-angular-attributes-no-ng-attributes",children:["Remove Angular attributes (",(0,s.jsx)(n.code,{children:"no-ng-attributes"}),")"]}),"\n",(0,s.jsxs)(n.p,{children:["Allow removing attributes generated by Angular fixture, like ",(0,s.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,s.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,s.jsx)(n.code,{children:"_ngcontent-c*"})," etc., from component snapshot"]}),"\n",(0,s.jsx)(n.p,{children:"Examples:"}),"\n",(0,s.jsx)(n.h4,{id:"in-jest-config-2",children:"In Jest config"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/no-ng-attributes'],\n //[...]\n};\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/no-ng-attributes'],\n //[...]\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-setup-test-environment-file-2",children:"Or in setup test environment file"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="setup-jest.js"',children:"const removeNgAttributes = require('jest-preset-angular/build/serializers/no-ng-attributes');\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import removeNgAttributes from 'jest-preset-angular/build/serializers/no-ng-attributes';\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n"})})]})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-individual-test-files-2",children:"Or in individual test files"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const removeNgAttributes = require('jest-preset-angular/build/serializers/no-ng-attributes');\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import removeNgAttributes from 'jest-preset-angular/build/serializers/no-ng-attributes';\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n\nit('should work', () => {\n //[...]\n});\n"})})})]})]})}function j(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(m,{...e})}):m(e)}}}]); \ No newline at end of file diff --git a/assets/js/388d3430.8500f91f.js b/assets/js/388d3430.8500f91f.js deleted file mode 100644 index 8112186d9e..0000000000 --- a/assets/js/388d3430.8500f91f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[851],{1723:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>g,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var t=s(5893),r=s(1151),a=s(3992),o=s(425);const i={id:"angular-13+",title:"Angular >=13"},l=void 0,u={id:"guides/angular-13+",title:"Angular >=13",description:"Angular 13 introduces ESM package format for Angular packages. jest-preset-angular",source:"@site/versioned_docs/version-14.0/guides/angular-13+.md",sourceDirName:"guides",slug:"/guides/angular-13+",permalink:"/jest-preset-angular/docs/14.0/guides/angular-13+",draft:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/guides/angular-13+.md",tags:[],version:"14.0",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,frontMatter:{id:"angular-13+",title:"Angular >=13"},sidebar:"docs",previous:{title:"Angular Ivy",permalink:"/jest-preset-angular/docs/14.0/guides/angular-ivy"},next:{title:"ESM Support",permalink:"/jest-preset-angular/docs/14.0/guides/esm-support"}},c={},d=[{value:"Migration steps from Angular < 13",id:"migration-steps-from-angular--13",level:2},{value:"Using ES Modules",id:"using-es-modules",level:3},{value:"Potential issues with Angular 13 ESM package format and workaround",id:"potential-issues-with-angular-13-esm-package-format-and-workaround",level:2},{value:"Cannot find modules error when importing any deep paths from Angular ESM format packages",id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",level:3},{value:"Usage with Angular libraries which are built with Angular CLI 13",id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",level:3},{value:"Usage with Ionic 6 or 7",id:"usage-with-ionic-6-or-7",level:3}];function p(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,t.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,t.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,t.jsx)(n.strong,{children:"Angular 13"})," using ",(0,t.jsx)(n.a,{href:"/jest-preset-angular/docs/14.0/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,t.jsx)(n.admonition,{type:"important",children:(0,t.jsxs)(n.p,{children:["With Jest 28 and ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,t.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,t.jsx)(n.code,{children:"ng-jest-resolver"})," is no longer required to have in Jest config. This\nresolver is also excluded from our default and default ESM presets."]})}),"\n",(0,t.jsxs)(n.p,{children:["Starting from ",(0,t.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,t.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,t.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,t.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"transform"})," is updated to include ",(0,t.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,t.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Upgrade the project to ",(0,t.jsx)(n.strong,{children:"Angular 13"})," following ",(0,t.jsx)(n.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,t.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,t.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,t.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples/example-app-v13",children:"example-app-v13"})," for an example with tests that run using ESM, and using ESM + isolated."]}),"\n",(0,t.jsxs)(n.p,{children:["Your ",(0,t.jsx)(n.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst { pathsToModuleNameMapper } = require('ts-jest/utils');\nconst { paths } = require('./tsconfig.json').compilerOptions;\n\n/** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */\nmodule.exports = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/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,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\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,t.jsxs)(n.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,t.jsx)(n.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,t.jsx)(n.p,{children:"or for ESM mode"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,t.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,t.jsxs)(n.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,t.jsx)(n.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix this issue, one needs to add ",(0,t.jsx)(n.code,{children:"mjs"})," to ",(0,t.jsx)(n.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Besides, the changes in Angular packages themselves, ",(0,t.jsx)(n.strong,{children:"Angular"})," libraries which are built with ",(0,t.jsx)(n.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,t.jsx)(n.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,t.jsx)(n.strong,{children:"CommonJS"})," mode."]}),"\n",(0,t.jsxs)(n.p,{children:["To fix this issue, one should modify ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.jsx)(n.h3,{id:"usage-with-ionic-6-or-7",children:"Usage with Ionic 6 or 7"}),"\n",(0,t.jsxs)(n.p,{children:["To support Ionic 6 or 7 you will need to modify ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...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,r.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},425:(e,n,s)=>{s.d(n,{Z:()=>o});s(7294);var t=s(512);const r={tabItem:"tabItem_Ymn6"};var a=s(5893);function o(e){let{children:n,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,t.Z)(r.tabItem,o),hidden:s,children:n})}},3992:(e,n,s)=>{s.d(n,{Z:()=>y});var t=s(7294),r=s(512),a=s(2957),o=s(6550),i=s(1270),l=s(5238),u=s(3609),c=s(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(5893);function b(e){let{className:n,block:s,selectedValue:t,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":t===n}),children:s??n},n)}))})}function v(e){let{lazy:n,children:s,selectedValue:r}=e;const a=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){const e=a.find((e=>e.props.value===r));return e?(0,t.cloneElement)(e,{className:"margin-top--md"}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:a.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==r})))})}function w(e){const n=m(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function y(e){const n=(0,j.Z)();return(0,x.jsx)(w,{...e,children:d(e.children)},String(n))}},1151:(e,n,s)=>{s.d(n,{Z:()=>i,a:()=>o});var t=s(7294);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/388d3430.b86d5c55.js b/assets/js/388d3430.b86d5c55.js new file mode 100644 index 0000000000..982d78fe7b --- /dev/null +++ b/assets/js/388d3430.b86d5c55.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[851],{1723:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>g,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var t=s(5893),r=s(1151),a=s(3992),o=s(425);const i={id:"angular-13+",title:"Angular >=13"},l=void 0,u={id:"guides/angular-13+",title:"Angular >=13",description:"Angular 13 introduces ESM package format for Angular packages. jest-preset-angular",source:"@site/versioned_docs/version-14.0/guides/angular-13+.md",sourceDirName:"guides",slug:"/guides/angular-13+",permalink:"/jest-preset-angular/docs/14.0/guides/angular-13+",draft:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/guides/angular-13+.md",tags:[],version:"14.0",lastUpdatedBy:"renovate[bot]",lastUpdatedAt:1722455661e3,frontMatter:{id:"angular-13+",title:"Angular >=13"},sidebar:"docs",previous:{title:"Angular Ivy",permalink:"/jest-preset-angular/docs/14.0/guides/angular-ivy"},next:{title:"ESM Support",permalink:"/jest-preset-angular/docs/14.0/guides/esm-support"}},c={},d=[{value:"Migration steps from Angular < 13",id:"migration-steps-from-angular--13",level:2},{value:"Using ES Modules",id:"using-es-modules",level:3},{value:"Potential issues with Angular 13 ESM package format and workaround",id:"potential-issues-with-angular-13-esm-package-format-and-workaround",level:2},{value:"Cannot find modules error when importing any deep paths from Angular ESM format packages",id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",level:3},{value:"Usage with Angular libraries which are built with Angular CLI 13",id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",level:3},{value:"Usage with Ionic 6 or 7",id:"usage-with-ionic-6-or-7",level:3}];function p(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,t.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,t.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,t.jsx)(n.strong,{children:"Angular 13"})," using ",(0,t.jsx)(n.a,{href:"/jest-preset-angular/docs/14.0/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,t.jsx)(n.admonition,{type:"important",children:(0,t.jsxs)(n.p,{children:["With Jest 28 and ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,t.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,t.jsx)(n.code,{children:"ng-jest-resolver"})," is no longer required to have in Jest config. This\nresolver is also excluded from our default and default ESM presets."]})}),"\n",(0,t.jsxs)(n.p,{children:["Starting from ",(0,t.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,t.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,t.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,t.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"transform"})," is updated to include ",(0,t.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,t.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Upgrade the project to ",(0,t.jsx)(n.strong,{children:"Angular 13"})," following ",(0,t.jsx)(n.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,t.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,t.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,t.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples/example-app-v13",children:"example-app-v13"})," for an example with tests that run using ESM, and using ESM + isolated."]}),"\n",(0,t.jsxs)(n.p,{children:["Your ",(0,t.jsx)(n.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst { pathsToModuleNameMapper } = require('ts-jest/utils');\nconst { paths } = require('./tsconfig.json').compilerOptions;\n\n/** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */\nmodule.exports = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/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,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\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,t.jsxs)(n.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,t.jsx)(n.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,t.jsx)(n.p,{children:"or for ESM mode"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,t.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,t.jsxs)(n.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,t.jsx)(n.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix this issue, one needs to add ",(0,t.jsx)(n.code,{children:"mjs"})," to ",(0,t.jsx)(n.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Besides, the changes in Angular packages themselves, ",(0,t.jsx)(n.strong,{children:"Angular"})," libraries which are built with ",(0,t.jsx)(n.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,t.jsx)(n.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,t.jsx)(n.strong,{children:"CommonJS"})," mode."]}),"\n",(0,t.jsxs)(n.p,{children:["To fix this issue, one should modify ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.jsx)(n.h3,{id:"usage-with-ionic-6-or-7",children:"Usage with Ionic 6 or 7"}),"\n",(0,t.jsxs)(n.p,{children:["To support Ionic 6 or 7 you will need to modify ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...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,r.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},425:(e,n,s)=>{s.d(n,{Z:()=>o});s(7294);var t=s(512);const r={tabItem:"tabItem_Ymn6"};var a=s(5893);function o(e){let{children:n,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,t.Z)(r.tabItem,o),hidden:s,children:n})}},3992:(e,n,s)=>{s.d(n,{Z:()=>y});var t=s(7294),r=s(512),a=s(2957),o=s(6550),i=s(1270),l=s(5238),u=s(3609),c=s(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(5893);function b(e){let{className:n,block:s,selectedValue:t,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":t===n}),children:s??n},n)}))})}function v(e){let{lazy:n,children:s,selectedValue:r}=e;const a=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){const e=a.find((e=>e.props.value===r));return e?(0,t.cloneElement)(e,{className:"margin-top--md"}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:a.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==r})))})}function w(e){const n=m(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function y(e){const n=(0,j.Z)();return(0,x.jsx)(w,{...e,children:d(e.children)},String(n))}},1151:(e,n,s)=>{s.d(n,{Z:()=>i,a:()=>o});var t=s(7294);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/3c7caf67.001ac583.js b/assets/js/3c7caf67.001ac583.js new file mode 100644 index 0000000000..ba01e46eb9 --- /dev/null +++ b/assets/js/3c7caf67.001ac583.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4979],{5210:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"installation",title:"Installation"},i=void 0,c={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/getting-started/installation",draft:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsxs)(t.p,{children:["You can install ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,s.jsxs)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(l.Z,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,s.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Angular doesn't support native ",(0,s.jsx)(t.code,{children:"async/await"})," in testing with ",(0,s.jsx)(t.code,{children:"target"})," higher than ",(0,s.jsx)(t.code,{children:"ES2016"}),", see ",(0,s.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,s.jsxs)(t.p,{children:["In your project root, create ",(0,s.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,s.jsx)(t.p,{children:"Add 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)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["Adjust your ",(0,s.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:["Adjust ",(0,s.jsx)(t.code,{children:"scripts"})," part your ",(0,s.jsx)(t.code,{children:"package.json"})," to use ",(0,s.jsx)(t.code,{children:"jest"})," instead of ",(0,s.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,s.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,s.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,s.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Create a file ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,s.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.admonition,{type:"tip",children:[(0,s.jsxs)(t.p,{children:["An example for ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,s.jsx)(t.pre,{children:(0,s.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,s.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,s.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,s.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,s.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,s.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,s.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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/3c7caf67.39efa6d9.js b/assets/js/3c7caf67.39efa6d9.js deleted file mode 100644 index fd69d0a269..0000000000 --- a/assets/js/3c7caf67.39efa6d9.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4979],{5210:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"installation",title:"Installation"},i=void 0,c={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/getting-started/installation",draft:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsxs)(t.p,{children:["You can install ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,s.jsxs)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(l.Z,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,s.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Angular doesn't support native ",(0,s.jsx)(t.code,{children:"async/await"})," in testing with ",(0,s.jsx)(t.code,{children:"target"})," higher than ",(0,s.jsx)(t.code,{children:"ES2016"}),", see ",(0,s.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,s.jsxs)(t.p,{children:["In your project root, create ",(0,s.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,s.jsx)(t.p,{children:"Add 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)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["Adjust your ",(0,s.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:["Adjust ",(0,s.jsx)(t.code,{children:"scripts"})," part your ",(0,s.jsx)(t.code,{children:"package.json"})," to use ",(0,s.jsx)(t.code,{children:"jest"})," instead of ",(0,s.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,s.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,s.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,s.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Create a file ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,s.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.admonition,{type:"tip",children:[(0,s.jsxs)(t.p,{children:["An example for ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,s.jsx)(t.pre,{children:(0,s.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,s.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,s.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,s.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,s.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,s.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,s.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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.a64bada2.js b/assets/js/407f8801.a64bada2.js deleted file mode 100644 index 0312c2b6ec..0000000000 --- a/assets/js/407f8801.a64bada2.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6682],{2881:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),o=n(3992),a=n(425);const i={id:"jsdom-version",title:"Configure other JSDOM versions"},l=void 0,u={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},c={},d=[];function m(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,r.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,r.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,r.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,r.jsxs)(o.Z,{groupId:"code-examples",children:[(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,r.jsx)(t.code,{children:"localStorage"})," or ",(0,r.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,r.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Reference: ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,r.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 p(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var o=n(5893);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,a),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),o=n(2957),a=n(6550),i=n(1270),l=n(5238),u=n(3609),c=n(1027);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 m(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.l)(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,a.k6)(),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._X)(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=m(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(!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: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.Nk)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return p({value:e,tabValues:o})?e:null})();(0,i.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!p({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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var r=n(7294);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/407f8801.b1d056d1.js b/assets/js/407f8801.b1d056d1.js new file mode 100644 index 0000000000..84a979ebdf --- /dev/null +++ b/assets/js/407f8801.b1d056d1.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6682],{2881:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),o=n(3992),a=n(425);const i={id:"jsdom-version",title:"Configure other JSDOM versions"},l=void 0,u={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:!1,unlisted:!1,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:1722455661e3,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"}},c={},d=[];function m(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,r.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,r.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,r.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,r.jsxs)(o.Z,{groupId:"code-examples",children:[(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,r.jsx)(t.code,{children:"localStorage"})," or ",(0,r.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,r.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Reference: ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,r.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 p(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var o=n(5893);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,a),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),o=n(2957),a=n(6550),i=n(1270),l=n(5238),u=n(3609),c=n(1027);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 m(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.l)(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,a.k6)(),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._X)(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=m(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(!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: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.Nk)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return p({value:e,tabValues:o})?e:null})();(0,i.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!p({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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var r=n(7294);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.75f927ad.js b/assets/js/433cefd8.75f927ad.js deleted file mode 100644 index 413297dc0f..0000000000 --- a/assets/js/433cefd8.75f927ad.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7906],{7075:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),a=n(3992),l=n(425);const o={id:"angular-ivy",title:"Angular Ivy"},i=void 0,u={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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+"}},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,s.a)(),...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 a Jest global setup file to help you to run ",(0,r.jsx)(t.code,{children:"ngcc"})," with Jest. Add to 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)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(l.Z,{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 globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,r.jsx)(l.Z,{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 globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,r.jsx)(t.code,{children:"ngcc"})," via ",(0,r.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,r.jsxs)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(l.Z,{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\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,r.jsx)(l.Z,{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\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,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(g,{...e})}):g(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",m.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):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!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",m.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var r=n(7294);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/433cefd8.eca8e8b5.js b/assets/js/433cefd8.eca8e8b5.js new file mode 100644 index 0000000000..3c6e8048ff --- /dev/null +++ b/assets/js/433cefd8.eca8e8b5.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7906],{7075:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),a=n(3992),l=n(425);const o={id:"angular-ivy",title:"Angular Ivy"},i=void 0,u={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:!1,unlisted:!1,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:1722455661e3,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+"}},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,s.a)(),...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 a Jest global setup file to help you to run ",(0,r.jsx)(t.code,{children:"ngcc"})," with Jest. Add to 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)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(l.Z,{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 globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,r.jsx)(l.Z,{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 globalSetup: 'jest-preset-angular/global-setup',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsx)(t.h2,{id:"control-ngcc-processing",children:"Control ngcc processing"}),"\n",(0,r.jsxs)(t.p,{children:["Since ",(0,r.jsx)(t.strong,{children:"v12.0.0"}),", ",(0,r.jsx)(t.code,{children:"jest-preset-angular"})," provide a possibility to skip ",(0,r.jsx)(t.code,{children:"ngcc"})," via ",(0,r.jsx)(t.code,{children:"globalThis"})," by doing the following"]}),"\n",(0,r.jsxs)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(l.Z,{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\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,r.jsx)(l.Z,{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\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,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(g,{...e})}):g(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",m.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):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!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",m.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var r=n(7294);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.2c28c705.js b/assets/js/4351d34b.2c28c705.js deleted file mode 100644 index 361204bd5d..0000000000 --- a/assets/js/4351d34b.2c28c705.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7021],{7031:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>m,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),o=n(3992),a=n(425);const i={id:"jsdom-version",title:"Configure other JSDOM versions"},l=void 0,u={id:"guides/jsdom-version",title:"Configure other JSDOM versions",description:"Jest v26+ by default uses JSDOM 16 to support Node 10+.",source:"@site/docs/guides/jsdom-version.md",sourceDirName:"guides",slug:"/guides/jsdom-version",permalink:"/jest-preset-angular/docs/next/guides/jsdom-version",draft:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/jsdom-version.md",tags:[],version:"current",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,frontMatter:{id:"jsdom-version",title:"Configure other JSDOM versions"},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"}},c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,r.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,r.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,r.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,r.jsxs)(o.Z,{groupId:"code-examples",children:[(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,r.jsx)(t.code,{children:"localStorage"})," or ",(0,r.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,r.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Reference: ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,r.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,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var o=n(5893);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,a),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),o=n(2957),a=n(6550),i=n(1270),l=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",b.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var r=n(7294);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/4351d34b.94ccd131.js b/assets/js/4351d34b.94ccd131.js new file mode 100644 index 0000000000..e0373b548d --- /dev/null +++ b/assets/js/4351d34b.94ccd131.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7021],{7031:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>m,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),o=n(3992),a=n(425);const i={id:"jsdom-version",title:"Configure other JSDOM versions"},l=void 0,u={id:"guides/jsdom-version",title:"Configure other JSDOM versions",description:"Jest v26+ by default uses JSDOM 16 to support Node 10+.",source:"@site/docs/guides/jsdom-version.md",sourceDirName:"guides",slug:"/guides/jsdom-version",permalink:"/jest-preset-angular/docs/next/guides/jsdom-version",draft:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/jsdom-version.md",tags:[],version:"current",lastUpdatedBy:"renovate[bot]",lastUpdatedAt:1722455661e3,frontMatter:{id:"jsdom-version",title:"Configure other JSDOM versions"},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"}},c={},d=[];function p(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,r.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,r.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,r.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,r.jsxs)(o.Z,{groupId:"code-examples",children:[(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,r.jsx)(t.code,{children:"localStorage"})," or ",(0,r.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,r.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Reference: ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,r.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,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var o=n(5893);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,a),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),o=n(2957),a=n(6550),i=n(1270),l=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",b.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var r=n(7294);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/44b4d73b.0f77754c.js b/assets/js/44b4d73b.0f77754c.js new file mode 100644 index 0000000000..21e0098c2d --- /dev/null +++ b/assets/js/44b4d73b.0f77754c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5867],{9837:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>g,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var t=s(5893),r=s(1151),a=s(3992),o=s(425);const i={id:"angular-13+",title:"Angular >=13"},l=void 0,u={id:"guides/angular-13+",title:"Angular >=13",description:"Angular 13 introduces ESM package format for Angular packages. jest-preset-angular",source:"@site/versioned_docs/version-13.0/guides/angular-13+.md",sourceDirName:"guides",slug:"/guides/angular-13+",permalink:"/jest-preset-angular/docs/13.0/guides/angular-13+",draft:!1,unlisted:!1,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:1722455661e3,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"}},c={},d=[{value:"Migration steps from Angular < 13",id:"migration-steps-from-angular--13",level:2},{value:"Using ES Modules",id:"using-es-modules",level:3},{value:"Potential issues with Angular 13 ESM package format and workaround",id:"potential-issues-with-angular-13-esm-package-format-and-workaround",level:2},{value:"Cannot find modules error when importing any deep paths from Angular ESM format packages",id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",level:3},{value:"Usage with Angular libraries which are built with Angular CLI 13",id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",level:3},{value:"Usage with Ionic 6 or 7",id:"usage-with-ionic-6-or-7",level:3}];function p(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,t.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,t.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,t.jsx)(n.strong,{children:"Angular 13"})," using ",(0,t.jsx)(n.a,{href:"/jest-preset-angular/docs/13.0/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,t.jsx)(n.admonition,{type:"important",children:(0,t.jsxs)(n.p,{children:["With Jest 28 and ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,t.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,t.jsx)(n.code,{children:"ng-jest-resolver"})," is no longer required to have in Jest config. This\nresolver is also excluded from our default and default ESM presets."]})}),"\n",(0,t.jsxs)(n.p,{children:["Starting from ",(0,t.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,t.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,t.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,t.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"transform"})," is updated to include ",(0,t.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,t.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Upgrade the project to ",(0,t.jsx)(n.strong,{children:"Angular 13"})," following ",(0,t.jsx)(n.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,t.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,t.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,t.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples/example-app-v13",children:"example-app-v13"})," for an example with tests that run using ESM, and using ESM + isolated."]}),"\n",(0,t.jsxs)(n.p,{children:["Your ",(0,t.jsx)(n.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst { pathsToModuleNameMapper } = require('ts-jest/utils');\nconst { paths } = require('./tsconfig.json').compilerOptions;\n\n/** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */\nmodule.exports = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/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,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\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,t.jsxs)(n.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,t.jsx)(n.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,t.jsx)(n.p,{children:"or for ESM mode"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,t.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,t.jsxs)(n.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,t.jsx)(n.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix this issue, one needs to add ",(0,t.jsx)(n.code,{children:"mjs"})," to ",(0,t.jsx)(n.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Besides, the changes in Angular packages themselves, ",(0,t.jsx)(n.strong,{children:"Angular"})," libraries which are built with ",(0,t.jsx)(n.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,t.jsx)(n.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,t.jsx)(n.strong,{children:"CommonJS"})," mode."]}),"\n",(0,t.jsxs)(n.p,{children:["To fix this issue, one should modify ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.jsx)(n.h3,{id:"usage-with-ionic-6-or-7",children:"Usage with Ionic 6 or 7"}),"\n",(0,t.jsxs)(n.p,{children:["To support Ionic 6 or 7 you will need to modify ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...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,r.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},425:(e,n,s)=>{s.d(n,{Z:()=>o});s(7294);var t=s(512);const r={tabItem:"tabItem_Ymn6"};var a=s(5893);function o(e){let{children:n,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,t.Z)(r.tabItem,o),hidden:s,children:n})}},3992:(e,n,s)=>{s.d(n,{Z:()=>y});var t=s(7294),r=s(512),a=s(2957),o=s(6550),i=s(1270),l=s(5238),u=s(3609),c=s(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(5893);function b(e){let{className:n,block:s,selectedValue:t,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":t===n}),children:s??n},n)}))})}function v(e){let{lazy:n,children:s,selectedValue:r}=e;const a=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){const e=a.find((e=>e.props.value===r));return e?(0,t.cloneElement)(e,{className:"margin-top--md"}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:a.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==r})))})}function w(e){const n=m(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function y(e){const n=(0,j.Z)();return(0,x.jsx)(w,{...e,children:d(e.children)},String(n))}},1151:(e,n,s)=>{s.d(n,{Z:()=>i,a:()=>o});var t=s(7294);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/44b4d73b.e1286004.js b/assets/js/44b4d73b.e1286004.js deleted file mode 100644 index b7da25353c..0000000000 --- a/assets/js/44b4d73b.e1286004.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5867],{9837:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>g,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var t=s(5893),r=s(1151),a=s(3992),o=s(425);const i={id:"angular-13+",title:"Angular >=13"},l=void 0,u={id:"guides/angular-13+",title:"Angular >=13",description:"Angular 13 introduces ESM package format for Angular packages. jest-preset-angular",source:"@site/versioned_docs/version-13.0/guides/angular-13+.md",sourceDirName:"guides",slug:"/guides/angular-13+",permalink:"/jest-preset-angular/docs/13.0/guides/angular-13+",draft:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},c={},d=[{value:"Migration steps from Angular < 13",id:"migration-steps-from-angular--13",level:2},{value:"Using ES Modules",id:"using-es-modules",level:3},{value:"Potential issues with Angular 13 ESM package format and workaround",id:"potential-issues-with-angular-13-esm-package-format-and-workaround",level:2},{value:"Cannot find modules error when importing any deep paths from Angular ESM format packages",id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",level:3},{value:"Usage with Angular libraries which are built with Angular CLI 13",id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",level:3},{value:"Usage with Ionic 6 or 7",id:"usage-with-ionic-6-or-7",level:3}];function p(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,t.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,t.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,t.jsx)(n.strong,{children:"Angular 13"})," using ",(0,t.jsx)(n.a,{href:"/jest-preset-angular/docs/13.0/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,t.jsx)(n.admonition,{type:"important",children:(0,t.jsxs)(n.p,{children:["With Jest 28 and ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,t.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,t.jsx)(n.code,{children:"ng-jest-resolver"})," is no longer required to have in Jest config. This\nresolver is also excluded from our default and default ESM presets."]})}),"\n",(0,t.jsxs)(n.p,{children:["Starting from ",(0,t.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,t.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,t.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,t.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"transform"})," is updated to include ",(0,t.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,t.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Upgrade the project to ",(0,t.jsx)(n.strong,{children:"Angular 13"})," following ",(0,t.jsx)(n.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,t.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,t.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,t.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples/example-app-v13",children:"example-app-v13"})," for an example with tests that run using ESM, and using ESM + isolated."]}),"\n",(0,t.jsxs)(n.p,{children:["Your ",(0,t.jsx)(n.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst { pathsToModuleNameMapper } = require('ts-jest/utils');\nconst { paths } = require('./tsconfig.json').compilerOptions;\n\n/** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */\nmodule.exports = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/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,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\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,t.jsxs)(n.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,t.jsx)(n.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,t.jsx)(n.p,{children:"or for ESM mode"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,t.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,t.jsxs)(n.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,t.jsx)(n.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix this issue, one needs to add ",(0,t.jsx)(n.code,{children:"mjs"})," to ",(0,t.jsx)(n.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Besides, the changes in Angular packages themselves, ",(0,t.jsx)(n.strong,{children:"Angular"})," libraries which are built with ",(0,t.jsx)(n.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,t.jsx)(n.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,t.jsx)(n.strong,{children:"CommonJS"})," mode."]}),"\n",(0,t.jsxs)(n.p,{children:["To fix this issue, one should modify ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.jsx)(n.h3,{id:"usage-with-ionic-6-or-7",children:"Usage with Ionic 6 or 7"}),"\n",(0,t.jsxs)(n.p,{children:["To support Ionic 6 or 7 you will need to modify ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...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,r.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},425:(e,n,s)=>{s.d(n,{Z:()=>o});s(7294);var t=s(512);const r={tabItem:"tabItem_Ymn6"};var a=s(5893);function o(e){let{children:n,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,t.Z)(r.tabItem,o),hidden:s,children:n})}},3992:(e,n,s)=>{s.d(n,{Z:()=>y});var t=s(7294),r=s(512),a=s(2957),o=s(6550),i=s(1270),l=s(5238),u=s(3609),c=s(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(5893);function b(e){let{className:n,block:s,selectedValue:t,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":t===n}),children:s??n},n)}))})}function v(e){let{lazy:n,children:s,selectedValue:r}=e;const a=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){const e=a.find((e=>e.props.value===r));return e?(0,t.cloneElement)(e,{className:"margin-top--md"}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:a.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==r})))})}function w(e){const n=m(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function y(e){const n=(0,j.Z)();return(0,x.jsx)(w,{...e,children:d(e.children)},String(n))}},1151:(e,n,s)=>{s.d(n,{Z:()=>i,a:()=>o});var t=s(7294);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.9a2605ae.js b/assets/js/47c825a2.9a2605ae.js deleted file mode 100644 index 78463e3860..0000000000 --- a/assets/js/47c825a2.9a2605ae.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8562],{4769:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>u,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"using-with-babel",title:"Using with Babel"},i=void 0,u={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/using-with-babel.md",tags:[],version:"current",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["If you wish to use ",(0,s.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,s.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Install ",(0,s.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,s.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:[(0,s.jsxs)(t.em,{children:["Note: do not use a ",(0,s.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,s.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,s.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,s.jsxs)(t.ol,{start:"3",children:["\n",(0,s.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,s.jsxs)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})}),(0,s.jsx)(l.Z,{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 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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.Z)("tabs-container",g.tabList),children:[(0,j.jsx)(x,{...t,...e}),(0,j.jsx)(v,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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/47c825a2.b13ecbc1.js b/assets/js/47c825a2.b13ecbc1.js new file mode 100644 index 0000000000..3a9ee9c0a2 --- /dev/null +++ b/assets/js/47c825a2.b13ecbc1.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8562],{4769:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>u,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"using-with-babel",title:"Using with Babel"},i=void 0,u={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/using-with-babel.md",tags:[],version:"current",lastUpdatedBy:"renovate[bot]",lastUpdatedAt:1722455661e3,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"}},c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["If you wish to use ",(0,s.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,s.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Install ",(0,s.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,s.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:[(0,s.jsxs)(t.em,{children:["Note: do not use a ",(0,s.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,s.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,s.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,s.jsxs)(t.ol,{start:"3",children:["\n",(0,s.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,s.jsxs)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})}),(0,s.jsx)(l.Z,{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 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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.Z)("tabs-container",g.tabList),children:[(0,j.jsx)(x,{...t,...e}),(0,j.jsx)(v,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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/47cccd8d.164f96f8.js b/assets/js/47cccd8d.164f96f8.js deleted file mode 100644 index ddace3f555..0000000000 --- a/assets/js/47cccd8d.164f96f8.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6018],{209:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>d,frontMatter:()=>n,metadata:()=>a,toc:()=>p});var o=s(5893),i=s(1151);const n={id:"absolute-imports",title:"Absolute Imports"},r=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings 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."]}),"\n",(0,o.jsxs)(t.p,{children:["More information see ",(0,o.jsx)(t.code,{children:"ts-jest"})," ",(0,o.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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>a,a:()=>r});var o=s(7294);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/47cccd8d.306c68f1.js b/assets/js/47cccd8d.306c68f1.js new file mode 100644 index 0000000000..43e1309a69 --- /dev/null +++ b/assets/js/47cccd8d.306c68f1.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6018],{209:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>d,frontMatter:()=>n,metadata:()=>a,toc:()=>p});var o=s(5893),i=s(1151);const n={id:"absolute-imports",title:"Absolute Imports"},r=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings 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."]}),"\n",(0,o.jsxs)(t.p,{children:["More information see ",(0,o.jsx)(t.code,{children:"ts-jest"})," ",(0,o.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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>a,a:()=>r});var o=s(7294);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.18d69a5c.js b/assets/js/48dd39e2.18d69a5c.js deleted file mode 100644 index a013f67df1..0000000000 --- a/assets/js/48dd39e2.18d69a5c.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9664],{6185:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>c,toc:()=>u});var s=t(5893),r=t(1151),o=t(3992),i=t(425);const a={id:"options",title:"Options"},l=void 0,c={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,s.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,s.jsx)(n.code,{children:"globals"})," of Jest config object\nin the ",(0,s.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,s.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,s.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,s.jsxs)(n.p,{children:["More information about ",(0,s.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,s.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,s.jsxs)(n.admonition,{type:"important",children:[(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,s.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,s.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]}),(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,s.jsx)(n.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,s.jsx)(n.code,{children:".mjs"})," files\nwill be processed by ",(0,s.jsx)(n.code,{children:"esbuild"})," in ",(0,s.jsx)(n.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,s.jsx)(n.code,{children:"esbuild"}),", one can do the following:"]}),(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.admonition,{type:"important",children:(0,s.jsxs)(n.p,{children:["Jest runs with ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,s.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,s.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,s.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["We're using some ",(0,s.jsx)(n.code,{children:'"globals"'})," to pass information about configuration to use for code compilation with ",(0,s.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,s.jsx)(n.code,{children:"ts"}),"), HTML (",(0,s.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,s.jsx)(n.code,{children:"js"}),"), JSON (",(0,s.jsx)(n.code,{children:"json"}),") and ESM JavaScript (",(0,s.jsx)(n.code,{children:"mjs"}),") files."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.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,s.jsx)(n.code,{children:"RegExp"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,s.jsx)(n.code,{children:"package.json"})," definitions."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.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,s.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,s.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,s.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,s.jsx)(n.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,s.jsx)(n.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,s.jsx)(n.code,{children:".mjs"})," files which come from ",(0,s.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,s.jsx)(n.code,{children:"TS"}),", ",(0,s.jsx)(n.code,{children:"JS"}),", ",(0,s.jsx)(n.code,{children:"MJS"}),", ",(0,s.jsx)(n.code,{children:"HTML"}),", or ",(0,s.jsx)(n.code,{children:"SVG"})," file through so called ",(0,s.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},425:(e,n,t)=>{t.d(n,{Z:()=>i});t(7294);var s=t(512);const r={tabItem:"tabItem_Ymn6"};var o=t(5893);function i(e){let{children:n,hidden:t,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,i),hidden:t,children:n})}},3992:(e,n,t)=>{t.d(n,{Z:()=>w});var s=t(7294),r=t(512),o=t(2957),i=t(6550),a=t(1270),l=t(5238),c=t(3609),d=t(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=t(5893);function b(e){let{className:n,block:t,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,o?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:r}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):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!==r})))})}function y(e){const n=g(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function w(e){const n=(0,m.Z)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(n))}},1151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>i});var s=t(7294);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/48dd39e2.1f33a836.js b/assets/js/48dd39e2.1f33a836.js new file mode 100644 index 0000000000..15001e58e9 --- /dev/null +++ b/assets/js/48dd39e2.1f33a836.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9664],{6185:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>c,toc:()=>u});var s=t(5893),r=t(1151),o=t(3992),i=t(425);const a={id:"options",title:"Options"},l=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,s.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,s.jsx)(n.code,{children:"globals"})," of Jest config object\nin the ",(0,s.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,s.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,s.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,s.jsxs)(n.p,{children:["More information about ",(0,s.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,s.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,s.jsxs)(n.admonition,{type:"important",children:[(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,s.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,s.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]}),(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,s.jsx)(n.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,s.jsx)(n.code,{children:".mjs"})," files\nwill be processed by ",(0,s.jsx)(n.code,{children:"esbuild"})," in ",(0,s.jsx)(n.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,s.jsx)(n.code,{children:"esbuild"}),", one can do the following:"]}),(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.admonition,{type:"important",children:(0,s.jsxs)(n.p,{children:["Jest runs with ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,s.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,s.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,s.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["We're using some ",(0,s.jsx)(n.code,{children:'"globals"'})," to pass information about configuration to use for code compilation with ",(0,s.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,s.jsx)(n.code,{children:"ts"}),"), HTML (",(0,s.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,s.jsx)(n.code,{children:"js"}),"), JSON (",(0,s.jsx)(n.code,{children:"json"}),") and ESM JavaScript (",(0,s.jsx)(n.code,{children:"mjs"}),") files."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.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,s.jsx)(n.code,{children:"RegExp"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,s.jsx)(n.code,{children:"package.json"})," definitions."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.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,s.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,s.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,s.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,s.jsx)(n.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,s.jsx)(n.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,s.jsx)(n.code,{children:".mjs"})," files which come from ",(0,s.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,s.jsx)(n.code,{children:"TS"}),", ",(0,s.jsx)(n.code,{children:"JS"}),", ",(0,s.jsx)(n.code,{children:"MJS"}),", ",(0,s.jsx)(n.code,{children:"HTML"}),", or ",(0,s.jsx)(n.code,{children:"SVG"})," file through so called ",(0,s.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},425:(e,n,t)=>{t.d(n,{Z:()=>i});t(7294);var s=t(512);const r={tabItem:"tabItem_Ymn6"};var o=t(5893);function i(e){let{children:n,hidden:t,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,i),hidden:t,children:n})}},3992:(e,n,t)=>{t.d(n,{Z:()=>w});var s=t(7294),r=t(512),o=t(2957),i=t(6550),a=t(1270),l=t(5238),c=t(3609),d=t(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=t(5893);function b(e){let{className:n,block:t,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,o?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:r}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):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!==r})))})}function y(e){const n=g(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function w(e){const n=(0,m.Z)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(n))}},1151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>i});var s=t(7294);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/494f4f5e.0951a36c.js b/assets/js/494f4f5e.0951a36c.js new file mode 100644 index 0000000000..1b52635a0c --- /dev/null +++ b/assets/js/494f4f5e.0951a36c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5665],{7887:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>d,frontMatter:()=>i,metadata:()=>a,toc:()=>l});var s=n(5893),r=n(1151);const i={id:"angular-ivy",title:"Angular Ivy"},o=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},c={},l=[];function u(e){const t={code:"code",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...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 util script to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest but this script only works via the\nJavaScript version of Jest config"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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/494f4f5e.14f52100.js b/assets/js/494f4f5e.14f52100.js deleted file mode 100644 index 14f25fec9d..0000000000 --- a/assets/js/494f4f5e.14f52100.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5665],{7887:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>d,frontMatter:()=>i,metadata:()=>a,toc:()=>l});var s=n(5893),r=n(1151);const i={id:"angular-ivy",title:"Angular Ivy"},o=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},c={},l=[];function u(e){const t={code:"code",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...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 util script to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest but this script only works via the\nJavaScript version of Jest config"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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.d5227aa3.js b/assets/js/4b3f866b.d5227aa3.js new file mode 100644 index 0000000000..0aef015617 --- /dev/null +++ b/assets/js/4b3f866b.d5227aa3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8380],{5182:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var n=s(5893),r=s(1151),a=s(3992),o=s(425);const i={id:"esm-support",title:"ESM Support"},l=void 0,u={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/guides/esm-support",draft:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["To use ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,n.jsx)(t.code,{children:"ts-jest"})," config option ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["There is also a ",(0,n.jsx)(t.a,{href:"/jest-preset-angular/docs/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,n.jsx)(t.admonition,{type:"tip",children:(0,n.jsxs)(t.p,{children:["We have ",(0,n.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,n.jsxs)(t.p,{children:["Besides, there is ",(0,n.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,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,n.jsx)(t.h3,{id:"examples",children:"Examples"}),"\n",(0,n.jsx)(t.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(t.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,n.jsxs)(t.admonition,{type:"tip",children:[(0,n.jsxs)(t.p,{children:["Jest will attempt to load ",(0,n.jsx)(t.strong,{children:"ESM"})," files from ",(0,n.jsx)(t.code,{children:"node_modules"})," with default ",(0,n.jsx)(t.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,n.jsx)(t.strong,{children:"ESM"})," built files or ",(0,n.jsx)(t.strong,{children:"ESM"})," files which are outside ",(0,n.jsx)(t.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,n.jsxs)(t.p,{children:["To fix that, one can use ",(0,n.jsx)(t.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,n.jsx)(t.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},425:(e,t,s)=>{s.d(t,{Z:()=>o});s(7294);var n=s(512);const r={tabItem:"tabItem_Ymn6"};var a=s(5893);function o(e){let{children:t,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.Z)(r.tabItem,o),hidden:s,children:t})}},3992:(e,t,s)=>{s.d(t,{Z:()=>w});var n=s(7294),r=s(512),a=s(2957),o=s(6550),i=s(1270),l=s(5238),u=s(3609),c=s(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(5893);function b(e){let{className:t,block:s,selectedValue:n,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:r}=e;const a=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,n.cloneElement)(e,{className:"margin-top--md"}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=f(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,s)=>{s.d(t,{Z:()=>i,a:()=>o});var n=s(7294);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/4b3f866b.f8f22b1a.js b/assets/js/4b3f866b.f8f22b1a.js deleted file mode 100644 index f1baa2b1af..0000000000 --- a/assets/js/4b3f866b.f8f22b1a.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8380],{5182:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var n=s(5893),r=s(1151),a=s(3992),o=s(425);const i={id:"esm-support",title:"ESM Support"},l=void 0,u={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/guides/esm-support",draft:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["To use ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,n.jsx)(t.code,{children:"ts-jest"})," config option ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["There is also a ",(0,n.jsx)(t.a,{href:"/jest-preset-angular/docs/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,n.jsx)(t.admonition,{type:"tip",children:(0,n.jsxs)(t.p,{children:["We have ",(0,n.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,n.jsxs)(t.p,{children:["Besides, there is ",(0,n.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,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,n.jsx)(t.h3,{id:"examples",children:"Examples"}),"\n",(0,n.jsx)(t.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(t.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,n.jsxs)(t.admonition,{type:"tip",children:[(0,n.jsxs)(t.p,{children:["Jest will attempt to load ",(0,n.jsx)(t.strong,{children:"ESM"})," files from ",(0,n.jsx)(t.code,{children:"node_modules"})," with default ",(0,n.jsx)(t.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,n.jsx)(t.strong,{children:"ESM"})," built files or ",(0,n.jsx)(t.strong,{children:"ESM"})," files which are outside ",(0,n.jsx)(t.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,n.jsxs)(t.p,{children:["To fix that, one can use ",(0,n.jsx)(t.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,n.jsx)(t.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},425:(e,t,s)=>{s.d(t,{Z:()=>o});s(7294);var n=s(512);const r={tabItem:"tabItem_Ymn6"};var a=s(5893);function o(e){let{children:t,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.Z)(r.tabItem,o),hidden:s,children:t})}},3992:(e,t,s)=>{s.d(t,{Z:()=>w});var n=s(7294),r=s(512),a=s(2957),o=s(6550),i=s(1270),l=s(5238),u=s(3609),c=s(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(5893);function b(e){let{className:t,block:s,selectedValue:n,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:r}=e;const a=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,n.cloneElement)(e,{className:"margin-top--md"}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=f(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,s)=>{s.d(t,{Z:()=>i,a:()=>o});var n=s(7294);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.1a67aaa4.js b/assets/js/4e0c07c5.1a67aaa4.js new file mode 100644 index 0000000000..21eaea8ee8 --- /dev/null +++ b/assets/js/4e0c07c5.1a67aaa4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7791],{3513:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>c,toc:()=>u});var s=t(5893),r=t(1151),o=t(3992),i=t(425);const a={id:"options",title:"Options"},l=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/getting-started/options.md",tags:[],version:"current",lastUpdatedBy:"renovate[bot]",lastUpdatedAt:1722455661e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,s.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,s.jsx)(n.code,{children:"transform"})," of Jest config object\nin the ",(0,s.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,s.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,s.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,s.jsxs)(n.p,{children:["More information about ",(0,s.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,s.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,s.jsxs)(n.admonition,{type:"important",children:[(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,s.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,s.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]}),(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,s.jsx)(n.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,s.jsx)(n.code,{children:".mjs"})," files\nwill be processed by ",(0,s.jsx)(n.code,{children:"esbuild"})," in ",(0,s.jsx)(n.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,s.jsx)(n.code,{children:"esbuild"}),", one can do the following:"]}),(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.admonition,{type:"important",children:(0,s.jsxs)(n.p,{children:["Jest runs with ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,s.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,s.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,s.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["We're using ",(0,s.jsx)(n.code,{children:'"transform"'})," to pass information about configuration to use for code compilation with ",(0,s.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,s.jsx)(n.code,{children:"ts"}),"), HTML (",(0,s.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,s.jsx)(n.code,{children:"js"}),"), JSON (",(0,s.jsx)(n.code,{children:"json"}),") and ESM JavaScript (",(0,s.jsx)(n.code,{children:"mjs"}),") files."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.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,s.jsx)(n.code,{children:"RegExp"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,s.jsx)(n.code,{children:"package.json"})," definitions."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. See more in ",(0,s.jsx)(n.a,{href:"/jest-preset-angular/docs/next/guides/snapshot-testing",children:"Snapshot testing"})]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,s.jsx)(n.code,{children:".mjs"})," files which come from ",(0,s.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,s.jsx)(n.code,{children:"TS"}),", ",(0,s.jsx)(n.code,{children:"JS"}),", ",(0,s.jsx)(n.code,{children:"MJS"}),", ",(0,s.jsx)(n.code,{children:"HTML"}),", or ",(0,s.jsx)(n.code,{children:"SVG"})," file through so called ",(0,s.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},425:(e,n,t)=>{t.d(n,{Z:()=>i});t(7294);var s=t(512);const r={tabItem:"tabItem_Ymn6"};var o=t(5893);function i(e){let{children:n,hidden:t,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,i),hidden:t,children:n})}},3992:(e,n,t)=>{t.d(n,{Z:()=>w});var s=t(7294),r=t(512),o=t(2957),i=t(6550),a=t(1270),l=t(5238),c=t(3609),d=t(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=t(5893);function b(e){let{className:n,block:t,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",m.tabItem,o?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:r}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):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!==r})))})}function y(e){const n=f(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",m.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function w(e){const n=(0,g.Z)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(n))}},1151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>i});var s=t(7294);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/4e0c07c5.c57e00b0.js b/assets/js/4e0c07c5.c57e00b0.js deleted file mode 100644 index a5207a6016..0000000000 --- a/assets/js/4e0c07c5.c57e00b0.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7791],{3513:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>c,toc:()=>u});var s=t(5893),r=t(1151),o=t(3992),i=t(425);const a={id:"options",title:"Options"},l=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/getting-started/options.md",tags:[],version:"current",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,s.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,s.jsx)(n.code,{children:"transform"})," of Jest config object\nin the ",(0,s.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,s.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,s.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,s.jsxs)(n.p,{children:["More information about ",(0,s.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,s.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,s.jsxs)(n.admonition,{type:"important",children:[(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,s.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,s.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]}),(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,s.jsx)(n.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,s.jsx)(n.code,{children:".mjs"})," files\nwill be processed by ",(0,s.jsx)(n.code,{children:"esbuild"})," in ",(0,s.jsx)(n.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,s.jsx)(n.code,{children:"esbuild"}),", one can do the following:"]}),(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.admonition,{type:"important",children:(0,s.jsxs)(n.p,{children:["Jest runs with ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,s.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,s.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,s.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["We're using ",(0,s.jsx)(n.code,{children:'"transform"'})," to pass information about configuration to use for code compilation with ",(0,s.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,s.jsx)(n.code,{children:"ts"}),"), HTML (",(0,s.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,s.jsx)(n.code,{children:"js"}),"), JSON (",(0,s.jsx)(n.code,{children:"json"}),") and ESM JavaScript (",(0,s.jsx)(n.code,{children:"mjs"}),") files."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.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,s.jsx)(n.code,{children:"RegExp"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,s.jsx)(n.code,{children:"package.json"})," definitions."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. See more in ",(0,s.jsx)(n.a,{href:"/jest-preset-angular/docs/next/guides/snapshot-testing",children:"Snapshot testing"})]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,s.jsx)(n.code,{children:".mjs"})," files which come from ",(0,s.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,s.jsx)(n.code,{children:"TS"}),", ",(0,s.jsx)(n.code,{children:"JS"}),", ",(0,s.jsx)(n.code,{children:"MJS"}),", ",(0,s.jsx)(n.code,{children:"HTML"}),", or ",(0,s.jsx)(n.code,{children:"SVG"})," file through so called ",(0,s.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},425:(e,n,t)=>{t.d(n,{Z:()=>i});t(7294);var s=t(512);const r={tabItem:"tabItem_Ymn6"};var o=t(5893);function i(e){let{children:n,hidden:t,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,i),hidden:t,children:n})}},3992:(e,n,t)=>{t.d(n,{Z:()=>w});var s=t(7294),r=t(512),o=t(2957),i=t(6550),a=t(1270),l=t(5238),c=t(3609),d=t(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=t(5893);function b(e){let{className:n,block:t,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",m.tabItem,o?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:r}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):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!==r})))})}function y(e){const n=f(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",m.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function w(e){const n=(0,g.Z)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(n))}},1151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>i});var s=t(7294);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/51d67042.1f6c1549.js b/assets/js/51d67042.1f6c1549.js new file mode 100644 index 0000000000..af4d878189 --- /dev/null +++ b/assets/js/51d67042.1f6c1549.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2465],{4133:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>a,contentTitle:()=>r,default:()=>u,frontMatter:()=>o,metadata:()=>l,toc:()=>c});var t=n(5893),i=n(1151);const o={id:"using-with-babel",title:"Using with Babel"},r=void 0,l={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:!1,unlisted:!1,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:1722455661e3,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"}},a={},c=[];function d(e){const s={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(s.p,{children:["If you wish to use ",(0,t.jsx)(s.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,t.jsxs)(s.ol,{children:["\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:["Install dependencies required by the official Jest documentation for ",(0,t.jsx)(s.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:["Install ",(0,t.jsx)(s.code,{children:"@babel/preset-env"})," and add ",(0,t.jsx)(s.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.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,t.jsxs)(s.p,{children:[(0,t.jsxs)(s.em,{children:["Note: do not use a ",(0,t.jsx)(s.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,t.jsx)(s.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,t.jsx)(s.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,t.jsxs)(s.ol,{start:"3",children:["\n",(0,t.jsx)(s.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.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,i.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>l,a:()=>r});var t=n(7294);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/51d67042.d3600864.js b/assets/js/51d67042.d3600864.js deleted file mode 100644 index 81c6294480..0000000000 --- a/assets/js/51d67042.d3600864.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2465],{4133:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>a,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>r,toc:()=>c});var t=s(5893),i=s(1151);const o={id:"using-with-babel",title:"Using with Babel"},l=void 0,r={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},c=[];function d(e){const n={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["If you wish to use ",(0,t.jsx)(n.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Install dependencies required by the official Jest documentation for ",(0,t.jsx)(n.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Install ",(0,t.jsx)(n.code,{children:"@babel/preset-env"})," and add ",(0,t.jsx)(n.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.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,t.jsxs)(n.p,{children:[(0,t.jsxs)(n.em,{children:["Note: do not use a ",(0,t.jsx)(n.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,t.jsx)(n.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,t.jsx)(n.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,t.jsxs)(n.ol,{start:"3",children:["\n",(0,t.jsx)(n.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.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:n}={...(0,i.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>r,a:()=>l});var t=s(7294);const i={},o=t.createContext(i);function l(e){const n=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/54071611.0f349820.js b/assets/js/54071611.0f349820.js new file mode 100644 index 0000000000..afa4af88e0 --- /dev/null +++ b/assets/js/54071611.0f349820.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9783],{5071:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"installation",title:"Installation"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsxs)(t.p,{children:["You can install ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,s.jsxs)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(l.Z,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,s.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Angular doesn't support native ",(0,s.jsx)(t.code,{children:"async/await"})," in testing with ",(0,s.jsx)(t.code,{children:"target"})," higher than ",(0,s.jsx)(t.code,{children:"ES2016"}),", see ",(0,s.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,s.jsxs)(t.p,{children:["In your project root, create ",(0,s.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,s.jsx)(t.p,{children:"Add 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)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["Adjust your ",(0,s.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:["Adjust ",(0,s.jsx)(t.code,{children:"scripts"})," part your ",(0,s.jsx)(t.code,{children:"package.json"})," to use ",(0,s.jsx)(t.code,{children:"jest"})," instead of ",(0,s.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,s.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,s.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,s.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Create a file ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,s.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.admonition,{type:"tip",children:[(0,s.jsxs)(t.p,{children:["An example for ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,s.jsx)(t.pre,{children:(0,s.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,s.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,s.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,s.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,s.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,s.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,s.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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/54071611.897c9fcb.js b/assets/js/54071611.897c9fcb.js deleted file mode 100644 index c24ecf5351..0000000000 --- a/assets/js/54071611.897c9fcb.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9783],{5071:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"installation",title:"Installation"},i=void 0,c={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsxs)(t.p,{children:["You can install ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,s.jsxs)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(l.Z,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,s.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Angular doesn't support native ",(0,s.jsx)(t.code,{children:"async/await"})," in testing with ",(0,s.jsx)(t.code,{children:"target"})," higher than ",(0,s.jsx)(t.code,{children:"ES2016"}),", see ",(0,s.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,s.jsxs)(t.p,{children:["In your project root, create ",(0,s.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,s.jsx)(t.p,{children:"Add 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)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["Adjust your ",(0,s.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:["Adjust ",(0,s.jsx)(t.code,{children:"scripts"})," part your ",(0,s.jsx)(t.code,{children:"package.json"})," to use ",(0,s.jsx)(t.code,{children:"jest"})," instead of ",(0,s.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,s.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,s.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,s.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Create a file ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,s.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.admonition,{type:"tip",children:[(0,s.jsxs)(t.p,{children:["An example for ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,s.jsx)(t.pre,{children:(0,s.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,s.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,s.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,s.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,s.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,s.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,s.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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/54f44165.317fe1b1.js b/assets/js/54f44165.317fe1b1.js new file mode 100644 index 0000000000..b9bed79692 --- /dev/null +++ b/assets/js/54f44165.317fe1b1.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[152],{4646:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"installation",title:"Installation"},i=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/getting-started/installation.md",tags:[],version:"current",lastUpdatedBy:"renovate[bot]",lastUpdatedAt:1722455661e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsxs)(t.p,{children:["You can install ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,s.jsxs)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(l.Z,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,s.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Angular doesn't support native ",(0,s.jsx)(t.code,{children:"async/await"})," in testing with ",(0,s.jsx)(t.code,{children:"target"})," higher than ",(0,s.jsx)(t.code,{children:"ES2016"}),", see ",(0,s.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,s.jsxs)(t.p,{children:["In your project root, create ",(0,s.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,s.jsx)(t.p,{children:"Add 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)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["Adjust your ",(0,s.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:["Adjust ",(0,s.jsx)(t.code,{children:"scripts"})," part your ",(0,s.jsx)(t.code,{children:"package.json"})," to use ",(0,s.jsx)(t.code,{children:"jest"})," instead of ",(0,s.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,s.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,s.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,s.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Create a file ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,s.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.admonition,{type:"tip",children:[(0,s.jsxs)(t.p,{children:["An example for ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,s.jsx)(t.pre,{children:(0,s.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,s.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,s.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,s.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,s.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,s.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,s.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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/c49413db.0f03ba20.js b/assets/js/5635425a.311ae71b.js similarity index 57% rename from assets/js/c49413db.0f03ba20.js rename to assets/js/5635425a.311ae71b.js index a28710506d..0966d63369 100644 --- a/assets/js/c49413db.0f03ba20.js +++ b/assets/js/5635425a.311ae71b.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8058],{1657:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>i,default:()=>u,frontMatter:()=>r,metadata:()=>a,toc:()=>c});var n=t(5893),o=t(1151);const r={id:"esm-support",title:"ESM Support"},i=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.p,{children:["To use ",(0,n.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,n.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,n.jsxs)(s.p,{children:[(0,n.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,n.jsx)(s.code,{children:"ts-jest"})," config option ",(0,n.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,n.jsx)(s.a,{href:"https://jestjs.io/docs/en/next/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,n.jsxs)(s.p,{children:["There is also a ",(0,n.jsx)(s.a,{href:"/jest-preset-angular/docs/10.x/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,n.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,n.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.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,n.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,n.jsxs)(s.admonition,{type:"tip",children:[(0,n.jsxs)(s.p,{children:["Jest will attempt to load ",(0,n.jsx)(s.strong,{children:"ESM"})," files from ",(0,n.jsx)(s.code,{children:"node_modules"})," with default ",(0,n.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,n.jsx)(s.strong,{children:"ESM"})," built files or ",(0,n.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,n.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,n.jsxs)(s.p,{children:["To fix that, one can use ",(0,n.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,n.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,n.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.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,o.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},1151:(e,s,t)=>{t.d(s,{Z:()=>a,a:()=>i});var n=t(7294);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([[7478],{4258:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>i,default:()=>u,frontMatter:()=>r,metadata:()=>a,toc:()=>c});var n=t(5893),o=t(1151);const r={id:"esm-support",title:"ESM Support"},i=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},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.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.p,{children:["To use ",(0,n.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,n.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,n.jsxs)(s.p,{children:[(0,n.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,n.jsx)(s.code,{children:"ts-jest"})," config option ",(0,n.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,n.jsx)(s.a,{href:"https://jestjs.io/docs/en/next/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,n.jsxs)(s.p,{children:["There is also a ",(0,n.jsx)(s.a,{href:"/jest-preset-angular/docs/9.x/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,n.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,n.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.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,n.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,n.jsxs)(s.admonition,{type:"tip",children:[(0,n.jsxs)(s.p,{children:["Jest will attempt to load ",(0,n.jsx)(s.strong,{children:"ESM"})," files from ",(0,n.jsx)(s.code,{children:"node_modules"})," with default ",(0,n.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,n.jsx)(s.strong,{children:"ESM"})," built files or ",(0,n.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,n.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,n.jsxs)(s.p,{children:["To fix that, one can use ",(0,n.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,n.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,n.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.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,o.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},1151:(e,s,t)=>{t.d(s,{Z:()=>a,a:()=>i});var n=t(7294);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/5635425a.62a181c4.js b/assets/js/5635425a.62a181c4.js deleted file mode 100644 index db58a417e6..0000000000 --- a/assets/js/5635425a.62a181c4.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7478],{4258:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>i,default:()=>u,frontMatter:()=>r,metadata:()=>a,toc:()=>c});var n=t(5893),o=t(1151);const r={id:"esm-support",title:"ESM Support"},i=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.p,{children:["To use ",(0,n.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,n.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,n.jsxs)(s.p,{children:[(0,n.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,n.jsx)(s.code,{children:"ts-jest"})," config option ",(0,n.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,n.jsx)(s.a,{href:"https://jestjs.io/docs/en/next/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,n.jsxs)(s.p,{children:["There is also a ",(0,n.jsx)(s.a,{href:"/jest-preset-angular/docs/9.x/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,n.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,n.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.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,n.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,n.jsxs)(s.admonition,{type:"tip",children:[(0,n.jsxs)(s.p,{children:["Jest will attempt to load ",(0,n.jsx)(s.strong,{children:"ESM"})," files from ",(0,n.jsx)(s.code,{children:"node_modules"})," with default ",(0,n.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,n.jsx)(s.strong,{children:"ESM"})," built files or ",(0,n.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,n.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,n.jsxs)(s.p,{children:["To fix that, one can use ",(0,n.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,n.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,n.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.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,o.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},1151:(e,s,t)=>{t.d(s,{Z:()=>a,a:()=>i});var n=t(7294);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.e0486071.js b/assets/js/56acf0ae.e0486071.js new file mode 100644 index 0000000000..2976a6f1f7 --- /dev/null +++ b/assets/js/56acf0ae.e0486071.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7225],{8929:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),o=n(3992),a=n(425);const i={id:"jsdom-version",title:"Configure other JSDOM versions"},l=void 0,u={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:!1,unlisted:!1,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:1722455661e3,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"}},c={},d=[];function m(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,r.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,r.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,r.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,r.jsxs)(o.Z,{groupId:"code-examples",children:[(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,r.jsx)(t.code,{children:"localStorage"})," or ",(0,r.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,r.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Reference: ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,r.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 p(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var o=n(5893);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,a),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),o=n(2957),a=n(6550),i=n(1270),l=n(5238),u=n(3609),c=n(1027);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 m(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.l)(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,a.k6)(),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._X)(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=m(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(!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: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.Nk)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return p({value:e,tabValues:o})?e:null})();(0,i.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!p({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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var r=n(7294);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/56acf0ae.f51d8184.js b/assets/js/56acf0ae.f51d8184.js deleted file mode 100644 index 93d63c78ca..0000000000 --- a/assets/js/56acf0ae.f51d8184.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7225],{8929:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),o=n(3992),a=n(425);const i={id:"jsdom-version",title:"Configure other JSDOM versions"},l=void 0,u={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},c={},d=[];function m(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,r.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,r.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,r.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,r.jsxs)(o.Z,{groupId:"code-examples",children:[(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,r.jsx)(t.code,{children:"localStorage"})," or ",(0,r.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,r.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Reference: ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,r.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 p(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var o=n(5893);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,a),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),o=n(2957),a=n(6550),i=n(1270),l=n(5238),u=n(3609),c=n(1027);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 m(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.l)(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,a.k6)(),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._X)(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=m(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(!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: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.Nk)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return p({value:e,tabValues:o})?e:null})();(0,i.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!p({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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var r=n(7294);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.96336379.js b/assets/js/5ae6b2db.96336379.js new file mode 100644 index 0000000000..223f09da17 --- /dev/null +++ b/assets/js/5ae6b2db.96336379.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3294],{8815:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>u,frontMatter:()=>s,metadata:()=>c,toc:()=>d});var o=n(5893),r=n(1151);const s={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.a)(),...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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>i});var o=n(7294);const r={},s=o.createContext(r);function i(e){const t=o.useContext(s);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(r):e.components||r:i(e.components),o.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/5ae6b2db.d13e7b8e.js b/assets/js/5ae6b2db.d13e7b8e.js deleted file mode 100644 index 13c4263564..0000000000 --- a/assets/js/5ae6b2db.d13e7b8e.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3294],{8815:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>u,frontMatter:()=>r,metadata:()=>c,toc:()=>d});var s=n(5893),o=n(1151);const r={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},i=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/introduction.md",tags:[],version:"11.1",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.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,s.jsxs)(t.p,{children:["This is a part of the article: ",(0,s.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,s.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,s.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,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>i});var s=n(7294);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.30e49c2f.js b/assets/js/5b125e0e.30e49c2f.js new file mode 100644 index 0000000000..82f8cf26ad --- /dev/null +++ b/assets/js/5b125e0e.30e49c2f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9960],{7033:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>g,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var t=s(5893),r=s(1151),a=s(3992),o=s(425);const i={id:"angular-13+",title:"Angular >=13"},l=void 0,u={id:"guides/angular-13+",title:"Angular >=13",description:"Angular 13 introduces ESM package format for Angular packages. jest-preset-angular",source:"@site/docs/guides/angular-13+.md",sourceDirName:"guides",slug:"/guides/angular-13+",permalink:"/jest-preset-angular/docs/next/guides/angular-13+",draft:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/angular-13+.md",tags:[],version:"current",lastUpdatedBy:"renovate[bot]",lastUpdatedAt:1722455661e3,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"}},c={},d=[{value:"Migration steps from Angular < 13",id:"migration-steps-from-angular--13",level:2},{value:"Using ES Modules",id:"using-es-modules",level:3},{value:"Potential issues with Angular 13 ESM package format and workaround",id:"potential-issues-with-angular-13-esm-package-format-and-workaround",level:2},{value:"Cannot find modules error when importing any deep paths from Angular ESM format packages",id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",level:3},{value:"Usage with Angular libraries which are built with Angular CLI 13",id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",level:3},{value:"Usage with Ionic 6 or 7",id:"usage-with-ionic-6-or-7",level:3}];function p(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,t.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,t.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,t.jsx)(n.strong,{children:"Angular 13"})," using ",(0,t.jsx)(n.a,{href:"/jest-preset-angular/docs/next/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,t.jsx)(n.admonition,{type:"important",children:(0,t.jsxs)(n.p,{children:["With Jest 28 and ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,t.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,t.jsx)(n.code,{children:"ng-jest-resolver"})," is no longer required to have in Jest config. This\nresolver is also excluded from our default and default ESM presets."]})}),"\n",(0,t.jsxs)(n.p,{children:["Starting from ",(0,t.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,t.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,t.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,t.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"transform"})," is updated to include ",(0,t.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,t.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Upgrade the project to ",(0,t.jsx)(n.strong,{children:"Angular 13"})," following ",(0,t.jsx)(n.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,t.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,t.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,t.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples/example-app-v13",children:"example-app-v13"})," for an example with tests that run using ESM, and using ESM + isolated."]}),"\n",(0,t.jsxs)(n.p,{children:["Your ",(0,t.jsx)(n.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst { pathsToModuleNameMapper } = require('ts-jest/utils');\nconst { paths } = require('./tsconfig.json').compilerOptions;\n\n/** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */\nmodule.exports = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/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,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\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,t.jsxs)(n.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,t.jsx)(n.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,t.jsx)(n.p,{children:"or for ESM mode"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,t.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,t.jsxs)(n.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,t.jsx)(n.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix this issue, one needs to add ",(0,t.jsx)(n.code,{children:"mjs"})," to ",(0,t.jsx)(n.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Besides, the changes in Angular packages themselves, ",(0,t.jsx)(n.strong,{children:"Angular"})," libraries which are built with ",(0,t.jsx)(n.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,t.jsx)(n.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,t.jsx)(n.strong,{children:"CommonJS"})," mode."]}),"\n",(0,t.jsxs)(n.p,{children:["To fix this issue, one should modify ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.jsx)(n.h3,{id:"usage-with-ionic-6-or-7",children:"Usage with Ionic 6 or 7"}),"\n",(0,t.jsxs)(n.p,{children:["To support Ionic 6 or 7 you will need to modify ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...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,r.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},425:(e,n,s)=>{s.d(n,{Z:()=>o});s(7294);var t=s(512);const r={tabItem:"tabItem_Ymn6"};var a=s(5893);function o(e){let{children:n,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,t.Z)(r.tabItem,o),hidden:s,children:n})}},3992:(e,n,s)=>{s.d(n,{Z:()=>y});var t=s(7294),r=s(512),a=s(2957),o=s(6550),i=s(1270),l=s(5238),u=s(3609),c=s(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(5893);function b(e){let{className:n,block:s,selectedValue:t,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":t===n}),children:s??n},n)}))})}function v(e){let{lazy:n,children:s,selectedValue:r}=e;const a=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){const e=a.find((e=>e.props.value===r));return e?(0,t.cloneElement)(e,{className:"margin-top--md"}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:a.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==r})))})}function w(e){const n=m(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function y(e){const n=(0,j.Z)();return(0,x.jsx)(w,{...e,children:d(e.children)},String(n))}},1151:(e,n,s)=>{s.d(n,{Z:()=>i,a:()=>o});var t=s(7294);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/5b125e0e.ffa4cc8d.js b/assets/js/5b125e0e.ffa4cc8d.js deleted file mode 100644 index 254ba7e8e8..0000000000 --- a/assets/js/5b125e0e.ffa4cc8d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9960],{7033:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>g,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var t=s(5893),r=s(1151),a=s(3992),o=s(425);const i={id:"angular-13+",title:"Angular >=13"},l=void 0,u={id:"guides/angular-13+",title:"Angular >=13",description:"Angular 13 introduces ESM package format for Angular packages. jest-preset-angular",source:"@site/docs/guides/angular-13+.md",sourceDirName:"guides",slug:"/guides/angular-13+",permalink:"/jest-preset-angular/docs/next/guides/angular-13+",draft:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/angular-13+.md",tags:[],version:"current",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},c={},d=[{value:"Migration steps from Angular < 13",id:"migration-steps-from-angular--13",level:2},{value:"Using ES Modules",id:"using-es-modules",level:3},{value:"Potential issues with Angular 13 ESM package format and workaround",id:"potential-issues-with-angular-13-esm-package-format-and-workaround",level:2},{value:"Cannot find modules error when importing any deep paths from Angular ESM format packages",id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",level:3},{value:"Usage with Angular libraries which are built with Angular CLI 13",id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",level:3},{value:"Usage with Ionic 6 or 7",id:"usage-with-ionic-6-or-7",level:3}];function p(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,t.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,t.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,t.jsx)(n.strong,{children:"Angular 13"})," using ",(0,t.jsx)(n.a,{href:"/jest-preset-angular/docs/next/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,t.jsx)(n.admonition,{type:"important",children:(0,t.jsxs)(n.p,{children:["With Jest 28 and ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,t.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,t.jsx)(n.code,{children:"ng-jest-resolver"})," is no longer required to have in Jest config. This\nresolver is also excluded from our default and default ESM presets."]})}),"\n",(0,t.jsxs)(n.p,{children:["Starting from ",(0,t.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,t.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,t.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,t.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"transform"})," is updated to include ",(0,t.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,t.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Upgrade the project to ",(0,t.jsx)(n.strong,{children:"Angular 13"})," following ",(0,t.jsx)(n.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,t.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,t.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,t.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples/example-app-v13",children:"example-app-v13"})," for an example with tests that run using ESM, and using ESM + isolated."]}),"\n",(0,t.jsxs)(n.p,{children:["Your ",(0,t.jsx)(n.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst { pathsToModuleNameMapper } = require('ts-jest/utils');\nconst { paths } = require('./tsconfig.json').compilerOptions;\n\n/** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */\nmodule.exports = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/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,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\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,t.jsxs)(n.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,t.jsx)(n.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,t.jsx)(n.p,{children:"or for ESM mode"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,t.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,t.jsxs)(n.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,t.jsx)(n.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix this issue, one needs to add ",(0,t.jsx)(n.code,{children:"mjs"})," to ",(0,t.jsx)(n.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Besides, the changes in Angular packages themselves, ",(0,t.jsx)(n.strong,{children:"Angular"})," libraries which are built with ",(0,t.jsx)(n.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,t.jsx)(n.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,t.jsx)(n.strong,{children:"CommonJS"})," mode."]}),"\n",(0,t.jsxs)(n.p,{children:["To fix this issue, one should modify ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.jsx)(n.h3,{id:"usage-with-ionic-6-or-7",children:"Usage with Ionic 6 or 7"}),"\n",(0,t.jsxs)(n.p,{children:["To support Ionic 6 or 7 you will need to modify ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...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,r.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},425:(e,n,s)=>{s.d(n,{Z:()=>o});s(7294);var t=s(512);const r={tabItem:"tabItem_Ymn6"};var a=s(5893);function o(e){let{children:n,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,t.Z)(r.tabItem,o),hidden:s,children:n})}},3992:(e,n,s)=>{s.d(n,{Z:()=>y});var t=s(7294),r=s(512),a=s(2957),o=s(6550),i=s(1270),l=s(5238),u=s(3609),c=s(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(5893);function b(e){let{className:n,block:s,selectedValue:t,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":t===n}),children:s??n},n)}))})}function v(e){let{lazy:n,children:s,selectedValue:r}=e;const a=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){const e=a.find((e=>e.props.value===r));return e?(0,t.cloneElement)(e,{className:"margin-top--md"}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:a.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==r})))})}function w(e){const n=m(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function y(e){const n=(0,j.Z)();return(0,x.jsx)(w,{...e,children:d(e.children)},String(n))}},1151:(e,n,s)=>{s.d(n,{Z:()=>i,a:()=>o});var t=s(7294);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/5b1cb890.a275370f.js b/assets/js/5b1cb890.a275370f.js deleted file mode 100644 index df686d641a..0000000000 --- a/assets/js/5b1cb890.a275370f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9775],{1424:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>l,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),o=n(425);const l={id:"presets",title:"Presets"},i=void 0,c={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Preset name"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,s.jsx)("br",{}),"or ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,s.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,s.jsx)(t.code,{children:"js"}),", ",(0,s.jsx)(t.code,{children:".ts"}),", ",(0,s.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,s.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,s.jsx)("br",{})]}),(0,s.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,s.jsx)(t.code,{children:"js"}),", ",(0,s.jsx)(t.code,{children:".ts"}),", ",(0,s.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,s.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,s.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,s.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,s.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,s.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,s.jsxs)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(o.Z,{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 // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n"})})}),(0,s.jsx)(o.Z,{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 // 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,s.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,s.jsxs)(t.p,{children:["All presets come with default ",(0,s.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,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["If you choose to override ",(0,s.jsx)(t.code,{children:"transform"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,s.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,s.jsx)(t.code,{children:"transform"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,s.jsxs)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(o.Z,{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\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,s.jsx)(o.Z,{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';\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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>o});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function o(e){let{children:t,hidden:n,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,o),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),o=n(6550),l=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>l,a:()=>o});var s=n(7294);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/5b1cb890.d216483c.js b/assets/js/5b1cb890.d216483c.js new file mode 100644 index 0000000000..93f514d6f9 --- /dev/null +++ b/assets/js/5b1cb890.d216483c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9775],{1424:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>l,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),o=n(425);const l={id:"presets",title:"Presets"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Preset name"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,s.jsx)("br",{}),"or ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,s.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,s.jsx)(t.code,{children:"js"}),", ",(0,s.jsx)(t.code,{children:".ts"}),", ",(0,s.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,s.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,s.jsx)("br",{})]}),(0,s.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,s.jsx)(t.code,{children:"js"}),", ",(0,s.jsx)(t.code,{children:".ts"}),", ",(0,s.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,s.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,s.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,s.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,s.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,s.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,s.jsxs)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(o.Z,{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 // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n"})})}),(0,s.jsx)(o.Z,{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 // 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,s.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,s.jsxs)(t.p,{children:["All presets come with default ",(0,s.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,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["If you choose to override ",(0,s.jsx)(t.code,{children:"transform"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,s.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,s.jsx)(t.code,{children:"transform"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,s.jsxs)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(o.Z,{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\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,s.jsx)(o.Z,{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';\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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>o});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function o(e){let{children:t,hidden:n,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,o),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),o=n(6550),l=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>l,a:()=>o});var s=n(7294);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.59470596.js b/assets/js/5ee9d842.59470596.js new file mode 100644 index 0000000000..775eec861b --- /dev/null +++ b/assets/js/5ee9d842.59470596.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3145],{1557:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>l,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var s=n(5893),r=n(1151);const i={id:"test-environment",title:"Test environment"},o=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},d={},c=[];function u(e){const t={a:"a",code:"code",p:"p",...(0,r.a)(),...e.components};return(0,s.jsxs)(t.p,{children:["If you look at ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/src/config/setup-jest.ts",children:(0,s.jsx)(t.code,{children:"setup-jest.ts"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,s.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 l(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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/5ee9d842.9583fe37.js b/assets/js/5ee9d842.9583fe37.js deleted file mode 100644 index deda87b4a7..0000000000 --- a/assets/js/5ee9d842.9583fe37.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3145],{1557:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var s=n(5893),r=n(1151);const i={id:"test-environment",title:"Test environment"},o=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},d={},c=[];function l(e){const t={a:"a",code:"code",p:"p",...(0,r.a)(),...e.components};return(0,s.jsxs)(t.p,{children:["If you look at ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/src/config/setup-jest.ts",children:(0,s.jsx)(t.code,{children:"setup-jest.ts"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,s.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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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.21a431b3.js b/assets/js/5f85402d.21a431b3.js deleted file mode 100644 index 122459de9d..0000000000 --- a/assets/js/5f85402d.21a431b3.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1430],{6071:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"installation",title:"Installation"},i=void 0,c={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsxs)(t.p,{children:["You can install ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,s.jsxs)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(l.Z,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,s.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Angular doesn't support native ",(0,s.jsx)(t.code,{children:"async/await"})," in testing with ",(0,s.jsx)(t.code,{children:"target"})," higher than ",(0,s.jsx)(t.code,{children:"ES2016"}),", see ",(0,s.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,s.jsxs)(t.p,{children:["In your project root, create ",(0,s.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,s.jsx)(t.p,{children:"Add 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)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["Adjust your ",(0,s.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:["Adjust ",(0,s.jsx)(t.code,{children:"scripts"})," part your ",(0,s.jsx)(t.code,{children:"package.json"})," to use ",(0,s.jsx)(t.code,{children:"jest"})," instead of ",(0,s.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,s.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,s.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,s.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Create a file ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,s.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.admonition,{type:"tip",children:[(0,s.jsxs)(t.p,{children:["An example for ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,s.jsx)(t.pre,{children:(0,s.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,s.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,s.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,s.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,s.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,s.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,s.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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/5f85402d.7b566f65.js b/assets/js/5f85402d.7b566f65.js new file mode 100644 index 0000000000..65363ea105 --- /dev/null +++ b/assets/js/5f85402d.7b566f65.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1430],{6071:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"installation",title:"Installation"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsxs)(t.p,{children:["You can install ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,s.jsxs)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(l.Z,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,s.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Angular doesn't support native ",(0,s.jsx)(t.code,{children:"async/await"})," in testing with ",(0,s.jsx)(t.code,{children:"target"})," higher than ",(0,s.jsx)(t.code,{children:"ES2016"}),", see ",(0,s.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,s.jsxs)(t.p,{children:["In your project root, create ",(0,s.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,s.jsx)(t.p,{children:"Add 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)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["Adjust your ",(0,s.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:["Adjust ",(0,s.jsx)(t.code,{children:"scripts"})," part your ",(0,s.jsx)(t.code,{children:"package.json"})," to use ",(0,s.jsx)(t.code,{children:"jest"})," instead of ",(0,s.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,s.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,s.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,s.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Create a file ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,s.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.admonition,{type:"tip",children:[(0,s.jsxs)(t.p,{children:["An example for ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,s.jsx)(t.pre,{children:(0,s.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,s.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,s.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,s.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,s.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,s.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,s.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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.23110caf.js b/assets/js/6059e070.23110caf.js new file mode 100644 index 0000000000..ad10fcfb94 --- /dev/null +++ b/assets/js/6059e070.23110caf.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[813],{7145:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"installation",title:"Installation"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsxs)(t.p,{children:["You can install ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,s.jsxs)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(l.Z,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,s.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Angular doesn't support native ",(0,s.jsx)(t.code,{children:"async/await"})," in testing with ",(0,s.jsx)(t.code,{children:"target"})," higher than ",(0,s.jsx)(t.code,{children:"ES2016"}),", see ",(0,s.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,s.jsxs)(t.p,{children:["In your project root, create ",(0,s.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,s.jsx)(t.p,{children:"Add 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)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["Adjust your ",(0,s.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:["Adjust ",(0,s.jsx)(t.code,{children:"scripts"})," part your ",(0,s.jsx)(t.code,{children:"package.json"})," to use ",(0,s.jsx)(t.code,{children:"jest"})," instead of ",(0,s.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,s.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,s.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,s.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Create a file ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,s.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.admonition,{type:"tip",children:[(0,s.jsxs)(t.p,{children:["An example for ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,s.jsx)(t.pre,{children:(0,s.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,s.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,s.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,s.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,s.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,s.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,s.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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.7f0b9660.js b/assets/js/6059e070.7f0b9660.js deleted file mode 100644 index 4e71cec729..0000000000 --- a/assets/js/6059e070.7f0b9660.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[813],{7145:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"installation",title:"Installation"},i=void 0,c={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsxs)(t.p,{children:["You can install ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,s.jsxs)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(l.Z,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,s.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Angular doesn't support native ",(0,s.jsx)(t.code,{children:"async/await"})," in testing with ",(0,s.jsx)(t.code,{children:"target"})," higher than ",(0,s.jsx)(t.code,{children:"ES2016"}),", see ",(0,s.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,s.jsxs)(t.p,{children:["In your project root, create ",(0,s.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,s.jsx)(t.p,{children:"Add 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)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["Adjust your ",(0,s.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:["Adjust ",(0,s.jsx)(t.code,{children:"scripts"})," part your ",(0,s.jsx)(t.code,{children:"package.json"})," to use ",(0,s.jsx)(t.code,{children:"jest"})," instead of ",(0,s.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,s.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,s.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,s.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Create a file ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,s.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.admonition,{type:"tip",children:[(0,s.jsxs)(t.p,{children:["An example for ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,s.jsx)(t.pre,{children:(0,s.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,s.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,s.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,s.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,s.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,s.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,s.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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.352e6050.js b/assets/js/6266f1ba.352e6050.js deleted file mode 100644 index e8c502db49..0000000000 --- a/assets/js/6266f1ba.352e6050.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8116],{1561:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>r,metadata:()=>a,toc:()=>d});var s=n(5893),o=n(1151);const r={id:"options",title:"Options"},i=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,s.jsx)(t.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,s.jsx)(t.code,{children:"globals"})," of Jest config object\nin the ",(0,s.jsx)(t.code,{children:"package.json"})," file of your project, or through a ",(0,s.jsx)(t.code,{children:"jest.config.js"}),", or ",(0,s.jsx)(t.code,{children:"jest.config.ts"})," file."]}),"\n",(0,s.jsxs)(t.p,{children:["More information about ",(0,s.jsx)(t.code,{children:"ts-jest"})," options, see ",(0,s.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,s.jsx)(t.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Jest doesn't run in browser nor through dev server. It uses ",(0,s.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,s.jsx)(t.strong,{children:"we're not testing CSS"}),") because otherwise Angular will try\nto make ",(0,s.jsx)(t.code,{children:"XHR"})," call for our templates and fail miserably."]})}),"\n",(0,s.jsx)(t.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["we're using some ",(0,s.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,s.jsx)(t.code,{children:"ts-jest"}),"."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:'"transform"'})," \u2013 run every TS, JS, or HTML file through so called ",(0,s.jsx)(t.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,s.jsx)(t.code,{children:"ts"}),"), HTML (",(0,s.jsx)(t.code,{children:"html"}),"), JavaScript (",(0,s.jsx)(t.code,{children:"js"}),") and JSON (",(0,s.jsx)(t.code,{children:"json"}),") files."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.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,s.jsxs)(t.li,{children:[(0,s.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,s.jsxs)(t.li,{children:[(0,s.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,s.jsx)(t.code,{children:"ng-reflect-*"}),", ",(0,s.jsx)(t.code,{children:'ng-version="*"'}),", ",(0,s.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,s.jsx)(t.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,s.jsx)(t.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>i});var s=n(7294);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/6266f1ba.66352cad.js b/assets/js/6266f1ba.66352cad.js new file mode 100644 index 0000000000..e72de8e48b --- /dev/null +++ b/assets/js/6266f1ba.66352cad.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8116],{1561:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>r,metadata:()=>a,toc:()=>d});var s=n(5893),o=n(1151);const r={id:"options",title:"Options"},i=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},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,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,s.jsx)(t.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,s.jsx)(t.code,{children:"globals"})," of Jest config object\nin the ",(0,s.jsx)(t.code,{children:"package.json"})," file of your project, or through a ",(0,s.jsx)(t.code,{children:"jest.config.js"}),", or ",(0,s.jsx)(t.code,{children:"jest.config.ts"})," file."]}),"\n",(0,s.jsxs)(t.p,{children:["More information about ",(0,s.jsx)(t.code,{children:"ts-jest"})," options, see ",(0,s.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,s.jsx)(t.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Jest doesn't run in browser nor through dev server. It uses ",(0,s.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,s.jsx)(t.strong,{children:"we're not testing CSS"}),") because otherwise Angular will try\nto make ",(0,s.jsx)(t.code,{children:"XHR"})," call for our templates and fail miserably."]})}),"\n",(0,s.jsx)(t.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["we're using some ",(0,s.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,s.jsx)(t.code,{children:"ts-jest"}),"."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:'"transform"'})," \u2013 run every TS, JS, or HTML file through so called ",(0,s.jsx)(t.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,s.jsx)(t.code,{children:"ts"}),"), HTML (",(0,s.jsx)(t.code,{children:"html"}),"), JavaScript (",(0,s.jsx)(t.code,{children:"js"}),") and JSON (",(0,s.jsx)(t.code,{children:"json"}),") files."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.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,s.jsxs)(t.li,{children:[(0,s.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,s.jsxs)(t.li,{children:[(0,s.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,s.jsx)(t.code,{children:"ng-reflect-*"}),", ",(0,s.jsx)(t.code,{children:'ng-version="*"'}),", ",(0,s.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,s.jsx)(t.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,s.jsx)(t.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>i});var s=n(7294);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.0078cc88.js b/assets/js/63150b11.0078cc88.js new file mode 100644 index 0000000000..c9b5832e86 --- /dev/null +++ b/assets/js/63150b11.0078cc88.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3263],{7447:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>i,default:()=>h,frontMatter:()=>r,metadata:()=>c,toc:()=>a});var s=t(5893),o=t(1151);const r={id:"options",title:"Options"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},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,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,s.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,s.jsx)(n.code,{children:"globals"})," of Jest config object\nin the ",(0,s.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,s.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,s.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,s.jsxs)(n.p,{children:["More information about ",(0,s.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,s.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,s.jsxs)(n.admonition,{type:"important",children:[(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,s.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,s.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config"]}),(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.admonition,{type:"important",children:(0,s.jsxs)(n.p,{children:["Jest runs with ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,s.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,s.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,s.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["we're using some ",(0,s.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,s.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,s.jsx)(n.code,{children:"TS"}),", ",(0,s.jsx)(n.code,{children:"JS"}),", ",(0,s.jsx)(n.code,{children:"MJS"}),", ",(0,s.jsx)(n.code,{children:"HTML"}),", or ",(0,s.jsx)(n.code,{children:"SVG"})," file through so called ",(0,s.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,s.jsx)(n.code,{children:"ts"}),"), HTML (",(0,s.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,s.jsx)(n.code,{children:"js"}),") and JSON (",(0,s.jsx)(n.code,{children:"json"}),") files."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.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,s.jsxs)(n.li,{children:[(0,s.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,s.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,s.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,s.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,s.jsx)(n.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,s.jsx)(n.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>i});var s=t(7294);const o={},r=s.createContext(o);function i(e){const n=s.useContext(r);return s.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),s.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/63150b11.0ff2a0f4.js b/assets/js/63150b11.0ff2a0f4.js deleted file mode 100644 index 9b6d785743..0000000000 --- a/assets/js/63150b11.0ff2a0f4.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3263],{7447:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>i,default:()=>h,frontMatter:()=>r,metadata:()=>c,toc:()=>a});var s=t(5893),o=t(1151);const r={id:"options",title:"Options"},i=void 0,c={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,s.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,s.jsx)(n.code,{children:"globals"})," of Jest config object\nin the ",(0,s.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,s.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,s.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,s.jsxs)(n.p,{children:["More information about ",(0,s.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,s.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,s.jsxs)(n.admonition,{type:"important",children:[(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,s.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,s.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config"]}),(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.admonition,{type:"important",children:(0,s.jsxs)(n.p,{children:["Jest runs with ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,s.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,s.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,s.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["we're using some ",(0,s.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,s.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,s.jsx)(n.code,{children:"TS"}),", ",(0,s.jsx)(n.code,{children:"JS"}),", ",(0,s.jsx)(n.code,{children:"MJS"}),", ",(0,s.jsx)(n.code,{children:"HTML"}),", or ",(0,s.jsx)(n.code,{children:"SVG"})," file through so called ",(0,s.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,s.jsx)(n.code,{children:"ts"}),"), HTML (",(0,s.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,s.jsx)(n.code,{children:"js"}),") and JSON (",(0,s.jsx)(n.code,{children:"json"}),") files."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.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,s.jsxs)(n.li,{children:[(0,s.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,s.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,s.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,s.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,s.jsx)(n.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,s.jsx)(n.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>i});var s=t(7294);const o={},r=s.createContext(o);function i(e){const n=s.useContext(r);return s.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),s.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/651850eb.2db0ab0d.js b/assets/js/651850eb.2db0ab0d.js deleted file mode 100644 index 96abd6422b..0000000000 --- a/assets/js/651850eb.2db0ab0d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9188],{9912:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>c,toc:()=>u});var s=n(5893),r=n(1151);const o={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},i=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/introduction.md",tags:[],version:"8.x",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},u=[];function d(t){const e={a:"a",code:"code",p:"p",...(0,r.a)(),...t.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(e.p,{children:[(0,s.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,s.jsxs)(e.p,{children:["This is a part of the article: ",(0,s.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.a)(),...t.components};return e?(0,s.jsx)(e,{...t,children:(0,s.jsx)(d,{...t})}):d(t)}},1151:(t,e,n)=>{n.d(e,{Z:()=>c,a:()=>i});var s=n(7294);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/651850eb.84b87be0.js b/assets/js/651850eb.84b87be0.js new file mode 100644 index 0000000000..0153f18de8 --- /dev/null +++ b/assets/js/651850eb.84b87be0.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9188],{9912:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>r,metadata:()=>c,toc:()=>u});var s=n(5893),o=n(1151);const r={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},a={},u=[];function d(t){const e={a:"a",code:"code",p:"p",...(0,o.a)(),...t.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(e.p,{children:[(0,s.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,s.jsxs)(e.p,{children:["This is a part of the article: ",(0,s.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,o.a)(),...t.components};return e?(0,s.jsx)(e,{...t,children:(0,s.jsx)(d,{...t})}):d(t)}},1151:(t,e,n)=>{n.d(e,{Z:()=>c,a:()=>i});var s=n(7294);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.4261e7dd.js b/assets/js/6608151e.4261e7dd.js deleted file mode 100644 index adb82486d1..0000000000 --- a/assets/js/6608151e.4261e7dd.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[407],{4683:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>u,frontMatter:()=>r,metadata:()=>c,toc:()=>d});var s=n(5893),o=n(1151);const r={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},i=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/introduction.md",tags:[],version:"10.x",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.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,s.jsxs)(t.p,{children:["This is a part of the article: ",(0,s.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,s.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,s.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,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>i});var s=n(7294);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/6608151e.7dbe83cf.js b/assets/js/6608151e.7dbe83cf.js new file mode 100644 index 0000000000..a564f700a5 --- /dev/null +++ b/assets/js/6608151e.7dbe83cf.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[407],{4683:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>u,frontMatter:()=>s,metadata:()=>c,toc:()=>d});var o=n(5893),r=n(1151);const s={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.a)(),...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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>i});var o=n(7294);const r={},s=o.createContext(r);function i(e){const t=o.useContext(s);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(r):e.components||r:i(e.components),o.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/68240572.35ae6183.js b/assets/js/68240572.35ae6183.js deleted file mode 100644 index add9b25baa..0000000000 --- a/assets/js/68240572.35ae6183.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4732],{4557:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>p,default:()=>j,frontMatter:()=>o,metadata:()=>c,toc:()=>h});var s=t(5893),i=t(1151),r=t(3992),l=t(425),a=t(8839);const o={id:"snapshot-testing",title:"Snapshot testing"},p=void 0,c={id:"guides/snapshot-testing",title:"Snapshot testing",description:"jest-preset-angular provides several snapshot serializers to generate clearer and more human-readable snapshot.",source:"@site/docs/guides/snapshot-testing.md",sourceDirName:"guides",slug:"/guides/snapshot-testing",permalink:"/jest-preset-angular/docs/next/guides/snapshot-testing",draft:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/snapshot-testing.md",tags:[],version:"current",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,frontMatter:{id:"snapshot-testing",title:"Snapshot testing"},sidebar:"docs",previous:{title:"Configure other JSDOM versions",permalink:"/jest-preset-angular/docs/next/guides/jsdom-version"},next:{title:"Using with Babel",permalink:"/jest-preset-angular/docs/next/guides/using-with-babel"}},d={},h=[{value:"Snapshot serializers",id:"snapshot-serializers",level:2},{value:"Reference",id:"reference",level:2},{value:"Remove html comments (html-comment)",id:"remove-html-comments-html-comment",level:3},{value:"In Jest config",id:"in-jest-config",level:4},{value:"Or in setup test environment file",id:"or-in-setup-test-environment-file",level:4},{value:"Or in individual test files",id:"or-in-individual-test-files",level:4},{value:"Display component HTML (ng-snapshot)",id:"display-component-html-ng-snapshot",level:3},{value:"Configuration options",id:"configuration-options",level:4},{value:"In Jest config",id:"in-jest-config-1",level:4},{value:"Or in setup test environment file",id:"or-in-setup-test-environment-file-1",level:4},{value:"Or in individual test files",id:"or-in-individual-test-files-1",level:4},{value:"With options",id:"with-options",level:4},{value:"Remove Angular attributes (no-ng-attributes)",id:"remove-angular-attributes-no-ng-attributes",level:3},{value:"In Jest config",id:"in-jest-config-2",level:4},{value:"Or in setup test environment file",id:"or-in-setup-test-environment-file-2",level:4},{value:"Or in individual test files",id:"or-in-individual-test-files-2",level:4}];function m(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," provides several snapshot serializers to generate clearer and more human-readable snapshot."]}),"\n",(0,s.jsx)(n.admonition,{type:"info",children:(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"BY DEFAULT"}),", the ",(0,s.jsx)(n.a,{href:"/jest-preset-angular/docs/next/getting-started/presets",children:"preset"})," provides all of the snapshot serializers below."]})}),"\n",(0,s.jsx)(n.h2,{id:"snapshot-serializers",children:"Snapshot serializers"}),"\n","\n",(0,s.jsx)(a.Z,{toc:h.slice(2)}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h2,{id:"reference",children:"Reference"}),"\n",(0,s.jsxs)(n.h3,{id:"remove-html-comments-html-comment",children:["Remove html comments (",(0,s.jsx)(n.code,{children:"html-comment"}),")"]}),"\n",(0,s.jsx)(n.p,{children:"Allow removing all the comments in the component HTML in snapshot."}),"\n",(0,s.jsx)(n.p,{children:"Examples:"}),"\n",(0,s.jsx)(n.h4,{id:"in-jest-config",children:"In Jest config"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/html-comment'],\n //[...]\n};\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/html-comment'],\n //[...]\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-setup-test-environment-file",children:"Or in setup test environment file"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="setup-jest.js"',children:"const removeHtmlCommentsSerializer = require('jest-preset-angular/build/serializers/html-comment');\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import removeHtmlCommentsSerializer from 'jest-preset-angular/build/serializers/html-comment';\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n"})})]})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-individual-test-files",children:"Or in individual test files"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const removeHtmlCommentsSerializer = require('jest-preset-angular/build/serializers/html-comment');\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import removeHtmlCommentsSerializer from 'jest-preset-angular/build/serializers/html-comment';\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})})]}),"\n",(0,s.jsxs)(n.h3,{id:"display-component-html-ng-snapshot",children:["Display component HTML (",(0,s.jsx)(n.code,{children:"ng-snapshot"}),")"]}),"\n",(0,s.jsx)(n.p,{children:"Allow displaying component HTML with data in snapshot."}),"\n",(0,s.jsx)(n.h4,{id:"configuration-options",children:"Configuration options"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"type NgSnapshotOptions = {\n omitAllCompAttrs?: boolean;\n};\n"})}),"\n",(0,s.jsx)(n.p,{children:"Configure snapshot behavior"}),"\n",(0,s.jsx)(n.p,{children:"Examples:"}),"\n",(0,s.jsx)(n.h4,{id:"in-jest-config-1",children:"In Jest config"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/ng-snapshot'],\n //[...]\n};\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/ng-snapshot'],\n //[...]\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-setup-test-environment-file-1",children:"Or in setup test environment file"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="setup-jest.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n"})})]})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-individual-test-files-1",children:"Or in individual test files"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"with-options",children:"With options"}),"\n",(0,s.jsxs)(n.admonition,{title:"Effective priority",type:"info",children:[(0,s.jsx)(n.p,{children:"The configured serializers will have affect in this order:"}),(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"Jest config"})," -> ",(0,s.jsx)(n.code,{children:"setup files"})," -> ",(0,s.jsx)(n.code,{children:"test files"})]}),(0,s.jsx)(n.p,{children:"The later the higher priority. This means that with the same serializer, the later one will override the configuration\nof the previous one in the chain."})]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"In setup files:"}),"\n"]}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="setup-jest.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="setup-jest.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n"})})]})]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"or in individual test files:"}),"\n"]}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n\nit('should work', () => {\n //[...]\n});\n"})})})]}),"\n",(0,s.jsxs)(n.h3,{id:"remove-angular-attributes-no-ng-attributes",children:["Remove Angular attributes (",(0,s.jsx)(n.code,{children:"no-ng-attributes"}),")"]}),"\n",(0,s.jsxs)(n.p,{children:["Allow removing attributes generated by Angular fixture, like ",(0,s.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,s.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,s.jsx)(n.code,{children:"_ngcontent-c*"})," etc., from component snapshot"]}),"\n",(0,s.jsx)(n.p,{children:"Examples:"}),"\n",(0,s.jsx)(n.h4,{id:"in-jest-config-2",children:"In Jest config"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/no-ng-attributes'],\n //[...]\n};\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/no-ng-attributes'],\n //[...]\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-setup-test-environment-file-2",children:"Or in setup test environment file"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="setup-jest.js"',children:"const removeNgAttributes = require('jest-preset-angular/build/serializers/no-ng-attributes');\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import removeNgAttributes from 'jest-preset-angular/build/serializers/no-ng-attributes';\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n"})})]})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-individual-test-files-2",children:"Or in individual test files"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const removeNgAttributes = require('jest-preset-angular/build/serializers/no-ng-attributes');\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import removeNgAttributes from 'jest-preset-angular/build/serializers/no-ng-attributes';\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n\nit('should work', () => {\n //[...]\n});\n"})})})]})]})}function j(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(m,{...e})}):m(e)}}}]); \ No newline at end of file diff --git a/assets/js/68240572.9859f7a4.js b/assets/js/68240572.9859f7a4.js new file mode 100644 index 0000000000..62be117913 --- /dev/null +++ b/assets/js/68240572.9859f7a4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4732],{4557:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>p,default:()=>j,frontMatter:()=>o,metadata:()=>c,toc:()=>h});var s=t(5893),i=t(1151),r=t(3992),l=t(425),a=t(8839);const o={id:"snapshot-testing",title:"Snapshot testing"},p=void 0,c={id:"guides/snapshot-testing",title:"Snapshot testing",description:"jest-preset-angular provides several snapshot serializers to generate clearer and more human-readable snapshot.",source:"@site/docs/guides/snapshot-testing.md",sourceDirName:"guides",slug:"/guides/snapshot-testing",permalink:"/jest-preset-angular/docs/next/guides/snapshot-testing",draft:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/snapshot-testing.md",tags:[],version:"current",lastUpdatedBy:"renovate[bot]",lastUpdatedAt:1722455661e3,frontMatter:{id:"snapshot-testing",title:"Snapshot testing"},sidebar:"docs",previous:{title:"Configure other JSDOM versions",permalink:"/jest-preset-angular/docs/next/guides/jsdom-version"},next:{title:"Using with Babel",permalink:"/jest-preset-angular/docs/next/guides/using-with-babel"}},d={},h=[{value:"Snapshot serializers",id:"snapshot-serializers",level:2},{value:"Reference",id:"reference",level:2},{value:"Remove html comments (html-comment)",id:"remove-html-comments-html-comment",level:3},{value:"In Jest config",id:"in-jest-config",level:4},{value:"Or in setup test environment file",id:"or-in-setup-test-environment-file",level:4},{value:"Or in individual test files",id:"or-in-individual-test-files",level:4},{value:"Display component HTML (ng-snapshot)",id:"display-component-html-ng-snapshot",level:3},{value:"Configuration options",id:"configuration-options",level:4},{value:"In Jest config",id:"in-jest-config-1",level:4},{value:"Or in setup test environment file",id:"or-in-setup-test-environment-file-1",level:4},{value:"Or in individual test files",id:"or-in-individual-test-files-1",level:4},{value:"With options",id:"with-options",level:4},{value:"Remove Angular attributes (no-ng-attributes)",id:"remove-angular-attributes-no-ng-attributes",level:3},{value:"In Jest config",id:"in-jest-config-2",level:4},{value:"Or in setup test environment file",id:"or-in-setup-test-environment-file-2",level:4},{value:"Or in individual test files",id:"or-in-individual-test-files-2",level:4}];function m(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," provides several snapshot serializers to generate clearer and more human-readable snapshot."]}),"\n",(0,s.jsx)(n.admonition,{type:"info",children:(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"BY DEFAULT"}),", the ",(0,s.jsx)(n.a,{href:"/jest-preset-angular/docs/next/getting-started/presets",children:"preset"})," provides all of the snapshot serializers below."]})}),"\n",(0,s.jsx)(n.h2,{id:"snapshot-serializers",children:"Snapshot serializers"}),"\n","\n",(0,s.jsx)(a.Z,{toc:h.slice(2)}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h2,{id:"reference",children:"Reference"}),"\n",(0,s.jsxs)(n.h3,{id:"remove-html-comments-html-comment",children:["Remove html comments (",(0,s.jsx)(n.code,{children:"html-comment"}),")"]}),"\n",(0,s.jsx)(n.p,{children:"Allow removing all the comments in the component HTML in snapshot."}),"\n",(0,s.jsx)(n.p,{children:"Examples:"}),"\n",(0,s.jsx)(n.h4,{id:"in-jest-config",children:"In Jest config"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/html-comment'],\n //[...]\n};\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/html-comment'],\n //[...]\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-setup-test-environment-file",children:"Or in setup test environment file"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="setup-jest.js"',children:"const removeHtmlCommentsSerializer = require('jest-preset-angular/build/serializers/html-comment');\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import removeHtmlCommentsSerializer from 'jest-preset-angular/build/serializers/html-comment';\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n"})})]})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-individual-test-files",children:"Or in individual test files"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const removeHtmlCommentsSerializer = require('jest-preset-angular/build/serializers/html-comment');\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import removeHtmlCommentsSerializer from 'jest-preset-angular/build/serializers/html-comment';\n\nexpect.addSnapshotSerializer(removeHtmlCommentsSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})})]}),"\n",(0,s.jsxs)(n.h3,{id:"display-component-html-ng-snapshot",children:["Display component HTML (",(0,s.jsx)(n.code,{children:"ng-snapshot"}),")"]}),"\n",(0,s.jsx)(n.p,{children:"Allow displaying component HTML with data in snapshot."}),"\n",(0,s.jsx)(n.h4,{id:"configuration-options",children:"Configuration options"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"type NgSnapshotOptions = {\n omitAllCompAttrs?: boolean;\n};\n"})}),"\n",(0,s.jsx)(n.p,{children:"Configure snapshot behavior"}),"\n",(0,s.jsx)(n.p,{children:"Examples:"}),"\n",(0,s.jsx)(n.h4,{id:"in-jest-config-1",children:"In Jest config"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/ng-snapshot'],\n //[...]\n};\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/ng-snapshot'],\n //[...]\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-setup-test-environment-file-1",children:"Or in setup test environment file"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="setup-jest.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n"})})]})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-individual-test-files-1",children:"Or in individual test files"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer(componentSnapshotSerializer);\n\nit('should work', () => {\n //[...]\n});\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"with-options",children:"With options"}),"\n",(0,s.jsxs)(n.admonition,{title:"Effective priority",type:"info",children:[(0,s.jsx)(n.p,{children:"The configured serializers will have affect in this order:"}),(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"Jest config"})," -> ",(0,s.jsx)(n.code,{children:"setup files"})," -> ",(0,s.jsx)(n.code,{children:"test files"})]}),(0,s.jsx)(n.p,{children:"The later the higher priority. This means that with the same serializer, the later one will override the configuration\nof the previous one in the chain."})]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"In setup files:"}),"\n"]}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="setup-jest.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="setup-jest.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n"})})]})]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"or in individual test files:"}),"\n"]}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const componentSnapshotSerializer = require('jest-preset-angular/build/serializers/ng-snapshot');\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import componentSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';\n\nexpect.addSnapshotSerializer({\n print: (val, print, indent, options, colors) =>\n componentSnapshotSerializer.print(\n val,\n print,\n indent,\n {\n ...options,\n omitAllCompAttrs: true,\n },\n colors,\n ),\n test: componentSnapshotSerializer.test,\n});\n\nit('should work', () => {\n //[...]\n});\n"})})})]}),"\n",(0,s.jsxs)(n.h3,{id:"remove-angular-attributes-no-ng-attributes",children:["Remove Angular attributes (",(0,s.jsx)(n.code,{children:"no-ng-attributes"}),")"]}),"\n",(0,s.jsxs)(n.p,{children:["Allow removing attributes generated by Angular fixture, like ",(0,s.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,s.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,s.jsx)(n.code,{children:"_ngcontent-c*"})," etc., from component snapshot"]}),"\n",(0,s.jsx)(n.p,{children:"Examples:"}),"\n",(0,s.jsx)(n.h4,{id:"in-jest-config-2",children:"In Jest config"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/no-ng-attributes'],\n //[...]\n};\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n snapshotSerializers: ['jest-preset-angular/build/serializers/no-ng-attributes'],\n //[...]\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-setup-test-environment-file-2",children:"Or in setup test environment file"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsxs)(l.Z,{value:"js",label:"JavaScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab={"span":2} title="jest.config.js"',children:"/** @type {import('jest').Config} */\nmodule.exports = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.js'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'title="setup-jest.js"',children:"const removeNgAttributes = require('jest-preset-angular/build/serializers/no-ng-attributes');\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n"})})]}),(0,s.jsxs)(l.Z,{value:"ts",label:"TypeScript",children:[(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab={"span":2} title="jest.config.ts"',children:"import type { Config } from 'jest';\n\nconst jestConfig: Config = {\n //[...]\n setupFilesAfterEnv: ['./setup-jest.ts'],\n //[...]\n};\n"})}),(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'title="setup-jest.ts"',children:"import removeNgAttributes from 'jest-preset-angular/build/serializers/no-ng-attributes';\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n"})})]})]}),"\n",(0,s.jsx)(n.h4,{id:"or-in-individual-test-files-2",children:"Or in individual test files"}),"\n",(0,s.jsxs)(r.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",metastring:'tab title="foo.component.spec.js"',children:"const removeNgAttributes = require('jest-preset-angular/build/serializers/no-ng-attributes');\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n\nit('should work', () => {\n //[...]\n});\n"})})}),(0,s.jsx)(l.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",metastring:'tab title="foo.component.spec.ts"',children:"import removeNgAttributes from 'jest-preset-angular/build/serializers/no-ng-attributes';\n\nexpect.addSnapshotSerializer(removeNgAttributes);\n\nit('should work', () => {\n //[...]\n});\n"})})})]})]})}function j(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(m,{...e})}):m(e)}}}]); \ No newline at end of file diff --git a/assets/js/68e3f1d5.74473cad.js b/assets/js/68e3f1d5.74473cad.js new file mode 100644 index 0000000000..400dd65358 --- /dev/null +++ b/assets/js/68e3f1d5.74473cad.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1803],{3524:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>i,default:()=>g,frontMatter:()=>l,metadata:()=>u,toc:()=>d});var t=s(5893),r=s(1151),a=s(3992),o=s(425);const l={id:"angular-13+",title:"Angular >=13"},i=void 0,u={id:"guides/angular-13+",title:"Angular >=13",description:"Angular 13 introduces ESM package format for Angular packages. jest-preset-angular",source:"@site/versioned_docs/version-12.0/guides/angular-13+.md",sourceDirName:"guides",slug:"/guides/angular-13+",permalink:"/jest-preset-angular/docs/12.0/guides/angular-13+",draft:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,t.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,t.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,t.jsx)(n.strong,{children:"Angular 13"})," using ",(0,t.jsx)(n.a,{href:"/jest-preset-angular/docs/12.0/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,t.jsx)(n.admonition,{type:"important",children:(0,t.jsxs)(n.p,{children:["With Jest 28 and ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,t.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,t.jsx)(n.code,{children:"ng-jest-resolver"})," is no longer required to have in Jest config. This\nresolver is also excluded from our default and default ESM presets."]})}),"\n",(0,t.jsxs)(n.p,{children:["Starting from ",(0,t.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,t.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,t.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,t.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"transform"})," is updated to include ",(0,t.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,t.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Upgrade the project to ",(0,t.jsx)(n.strong,{children:"Angular 13"})," following ",(0,t.jsx)(n.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,t.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,t.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,t.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples/example-app-v13",children:"example-app-v13"})," for an example with tests that run using ESM, and using ESM + isolated."]}),"\n",(0,t.jsx)(n.p,{children:"Your Jest config should be changed to something like:"}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst { pathsToModuleNameMapper } = require('ts-jest/utils');\nconst { paths } = require('./tsconfig.json').compilerOptions;\n\n/** @type {import('ts-jest/dist/types').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,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\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,t.jsxs)(n.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,t.jsx)(n.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,t.jsx)(n.p,{children:"or for ESM mode"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,t.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,t.jsxs)(n.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,t.jsx)(n.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix this issue, one needs to add ",(0,t.jsx)(n.code,{children:"mjs"})," to ",(0,t.jsx)(n.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Besides, the changes in Angular packages themselves, ",(0,t.jsx)(n.strong,{children:"Angular"})," libraries which are built with ",(0,t.jsx)(n.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,t.jsx)(n.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,t.jsx)(n.strong,{children:"CommonJS"})," mode."]}),"\n",(0,t.jsxs)(n.p,{children:["To fix this issue, one should modify ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},425:(e,n,s)=>{s.d(n,{Z:()=>o});s(7294);var t=s(512);const r={tabItem:"tabItem_Ymn6"};var a=s(5893);function o(e){let{children:n,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,t.Z)(r.tabItem,o),hidden:s,children:n})}},3992:(e,n,s)=>{s.d(n,{Z:()=>y});var t=s(7294),r=s(512),a=s(2957),o=s(6550),l=s(1270),i=s(5238),u=s(3609),c=s(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(5893);function b(e){let{className:n,block:s,selectedValue:t,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":t===n}),children:s??n},n)}))})}function v(e){let{lazy:n,children:s,selectedValue:r}=e;const a=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){const e=a.find((e=>e.props.value===r));return e?(0,t.cloneElement)(e,{className:"margin-top--md"}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:a.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==r})))})}function w(e){const n=m(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function y(e){const n=(0,j.Z)();return(0,x.jsx)(w,{...e,children:d(e.children)},String(n))}},1151:(e,n,s)=>{s.d(n,{Z:()=>l,a:()=>o});var t=s(7294);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/68e3f1d5.a4519009.js b/assets/js/68e3f1d5.a4519009.js deleted file mode 100644 index 81f79fb047..0000000000 --- a/assets/js/68e3f1d5.a4519009.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1803],{3524:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>i,default:()=>g,frontMatter:()=>l,metadata:()=>u,toc:()=>d});var t=s(5893),r=s(1151),a=s(3992),o=s(425);const l={id:"angular-13+",title:"Angular >=13"},i=void 0,u={id:"guides/angular-13+",title:"Angular >=13",description:"Angular 13 introduces ESM package format for Angular packages. jest-preset-angular",source:"@site/versioned_docs/version-12.0/guides/angular-13+.md",sourceDirName:"guides",slug:"/guides/angular-13+",permalink:"/jest-preset-angular/docs/12.0/guides/angular-13+",draft:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,t.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,t.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,t.jsx)(n.strong,{children:"Angular 13"})," using ",(0,t.jsx)(n.a,{href:"/jest-preset-angular/docs/12.0/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,t.jsx)(n.admonition,{type:"important",children:(0,t.jsxs)(n.p,{children:["With Jest 28 and ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,t.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,t.jsx)(n.code,{children:"ng-jest-resolver"})," is no longer required to have in Jest config. This\nresolver is also excluded from our default and default ESM presets."]})}),"\n",(0,t.jsxs)(n.p,{children:["Starting from ",(0,t.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,t.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,t.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,t.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"transform"})," is updated to include ",(0,t.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,t.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Upgrade the project to ",(0,t.jsx)(n.strong,{children:"Angular 13"})," following ",(0,t.jsx)(n.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,t.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,t.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,t.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples/example-app-v13",children:"example-app-v13"})," for an example with tests that run using ESM, and using ESM + isolated."]}),"\n",(0,t.jsx)(n.p,{children:"Your Jest config should be changed to something like:"}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst { pathsToModuleNameMapper } = require('ts-jest/utils');\nconst { paths } = require('./tsconfig.json').compilerOptions;\n\n/** @type {import('ts-jest/dist/types').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,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\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,t.jsxs)(n.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,t.jsx)(n.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,t.jsx)(n.p,{children:"or for ESM mode"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,t.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,t.jsxs)(n.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,t.jsx)(n.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix this issue, one needs to add ",(0,t.jsx)(n.code,{children:"mjs"})," to ",(0,t.jsx)(n.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Besides, the changes in Angular packages themselves, ",(0,t.jsx)(n.strong,{children:"Angular"})," libraries which are built with ",(0,t.jsx)(n.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,t.jsx)(n.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,t.jsx)(n.strong,{children:"CommonJS"})," mode."]}),"\n",(0,t.jsxs)(n.p,{children:["To fix this issue, one should modify ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})})]})]})}function g(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},425:(e,n,s)=>{s.d(n,{Z:()=>o});s(7294);var t=s(512);const r={tabItem:"tabItem_Ymn6"};var a=s(5893);function o(e){let{children:n,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,t.Z)(r.tabItem,o),hidden:s,children:n})}},3992:(e,n,s)=>{s.d(n,{Z:()=>y});var t=s(7294),r=s(512),a=s(2957),o=s(6550),l=s(1270),i=s(5238),u=s(3609),c=s(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(5893);function b(e){let{className:n,block:s,selectedValue:t,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":t===n}),children:s??n},n)}))})}function v(e){let{lazy:n,children:s,selectedValue:r}=e;const a=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){const e=a.find((e=>e.props.value===r));return e?(0,t.cloneElement)(e,{className:"margin-top--md"}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:a.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==r})))})}function w(e){const n=m(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function y(e){const n=(0,j.Z)();return(0,x.jsx)(w,{...e,children:d(e.children)},String(n))}},1151:(e,n,s)=>{s.d(n,{Z:()=>l,a:()=>o});var t=s(7294);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.9d8c0403.js b/assets/js/6916680a.9d8c0403.js deleted file mode 100644 index fa919fc313..0000000000 --- a/assets/js/6916680a.9d8c0403.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6997],{8288:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"installation",title:"Installation"},i=void 0,c={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsxs)(t.p,{children:["You can install ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,s.jsxs)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(l.Z,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,s.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Angular doesn't support native ",(0,s.jsx)(t.code,{children:"async/await"})," in testing with ",(0,s.jsx)(t.code,{children:"target"})," higher than ",(0,s.jsx)(t.code,{children:"ES2016"}),", see ",(0,s.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,s.jsxs)(t.p,{children:["In your project root, create ",(0,s.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,s.jsx)(t.p,{children:"Add 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)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["Adjust your ",(0,s.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:["Adjust ",(0,s.jsx)(t.code,{children:"scripts"})," part your ",(0,s.jsx)(t.code,{children:"package.json"})," to use ",(0,s.jsx)(t.code,{children:"jest"})," instead of ",(0,s.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,s.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,s.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,s.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Create a file ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,s.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.admonition,{type:"tip",children:[(0,s.jsxs)(t.p,{children:["An example for ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,s.jsx)(t.pre,{children:(0,s.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,s.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,s.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,s.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,s.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,s.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,s.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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/6916680a.ba9c2a7c.js b/assets/js/6916680a.ba9c2a7c.js new file mode 100644 index 0000000000..ffb4980de8 --- /dev/null +++ b/assets/js/6916680a.ba9c2a7c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6997],{8288:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"installation",title:"Installation"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsxs)(t.p,{children:["You can install ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,s.jsxs)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(l.Z,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,s.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Angular doesn't support native ",(0,s.jsx)(t.code,{children:"async/await"})," in testing with ",(0,s.jsx)(t.code,{children:"target"})," higher than ",(0,s.jsx)(t.code,{children:"ES2016"}),", see ",(0,s.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,s.jsxs)(t.p,{children:["In your project root, create ",(0,s.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,s.jsx)(t.p,{children:"Add 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)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["Adjust your ",(0,s.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:["Adjust ",(0,s.jsx)(t.code,{children:"scripts"})," part your ",(0,s.jsx)(t.code,{children:"package.json"})," to use ",(0,s.jsx)(t.code,{children:"jest"})," instead of ",(0,s.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,s.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,s.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,s.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Create a file ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,s.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.admonition,{type:"tip",children:[(0,s.jsxs)(t.p,{children:["An example for ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,s.jsx)(t.pre,{children:(0,s.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,s.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,s.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,s.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,s.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,s.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,s.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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.1f805b1b.js b/assets/js/6a6dcee7.1f805b1b.js new file mode 100644 index 0000000000..cf51dd0cf2 --- /dev/null +++ b/assets/js/6a6dcee7.1f805b1b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9195],{544:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>a,toc:()=>d});var s=n(5893),r=n(1151);const i={id:"test-environment",title:"Test environment"},o=void 0,a={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/getting-started/test-environment",draft:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["If you look at ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.js",children:(0,s.jsx)(t.code,{children:"setup-jest.js"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,s.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,s.jsxs)(t.p,{children:["While ",(0,s.jsx)(t.code,{children:"setup-jest.js"})," above is for running Jest with ",(0,s.jsx)(t.strong,{children:"CommonJS"})," mode, we also provide ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.mjs",children:(0,s.jsx)(t.code,{children:"setup-jest.mjs"})}),"\nto run with ",(0,s.jsx)(t.strong,{children:"ESM"})," mode."]}),"\n",(0,s.jsx)(t.h3,{id:"configure-test-environment",children:"Configure test environment"}),"\n",(0,s.jsxs)(t.p,{children:["When creating Angular test environment with ",(0,s.jsx)(t.code,{children:"TestBed"}),", it is possible to specify the ",(0,s.jsx)(t.code,{children:"testEnvironmentOptions"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," in the Jest setup file.\nFor example:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," will look at ",(0,s.jsx)(t.code,{children:"globalThis.ngJest"})," and pass the correct ",(0,s.jsx)(t.a,{href:"https://angular.io/api/core/testing/TestEnvironmentOptions",children:(0,s.jsx)(t.code,{children:"TestEnvironmentOptions"})})," object to ",(0,s.jsx)(t.code,{children:"TestBed"}),"."]})]})}function u(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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/6a6dcee7.601efe27.js b/assets/js/6a6dcee7.601efe27.js deleted file mode 100644 index 1d043fc00f..0000000000 --- a/assets/js/6a6dcee7.601efe27.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9195],{544:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>a,toc:()=>d});var s=n(5893),r=n(1151);const i={id:"test-environment",title:"Test environment"},o=void 0,a={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/getting-started/test-environment",draft:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["If you look at ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.js",children:(0,s.jsx)(t.code,{children:"setup-jest.js"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,s.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,s.jsxs)(t.p,{children:["While ",(0,s.jsx)(t.code,{children:"setup-jest.js"})," above is for running Jest with ",(0,s.jsx)(t.strong,{children:"CommonJS"})," mode, we also provide ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.mjs",children:(0,s.jsx)(t.code,{children:"setup-jest.mjs"})}),"\nto run with ",(0,s.jsx)(t.strong,{children:"ESM"})," mode."]}),"\n",(0,s.jsx)(t.h3,{id:"configure-test-environment",children:"Configure test environment"}),"\n",(0,s.jsxs)(t.p,{children:["When creating Angular test environment with ",(0,s.jsx)(t.code,{children:"TestBed"}),", it is possible to specify the ",(0,s.jsx)(t.code,{children:"testEnvironmentOptions"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," in the Jest setup file.\nFor example:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," will look at ",(0,s.jsx)(t.code,{children:"globalThis.ngJest"})," and pass the correct ",(0,s.jsx)(t.a,{href:"https://angular.io/api/core/testing/TestEnvironmentOptions",children:(0,s.jsx)(t.code,{children:"TestEnvironmentOptions"})})," object to ",(0,s.jsx)(t.code,{children:"TestBed"}),"."]})]})}function u(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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.a29e31cc.js b/assets/js/6d1ddfa7.a29e31cc.js deleted file mode 100644 index 7470bd0a06..0000000000 --- a/assets/js/6d1ddfa7.a29e31cc.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1398],{7329:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>d,frontMatter:()=>n,metadata:()=>a,toc:()=>p});var o=s(5893),i=s(1151);const n={id:"absolute-imports",title:"Absolute Imports"},r=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings 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."]}),"\n",(0,o.jsxs)(t.p,{children:["More information see ",(0,o.jsx)(t.code,{children:"ts-jest"})," ",(0,o.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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>a,a:()=>r});var o=s(7294);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/6d1ddfa7.e3188fb9.js b/assets/js/6d1ddfa7.e3188fb9.js new file mode 100644 index 0000000000..ef7678d7dd --- /dev/null +++ b/assets/js/6d1ddfa7.e3188fb9.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1398],{7329:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>d,frontMatter:()=>n,metadata:()=>a,toc:()=>p});var o=s(5893),i=s(1151);const n={id:"absolute-imports",title:"Absolute Imports"},r=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings 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."]}),"\n",(0,o.jsxs)(t.p,{children:["More information see ",(0,o.jsx)(t.code,{children:"ts-jest"})," ",(0,o.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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>a,a:()=>r});var o=s(7294);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.374c74e9.js b/assets/js/6f809103.374c74e9.js deleted file mode 100644 index 8a4e7fde45..0000000000 --- a/assets/js/6f809103.374c74e9.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6e3],{2034:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>u,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"using-with-babel",title:"Using with Babel"},i=void 0,u={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["If you wish to use ",(0,s.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,s.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Install ",(0,s.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,s.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:[(0,s.jsxs)(t.em,{children:["Note: do not use a ",(0,s.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,s.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,s.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,s.jsxs)(t.ol,{start:"3",children:["\n",(0,s.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,s.jsxs)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})}),(0,s.jsx)(l.Z,{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 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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(5893);function v(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.Z)("tabs-container",g.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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/6f809103.888a5ef6.js b/assets/js/6f809103.888a5ef6.js new file mode 100644 index 0000000000..e2cc97d078 --- /dev/null +++ b/assets/js/6f809103.888a5ef6.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6e3],{2034:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>u,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"using-with-babel",title:"Using with Babel"},i=void 0,u={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:!1,unlisted:!1,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:1722455661e3,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"}},c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["If you wish to use ",(0,s.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,s.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Install ",(0,s.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,s.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:[(0,s.jsxs)(t.em,{children:["Note: do not use a ",(0,s.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,s.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,s.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,s.jsxs)(t.ol,{start:"3",children:["\n",(0,s.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,s.jsxs)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})}),(0,s.jsx)(l.Z,{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 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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(5893);function v(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.Z)("tabs-container",g.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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.3516e418.js b/assets/js/710ad8a9.3516e418.js deleted file mode 100644 index c7fff7fdb8..0000000000 --- a/assets/js/710ad8a9.3516e418.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1131],{2038:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),o=n(3992),a=n(425);const i={id:"jsdom-version",title:"Configure other JSDOM versions"},l=void 0,u={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},c={},d=[];function m(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,r.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,r.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,r.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,r.jsxs)(o.Z,{groupId:"code-examples",children:[(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,r.jsx)(t.code,{children:"localStorage"})," or ",(0,r.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,r.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Reference: ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,r.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 p(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var o=n(5893);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,a),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),o=n(2957),a=n(6550),i=n(1270),l=n(5238),u=n(3609),c=n(1027);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 m(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.l)(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,a.k6)(),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._X)(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=m(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(!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: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.Nk)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return p({value:e,tabValues:o})?e:null})();(0,i.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!p({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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var r=n(7294);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/710ad8a9.6b52b9a6.js b/assets/js/710ad8a9.6b52b9a6.js new file mode 100644 index 0000000000..f0d1d1d8a3 --- /dev/null +++ b/assets/js/710ad8a9.6b52b9a6.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1131],{2038:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),o=n(3992),a=n(425);const i={id:"jsdom-version",title:"Configure other JSDOM versions"},l=void 0,u={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:!1,unlisted:!1,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:1722455661e3,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"}},c={},d=[];function m(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,r.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,r.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,r.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,r.jsxs)(o.Z,{groupId:"code-examples",children:[(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,r.jsx)(t.code,{children:"localStorage"})," or ",(0,r.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,r.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Reference: ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,r.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 p(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var o=n(5893);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,a),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),o=n(2957),a=n(6550),i=n(1270),l=n(5238),u=n(3609),c=n(1027);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 m(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.l)(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,a.k6)(),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._X)(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=m(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(!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: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.Nk)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return p({value:e,tabValues:o})?e:null})();(0,i.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!p({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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var r=n(7294);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.1dd3ad0a.js b/assets/js/72f058d3.1dd3ad0a.js new file mode 100644 index 0000000000..157a6f65ae --- /dev/null +++ b/assets/js/72f058d3.1dd3ad0a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1688],{4073:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var r=s(5893),t=s(1151);const o={id:"troubleshooting",title:"Troubleshooting"},i=void 0,a={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:!1,unlisted:!1,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:1722455661e3,frontMatter:{id:"troubleshooting",title:"Troubleshooting"},sidebar:"docs",previous:{title:"Absolute Imports",permalink:"/jest-preset-angular/docs/8.x/guides/absolute-imports"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"Object.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.\":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.jsx)(n.pre,{children:(0,r.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,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-js",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-js",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,{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.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\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,{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,{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-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,r.jsx)(n.pre,{children:(0,r.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,t.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>a,a:()=>i});var r=s(7294);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/72f058d3.ad6d06d0.js b/assets/js/72f058d3.ad6d06d0.js deleted file mode 100644 index 61744a73c4..0000000000 --- a/assets/js/72f058d3.ad6d06d0.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1688],{4073:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var r=s(5893),t=s(1151);const o={id:"troubleshooting",title:"Troubleshooting"},i=void 0,a={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/guides/troubleshooting.md",tags:[],version:"8.x",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,frontMatter:{id:"troubleshooting",title:"Troubleshooting"},sidebar:"docs",previous:{title:"Absolute Imports",permalink:"/jest-preset-angular/docs/8.x/guides/absolute-imports"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"Object.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.\":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.jsx)(n.pre,{children:(0,r.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,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-js",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-js",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,{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.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\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,{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,{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-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,r.jsx)(n.pre,{children:(0,r.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,t.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>a,a:()=>i});var r=s(7294);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.2b574665.js b/assets/js/732c3ce9.2b574665.js deleted file mode 100644 index 0bd6d8d21a..0000000000 --- a/assets/js/732c3ce9.2b574665.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[862],{4633:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>a,toc:()=>d});var s=n(5893),r=n(1151);const i={id:"test-environment",title:"Test environment"},o=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["If you look at ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.js",children:(0,s.jsx)(t.code,{children:"setup-jest.js"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,s.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,s.jsxs)(t.p,{children:["While ",(0,s.jsx)(t.code,{children:"setup-jest.js"})," above is for running Jest with ",(0,s.jsx)(t.strong,{children:"CommonJS"})," mode, we also provide ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.mjs",children:(0,s.jsx)(t.code,{children:"setup-jest.mjs"})}),"\nto run with ",(0,s.jsx)(t.strong,{children:"ESM"})," mode."]}),"\n",(0,s.jsx)(t.h3,{id:"configure-test-environment",children:"Configure test environment"}),"\n",(0,s.jsxs)(t.p,{children:["When creating Angular test environment with ",(0,s.jsx)(t.code,{children:"TestBed"}),", it is possible to specify the ",(0,s.jsx)(t.code,{children:"testEnvironmentOptions"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," in the Jest setup file.\nFor example:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," will look at ",(0,s.jsx)(t.code,{children:"globalThis.ngJest"})," and pass the correct ",(0,s.jsx)(t.a,{href:"https://angular.io/api/core/testing/TestEnvironmentOptions",children:(0,s.jsx)(t.code,{children:"TestEnvironmentOptions"})})," object to ",(0,s.jsx)(t.code,{children:"TestBed"}),"."]})]})}function u(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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/732c3ce9.3a72dcf2.js b/assets/js/732c3ce9.3a72dcf2.js new file mode 100644 index 0000000000..feb0b85ac6 --- /dev/null +++ b/assets/js/732c3ce9.3a72dcf2.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[862],{4633:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>a,toc:()=>d});var s=n(5893),r=n(1151);const i={id:"test-environment",title:"Test environment"},o=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["If you look at ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.js",children:(0,s.jsx)(t.code,{children:"setup-jest.js"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,s.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,s.jsxs)(t.p,{children:["While ",(0,s.jsx)(t.code,{children:"setup-jest.js"})," above is for running Jest with ",(0,s.jsx)(t.strong,{children:"CommonJS"})," mode, we also provide ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.mjs",children:(0,s.jsx)(t.code,{children:"setup-jest.mjs"})}),"\nto run with ",(0,s.jsx)(t.strong,{children:"ESM"})," mode."]}),"\n",(0,s.jsx)(t.h3,{id:"configure-test-environment",children:"Configure test environment"}),"\n",(0,s.jsxs)(t.p,{children:["When creating Angular test environment with ",(0,s.jsx)(t.code,{children:"TestBed"}),", it is possible to specify the ",(0,s.jsx)(t.code,{children:"testEnvironmentOptions"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," in the Jest setup file.\nFor example:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," will look at ",(0,s.jsx)(t.code,{children:"globalThis.ngJest"})," and pass the correct ",(0,s.jsx)(t.a,{href:"https://angular.io/api/core/testing/TestEnvironmentOptions",children:(0,s.jsx)(t.code,{children:"TestEnvironmentOptions"})})," object to ",(0,s.jsx)(t.code,{children:"TestBed"}),"."]})]})}function u(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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.93213615.js b/assets/js/79ea3e73.93213615.js deleted file mode 100644 index 0a1e57bc41..0000000000 --- a/assets/js/79ea3e73.93213615.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4911],{3092:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>d,toc:()=>l});var n=s(5893),r=s(1151);const o={id:"presets",title:"Presets"},i=void 0,d={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Preset name"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,n.jsx)("br",{}),"or ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,n.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,n.jsx)(t.code,{children:"js"}),", ",(0,n.jsx)(t.code,{children:".ts"}),", ",(0,n.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,n.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,n.jsx)("br",{})]}),(0,n.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,n.jsx)(t.code,{children:"js"}),", ",(0,n.jsx)(t.code,{children:".ts"}),", ",(0,n.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,n.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,n.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,n.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,n.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,n.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,n.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,n.jsxs)(t.p,{children:["All presets come with default ",(0,n.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,n.jsx)(t.admonition,{type:"important",children:(0,n.jsxs)(t.p,{children:["If you choose to override ",(0,n.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,n.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,n.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,n.jsxs)(t.p,{children:["Or through TypeScript (if ",(0,n.jsx)(t.code,{children:"ts-node"})," is installed):"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>d,a:()=>i});var n=s(7294);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/79ea3e73.a180d304.js b/assets/js/79ea3e73.a180d304.js new file mode 100644 index 0000000000..af2cdacdb5 --- /dev/null +++ b/assets/js/79ea3e73.a180d304.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4911],{3092:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>d,toc:()=>l});var n=s(5893),r=s(1151);const o={id:"presets",title:"Presets"},i=void 0,d={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Preset name"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,n.jsx)("br",{}),"or ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,n.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,n.jsx)(t.code,{children:"js"}),", ",(0,n.jsx)(t.code,{children:".ts"}),", ",(0,n.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,n.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,n.jsx)("br",{})]}),(0,n.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,n.jsx)(t.code,{children:"js"}),", ",(0,n.jsx)(t.code,{children:".ts"}),", ",(0,n.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,n.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,n.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,n.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,n.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,n.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,n.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,n.jsxs)(t.p,{children:["All presets come with default ",(0,n.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,n.jsx)(t.admonition,{type:"important",children:(0,n.jsxs)(t.p,{children:["If you choose to override ",(0,n.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,n.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,n.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,n.jsxs)(t.p,{children:["Or through TypeScript (if ",(0,n.jsx)(t.code,{children:"ts-node"})," is installed):"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>d,a:()=>i});var n=s(7294);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.02cb9b82.js b/assets/js/7aeeadd4.02cb9b82.js deleted file mode 100644 index d43ca281c4..0000000000 --- a/assets/js/7aeeadd4.02cb9b82.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2125],{1448:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var s=n(5893),r=n(1151);const i={id:"test-environment",title:"Test environment"},o=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},d={},c=[];function l(e){const t={a:"a",code:"code",p:"p",...(0,r.a)(),...e.components};return(0,s.jsxs)(t.p,{children:["If you look at ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/v8.3.2/src/setup-jest.ts",children:(0,s.jsx)(t.code,{children:"setup-jest.ts"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,s.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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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/7aeeadd4.5e54ab84.js b/assets/js/7aeeadd4.5e54ab84.js new file mode 100644 index 0000000000..a3be3cb300 --- /dev/null +++ b/assets/js/7aeeadd4.5e54ab84.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2125],{1448:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>i,default:()=>l,frontMatter:()=>o,metadata:()=>a,toc:()=>c});var s=n(5893),r=n(1151);const o={id:"test-environment",title:"Test environment"},i=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},d={},c=[];function u(e){const t={a:"a",code:"code",p:"p",...(0,r.a)(),...e.components};return(0,s.jsxs)(t.p,{children:["If you look at ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/v8.3.2/src/setup-jest.ts",children:(0,s.jsx)(t.code,{children:"setup-jest.ts"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,s.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 l(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>i});var s=n(7294);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.3a39fce1.js b/assets/js/80b4c599.3a39fce1.js new file mode 100644 index 0000000000..77342e938e --- /dev/null +++ b/assets/js/80b4c599.3a39fce1.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1071],{2368:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>a,toc:()=>d});var s=n(5893),r=n(1151);const i={id:"test-environment",title:"Test environment"},o=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["If you look at ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.js",children:(0,s.jsx)(t.code,{children:"setup-jest.js"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,s.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,s.jsxs)(t.p,{children:["While ",(0,s.jsx)(t.code,{children:"setup-jest.js"})," above is for running Jest with ",(0,s.jsx)(t.strong,{children:"CommonJS"})," mode, we also provide ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.mjs",children:(0,s.jsx)(t.code,{children:"setup-jest.mjs"})}),"\nto run with ",(0,s.jsx)(t.strong,{children:"ESM"})," mode."]}),"\n",(0,s.jsx)(t.h3,{id:"configure-test-environment",children:"Configure test environment"}),"\n",(0,s.jsxs)(t.p,{children:["When creating Angular test environment with ",(0,s.jsx)(t.code,{children:"TestBed"}),", it is possible to specify the ",(0,s.jsx)(t.code,{children:"testEnvironmentOptions"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," in the Jest setup file.\nFor example:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," will look at ",(0,s.jsx)(t.code,{children:"globalThis.ngJest"})," and pass the correct ",(0,s.jsx)(t.a,{href:"https://angular.io/api/core/testing/TestEnvironmentOptions",children:(0,s.jsx)(t.code,{children:"TestEnvironmentOptions"})})," object to ",(0,s.jsx)(t.code,{children:"TestBed"}),"."]})]})}function u(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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/80b4c599.c0748b70.js b/assets/js/80b4c599.c0748b70.js deleted file mode 100644 index 468dd63a0b..0000000000 --- a/assets/js/80b4c599.c0748b70.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1071],{2368:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>a,toc:()=>d});var s=n(5893),r=n(1151);const i={id:"test-environment",title:"Test environment"},o=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["If you look at ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.js",children:(0,s.jsx)(t.code,{children:"setup-jest.js"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,s.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,s.jsxs)(t.p,{children:["While ",(0,s.jsx)(t.code,{children:"setup-jest.js"})," above is for running Jest with ",(0,s.jsx)(t.strong,{children:"CommonJS"})," mode, we also provide ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.mjs",children:(0,s.jsx)(t.code,{children:"setup-jest.mjs"})}),"\nto run with ",(0,s.jsx)(t.strong,{children:"ESM"})," mode."]}),"\n",(0,s.jsx)(t.h3,{id:"configure-test-environment",children:"Configure test environment"}),"\n",(0,s.jsxs)(t.p,{children:["When creating Angular test environment with ",(0,s.jsx)(t.code,{children:"TestBed"}),", it is possible to specify the ",(0,s.jsx)(t.code,{children:"testEnvironmentOptions"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," in the Jest setup file.\nFor example:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," will look at ",(0,s.jsx)(t.code,{children:"globalThis.ngJest"})," and pass the correct ",(0,s.jsx)(t.a,{href:"https://angular.io/api/core/testing/TestEnvironmentOptions",children:(0,s.jsx)(t.code,{children:"TestEnvironmentOptions"})})," object to ",(0,s.jsx)(t.code,{children:"TestBed"}),"."]})]})}function u(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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.3a0bbb86.js b/assets/js/85e14910.3a0bbb86.js new file mode 100644 index 0000000000..9cef9cd9d3 --- /dev/null +++ b/assets/js/85e14910.3a0bbb86.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1253],{4783:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"installation",title:"Installation"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsxs)(t.p,{children:["You can install ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,s.jsxs)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(l.Z,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,s.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Angular doesn't support native ",(0,s.jsx)(t.code,{children:"async/await"})," in testing with ",(0,s.jsx)(t.code,{children:"target"})," higher than ",(0,s.jsx)(t.code,{children:"ES2016"}),", see ",(0,s.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,s.jsxs)(t.p,{children:["In your project root, create ",(0,s.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,s.jsx)(t.p,{children:"Add 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)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["Adjust your ",(0,s.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:["Adjust ",(0,s.jsx)(t.code,{children:"scripts"})," part your ",(0,s.jsx)(t.code,{children:"package.json"})," to use ",(0,s.jsx)(t.code,{children:"jest"})," instead of ",(0,s.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,s.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,s.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,s.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Create a file ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,s.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.admonition,{type:"tip",children:[(0,s.jsxs)(t.p,{children:["An example for ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,s.jsx)(t.pre,{children:(0,s.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,s.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,s.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,s.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,s.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,s.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,s.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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/85e14910.805b7caa.js b/assets/js/85e14910.805b7caa.js deleted file mode 100644 index b248412ee8..0000000000 --- a/assets/js/85e14910.805b7caa.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1253],{4783:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"installation",title:"Installation"},i=void 0,c={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsxs)(t.p,{children:["You can install ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,s.jsxs)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(l.Z,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,s.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Angular doesn't support native ",(0,s.jsx)(t.code,{children:"async/await"})," in testing with ",(0,s.jsx)(t.code,{children:"target"})," higher than ",(0,s.jsx)(t.code,{children:"ES2016"}),", see ",(0,s.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,s.jsxs)(t.p,{children:["In your project root, create ",(0,s.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,s.jsx)(t.p,{children:"Add 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)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["Adjust your ",(0,s.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:["Adjust ",(0,s.jsx)(t.code,{children:"scripts"})," part your ",(0,s.jsx)(t.code,{children:"package.json"})," to use ",(0,s.jsx)(t.code,{children:"jest"})," instead of ",(0,s.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,s.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,s.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,s.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Create a file ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,s.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.admonition,{type:"tip",children:[(0,s.jsxs)(t.p,{children:["An example for ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,s.jsx)(t.pre,{children:(0,s.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,s.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,s.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,s.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,s.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,s.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,s.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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.34b5e39f.js b/assets/js/8665e647.34b5e39f.js deleted file mode 100644 index 3abe2df42c..0000000000 --- a/assets/js/8665e647.34b5e39f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7983],{1307:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"installation",title:"Installation"},i=void 0,c={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsxs)(t.p,{children:["You can install ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,s.jsxs)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(l.Z,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,s.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Angular doesn't support native ",(0,s.jsx)(t.code,{children:"async/await"})," in testing with ",(0,s.jsx)(t.code,{children:"target"})," higher than ",(0,s.jsx)(t.code,{children:"ES2016"}),", see ",(0,s.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,s.jsxs)(t.p,{children:["In your project root, create ",(0,s.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,s.jsx)(t.p,{children:"Add 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)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["Adjust your ",(0,s.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:["Adjust ",(0,s.jsx)(t.code,{children:"scripts"})," part your ",(0,s.jsx)(t.code,{children:"package.json"})," to use ",(0,s.jsx)(t.code,{children:"jest"})," instead of ",(0,s.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,s.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,s.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,s.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Create a file ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,s.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.admonition,{type:"tip",children:[(0,s.jsxs)(t.p,{children:["An example for ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,s.jsx)(t.pre,{children:(0,s.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,s.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,s.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,s.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,s.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,s.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,s.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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.377f19c2.js b/assets/js/8665e647.377f19c2.js new file mode 100644 index 0000000000..fb6f45cf41 --- /dev/null +++ b/assets/js/8665e647.377f19c2.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7983],{1307:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"installation",title:"Installation"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,s.jsxs)(t.p,{children:["You can install ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," and dependencies all at once with one of the following commands."]}),"\n",(0,s.jsxs)(a.Z,{groupId:"npm2yarn",children:[(0,s.jsx)(l.Z,{value:"npm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"npm install -D jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"yarn add --dev jest jest-preset-angular @types/jest\n"})})}),(0,s.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"pnpm add -D jest jest-preset-angular @types/jest\n"})})})]}),"\n",(0,s.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Angular doesn't support native ",(0,s.jsx)(t.code,{children:"async/await"})," in testing with ",(0,s.jsx)(t.code,{children:"target"})," higher than ",(0,s.jsx)(t.code,{children:"ES2016"}),", see ",(0,s.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,s.jsxs)(t.p,{children:["In your project root, create ",(0,s.jsx)(t.code,{children:"setup-jest.ts"})," file with following contents:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,s.jsx)(t.p,{children:"Add 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)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n"})})}),(0,s.jsx)(l.Z,{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 preset: 'jest-preset-angular',\n setupFilesAfterEnv: ['/setup-jest.ts'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,s.jsxs)(t.p,{children:["Adjust your ",(0,s.jsx)(t.code,{children:"tsconfig.spec.json"})," to be:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:["Adjust ",(0,s.jsx)(t.code,{children:"scripts"})," part your ",(0,s.jsx)(t.code,{children:"package.json"})," to use ",(0,s.jsx)(t.code,{children:"jest"})," instead of ",(0,s.jsx)(t.code,{children:"ng"}),", e.g."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-json",children:'{\n "scripts": {\n "test": "jest",\n "test:watch": "jest --watch"\n }\n}\n'})}),"\n",(0,s.jsx)(t.h3,{id:"customizing",children:"Customizing"}),"\n",(0,s.jsx)(t.h4,{id:"global-mocks",children:"Global mocks"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," uses ",(0,s.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,s.jsx)(t.code,{children:"JSDOM"}),". To add global mocks, you can do the following:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["Create a file ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})," to your root project."]}),"\n",(0,s.jsx)(t.li,{children:"Import it in your global setup file:"}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.admonition,{type:"tip",children:[(0,s.jsxs)(t.p,{children:["An example for ",(0,s.jsx)(t.code,{children:"jest-global-mocks.ts"})]}),(0,s.jsx)(t.pre,{children:(0,s.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,s.jsx)(t.h4,{id:"avoid-karma-conflicts",children:"Avoid karma conflicts"}),"\n",(0,s.jsxs)(t.p,{children:["By Angular CLI defaults you'll have a ",(0,s.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,s.jsx)(t.code,{children:"src/karmaTest.ts"})," or hide it from jest by adding ",(0,s.jsx)(t.code,{children:"/src/test.ts"})," to jest ",(0,s.jsx)(t.code,{children:"testPathIgnorePatterns"})," option."]})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=j(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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.0a07d0ae.js b/assets/js/8afa1348.0a07d0ae.js deleted file mode 100644 index 16d57f0962..0000000000 --- a/assets/js/8afa1348.0a07d0ae.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2623],{7597:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>d,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var n=s(5893),o=s(1151);const r={id:"processing",title:"Processing flow"},i=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-10.x/processing.md",tags:[],version:"10.x",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,o.a)(),...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,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>c,a:()=>i});var n=s(7294);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/8afa1348.61d31d47.js b/assets/js/8afa1348.61d31d47.js new file mode 100644 index 0000000000..b702372fb5 --- /dev/null +++ b/assets/js/8afa1348.61d31d47.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2623],{7597:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var o=s(5893),n=s(1151);const r={id:"processing",title:"Processing flow"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},a={},l=[];function d(e){const t={a:"a",code:"code",p:"p",...(0,n.a)(),...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 p(e={}){const{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>c,a:()=>i});var o=s(7294);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.28d9023a.js b/assets/js/8b263414.28d9023a.js new file mode 100644 index 0000000000..fd8aab4f9d --- /dev/null +++ b/assets/js/8b263414.28d9023a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5223],{255:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>c});var s=n(5893),r=n(1151);const i={id:"angular-ivy",title:"Angular Ivy"},a=void 0,o={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:!1,unlisted:!1,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:1722455661e3,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+"}},l={},c=[];function u(e){const t={code:"code",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...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 util script to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest but this script only works via the\nJavaScript version of Jest config"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>a});var s=n(7294);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/8b263414.5f75126d.js b/assets/js/8b263414.5f75126d.js deleted file mode 100644 index dad23ca40d..0000000000 --- a/assets/js/8b263414.5f75126d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5223],{255:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>d,frontMatter:()=>i,metadata:()=>o,toc:()=>c});var s=n(5893),r=n(1151);const i={id:"angular-ivy",title:"Angular Ivy"},a=void 0,o={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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+"}},l={},c=[];function u(e){const t={code:"code",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...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 util script to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest but this script only works via the\nJavaScript version of Jest config"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>a});var s=n(7294);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/9251a350.0457e9af.js b/assets/js/9251a350.0457e9af.js deleted file mode 100644 index 4c14c4a5de..0000000000 --- a/assets/js/9251a350.0457e9af.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5565],{715:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>a,toc:()=>c});var n=t(5893),r=t(1151);const o={id:"esm-support",title:"ESM Support"},i=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.p,{children:["To use ",(0,n.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,n.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,n.jsxs)(s.p,{children:[(0,n.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,n.jsx)(s.code,{children:"ts-jest"})," config option ",(0,n.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,n.jsx)(s.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,n.jsxs)(s.p,{children:["There is also a ",(0,n.jsx)(s.a,{href:"/jest-preset-angular/docs/11.0/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,n.jsx)(s.admonition,{type:"tip",children:(0,n.jsxs)(s.p,{children:["We have ",(0,n.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,n.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,n.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.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,n.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,n.jsxs)(s.admonition,{type:"tip",children:[(0,n.jsxs)(s.p,{children:["Jest will attempt to load ",(0,n.jsx)(s.strong,{children:"ESM"})," files from ",(0,n.jsx)(s.code,{children:"node_modules"})," with default ",(0,n.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,n.jsx)(s.strong,{children:"ESM"})," built files or ",(0,n.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,n.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,n.jsxs)(s.p,{children:["To fix that, one can use ",(0,n.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,n.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,n.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.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.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},1151:(e,s,t)=>{t.d(s,{Z:()=>a,a:()=>i});var n=t(7294);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/9251a350.6953104d.js b/assets/js/9251a350.6953104d.js new file mode 100644 index 0000000000..81b6258398 --- /dev/null +++ b/assets/js/9251a350.6953104d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5565],{715:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>i,default:()=>u,frontMatter:()=>r,metadata:()=>a,toc:()=>c});var n=t(5893),o=t(1151);const r={id:"esm-support",title:"ESM Support"},i=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},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.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.p,{children:["To use ",(0,n.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,n.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,n.jsxs)(s.p,{children:[(0,n.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,n.jsx)(s.code,{children:"ts-jest"})," config option ",(0,n.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,n.jsx)(s.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,n.jsxs)(s.p,{children:["There is also a ",(0,n.jsx)(s.a,{href:"/jest-preset-angular/docs/11.0/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,n.jsx)(s.admonition,{type:"tip",children:(0,n.jsxs)(s.p,{children:["We have ",(0,n.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,n.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,n.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.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,n.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,n.jsxs)(s.admonition,{type:"tip",children:[(0,n.jsxs)(s.p,{children:["Jest will attempt to load ",(0,n.jsx)(s.strong,{children:"ESM"})," files from ",(0,n.jsx)(s.code,{children:"node_modules"})," with default ",(0,n.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,n.jsx)(s.strong,{children:"ESM"})," built files or ",(0,n.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,n.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,n.jsxs)(s.p,{children:["To fix that, one can use ",(0,n.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,n.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,n.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.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,o.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},1151:(e,s,t)=>{t.d(s,{Z:()=>a,a:()=>i});var n=t(7294);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.0aac9dea.js b/assets/js/93f0793d.0aac9dea.js new file mode 100644 index 0000000000..1e7e2ba47c --- /dev/null +++ b/assets/js/93f0793d.0aac9dea.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2151],{5310:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>a,contentTitle:()=>r,default:()=>u,frontMatter:()=>o,metadata:()=>l,toc:()=>c});var t=n(5893),i=n(1151);const o={id:"using-with-babel",title:"Using with Babel"},r=void 0,l={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:!1,unlisted:!1,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:1722455661e3,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"}},a={},c=[];function d(e){const s={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(s.p,{children:["If you wish to use ",(0,t.jsx)(s.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,t.jsxs)(s.ol,{children:["\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:["Install dependencies required by the official Jest documentation for ",(0,t.jsx)(s.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:["Install ",(0,t.jsx)(s.code,{children:"@babel/preset-env"})," and add ",(0,t.jsx)(s.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.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,t.jsxs)(s.p,{children:[(0,t.jsxs)(s.em,{children:["Note: do not use a ",(0,t.jsx)(s.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,t.jsx)(s.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,t.jsx)(s.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,t.jsxs)(s.ol,{start:"3",children:["\n",(0,t.jsx)(s.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.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,i.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>l,a:()=>r});var t=n(7294);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/93f0793d.f0328d93.js b/assets/js/93f0793d.f0328d93.js deleted file mode 100644 index 057f10e5c8..0000000000 --- a/assets/js/93f0793d.f0328d93.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2151],{5310:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>a,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>r,toc:()=>c});var t=s(5893),i=s(1151);const o={id:"using-with-babel",title:"Using with Babel"},l=void 0,r={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},c=[];function d(e){const n={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["If you wish to use ",(0,t.jsx)(n.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Install dependencies required by the official Jest documentation for ",(0,t.jsx)(n.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Install ",(0,t.jsx)(n.code,{children:"@babel/preset-env"})," and add ",(0,t.jsx)(n.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.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,t.jsxs)(n.p,{children:[(0,t.jsxs)(n.em,{children:["Note: do not use a ",(0,t.jsx)(n.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,t.jsx)(n.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,t.jsx)(n.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,t.jsxs)(n.ol,{start:"3",children:["\n",(0,t.jsx)(n.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.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:n}={...(0,i.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>r,a:()=>l});var t=s(7294);const i={},o=t.createContext(i);function l(e){const n=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/9798ce17.2b3c8079.js b/assets/js/9798ce17.2b3c8079.js deleted file mode 100644 index 5f8c677c00..0000000000 --- a/assets/js/9798ce17.2b3c8079.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2798],{5770:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>l,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),o=n(425);const l={id:"presets",title:"Presets"},i=void 0,c={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Preset name"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,s.jsx)("br",{}),"or ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,s.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,s.jsx)(t.code,{children:"js"}),", ",(0,s.jsx)(t.code,{children:".ts"}),", ",(0,s.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,s.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,s.jsx)("br",{})]}),(0,s.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,s.jsx)(t.code,{children:"js"}),", ",(0,s.jsx)(t.code,{children:".ts"}),", ",(0,s.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,s.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,s.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,s.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,s.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,s.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,s.jsxs)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(o.Z,{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 // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n"})})}),(0,s.jsx)(o.Z,{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 // 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,s.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,s.jsxs)(t.p,{children:["All presets come with default ",(0,s.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,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["If you choose to override ",(0,s.jsx)(t.code,{children:"transform"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,s.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,s.jsx)(t.code,{children:"transform"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,s.jsxs)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(o.Z,{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\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,s.jsx)(o.Z,{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';\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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>o});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function o(e){let{children:t,hidden:n,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,o),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),o=n(6550),l=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>l,a:()=>o});var s=n(7294);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/9798ce17.dc059e7d.js b/assets/js/9798ce17.dc059e7d.js new file mode 100644 index 0000000000..eeb93310d1 --- /dev/null +++ b/assets/js/9798ce17.dc059e7d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2798],{5770:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>l,metadata:()=>c,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),o=n(425);const l={id:"presets",title:"Presets"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Preset name"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,s.jsx)("br",{}),"or ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,s.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,s.jsx)(t.code,{children:"js"}),", ",(0,s.jsx)(t.code,{children:".ts"}),", ",(0,s.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,s.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsxs)(t.td,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,s.jsx)("br",{})]}),(0,s.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,s.jsx)(t.code,{children:"js"}),", ",(0,s.jsx)(t.code,{children:".ts"}),", ",(0,s.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,s.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,s.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,s.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,s.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,s.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,s.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,s.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,s.jsxs)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(o.Z,{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 // Replace `jest-preset-angular` with the preset you want to use\n // from the above list\n preset: 'jest-preset-angular',\n};\n"})})}),(0,s.jsx)(o.Z,{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 // 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,s.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,s.jsxs)(t.p,{children:["All presets come with default ",(0,s.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,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["If you choose to override ",(0,s.jsx)(t.code,{children:"transform"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,s.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,s.jsx)(t.code,{children:"transform"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,s.jsxs)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(o.Z,{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\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,s.jsx)(o.Z,{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';\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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>o});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function o(e){let{children:t,hidden:n,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,o),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),o=n(6550),l=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:s,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>l,a:()=>o});var s=n(7294);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.05657c4f.js b/assets/js/9903dc99.05657c4f.js new file mode 100644 index 0000000000..1476241f6e --- /dev/null +++ b/assets/js/9903dc99.05657c4f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3008],{3166:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>d,frontMatter:()=>a,metadata:()=>o,toc:()=>c});var s=n(5893),r=n(1151);const a={id:"angular-ivy",title:"Angular Ivy"},i=void 0,o={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:!1,unlisted:!1,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:1722455661e3,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"}},l={},c=[];function u(e){const t={code:"code",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["Currently, ",(0,s.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,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 util script to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest but this script only works via the\nJavaScript version of Jest config"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>i});var s=n(7294);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/9903dc99.df101224.js b/assets/js/9903dc99.df101224.js deleted file mode 100644 index 51a134476d..0000000000 --- a/assets/js/9903dc99.df101224.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3008],{3166:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>i,default:()=>d,frontMatter:()=>a,metadata:()=>o,toc:()=>c});var s=n(5893),r=n(1151);const a={id:"angular-ivy",title:"Angular Ivy"},i=void 0,o={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},l={},c=[];function u(e){const t={code:"code",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["Currently, ",(0,s.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,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 util script to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest but this script only works via the\nJavaScript version of Jest config"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>i});var s=n(7294);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.dfcc18c1.js b/assets/js/9a2fa73a.dfcc18c1.js deleted file mode 100644 index e336cd39a5..0000000000 --- a/assets/js/9a2fa73a.dfcc18c1.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4166],{6625:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>u,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"using-with-babel",title:"Using with Babel"},i=void 0,u={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["If you wish to use ",(0,s.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,s.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Install ",(0,s.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,s.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:[(0,s.jsxs)(t.em,{children:["Note: do not use a ",(0,s.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,s.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,s.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,s.jsxs)(t.ol,{start:"3",children:["\n",(0,s.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,s.jsxs)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})}),(0,s.jsx)(l.Z,{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 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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(5893);function v(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.Z)("tabs-container",g.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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/9a2fa73a.f2da59ef.js b/assets/js/9a2fa73a.f2da59ef.js new file mode 100644 index 0000000000..77731a1a62 --- /dev/null +++ b/assets/js/9a2fa73a.f2da59ef.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4166],{6625:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>u,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"using-with-babel",title:"Using with Babel"},i=void 0,u={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:!1,unlisted:!1,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:1722455661e3,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"}},c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["If you wish to use ",(0,s.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,s.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Install ",(0,s.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,s.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:[(0,s.jsxs)(t.em,{children:["Note: do not use a ",(0,s.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,s.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,s.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,s.jsxs)(t.ol,{start:"3",children:["\n",(0,s.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,s.jsxs)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})}),(0,s.jsx)(l.Z,{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 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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(5893);function v(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.Z)("tabs-container",g.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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.7e60ce0a.js b/assets/js/9bc9e25c.7e60ce0a.js deleted file mode 100644 index 21bbcab7da..0000000000 --- a/assets/js/9bc9e25c.7e60ce0a.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5781],{1354:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>u,frontMatter:()=>r,metadata:()=>c,toc:()=>d});var s=n(5893),o=n(1151);const r={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},i=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/introduction.md",tags:[],version:"13.0",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.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,s.jsxs)(t.p,{children:["This is a part of the article: ",(0,s.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,s.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,s.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,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>i});var s=n(7294);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/9bc9e25c.cb42e24f.js b/assets/js/9bc9e25c.cb42e24f.js new file mode 100644 index 0000000000..cea649906c --- /dev/null +++ b/assets/js/9bc9e25c.cb42e24f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5781],{1354:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>u,frontMatter:()=>s,metadata:()=>c,toc:()=>d});var o=n(5893),r=n(1151);const s={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.a)(),...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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>i});var o=n(7294);const r={},s=o.createContext(r);function i(e){const t=o.useContext(s);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(r):e.components||r:i(e.components),o.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/9d48492b.c6f85b5e.js b/assets/js/9d48492b.c6f85b5e.js deleted file mode 100644 index c3fe7859ac..0000000000 --- a/assets/js/9d48492b.c6f85b5e.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9104],{4213:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>a,toc:()=>d});var s=n(5893),r=n(1151);const i={id:"test-environment",title:"Test environment"},o=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["If you look at ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.js",children:(0,s.jsx)(t.code,{children:"setup-jest.js"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,s.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,s.jsxs)(t.p,{children:["While ",(0,s.jsx)(t.code,{children:"setup-jest.js"})," above is for running Jest with ",(0,s.jsx)(t.strong,{children:"CommonJS"})," mode, we also provide ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.mjs",children:(0,s.jsx)(t.code,{children:"setup-jest.mjs"})}),"\nto run with ",(0,s.jsx)(t.strong,{children:"ESM"})," mode."]}),"\n",(0,s.jsx)(t.h3,{id:"configure-test-environment",children:"Configure test environment"}),"\n",(0,s.jsxs)(t.p,{children:["When creating Angular test environment with ",(0,s.jsx)(t.code,{children:"TestBed"}),", it is possible to specify the ",(0,s.jsx)(t.code,{children:"testEnvironmentOptions"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," in the Jest setup file.\nFor example:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," will look at ",(0,s.jsx)(t.code,{children:"globalThis.ngJest"})," and pass the correct ",(0,s.jsx)(t.a,{href:"https://angular.io/api/core/testing/TestEnvironmentOptions",children:(0,s.jsx)(t.code,{children:"TestEnvironmentOptions"})})," object to ",(0,s.jsx)(t.code,{children:"TestBed"}),"."]})]})}function u(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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/9d48492b.cf0631f7.js b/assets/js/9d48492b.cf0631f7.js new file mode 100644 index 0000000000..65e4335310 --- /dev/null +++ b/assets/js/9d48492b.cf0631f7.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9104],{4213:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>a,toc:()=>d});var s=n(5893),r=n(1151);const i={id:"test-environment",title:"Test environment"},o=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["If you look at ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.js",children:(0,s.jsx)(t.code,{children:"setup-jest.js"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,s.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,s.jsxs)(t.p,{children:["While ",(0,s.jsx)(t.code,{children:"setup-jest.js"})," above is for running Jest with ",(0,s.jsx)(t.strong,{children:"CommonJS"})," mode, we also provide ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/setup-jest.mjs",children:(0,s.jsx)(t.code,{children:"setup-jest.mjs"})}),"\nto run with ",(0,s.jsx)(t.strong,{children:"ESM"})," mode."]}),"\n",(0,s.jsx)(t.h3,{id:"configure-test-environment",children:"Configure test environment"}),"\n",(0,s.jsxs)(t.p,{children:["When creating Angular test environment with ",(0,s.jsx)(t.code,{children:"TestBed"}),", it is possible to specify the ",(0,s.jsx)(t.code,{children:"testEnvironmentOptions"})," via ",(0,s.jsx)(t.code,{children:"globalThis"})," in the Jest setup file.\nFor example:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"jest-preset-angular"})," will look at ",(0,s.jsx)(t.code,{children:"globalThis.ngJest"})," and pass the correct ",(0,s.jsx)(t.a,{href:"https://angular.io/api/core/testing/TestEnvironmentOptions",children:(0,s.jsx)(t.code,{children:"TestEnvironmentOptions"})})," object to ",(0,s.jsx)(t.code,{children:"TestBed"}),"."]})]})}function u(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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.4b48cfc5.js b/assets/js/9fc1d339.4b48cfc5.js deleted file mode 100644 index 4305bf5378..0000000000 --- a/assets/js/9fc1d339.4b48cfc5.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1917],{8359:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var r=s(5893),t=s(1151);const o={id:"troubleshooting",title:"Troubleshooting"},i=void 0,a={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/guides/troubleshooting.md",tags:[],version:"11.1",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,frontMatter:{id:"troubleshooting",title:"Troubleshooting"},sidebar:"docs",previous:{title:"Absolute Imports",permalink:"/jest-preset-angular/docs/11.1/guides/absolute-imports"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"Object.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.\":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.jsx)(n.pre,{children:(0,r.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,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-js",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-js",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,{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.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\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,{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,{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-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,r.jsx)(n.pre,{children:(0,r.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,t.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>a,a:()=>i});var r=s(7294);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/9fc1d339.984e0400.js b/assets/js/9fc1d339.984e0400.js new file mode 100644 index 0000000000..ba09e15c8d --- /dev/null +++ b/assets/js/9fc1d339.984e0400.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1917],{8359:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var r=s(5893),t=s(1151);const o={id:"troubleshooting",title:"Troubleshooting"},i=void 0,a={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:!1,unlisted:!1,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:1722455661e3,frontMatter:{id:"troubleshooting",title:"Troubleshooting"},sidebar:"docs",previous:{title:"Absolute Imports",permalink:"/jest-preset-angular/docs/11.1/guides/absolute-imports"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"Object.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.\":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.jsx)(n.pre,{children:(0,r.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,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-js",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-js",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,{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.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\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,{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,{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-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,r.jsx)(n.pre,{children:(0,r.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,t.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>a,a:()=>i});var r=s(7294);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/a09c2993.e1ee4086.js b/assets/js/a09c2993.e1ee4086.js new file mode 100644 index 0000000000..50e252a37c --- /dev/null +++ b/assets/js/a09c2993.e1ee4086.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4128],{9273:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>a,contentTitle:()=>i,default:()=>u,frontMatter:()=>s,metadata:()=>c,toc:()=>d});var r=n(5893),o=n(1151);const s={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},i=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/introduction.md",tags:[],version:"current",lastUpdatedBy:"renovate[bot]",lastUpdatedAt:1722455661e3,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"}},a={},d=[];function l(t){const e={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,o.a)(),...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.a)(),...t.components};return e?(0,r.jsx)(e,{...t,children:(0,r.jsx)(l,{...t})}):l(t)}},1151:(t,e,n)=>{n.d(e,{Z:()=>c,a:()=>i});var r=n(7294);const o={},s=r.createContext(o);function i(t){const e=r.useContext(s);return r.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),r.createElement(s.Provider,{value:e},t.children)}}}]); \ No newline at end of file diff --git a/assets/js/a09c2993.ea79816d.js b/assets/js/a09c2993.ea79816d.js deleted file mode 100644 index b21e06af1c..0000000000 --- a/assets/js/a09c2993.ea79816d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4128],{9273:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>a,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var r=n(5893),s=n(1151);const o={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},i=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/introduction.md",tags:[],version:"current",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},d=[];function l(t){const e={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,s.a)(),...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,s.a)(),...t.components};return e?(0,r.jsx)(e,{...t,children:(0,r.jsx)(l,{...t})}):l(t)}},1151:(t,e,n)=>{n.d(e,{Z:()=>c,a:()=>i});var r=n(7294);const s={},o=r.createContext(s);function i(t){const e=r.useContext(o);return r.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(s):t.components||s:i(t.components),r.createElement(o.Provider,{value:e},t.children)}}}]); \ No newline at end of file diff --git a/assets/js/a389e28e.5da829c9.js b/assets/js/a389e28e.5da829c9.js new file mode 100644 index 0000000000..d50f68975f --- /dev/null +++ b/assets/js/a389e28e.5da829c9.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2472],{9993:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var n=s(5893),r=s(1151),a=s(3992),o=s(425);const i={id:"esm-support",title:"ESM Support"},l=void 0,u={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["To use ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,n.jsx)(t.code,{children:"ts-jest"})," config option ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["There is also a ",(0,n.jsx)(t.a,{href:"/jest-preset-angular/docs/12.0/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,n.jsx)(t.admonition,{type:"tip",children:(0,n.jsxs)(t.p,{children:["We have ",(0,n.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,n.jsxs)(t.p,{children:["Besides, there is ",(0,n.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,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,n.jsx)(t.h3,{id:"examples",children:"Examples"}),"\n",(0,n.jsx)(t.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(t.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,n.jsxs)(t.admonition,{type:"tip",children:[(0,n.jsxs)(t.p,{children:["Jest will attempt to load ",(0,n.jsx)(t.strong,{children:"ESM"})," files from ",(0,n.jsx)(t.code,{children:"node_modules"})," with default ",(0,n.jsx)(t.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,n.jsx)(t.strong,{children:"ESM"})," built files or ",(0,n.jsx)(t.strong,{children:"ESM"})," files which are outside ",(0,n.jsx)(t.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,n.jsxs)(t.p,{children:["To fix that, one can use ",(0,n.jsx)(t.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,n.jsx)(t.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},425:(e,t,s)=>{s.d(t,{Z:()=>o});s(7294);var n=s(512);const r={tabItem:"tabItem_Ymn6"};var a=s(5893);function o(e){let{children:t,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.Z)(r.tabItem,o),hidden:s,children:t})}},3992:(e,t,s)=>{s.d(t,{Z:()=>w});var n=s(7294),r=s(512),a=s(2957),o=s(6550),i=s(1270),l=s(5238),u=s(3609),c=s(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(5893);function b(e){let{className:t,block:s,selectedValue:n,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:r}=e;const a=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,n.cloneElement)(e,{className:"margin-top--md"}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=f(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,s)=>{s.d(t,{Z:()=>i,a:()=>o});var n=s(7294);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/a389e28e.8387455c.js b/assets/js/a389e28e.8387455c.js deleted file mode 100644 index 306fcb0353..0000000000 --- a/assets/js/a389e28e.8387455c.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2472],{9993:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var n=s(5893),r=s(1151),a=s(3992),o=s(425);const i={id:"esm-support",title:"ESM Support"},l=void 0,u={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["To use ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,n.jsx)(t.code,{children:"ts-jest"})," config option ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["There is also a ",(0,n.jsx)(t.a,{href:"/jest-preset-angular/docs/12.0/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,n.jsx)(t.admonition,{type:"tip",children:(0,n.jsxs)(t.p,{children:["We have ",(0,n.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,n.jsxs)(t.p,{children:["Besides, there is ",(0,n.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,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,n.jsx)(t.h3,{id:"examples",children:"Examples"}),"\n",(0,n.jsx)(t.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(t.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,n.jsxs)(t.admonition,{type:"tip",children:[(0,n.jsxs)(t.p,{children:["Jest will attempt to load ",(0,n.jsx)(t.strong,{children:"ESM"})," files from ",(0,n.jsx)(t.code,{children:"node_modules"})," with default ",(0,n.jsx)(t.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,n.jsx)(t.strong,{children:"ESM"})," built files or ",(0,n.jsx)(t.strong,{children:"ESM"})," files which are outside ",(0,n.jsx)(t.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,n.jsxs)(t.p,{children:["To fix that, one can use ",(0,n.jsx)(t.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,n.jsx)(t.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},425:(e,t,s)=>{s.d(t,{Z:()=>o});s(7294);var n=s(512);const r={tabItem:"tabItem_Ymn6"};var a=s(5893);function o(e){let{children:t,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.Z)(r.tabItem,o),hidden:s,children:t})}},3992:(e,t,s)=>{s.d(t,{Z:()=>w});var n=s(7294),r=s(512),a=s(2957),o=s(6550),i=s(1270),l=s(5238),u=s(3609),c=s(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(5893);function b(e){let{className:t,block:s,selectedValue:n,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:r}=e;const a=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,n.cloneElement)(e,{className:"margin-top--md"}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=f(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,s)=>{s.d(t,{Z:()=>i,a:()=>o});var n=s(7294);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.1f1ec8ca.js b/assets/js/a74b641e.1f1ec8ca.js deleted file mode 100644 index 7088d68f37..0000000000 --- a/assets/js/a74b641e.1f1ec8ca.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[879],{9504:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>d,frontMatter:()=>n,metadata:()=>a,toc:()=>p});var o=s(5893),i=s(1151);const n={id:"absolute-imports",title:"Absolute Imports"},r=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings 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."]}),"\n",(0,o.jsxs)(t.p,{children:["More information see ",(0,o.jsx)(t.code,{children:"ts-jest"})," ",(0,o.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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>a,a:()=>r});var o=s(7294);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/d2df711a.a69712c6.js b/assets/js/a74b641e.4529949b.js similarity index 53% rename from assets/js/d2df711a.a69712c6.js rename to assets/js/a74b641e.4529949b.js index b0323008c7..16ba6c5221 100644 --- a/assets/js/d2df711a.a69712c6.js +++ b/assets/js/a74b641e.4529949b.js @@ -1 +1 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5400],{3822:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>d,frontMatter:()=>n,metadata:()=>a,toc:()=>p});var o=s(5893),i=s(1151);const n={id:"absolute-imports",title:"Absolute Imports"},r=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings 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."]}),"\n",(0,o.jsxs)(t.p,{children:["More information see ",(0,o.jsx)(t.code,{children:"ts-jest"})," ",(0,o.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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>a,a:()=>r});var o=s(7294);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([[879],{9504:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>d,frontMatter:()=>n,metadata:()=>a,toc:()=>p});var o=s(5893),i=s(1151);const n={id:"absolute-imports",title:"Absolute Imports"},r=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings 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."]}),"\n",(0,o.jsxs)(t.p,{children:["More information see ",(0,o.jsx)(t.code,{children:"ts-jest"})," ",(0,o.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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>a,a:()=>r});var o=s(7294);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/a7d61b99.0afeef28.js b/assets/js/a7d61b99.0afeef28.js new file mode 100644 index 0000000000..df0f79a4f7 --- /dev/null +++ b/assets/js/a7d61b99.0afeef28.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5172],{6149:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),o=n(3992),a=n(425);const i={id:"jsdom-version",title:"Configure other JSDOM versions"},l=void 0,u={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:!1,unlisted:!1,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:1722455661e3,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"}},c={},d=[];function m(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,r.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,r.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,r.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,r.jsxs)(o.Z,{groupId:"code-examples",children:[(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,r.jsx)(t.code,{children:"localStorage"})," or ",(0,r.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,r.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Reference: ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,r.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 p(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var o=n(5893);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,a),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),o=n(2957),a=n(6550),i=n(1270),l=n(5238),u=n(3609),c=n(1027);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 m(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.l)(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,a.k6)(),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._X)(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=m(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(!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: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.Nk)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return p({value:e,tabValues:o})?e:null})();(0,i.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!p({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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var r=n(7294);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/a7d61b99.67003e64.js b/assets/js/a7d61b99.67003e64.js deleted file mode 100644 index cbed3639af..0000000000 --- a/assets/js/a7d61b99.67003e64.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5172],{6149:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),o=n(3992),a=n(425);const i={id:"jsdom-version",title:"Configure other JSDOM versions"},l=void 0,u={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},c={},d=[];function m(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,r.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,r.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,r.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,r.jsxs)(o.Z,{groupId:"code-examples",children:[(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,r.jsx)(t.code,{children:"localStorage"})," or ",(0,r.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,r.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Reference: ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,r.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 p(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var o=n(5893);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,a),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),o=n(2957),a=n(6550),i=n(1270),l=n(5238),u=n(3609),c=n(1027);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 m(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.l)(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,a.k6)(),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._X)(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=m(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(!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: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.Nk)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return p({value:e,tabValues:o})?e:null})();(0,i.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!p({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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var r=n(7294);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.0e9dcc10.js b/assets/js/a89007e0.0e9dcc10.js new file mode 100644 index 0000000000..4292974782 --- /dev/null +++ b/assets/js/a89007e0.0e9dcc10.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2174],{9240:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>g,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var t=s(5893),r=s(1151),a=s(3992),o=s(425);const i={id:"angular-13+",title:"Angular >=13"},l=void 0,u={id:"guides/angular-13+",title:"Angular >=13",description:"Angular 13 introduces ESM package format for Angular packages. jest-preset-angular",source:"@site/versioned_docs/version-14.2/guides/angular-13+.md",sourceDirName:"guides",slug:"/guides/angular-13+",permalink:"/jest-preset-angular/docs/guides/angular-13+",draft:!1,unlisted:!1,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:1722455661e3,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"}},c={},d=[{value:"Migration steps from Angular < 13",id:"migration-steps-from-angular--13",level:2},{value:"Using ES Modules",id:"using-es-modules",level:3},{value:"Potential issues with Angular 13 ESM package format and workaround",id:"potential-issues-with-angular-13-esm-package-format-and-workaround",level:2},{value:"Cannot find modules error when importing any deep paths from Angular ESM format packages",id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",level:3},{value:"Usage with Angular libraries which are built with Angular CLI 13",id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",level:3},{value:"Usage with Ionic 6 or 7",id:"usage-with-ionic-6-or-7",level:3}];function p(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,t.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,t.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,t.jsx)(n.strong,{children:"Angular 13"})," using ",(0,t.jsx)(n.a,{href:"/jest-preset-angular/docs/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,t.jsx)(n.admonition,{type:"important",children:(0,t.jsxs)(n.p,{children:["With Jest 28 and ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,t.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,t.jsx)(n.code,{children:"ng-jest-resolver"})," is no longer required to have in Jest config. This\nresolver is also excluded from our default and default ESM presets."]})}),"\n",(0,t.jsxs)(n.p,{children:["Starting from ",(0,t.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,t.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,t.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,t.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"transform"})," is updated to include ",(0,t.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,t.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Upgrade the project to ",(0,t.jsx)(n.strong,{children:"Angular 13"})," following ",(0,t.jsx)(n.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,t.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,t.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,t.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples/example-app-v13",children:"example-app-v13"})," for an example with tests that run using ESM, and using ESM + isolated."]}),"\n",(0,t.jsxs)(n.p,{children:["Your ",(0,t.jsx)(n.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst { pathsToModuleNameMapper } = require('ts-jest/utils');\nconst { paths } = require('./tsconfig.json').compilerOptions;\n\n/** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */\nmodule.exports = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/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,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\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,t.jsxs)(n.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,t.jsx)(n.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,t.jsx)(n.p,{children:"or for ESM mode"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,t.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,t.jsxs)(n.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,t.jsx)(n.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix this issue, one needs to add ",(0,t.jsx)(n.code,{children:"mjs"})," to ",(0,t.jsx)(n.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Besides, the changes in Angular packages themselves, ",(0,t.jsx)(n.strong,{children:"Angular"})," libraries which are built with ",(0,t.jsx)(n.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,t.jsx)(n.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,t.jsx)(n.strong,{children:"CommonJS"})," mode."]}),"\n",(0,t.jsxs)(n.p,{children:["To fix this issue, one should modify ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.jsx)(n.h3,{id:"usage-with-ionic-6-or-7",children:"Usage with Ionic 6 or 7"}),"\n",(0,t.jsxs)(n.p,{children:["To support Ionic 6 or 7 you will need to modify ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...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,r.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},425:(e,n,s)=>{s.d(n,{Z:()=>o});s(7294);var t=s(512);const r={tabItem:"tabItem_Ymn6"};var a=s(5893);function o(e){let{children:n,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,t.Z)(r.tabItem,o),hidden:s,children:n})}},3992:(e,n,s)=>{s.d(n,{Z:()=>y});var t=s(7294),r=s(512),a=s(2957),o=s(6550),i=s(1270),l=s(5238),u=s(3609),c=s(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(5893);function b(e){let{className:n,block:s,selectedValue:t,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":t===n}),children:s??n},n)}))})}function v(e){let{lazy:n,children:s,selectedValue:r}=e;const a=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){const e=a.find((e=>e.props.value===r));return e?(0,t.cloneElement)(e,{className:"margin-top--md"}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:a.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==r})))})}function w(e){const n=m(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function y(e){const n=(0,j.Z)();return(0,x.jsx)(w,{...e,children:d(e.children)},String(n))}},1151:(e,n,s)=>{s.d(n,{Z:()=>i,a:()=>o});var t=s(7294);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/a89007e0.3dc3bd9f.js b/assets/js/a89007e0.3dc3bd9f.js deleted file mode 100644 index 6b18f71506..0000000000 --- a/assets/js/a89007e0.3dc3bd9f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2174],{9240:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>g,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var t=s(5893),r=s(1151),a=s(3992),o=s(425);const i={id:"angular-13+",title:"Angular >=13"},l=void 0,u={id:"guides/angular-13+",title:"Angular >=13",description:"Angular 13 introduces ESM package format for Angular packages. jest-preset-angular",source:"@site/versioned_docs/version-14.2/guides/angular-13+.md",sourceDirName:"guides",slug:"/guides/angular-13+",permalink:"/jest-preset-angular/docs/guides/angular-13+",draft:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},c={},d=[{value:"Migration steps from Angular < 13",id:"migration-steps-from-angular--13",level:2},{value:"Using ES Modules",id:"using-es-modules",level:3},{value:"Potential issues with Angular 13 ESM package format and workaround",id:"potential-issues-with-angular-13-esm-package-format-and-workaround",level:2},{value:"Cannot find modules error when importing any deep paths from Angular ESM format packages",id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",level:3},{value:"Usage with Angular libraries which are built with Angular CLI 13",id:"usage-with-angular-libraries-which-are-built-with-angular-cli-13",level:3},{value:"Usage with Ionic 6 or 7",id:"usage-with-ionic-6-or-7",level:3}];function p(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,t.jsx)(n.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,t.jsx)(n.code,{children:"CommonJS"})," mode with ",(0,t.jsx)(n.strong,{children:"Angular 13"})," using ",(0,t.jsx)(n.a,{href:"/jest-preset-angular/docs/getting-started/presets",children:"default preset"}),"."]}),"\n",(0,t.jsx)(n.admonition,{type:"important",children:(0,t.jsxs)(n.p,{children:["With Jest 28 and ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," ",(0,t.jsx)(n.strong,{children:"v12.0.0"}),", ",(0,t.jsx)(n.code,{children:"ng-jest-resolver"})," is no longer required to have in Jest config. This\nresolver is also excluded from our default and default ESM presets."]})}),"\n",(0,t.jsxs)(n.p,{children:["Starting from ",(0,t.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,t.jsx)(n.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,t.jsx)(n.strong,{children:"Angular 13"}),":"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"moduleFileExtensions"})," is updated to include ",(0,t.jsx)(n.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,t.jsx)(n.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"transform"})," is updated to include ",(0,t.jsx)(n.code,{children:".mjs"})," extension to transform to ",(0,t.jsx)(n.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Upgrade the project to ",(0,t.jsx)(n.strong,{children:"Angular 13"})," following ",(0,t.jsx)(n.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n preset: 'jest-preset-angular',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.jsx)(n.p,{children:"there are no migration steps required"}),"\n",(0,t.jsx)(n.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,t.jsxs)(n.p,{children:["ES Modules support is new and may encounter issues. See ",(0,t.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/tree/main/examples/example-app-v13",children:"example-app-v13"})," for an example with tests that run using ESM, and using ESM + isolated."]}),"\n",(0,t.jsxs)(n.p,{children:["Your ",(0,t.jsx)(n.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nconst { pathsToModuleNameMapper } = require('ts-jest/utils');\nconst { paths } = require('./tsconfig.json').compilerOptions;\n\n/** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */\nmodule.exports = {\n preset: 'jest-preset-angular/presets/defaults-esm',\n transform: {\n '^.+\\\\.(ts|js|html|svg)$': [\n 'jest-preset-angular',\n {\n tsconfig: '/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,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\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,t.jsxs)(n.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,t.jsx)(n.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,t.jsx)(n.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\n"})}),"\n",(0,t.jsx)(n.p,{children:"or for ESM mode"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,t.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,t.jsxs)(n.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,t.jsx)(n.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To fix this issue, one needs to add ",(0,t.jsx)(n.code,{children:"mjs"})," to ",(0,t.jsx)(n.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.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,t.jsxs)(n.p,{children:["Besides, the changes in Angular packages themselves, ",(0,t.jsx)(n.strong,{children:"Angular"})," libraries which are built with ",(0,t.jsx)(n.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,t.jsx)(n.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,t.jsx)(n.strong,{children:"CommonJS"})," mode."]}),"\n",(0,t.jsxs)(n.p,{children:["To fix this issue, one should modify ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...other options\n transformIgnorePatterns: ['node_modules/(?!.*\\\\.mjs$)'],\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,t.jsx)(n.h3,{id:"usage-with-ionic-6-or-7",children:"Usage with Ionic 6 or 7"}),"\n",(0,t.jsxs)(n.p,{children:["To support Ionic 6 or 7 you will need to modify ",(0,t.jsx)(n.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,t.jsxs)(a.Z,{groupId:"code-examples",children:[(0,t.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:"tab",children:"// jest.config.js\nmodule.exports = {\n // ...other options\n transformIgnorePatterns: ['/node_modules/(?!(@ionic/core|@ionic/angular|@stencil/core|.*\\\\.mjs$))'],\n};\n"})})}),(0,t.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",metastring:"tab",children:"// jest.config.ts\nimport type { Config } from 'jest';\n\nconst jestConfig: Config = {\n // ...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,r.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}},425:(e,n,s)=>{s.d(n,{Z:()=>o});s(7294);var t=s(512);const r={tabItem:"tabItem_Ymn6"};var a=s(5893);function o(e){let{children:n,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,t.Z)(r.tabItem,o),hidden:s,children:n})}},3992:(e,n,s)=>{s.d(n,{Z:()=>y});var t=s(7294),r=s(512),a=s(2957),o=s(6550),i=s(1270),l=s(5238),u=s(3609),c=s(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(5893);function b(e){let{className:n,block:s,selectedValue:t,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,a?.className,{"tabs__item--active":t===n}),children:s??n},n)}))})}function v(e){let{lazy:n,children:s,selectedValue:r}=e;const a=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){const e=a.find((e=>e.props.value===r));return e?(0,t.cloneElement)(e,{className:"margin-top--md"}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:a.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==r})))})}function w(e){const n=m(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function y(e){const n=(0,j.Z)();return(0,x.jsx)(w,{...e,children:d(e.children)},String(n))}},1151:(e,n,s)=>{s.d(n,{Z:()=>i,a:()=>o});var t=s(7294);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.3c96fef7.js b/assets/js/a9789633.3c96fef7.js new file mode 100644 index 0000000000..c000285ce2 --- /dev/null +++ b/assets/js/a9789633.3c96fef7.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1175],{5763:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var r=s(5893),t=s(1151);const o={id:"troubleshooting",title:"Troubleshooting"},i=void 0,a={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:!1,unlisted:!1,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:1722455661e3,frontMatter:{id:"troubleshooting",title:"Troubleshooting"},sidebar:"docs",previous:{title:"Absolute Imports",permalink:"/jest-preset-angular/docs/9.x/guides/absolute-imports"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"Object.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.\":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.jsx)(n.pre,{children:(0,r.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,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-js",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-js",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,{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.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\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,{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,{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-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,r.jsx)(n.pre,{children:(0,r.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,t.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>a,a:()=>i});var r=s(7294);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/a9789633.bbffdcf4.js b/assets/js/a9789633.bbffdcf4.js deleted file mode 100644 index f46f24482b..0000000000 --- a/assets/js/a9789633.bbffdcf4.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1175],{5763:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var r=s(5893),t=s(1151);const o={id:"troubleshooting",title:"Troubleshooting"},i=void 0,a={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/guides/troubleshooting.md",tags:[],version:"9.x",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,frontMatter:{id:"troubleshooting",title:"Troubleshooting"},sidebar:"docs",previous:{title:"Absolute Imports",permalink:"/jest-preset-angular/docs/9.x/guides/absolute-imports"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"Object.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.\":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.jsx)(n.pre,{children:(0,r.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,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-js",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-js",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,{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.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\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,{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,{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-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,r.jsx)(n.pre,{children:(0,r.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,t.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>a,a:()=>i});var r=s(7294);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.32352169.js b/assets/js/aa079c8b.32352169.js deleted file mode 100644 index 138aa5763a..0000000000 --- a/assets/js/aa079c8b.32352169.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3334],{4042:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>c,toc:()=>u});var s=t(5893),r=t(1151),o=t(3992),i=t(425);const a={id:"options",title:"Options"},l=void 0,c={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,s.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,s.jsx)(n.code,{children:"transform"})," of Jest config object\nin the ",(0,s.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,s.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,s.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,s.jsxs)(n.p,{children:["More information about ",(0,s.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,s.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,s.jsxs)(n.admonition,{type:"important",children:[(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,s.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,s.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]}),(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,s.jsx)(n.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,s.jsx)(n.code,{children:".mjs"})," files\nwill be processed by ",(0,s.jsx)(n.code,{children:"esbuild"})," in ",(0,s.jsx)(n.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,s.jsx)(n.code,{children:"esbuild"}),", one can do the following:"]}),(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.admonition,{type:"important",children:(0,s.jsxs)(n.p,{children:["Jest runs with ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,s.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,s.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,s.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["We're using ",(0,s.jsx)(n.code,{children:'"transform"'})," to pass information about configuration to use for code compilation with ",(0,s.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,s.jsx)(n.code,{children:"ts"}),"), HTML (",(0,s.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,s.jsx)(n.code,{children:"js"}),"), JSON (",(0,s.jsx)(n.code,{children:"json"}),") and ESM JavaScript (",(0,s.jsx)(n.code,{children:"mjs"}),") files."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.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,s.jsx)(n.code,{children:"RegExp"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,s.jsx)(n.code,{children:"package.json"})," definitions."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.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,s.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,s.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,s.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,s.jsx)(n.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,s.jsx)(n.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,s.jsx)(n.code,{children:".mjs"})," files which come from ",(0,s.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,s.jsx)(n.code,{children:"TS"}),", ",(0,s.jsx)(n.code,{children:"JS"}),", ",(0,s.jsx)(n.code,{children:"MJS"}),", ",(0,s.jsx)(n.code,{children:"HTML"}),", or ",(0,s.jsx)(n.code,{children:"SVG"})," file through so called ",(0,s.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},425:(e,n,t)=>{t.d(n,{Z:()=>i});t(7294);var s=t(512);const r={tabItem:"tabItem_Ymn6"};var o=t(5893);function i(e){let{children:n,hidden:t,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,i),hidden:t,children:n})}},3992:(e,n,t)=>{t.d(n,{Z:()=>w});var s=t(7294),r=t(512),o=t(2957),i=t(6550),a=t(1270),l=t(5238),c=t(3609),d=t(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=t(5893);function b(e){let{className:n,block:t,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,o?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:r}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):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!==r})))})}function y(e){const n=g(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function w(e){const n=(0,m.Z)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(n))}},1151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>i});var s=t(7294);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/aa079c8b.83baf0f6.js b/assets/js/aa079c8b.83baf0f6.js new file mode 100644 index 0000000000..290dfede43 --- /dev/null +++ b/assets/js/aa079c8b.83baf0f6.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3334],{4042:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>c,toc:()=>u});var s=t(5893),r=t(1151),o=t(3992),i=t(425);const a={id:"options",title:"Options"},l=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,s.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,s.jsx)(n.code,{children:"transform"})," of Jest config object\nin the ",(0,s.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,s.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,s.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,s.jsxs)(n.p,{children:["More information about ",(0,s.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,s.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,s.jsxs)(n.admonition,{type:"important",children:[(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,s.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,s.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]}),(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,s.jsx)(n.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,s.jsx)(n.code,{children:".mjs"})," files\nwill be processed by ",(0,s.jsx)(n.code,{children:"esbuild"})," in ",(0,s.jsx)(n.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,s.jsx)(n.code,{children:"esbuild"}),", one can do the following:"]}),(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.admonition,{type:"important",children:(0,s.jsxs)(n.p,{children:["Jest runs with ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,s.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,s.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,s.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["We're using ",(0,s.jsx)(n.code,{children:'"transform"'})," to pass information about configuration to use for code compilation with ",(0,s.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,s.jsx)(n.code,{children:"ts"}),"), HTML (",(0,s.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,s.jsx)(n.code,{children:"js"}),"), JSON (",(0,s.jsx)(n.code,{children:"json"}),") and ESM JavaScript (",(0,s.jsx)(n.code,{children:"mjs"}),") files."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.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,s.jsx)(n.code,{children:"RegExp"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,s.jsx)(n.code,{children:"package.json"})," definitions."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.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,s.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,s.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,s.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,s.jsx)(n.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,s.jsx)(n.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,s.jsx)(n.code,{children:".mjs"})," files which come from ",(0,s.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,s.jsx)(n.code,{children:"TS"}),", ",(0,s.jsx)(n.code,{children:"JS"}),", ",(0,s.jsx)(n.code,{children:"MJS"}),", ",(0,s.jsx)(n.code,{children:"HTML"}),", or ",(0,s.jsx)(n.code,{children:"SVG"})," file through so called ",(0,s.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},425:(e,n,t)=>{t.d(n,{Z:()=>i});t(7294);var s=t(512);const r={tabItem:"tabItem_Ymn6"};var o=t(5893);function i(e){let{children:n,hidden:t,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,i),hidden:t,children:n})}},3992:(e,n,t)=>{t.d(n,{Z:()=>w});var s=t(7294),r=t(512),o=t(2957),i=t(6550),a=t(1270),l=t(5238),c=t(3609),d=t(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=t(5893);function b(e){let{className:n,block:t,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,o?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:r}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):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!==r})))})}function y(e){const n=g(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function w(e){const n=(0,m.Z)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(n))}},1151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>i});var s=t(7294);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.36c32773.js b/assets/js/aad144a3.36c32773.js deleted file mode 100644 index 0144d1ae89..0000000000 --- a/assets/js/aad144a3.36c32773.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1086],{1728:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>a,toc:()=>d});var r=n(5893),t=n(1151);const i={id:"angular-13+",title:"Angular >=13"},o=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,r.jsx)(s.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,r.jsx)(s.code,{children:"CommonJS"})," mode with ",(0,r.jsx)(s.strong,{children:"Angular 13"})," using ",(0,r.jsx)(s.a,{href:"/jest-preset-angular/docs/11.1/getting-started/presets",children:"default preset"}),".\nJest ESM support with ",(0,r.jsx)(s.strong,{children:"Angular 13"})," is new and may have issues."]}),"\n",(0,r.jsxs)(s.p,{children:["Starting from ",(0,r.jsx)(s.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,r.jsx)(s.strong,{children:"Angular 13"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"ng-jest-resolver"})," is introduced as a custom Jest resolver to resolve ",(0,r.jsx)(s.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"moduleFileExtensions"})," is updated to include ",(0,r.jsx)(s.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,r.jsx)(s.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"transform"})," is updated to include ",(0,r.jsx)(s.code,{children:".mjs"})," extension to transform to ",(0,r.jsx)(s.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["Upgrade the project to ",(0,r.jsx)(s.strong,{children:"Angular 13"})," following ",(0,r.jsx)(s.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsx)(s.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})}),"\n",(0,r.jsx)(s.p,{children:"there are no migration steps required"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["If one is ",(0,r.jsx)(s.strong,{children:"NOT"})," having ",(0,r.jsx)(s.code,{children:"preset: 'jest-preset-angular'"})," in Jest config, the config needs to be updated with new values for\n",(0,r.jsx)(s.code,{children:"resolver"}),", ",(0,r.jsx)(s.code,{children:"transformIgnorePatterns"})," and ",(0,r.jsx)(s.code,{children:"transform"}),":"]}),"\n"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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,r.jsx)(s.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,r.jsxs)(s.p,{children:["ES Modules support is new and may encounter issues. See ",(0,r.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,r.jsxs)(s.p,{children:["Your ",(0,r.jsx)(s.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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,r.jsxs)(s.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,r.jsx)(s.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,r.jsx)(s.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"jest-preset-angular/setup-jest"})," file doesn't work with ESM, because it uses ",(0,r.jsx)(s.code,{children:"require"}),". For now you should skip using this file, and replace the contents of your ",(0,r.jsx)(s.code,{children:"setup-jest.ts"})," with:"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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,r.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,r.jsxs)(s.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,r.jsx)(s.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["Angular 13 ESM package format makes Jest resolution not able to resolve the correct ",(0,r.jsx)(s.code,{children:".mjs"})," files. Even though we introduced\n",(0,r.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,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,r.jsxs)(s.p,{children:["To fix this issue, one needs to add ",(0,r.jsx)(s.code,{children:"mjs"})," to ",(0,r.jsx)(s.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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,r.jsxs)(s.p,{children:["If the issue still ",(0,r.jsx)(s.strong,{children:"persists"}),", you might need to configure ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring",children:"moduleNameMapper"}),"\nor extend the behavior the default ",(0,r.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,r.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,r.jsxs)(s.p,{children:["Besides, the changes in Angular packages themselves, ",(0,r.jsx)(s.strong,{children:"Angular"})," libraries which are built with ",(0,r.jsx)(s.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,r.jsx)(s.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,r.jsx)(s.strong,{children:"CommonJS"})," mode."]}),"\n",(0,r.jsxs)(s.p,{children:["To fix this issue, one should modify ",(0,r.jsx)(s.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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,t.a)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>a,a:()=>o});var r=n(7294);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/aad144a3.b79fd921.js b/assets/js/aad144a3.b79fd921.js new file mode 100644 index 0000000000..909c9a2155 --- /dev/null +++ b/assets/js/aad144a3.b79fd921.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1086],{1728:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>a,toc:()=>d});var r=n(5893),t=n(1151);const i={id:"angular-13+",title:"Angular >=13"},o=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,r.jsx)(s.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,r.jsx)(s.code,{children:"CommonJS"})," mode with ",(0,r.jsx)(s.strong,{children:"Angular 13"})," using ",(0,r.jsx)(s.a,{href:"/jest-preset-angular/docs/11.1/getting-started/presets",children:"default preset"}),".\nJest ESM support with ",(0,r.jsx)(s.strong,{children:"Angular 13"})," is new and may have issues."]}),"\n",(0,r.jsxs)(s.p,{children:["Starting from ",(0,r.jsx)(s.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,r.jsx)(s.strong,{children:"Angular 13"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"ng-jest-resolver"})," is introduced as a custom Jest resolver to resolve ",(0,r.jsx)(s.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"moduleFileExtensions"})," is updated to include ",(0,r.jsx)(s.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,r.jsx)(s.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"transform"})," is updated to include ",(0,r.jsx)(s.code,{children:".mjs"})," extension to transform to ",(0,r.jsx)(s.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["Upgrade the project to ",(0,r.jsx)(s.strong,{children:"Angular 13"})," following ",(0,r.jsx)(s.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsx)(s.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})}),"\n",(0,r.jsx)(s.p,{children:"there are no migration steps required"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["If one is ",(0,r.jsx)(s.strong,{children:"NOT"})," having ",(0,r.jsx)(s.code,{children:"preset: 'jest-preset-angular'"})," in Jest config, the config needs to be updated with new values for\n",(0,r.jsx)(s.code,{children:"resolver"}),", ",(0,r.jsx)(s.code,{children:"transformIgnorePatterns"})," and ",(0,r.jsx)(s.code,{children:"transform"}),":"]}),"\n"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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,r.jsx)(s.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,r.jsxs)(s.p,{children:["ES Modules support is new and may encounter issues. See ",(0,r.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,r.jsxs)(s.p,{children:["Your ",(0,r.jsx)(s.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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,r.jsxs)(s.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,r.jsx)(s.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,r.jsx)(s.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"jest-preset-angular/setup-jest"})," file doesn't work with ESM, because it uses ",(0,r.jsx)(s.code,{children:"require"}),". For now you should skip using this file, and replace the contents of your ",(0,r.jsx)(s.code,{children:"setup-jest.ts"})," with:"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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,r.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,r.jsxs)(s.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,r.jsx)(s.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["Angular 13 ESM package format makes Jest resolution not able to resolve the correct ",(0,r.jsx)(s.code,{children:".mjs"})," files. Even though we introduced\n",(0,r.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,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,r.jsxs)(s.p,{children:["To fix this issue, one needs to add ",(0,r.jsx)(s.code,{children:"mjs"})," to ",(0,r.jsx)(s.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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,r.jsxs)(s.p,{children:["If the issue still ",(0,r.jsx)(s.strong,{children:"persists"}),", you might need to configure ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring",children:"moduleNameMapper"}),"\nor extend the behavior the default ",(0,r.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,r.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,r.jsxs)(s.p,{children:["Besides, the changes in Angular packages themselves, ",(0,r.jsx)(s.strong,{children:"Angular"})," libraries which are built with ",(0,r.jsx)(s.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,r.jsx)(s.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,r.jsx)(s.strong,{children:"CommonJS"})," mode."]}),"\n",(0,r.jsxs)(s.p,{children:["To fix this issue, one should modify ",(0,r.jsx)(s.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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,t.a)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>a,a:()=>o});var r=n(7294);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.8d0cf775.js b/assets/js/adb64ee2.8d0cf775.js new file mode 100644 index 0000000000..86da82620a --- /dev/null +++ b/assets/js/adb64ee2.8d0cf775.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4757],{3667:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var o=s(5893),n=s(1151);const r={id:"processing",title:"Processing flow"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},a={},l=[];function d(e){const t={a:"a",code:"code",p:"p",...(0,n.a)(),...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 p(e={}){const{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>c,a:()=>i});var o=s(7294);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/adb64ee2.9f88249a.js b/assets/js/adb64ee2.9f88249a.js deleted file mode 100644 index f10b023ae3..0000000000 --- a/assets/js/adb64ee2.9f88249a.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4757],{3667:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>d,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var n=s(5893),o=s(1151);const r={id:"processing",title:"Processing flow"},i=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-8.x/processing.md",tags:[],version:"8.x",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,o.a)(),...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,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>c,a:()=>i});var n=s(7294);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/afba4106.0cc776d0.js b/assets/js/afba4106.0cc776d0.js deleted file mode 100644 index 4600a909df..0000000000 --- a/assets/js/afba4106.0cc776d0.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[229],{4170:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var s=n(5893),r=n(1151);const i={id:"test-environment",title:"Test environment"},o=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},d={},c=[];function l(e){const t={a:"a",code:"code",p:"p",...(0,r.a)(),...e.components};return(0,s.jsxs)(t.p,{children:["If you look at ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/src/config/setup-jest.ts",children:(0,s.jsx)(t.code,{children:"setup-jest.ts"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,s.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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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/afba4106.3e1bb3be.js b/assets/js/afba4106.3e1bb3be.js new file mode 100644 index 0000000000..85e3d6328b --- /dev/null +++ b/assets/js/afba4106.3e1bb3be.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[229],{4170:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>l,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var s=n(5893),r=n(1151);const i={id:"test-environment",title:"Test environment"},o=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},d={},c=[];function u(e){const t={a:"a",code:"code",p:"p",...(0,r.a)(),...e.components};return(0,s.jsxs)(t.p,{children:["If you look at ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/src/config/setup-jest.ts",children:(0,s.jsx)(t.code,{children:"setup-jest.ts"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,s.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 l(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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.482babe3.js b/assets/js/b2161dc5.482babe3.js new file mode 100644 index 0000000000..86d11e7f5e --- /dev/null +++ b/assets/js/b2161dc5.482babe3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7496],{9527:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var o=s(5893),n=s(1151);const r={id:"processing",title:"Processing flow"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},a={},l=[];function d(e){const t={a:"a",code:"code",p:"p",...(0,n.a)(),...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 p(e={}){const{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>c,a:()=>i});var o=s(7294);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/b2161dc5.e2c65eb8.js b/assets/js/b2161dc5.e2c65eb8.js deleted file mode 100644 index 24e35acdac..0000000000 --- a/assets/js/b2161dc5.e2c65eb8.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7496],{9527:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>d,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var n=s(5893),o=s(1151);const r={id:"processing",title:"Processing flow"},i=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/processing.md",tags:[],version:"14.0",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,o.a)(),...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,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>c,a:()=>i});var n=s(7294);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/b4c5bdfe.14780d1c.js b/assets/js/b4c5bdfe.14780d1c.js deleted file mode 100644 index add8ee5c57..0000000000 --- a/assets/js/b4c5bdfe.14780d1c.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8610],{2648:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>d,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var n=s(5893),o=s(1151);const r={id:"processing",title:"Processing flow"},i=void 0,c={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/processing",draft:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/processing.md",tags:[],version:"14.2",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,o.a)(),...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,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>c,a:()=>i});var n=s(7294);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/b4c5bdfe.f510d379.js b/assets/js/b4c5bdfe.f510d379.js new file mode 100644 index 0000000000..4cba4ab77f --- /dev/null +++ b/assets/js/b4c5bdfe.f510d379.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8610],{2648:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var o=s(5893),n=s(1151);const r={id:"processing",title:"Processing flow"},i=void 0,c={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/processing",draft:!1,unlisted:!1,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:1722455661e3,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"}},a={},l=[];function d(e){const t={a:"a",code:"code",p:"p",...(0,n.a)(),...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 p(e={}){const{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>c,a:()=>i});var o=s(7294);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.32c60a1e.js b/assets/js/b647df5a.32c60a1e.js deleted file mode 100644 index ec63bcbe23..0000000000 --- a/assets/js/b647df5a.32c60a1e.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[336],{8172:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>a,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>r,toc:()=>c});var t=n(5893),i=n(1151);const o={id:"using-with-babel",title:"Using with Babel"},l=void 0,r={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},c=[];function d(e){const s={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(s.p,{children:["If you wish to use ",(0,t.jsx)(s.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,t.jsxs)(s.ol,{children:["\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:["Install dependencies required by the official Jest documentation for ",(0,t.jsx)(s.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:["Install ",(0,t.jsx)(s.code,{children:"@babel/preset-env"})," and add ",(0,t.jsx)(s.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.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,t.jsxs)(s.p,{children:[(0,t.jsxs)(s.em,{children:["Note: do not use a ",(0,t.jsx)(s.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,t.jsx)(s.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,t.jsx)(s.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,t.jsxs)(s.ol,{start:"3",children:["\n",(0,t.jsx)(s.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.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,i.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>r,a:()=>l});var t=n(7294);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/b647df5a.ca4d0bd3.js b/assets/js/b647df5a.ca4d0bd3.js new file mode 100644 index 0000000000..af4766f13c --- /dev/null +++ b/assets/js/b647df5a.ca4d0bd3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[336],{8172:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>a,contentTitle:()=>r,default:()=>u,frontMatter:()=>o,metadata:()=>l,toc:()=>c});var t=n(5893),i=n(1151);const o={id:"using-with-babel",title:"Using with Babel"},r=void 0,l={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:!1,unlisted:!1,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:1722455661e3,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"}},a={},c=[];function d(e){const s={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(s.p,{children:["If you wish to use ",(0,t.jsx)(s.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,t.jsxs)(s.ol,{children:["\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:["Install dependencies required by the official Jest documentation for ",(0,t.jsx)(s.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:["Install ",(0,t.jsx)(s.code,{children:"@babel/preset-env"})," and add ",(0,t.jsx)(s.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.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,t.jsxs)(s.p,{children:[(0,t.jsxs)(s.em,{children:["Note: do not use a ",(0,t.jsx)(s.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,t.jsx)(s.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,t.jsx)(s.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,t.jsxs)(s.ol,{start:"3",children:["\n",(0,t.jsx)(s.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.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,i.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>l,a:()=>r});var t=n(7294);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/b83f237d.6730ed61.js b/assets/js/b83f237d.6730ed61.js deleted file mode 100644 index ec8b236807..0000000000 --- a/assets/js/b83f237d.6730ed61.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7256],{4289:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>d,frontMatter:()=>n,metadata:()=>a,toc:()=>p});var o=s(5893),i=s(1151);const n={id:"absolute-imports",title:"Absolute Imports"},r=void 0,a={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/guides/absolute-imports",draft:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings 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."]}),"\n",(0,o.jsxs)(t.p,{children:["More information see ",(0,o.jsx)(t.code,{children:"ts-jest"})," ",(0,o.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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>a,a:()=>r});var o=s(7294);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/b83f237d.965b9b83.js b/assets/js/b83f237d.965b9b83.js new file mode 100644 index 0000000000..77a144a353 --- /dev/null +++ b/assets/js/b83f237d.965b9b83.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7256],{4289:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>d,frontMatter:()=>n,metadata:()=>a,toc:()=>p});var o=s(5893),i=s(1151);const n={id:"absolute-imports",title:"Absolute Imports"},r=void 0,a={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/guides/absolute-imports",draft:!1,unlisted:!1,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:1722455661e3,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"}},u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings 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."]}),"\n",(0,o.jsxs)(t.p,{children:["More information see ",(0,o.jsx)(t.code,{children:"ts-jest"})," ",(0,o.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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>a,a:()=>r});var o=s(7294);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.5fe29cbb.js b/assets/js/c00c612c.5fe29cbb.js new file mode 100644 index 0000000000..e18fc7ec4d --- /dev/null +++ b/assets/js/c00c612c.5fe29cbb.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2194],{6687:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>l,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var s=n(5893),r=n(1151);const i={id:"test-environment",title:"Test environment"},o=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},d={},c=[];function u(e){const t={a:"a",code:"code",p:"p",...(0,r.a)(),...e.components};return(0,s.jsxs)(t.p,{children:["If you look at ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/src/config/setup-jest.ts",children:(0,s.jsx)(t.code,{children:"setup-jest.ts"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,s.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 l(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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/c00c612c.adc41e81.js b/assets/js/c00c612c.adc41e81.js deleted file mode 100644 index 172d5bf4e9..0000000000 --- a/assets/js/c00c612c.adc41e81.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2194],{6687:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var s=n(5893),r=n(1151);const i={id:"test-environment",title:"Test environment"},o=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},d={},c=[];function l(e){const t={a:"a",code:"code",p:"p",...(0,r.a)(),...e.components};return(0,s.jsxs)(t.p,{children:["If you look at ",(0,s.jsx)(t.a,{href:"https://github.com/thymikee/jest-preset-angular/blob/main/src/config/setup-jest.ts",children:(0,s.jsx)(t.code,{children:"setup-jest.ts"})}),",\nwhat we're doing here is we're adding globals required by Angular. With the included ",(0,s.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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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.479fdf38.js b/assets/js/c1bdbc58.479fdf38.js new file mode 100644 index 0000000000..91eda9b110 --- /dev/null +++ b/assets/js/c1bdbc58.479fdf38.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1075],{3281:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>u,frontMatter:()=>s,metadata:()=>c,toc:()=>d});var o=n(5893),r=n(1151);const s={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.a)(),...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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>i});var o=n(7294);const r={},s=o.createContext(r);function i(e){const t=o.useContext(s);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(r):e.components||r:i(e.components),o.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/c1bdbc58.6093f001.js b/assets/js/c1bdbc58.6093f001.js deleted file mode 100644 index 5045e4d765..0000000000 --- a/assets/js/c1bdbc58.6093f001.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1075],{3281:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>u,frontMatter:()=>r,metadata:()=>c,toc:()=>d});var s=n(5893),o=n(1151);const r={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},i=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/introduction.md",tags:[],version:"14.0",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.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,s.jsxs)(t.p,{children:["This is a part of the article: ",(0,s.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,s.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,s.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,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>i});var s=n(7294);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.a5cfa983.js b/assets/js/c44fa306.a5cfa983.js new file mode 100644 index 0000000000..7851f6b43e --- /dev/null +++ b/assets/js/c44fa306.a5cfa983.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1631],{4069:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>d,toc:()=>c});var n=s(5893),r=s(1151);const o={id:"presets",title:"Presets"},i=void 0,d={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," comes with a preset, covering most of the project's base configuration:"]}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Preset name"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsx)(t.tbody,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"jest-preset-angular"})}),(0,n.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,n.jsx)(t.code,{children:"js"}),", ",(0,n.jsx)(t.code,{children:".ts"}),", ",(0,n.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,n.jsx)(t.code,{children:"ts-jest"})," to ",(0,n.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]})})]}),"\n",(0,n.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,n.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,n.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,n.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,n.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n preset: 'jest-preset-angular',\n};\n"})}),"\n",(0,n.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,n.jsxs)(t.p,{children:["All presets come with default ",(0,n.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,n.jsx)(t.admonition,{type:"important",children:(0,n.jsxs)(t.p,{children:["If you choose to override ",(0,n.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,n.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,n.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>d,a:()=>i});var n=s(7294);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/c44fa306.eb0438d7.js b/assets/js/c44fa306.eb0438d7.js deleted file mode 100644 index 5ddb1ab4f5..0000000000 --- a/assets/js/c44fa306.eb0438d7.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1631],{4069:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>d,toc:()=>c});var n=s(5893),r=s(1151);const o={id:"presets",title:"Presets"},i=void 0,d={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," comes with a preset, covering most of the project's base configuration:"]}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Preset name"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsx)(t.tbody,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{children:(0,n.jsx)(t.code,{children:"jest-preset-angular"})}),(0,n.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,n.jsx)(t.code,{children:"js"}),", ",(0,n.jsx)(t.code,{children:".ts"}),", ",(0,n.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,n.jsx)(t.code,{children:"ts-jest"})," to ",(0,n.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]})})]}),"\n",(0,n.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,n.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,n.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,n.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,n.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n // [...]\n preset: 'jest-preset-angular',\n};\n"})}),"\n",(0,n.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,n.jsxs)(t.p,{children:["All presets come with default ",(0,n.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,n.jsx)(t.admonition,{type:"important",children:(0,n.jsxs)(t.p,{children:["If you choose to override ",(0,n.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,n.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,n.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>d,a:()=>i});var n=s(7294);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.335db0d6.js b/assets/js/c49413db.335db0d6.js new file mode 100644 index 0000000000..cc154f264f --- /dev/null +++ b/assets/js/c49413db.335db0d6.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8058],{1657:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>i,default:()=>u,frontMatter:()=>r,metadata:()=>a,toc:()=>c});var n=t(5893),o=t(1151);const r={id:"esm-support",title:"ESM Support"},i=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},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.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.p,{children:["To use ",(0,n.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,n.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,n.jsxs)(s.p,{children:[(0,n.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,n.jsx)(s.code,{children:"ts-jest"})," config option ",(0,n.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,n.jsx)(s.a,{href:"https://jestjs.io/docs/en/next/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,n.jsxs)(s.p,{children:["There is also a ",(0,n.jsx)(s.a,{href:"/jest-preset-angular/docs/10.x/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,n.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,n.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.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,n.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,n.jsxs)(s.admonition,{type:"tip",children:[(0,n.jsxs)(s.p,{children:["Jest will attempt to load ",(0,n.jsx)(s.strong,{children:"ESM"})," files from ",(0,n.jsx)(s.code,{children:"node_modules"})," with default ",(0,n.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,n.jsx)(s.strong,{children:"ESM"})," built files or ",(0,n.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,n.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,n.jsxs)(s.p,{children:["To fix that, one can use ",(0,n.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,n.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,n.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.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,o.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},1151:(e,s,t)=>{t.d(s,{Z:()=>a,a:()=>i});var n=t(7294);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.4e75d158.js b/assets/js/c4ba122c.4e75d158.js deleted file mode 100644 index c797943d5b..0000000000 --- a/assets/js/c4ba122c.4e75d158.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9002],{1948:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>u,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"using-with-babel",title:"Using with Babel"},i=void 0,u={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/guides/using-with-babel",draft:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["If you wish to use ",(0,s.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,s.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Install ",(0,s.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,s.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:[(0,s.jsxs)(t.em,{children:["Note: do not use a ",(0,s.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,s.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,s.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,s.jsxs)(t.ol,{start:"3",children:["\n",(0,s.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,s.jsxs)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})}),(0,s.jsx)(l.Z,{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 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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(5893);function v(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.Z)("tabs-container",g.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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/c4ba122c.b58b3390.js b/assets/js/c4ba122c.b58b3390.js new file mode 100644 index 0000000000..7ee4635072 --- /dev/null +++ b/assets/js/c4ba122c.b58b3390.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9002],{1948:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>u,toc:()=>d});var s=n(5893),r=n(1151),a=n(3992),l=n(425);const o={id:"using-with-babel",title:"Using with Babel"},i=void 0,u={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/guides/using-with-babel",draft:!1,unlisted:!1,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:1722455661e3,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"}},c={},d=[];function p(e){const t={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:["If you wish to use ",(0,s.jsx)(t.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Install dependencies required by the official Jest documentation for ",(0,s.jsx)(t.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:["Install ",(0,s.jsx)(t.code,{children:"@babel/preset-env"})," and add ",(0,s.jsx)(t.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,s.jsxs)(t.p,{children:[(0,s.jsxs)(t.em,{children:["Note: do not use a ",(0,s.jsx)(t.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,s.jsx)(t.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,s.jsx)(t.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,s.jsxs)(t.ol,{start:"3",children:["\n",(0,s.jsx)(t.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,s.jsxs)(a.Z,{groupId:"code-examples",children:[(0,s.jsx)(l.Z,{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 transform: {\n '^.+\\\\.(ts|html)$': 'jest-preset-angular',\n '^.+\\\\.js$': 'babel-jest',\n },\n};\n"})})}),(0,s.jsx)(l.Z,{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 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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var s=n(512);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var s=n(7294),r=n(512),a=n(2957),l=n(6550),o=n(1270),i=n(5238),u=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=n(5893);function v(e){let{className:t,block:n,selectedValue:s,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=f(e);return(0,j.jsxs)("div",{className:(0,r.Z)("tabs-container",g.tabList),children:[(0,j.jsx)(v,{...t,...e}),(0,j.jsx)(x,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,j.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var s=n(7294);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.51ccf213.js b/assets/js/c62dfc48.51ccf213.js new file mode 100644 index 0000000000..fba26cd80e --- /dev/null +++ b/assets/js/c62dfc48.51ccf213.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1337],{8480:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var r=s(5893),t=s(1151);const o={id:"troubleshooting",title:"Troubleshooting"},i=void 0,a={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:!1,unlisted:!1,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:1722455661e3,frontMatter:{id:"troubleshooting",title:"Troubleshooting"},sidebar:"docs",previous:{title:"Absolute Imports",permalink:"/jest-preset-angular/docs/14.0/guides/absolute-imports"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"Object.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.\":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.jsx)(n.pre,{children:(0,r.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,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-js",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-js",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,{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.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\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,{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,{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-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,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"// jest.config.js\n...\nresolver: '/src/jest.resolver.js',\n...\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.io/api/core/inject",children:"inject"})," instead of ",(0,r.jsx)(n.a,{href:"https://angular.io/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 h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>a,a:()=>i});var r=s(7294);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/c62dfc48.d64e4947.js b/assets/js/c62dfc48.d64e4947.js deleted file mode 100644 index fc4741c110..0000000000 --- a/assets/js/c62dfc48.d64e4947.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1337],{8480:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var r=s(5893),t=s(1151);const o={id:"troubleshooting",title:"Troubleshooting"},i=void 0,a={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.0/guides/troubleshooting.md",tags:[],version:"14.0",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,frontMatter:{id:"troubleshooting",title:"Troubleshooting"},sidebar:"docs",previous:{title:"Absolute Imports",permalink:"/jest-preset-angular/docs/14.0/guides/absolute-imports"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"Object.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.\":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.jsx)(n.pre,{children:(0,r.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,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-js",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-js",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,{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.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\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,{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,{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-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,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"// jest.config.js\n...\nresolver: '/src/jest.resolver.js',\n...\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.io/api/core/inject",children:"inject"})," instead of ",(0,r.jsx)(n.a,{href:"https://angular.io/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 h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>a,a:()=>i});var r=s(7294);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.1a86c48f.js b/assets/js/c7279284.1a86c48f.js new file mode 100644 index 0000000000..8432bd8754 --- /dev/null +++ b/assets/js/c7279284.1a86c48f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9932],{7243:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>r,metadata:()=>d,toc:()=>l});var t=n(5893),o=n(1151);const r={id:"options",title:"Options"},i=void 0,d={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:!1,unlisted:!1,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:1722455661e3,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"}},c={},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,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"jest-preset-angular"})," uses ",(0,t.jsx)(s.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,t.jsx)(s.code,{children:"globals"})," of Jest config object\nin the ",(0,t.jsx)(s.code,{children:"package.json"})," file of your project, or through a ",(0,t.jsx)(s.code,{children:"jest.config.js"}),", or ",(0,t.jsx)(s.code,{children:"jest.config.ts"})," file."]}),"\n",(0,t.jsxs)(s.p,{children:["More information about ",(0,t.jsx)(s.code,{children:"ts-jest"})," options, see ",(0,t.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,t.jsxs)(s.admonition,{type:"important",children:[(0,t.jsxs)(s.p,{children:["Since ",(0,t.jsx)(s.strong,{children:"v9.0.0"}),", ",(0,t.jsx)(s.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,t.jsx)(s.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,t.jsx)(s.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config"]}),(0,t.jsx)(s.pre,{children:(0,t.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,t.jsx)(s.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.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,t.jsx)(s.admonition,{type:"important",children:(0,t.jsxs)(s.p,{children:["Jest runs with ",(0,t.jsx)(s.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,t.jsx)(s.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,t.jsx)(s.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,t.jsx)(s.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["we're using some ",(0,t.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,t.jsx)(s.code,{children:"ts-jest"}),"."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,t.jsx)(s.code,{children:"ts"}),"), HTML (",(0,t.jsx)(s.code,{children:"html"}),"), JavaScript (",(0,t.jsx)(s.code,{children:"js"}),"), JSON (",(0,t.jsx)(s.code,{children:"json"}),") and ESM JavaScript (",(0,t.jsx)(s.code,{children:"mjs"}),") files."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.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,t.jsx)(s.code,{children:"RegExp"}),"."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,t.jsx)(s.code,{children:"package.json"})," definitions."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.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,t.jsx)(s.code,{children:"ng-reflect-*"}),", ",(0,t.jsx)(s.code,{children:'ng-version="*"'}),", ",(0,t.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,t.jsx)(s.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,t.jsx)(s.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,t.jsx)(s.code,{children:".mjs"})," files which come from ",(0,t.jsx)(s.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:'"transform"'})," \u2013 run every ",(0,t.jsx)(s.code,{children:"TS"}),", ",(0,t.jsx)(s.code,{children:"JS"}),", ",(0,t.jsx)(s.code,{children:"MJS"}),", ",(0,t.jsx)(s.code,{children:"HTML"}),", or ",(0,t.jsx)(s.code,{children:"SVG"})," file through so called ",(0,t.jsx)(s.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function h(e={}){const{wrapper:s}={...(0,o.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>d,a:()=>i});var t=n(7294);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 d(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/c7279284.56afc206.js b/assets/js/c7279284.56afc206.js deleted file mode 100644 index 2aeeef8f27..0000000000 --- a/assets/js/c7279284.56afc206.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9932],{7243:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>r,metadata:()=>d,toc:()=>l});var t=n(5893),o=n(1151);const r={id:"options",title:"Options"},i=void 0,d={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},c={},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,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"jest-preset-angular"})," uses ",(0,t.jsx)(s.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,t.jsx)(s.code,{children:"globals"})," of Jest config object\nin the ",(0,t.jsx)(s.code,{children:"package.json"})," file of your project, or through a ",(0,t.jsx)(s.code,{children:"jest.config.js"}),", or ",(0,t.jsx)(s.code,{children:"jest.config.ts"})," file."]}),"\n",(0,t.jsxs)(s.p,{children:["More information about ",(0,t.jsx)(s.code,{children:"ts-jest"})," options, see ",(0,t.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,t.jsxs)(s.admonition,{type:"important",children:[(0,t.jsxs)(s.p,{children:["Since ",(0,t.jsx)(s.strong,{children:"v9.0.0"}),", ",(0,t.jsx)(s.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,t.jsx)(s.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,t.jsx)(s.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config"]}),(0,t.jsx)(s.pre,{children:(0,t.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,t.jsx)(s.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.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,t.jsx)(s.admonition,{type:"important",children:(0,t.jsxs)(s.p,{children:["Jest runs with ",(0,t.jsx)(s.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,t.jsx)(s.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,t.jsx)(s.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,t.jsx)(s.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["we're using some ",(0,t.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,t.jsx)(s.code,{children:"ts-jest"}),"."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,t.jsx)(s.code,{children:"ts"}),"), HTML (",(0,t.jsx)(s.code,{children:"html"}),"), JavaScript (",(0,t.jsx)(s.code,{children:"js"}),"), JSON (",(0,t.jsx)(s.code,{children:"json"}),") and ESM JavaScript (",(0,t.jsx)(s.code,{children:"mjs"}),") files."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.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,t.jsx)(s.code,{children:"RegExp"}),"."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,t.jsx)(s.code,{children:"package.json"})," definitions."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.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,t.jsx)(s.code,{children:"ng-reflect-*"}),", ",(0,t.jsx)(s.code,{children:'ng-version="*"'}),", ",(0,t.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,t.jsx)(s.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,t.jsx)(s.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,t.jsx)(s.code,{children:".mjs"})," files which come from ",(0,t.jsx)(s.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:'"transform"'})," \u2013 run every ",(0,t.jsx)(s.code,{children:"TS"}),", ",(0,t.jsx)(s.code,{children:"JS"}),", ",(0,t.jsx)(s.code,{children:"MJS"}),", ",(0,t.jsx)(s.code,{children:"HTML"}),", or ",(0,t.jsx)(s.code,{children:"SVG"})," file through so called ",(0,t.jsx)(s.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function h(e={}){const{wrapper:s}={...(0,o.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>d,a:()=>i});var t=n(7294);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 d(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.5793c55c.js b/assets/js/cd9c57cb.5793c55c.js deleted file mode 100644 index 497bc4d297..0000000000 --- a/assets/js/cd9c57cb.5793c55c.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3715],{7185:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>d,frontMatter:()=>n,metadata:()=>a,toc:()=>p});var o=s(5893),i=s(1151);const n={id:"absolute-imports",title:"Absolute Imports"},r=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings 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."]}),"\n",(0,o.jsxs)(t.p,{children:["More information see ",(0,o.jsx)(t.code,{children:"ts-jest"})," ",(0,o.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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>a,a:()=>r});var o=s(7294);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/cd9c57cb.8db6fd39.js b/assets/js/cd9c57cb.8db6fd39.js new file mode 100644 index 0000000000..2fb2ec15e6 --- /dev/null +++ b/assets/js/cd9c57cb.8db6fd39.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3715],{7185:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>d,frontMatter:()=>n,metadata:()=>a,toc:()=>p});var o=s(5893),i=s(1151);const n={id:"absolute-imports",title:"Absolute Imports"},r=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings 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."]}),"\n",(0,o.jsxs)(t.p,{children:["More information see ",(0,o.jsx)(t.code,{children:"ts-jest"})," ",(0,o.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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>a,a:()=>r});var o=s(7294);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.19694b24.js b/assets/js/d069ae84.19694b24.js new file mode 100644 index 0000000000..7e23db7d6f --- /dev/null +++ b/assets/js/d069ae84.19694b24.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2367],{4531:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>l,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var r=n(5893),t=n(1151);const o={id:"angular-13+",title:"Angular >=13"},i=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,r.jsx)(s.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,r.jsx)(s.code,{children:"CommonJS"})," mode with ",(0,r.jsx)(s.strong,{children:"Angular 13"})," using ",(0,r.jsx)(s.a,{href:"/jest-preset-angular/docs/11.0/getting-started/presets",children:"default preset"}),".\nJest ESM support with ",(0,r.jsx)(s.strong,{children:"Angular 13"})," is new and may have issues."]}),"\n",(0,r.jsxs)(s.p,{children:["Starting from ",(0,r.jsx)(s.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,r.jsx)(s.strong,{children:"Angular 13"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"ng-jest-resolver"})," is introduced as a custom Jest resolver to resolve ",(0,r.jsx)(s.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"moduleFileExtensions"})," is updated to include ",(0,r.jsx)(s.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,r.jsx)(s.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"transform"})," is updated to include ",(0,r.jsx)(s.code,{children:".mjs"})," extension to transform to ",(0,r.jsx)(s.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["Upgrade the project to ",(0,r.jsx)(s.strong,{children:"Angular 13"})," following ",(0,r.jsx)(s.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsx)(s.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})}),"\n",(0,r.jsx)(s.p,{children:"there are no migration steps required"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["If one is ",(0,r.jsx)(s.strong,{children:"NOT"})," having ",(0,r.jsx)(s.code,{children:"preset: 'jest-preset-angular'"})," in Jest config, the config needs to be updated with new values for\n",(0,r.jsx)(s.code,{children:"resolver"}),", ",(0,r.jsx)(s.code,{children:"transformIgnorePatterns"})," and ",(0,r.jsx)(s.code,{children:"transform"}),":"]}),"\n"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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,r.jsx)(s.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,r.jsxs)(s.p,{children:["ES Modules support is new and may encounter issues. See ",(0,r.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,r.jsxs)(s.p,{children:["Your ",(0,r.jsx)(s.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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,r.jsxs)(s.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,r.jsx)(s.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,r.jsx)(s.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"jest-preset-angular/setup-jest"})," file doesn't work with ESM, because it uses ",(0,r.jsx)(s.code,{children:"require"}),". For now you should skip using this file, and replace the contents of your ",(0,r.jsx)(s.code,{children:"setup-jest.ts"})," with:"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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,r.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,r.jsxs)(s.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,r.jsx)(s.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["Angular 13 ESM package format makes Jest resolution not able to resolve the correct ",(0,r.jsx)(s.code,{children:".mjs"})," files. Even though we introduced\n",(0,r.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,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,r.jsxs)(s.p,{children:["To fix this issue, one needs to add ",(0,r.jsx)(s.code,{children:"mjs"})," to ",(0,r.jsx)(s.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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,r.jsxs)(s.p,{children:["If the issue still ",(0,r.jsx)(s.strong,{children:"persists"}),", you might need to configure ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring",children:"moduleNameMapper"}),"\nor extend the behavior the default ",(0,r.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,r.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,r.jsxs)(s.p,{children:["Besides, the changes in Angular packages themselves, ",(0,r.jsx)(s.strong,{children:"Angular"})," libraries which are built with ",(0,r.jsx)(s.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,r.jsx)(s.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,r.jsx)(s.strong,{children:"CommonJS"})," mode."]}),"\n",(0,r.jsxs)(s.p,{children:["To fix this issue, one should modify ",(0,r.jsx)(s.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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,t.a)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>a,a:()=>i});var r=n(7294);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/d069ae84.d9bd05f1.js b/assets/js/d069ae84.d9bd05f1.js deleted file mode 100644 index 4f576d7c45..0000000000 --- a/assets/js/d069ae84.d9bd05f1.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2367],{4531:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>a,toc:()=>d});var r=n(5893),t=n(1151);const i={id:"angular-13+",title:"Angular >=13"},o=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Angular 13"})," introduces ESM package format for Angular packages. ",(0,r.jsx)(s.code,{children:"jest-preset-angular"}),"\ncurrently supports testing with Jest in ",(0,r.jsx)(s.code,{children:"CommonJS"})," mode with ",(0,r.jsx)(s.strong,{children:"Angular 13"})," using ",(0,r.jsx)(s.a,{href:"/jest-preset-angular/docs/11.0/getting-started/presets",children:"default preset"}),".\nJest ESM support with ",(0,r.jsx)(s.strong,{children:"Angular 13"})," is new and may have issues."]}),"\n",(0,r.jsxs)(s.p,{children:["Starting from ",(0,r.jsx)(s.strong,{children:"v11.0.0"}),", ",(0,r.jsx)(s.code,{children:"jest-preset-angular"})," introduces a few extra changes to be able to run Jest with ",(0,r.jsx)(s.strong,{children:"Angular 13"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"ng-jest-resolver"})," is introduced as a custom Jest resolver to resolve ",(0,r.jsx)(s.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"moduleFileExtensions"})," is updated to include ",(0,r.jsx)(s.code,{children:"mjs"})," files as accepted module format."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"transformIgnorePatterns"})," is added to inform Jest to transform ",(0,r.jsx)(s.code,{children:".mjs"})," files."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"transform"})," is updated to include ",(0,r.jsx)(s.code,{children:".mjs"})," extension to transform to ",(0,r.jsx)(s.code,{children:"CommonJS"})," codes."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.h2,{id:"migration-steps-from-angular--13",children:"Migration steps from Angular < 13"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["Upgrade the project to ",(0,r.jsx)(s.strong,{children:"Angular 13"})," following ",(0,r.jsx)(s.a,{href:"https://update.angular.io/",children:"guide"})]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsx)(s.p,{children:"If one is using the default preset as following:"}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n preset: 'jest-preset-angular',\n};\n"})}),"\n",(0,r.jsx)(s.p,{children:"there are no migration steps required"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["If one is ",(0,r.jsx)(s.strong,{children:"NOT"})," having ",(0,r.jsx)(s.code,{children:"preset: 'jest-preset-angular'"})," in Jest config, the config needs to be updated with new values for\n",(0,r.jsx)(s.code,{children:"resolver"}),", ",(0,r.jsx)(s.code,{children:"transformIgnorePatterns"})," and ",(0,r.jsx)(s.code,{children:"transform"}),":"]}),"\n"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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,r.jsx)(s.h3,{id:"using-es-modules",children:"Using ES Modules"}),"\n",(0,r.jsxs)(s.p,{children:["ES Modules support is new and may encounter issues. See ",(0,r.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,r.jsxs)(s.p,{children:["Your ",(0,r.jsx)(s.code,{children:"jest.config.js"})," should be changed to something like:"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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,r.jsxs)(s.p,{children:["Before upgrading to ng13 and switching to ES Modules, your ",(0,r.jsx)(s.code,{children:"setup-jest.ts"})," file most likely uses the preset ",(0,r.jsx)(s.code,{children:"setup-jest"}),", like the following:"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest';\nimport './jest-global-mocks';\n"})}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"jest-preset-angular/setup-jest"})," file doesn't work with ESM, because it uses ",(0,r.jsx)(s.code,{children:"require"}),". For now you should skip using this file, and replace the contents of your ",(0,r.jsx)(s.code,{children:"setup-jest.ts"})," with:"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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,r.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,r.jsxs)(s.h3,{id:"cannot-find-modules-error-when-importing-any-deep-paths-from-angular-esm-format-packages",children:[(0,r.jsx)(s.code,{children:"Cannot find modules"})," error when importing any deep paths from Angular ESM format packages"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["Angular 13 ESM package format makes Jest resolution not able to resolve the correct ",(0,r.jsx)(s.code,{children:".mjs"})," files. Even though we introduced\n",(0,r.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,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{children:"Cannot find module '@angular/common/locales/xx' from 'src/app/app.component.spec.ts'\n"})}),"\n",(0,r.jsxs)(s.p,{children:["To fix this issue, one needs to add ",(0,r.jsx)(s.code,{children:"mjs"})," to ",(0,r.jsx)(s.code,{children:"moduleFileExtensions"})," as following"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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,r.jsxs)(s.p,{children:["If the issue still ",(0,r.jsx)(s.strong,{children:"persists"}),", you might need to configure ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring",children:"moduleNameMapper"}),"\nor extend the behavior the default ",(0,r.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,r.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,r.jsxs)(s.p,{children:["Besides, the changes in Angular packages themselves, ",(0,r.jsx)(s.strong,{children:"Angular"})," libraries which are built with ",(0,r.jsx)(s.strong,{children:"Angular CLI 13"})," also introduce\nESM package format. Similar to Angular packages, Jest doesn't understand ",(0,r.jsx)(s.code,{children:".mjs"})," files which are in these new format\nlibraries in Jest ",(0,r.jsx)(s.strong,{children:"CommonJS"})," mode."]}),"\n",(0,r.jsxs)(s.p,{children:["To fix this issue, one should modify ",(0,r.jsx)(s.code,{children:"transformIgnorePatterns"})," to be as following:"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.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,t.a)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>a,a:()=>o});var r=n(7294);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/d19b9e8a.82a04935.js b/assets/js/d19b9e8a.82a04935.js new file mode 100644 index 0000000000..e48b8c38b1 --- /dev/null +++ b/assets/js/d19b9e8a.82a04935.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2822],{3800:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>d,frontMatter:()=>i,metadata:()=>a,toc:()=>c});var o=s(5893),n=s(1151);const i={id:"absolute-imports",title:"Absolute Imports"},r=void 0,a={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/absolute-imports.md",tags:[],version:"current",lastUpdatedBy:"renovate[bot]",lastUpdatedAt:1722455661e3,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"}},u={},c=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,n.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings 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."]}),"\n",(0,o.jsxs)(t.p,{children:["More information see ",(0,o.jsx)(t.code,{children:"ts-jest"})," ",(0,o.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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>a,a:()=>r});var o=s(7294);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/d19b9e8a.cc643355.js b/assets/js/d19b9e8a.cc643355.js deleted file mode 100644 index 4955cbe4c1..0000000000 --- a/assets/js/d19b9e8a.cc643355.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2822],{3800:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>d,frontMatter:()=>i,metadata:()=>a,toc:()=>p});var o=s(5893),n=s(1151);const i={id:"absolute-imports",title:"Absolute Imports"},r=void 0,a={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/absolute-imports.md",tags:[],version:"current",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,n.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings 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."]}),"\n",(0,o.jsxs)(t.p,{children:["More information see ",(0,o.jsx)(t.code,{children:"ts-jest"})," ",(0,o.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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>a,a:()=>r});var o=s(7294);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.20430a65.js b/assets/js/d1b207fe.20430a65.js new file mode 100644 index 0000000000..a65e668dd5 --- /dev/null +++ b/assets/js/d1b207fe.20430a65.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[322],{1254:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var r=s(5893),t=s(1151);const o={id:"troubleshooting",title:"Troubleshooting"},i=void 0,a={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:!1,unlisted:!1,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:1722455661e3,frontMatter:{id:"troubleshooting",title:"Troubleshooting"},sidebar:"docs",previous:{title:"Absolute Imports",permalink:"/jest-preset-angular/docs/13.0/guides/absolute-imports"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"Object.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.\":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.jsx)(n.pre,{children:(0,r.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,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-js",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-js",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,{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.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\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,{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,{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-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,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"// jest.config.js\n...\nresolver: '/src/jest.resolver.js',\n...\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.io/api/core/inject",children:"inject"})," instead of ",(0,r.jsx)(n.a,{href:"https://angular.io/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 h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>a,a:()=>i});var r=s(7294);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/d1b207fe.c5b82109.js b/assets/js/d1b207fe.c5b82109.js deleted file mode 100644 index d10d63edcd..0000000000 --- a/assets/js/d1b207fe.c5b82109.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[322],{1254:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var r=s(5893),t=s(1151);const o={id:"troubleshooting",title:"Troubleshooting"},i=void 0,a={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-13.0/guides/troubleshooting.md",tags:[],version:"13.0",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,frontMatter:{id:"troubleshooting",title:"Troubleshooting"},sidebar:"docs",previous:{title:"Absolute Imports",permalink:"/jest-preset-angular/docs/13.0/guides/absolute-imports"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"Object.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.\":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.jsx)(n.pre,{children:(0,r.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,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-js",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-js",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,{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.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\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,{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,{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-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,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"// jest.config.js\n...\nresolver: '/src/jest.resolver.js',\n...\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.io/api/core/inject",children:"inject"})," instead of ",(0,r.jsx)(n.a,{href:"https://angular.io/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 h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>a,a:()=>i});var r=s(7294);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.b75cb517.js b/assets/js/d2df711a.b75cb517.js new file mode 100644 index 0000000000..467db6f920 --- /dev/null +++ b/assets/js/d2df711a.b75cb517.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5400],{3822:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>d,frontMatter:()=>n,metadata:()=>a,toc:()=>p});var o=s(5893),i=s(1151);const n={id:"absolute-imports",title:"Absolute Imports"},r=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings 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."]}),"\n",(0,o.jsxs)(t.p,{children:["More information see ",(0,o.jsx)(t.code,{children:"ts-jest"})," ",(0,o.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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>a,a:()=>r});var o=s(7294);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.777d1558.js b/assets/js/d4836a8e.777d1558.js deleted file mode 100644 index ef2e9a36cf..0000000000 --- a/assets/js/d4836a8e.777d1558.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7471],{4207:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var n=s(5893),r=s(1151),a=s(3992),o=s(425);const i={id:"esm-support",title:"ESM Support"},l=void 0,u={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/esm-support.md",tags:[],version:"current",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,frontMatter:{id:"esm-support",title:"ESM Support"},sidebar:"docs",previous:{title:"Angular >=13",permalink:"/jest-preset-angular/docs/next/guides/angular-13+"},next:{title:"Configure other JSDOM versions",permalink:"/jest-preset-angular/docs/next/guides/jsdom-version"}},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,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["To use ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,n.jsx)(t.code,{children:"ts-jest"})," config option ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["There is also a ",(0,n.jsx)(t.a,{href:"/jest-preset-angular/docs/next/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,n.jsx)(t.admonition,{type:"tip",children:(0,n.jsxs)(t.p,{children:["We have ",(0,n.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,n.jsxs)(t.p,{children:["Besides, there is ",(0,n.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,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,n.jsx)(t.h3,{id:"examples",children:"Examples"}),"\n",(0,n.jsx)(t.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(t.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,n.jsxs)(t.admonition,{type:"tip",children:[(0,n.jsxs)(t.p,{children:["Jest will attempt to load ",(0,n.jsx)(t.strong,{children:"ESM"})," files from ",(0,n.jsx)(t.code,{children:"node_modules"})," with default ",(0,n.jsx)(t.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,n.jsx)(t.strong,{children:"ESM"})," built files or ",(0,n.jsx)(t.strong,{children:"ESM"})," files which are outside ",(0,n.jsx)(t.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,n.jsxs)(t.p,{children:["To fix that, one can use ",(0,n.jsx)(t.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,n.jsx)(t.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},425:(e,t,s)=>{s.d(t,{Z:()=>o});s(7294);var n=s(512);const r={tabItem:"tabItem_Ymn6"};var a=s(5893);function o(e){let{children:t,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.Z)(r.tabItem,o),hidden:s,children:t})}},3992:(e,t,s)=>{s.d(t,{Z:()=>w});var n=s(7294),r=s(512),a=s(2957),o=s(6550),i=s(1270),l=s(5238),u=s(3609),c=s(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(5893);function b(e){let{className:t,block:s,selectedValue:n,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:r}=e;const a=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,n.cloneElement)(e,{className:"margin-top--md"}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=f(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,s)=>{s.d(t,{Z:()=>i,a:()=>o});var n=s(7294);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/d4836a8e.e0970bd4.js b/assets/js/d4836a8e.e0970bd4.js new file mode 100644 index 0000000000..c0d4c883df --- /dev/null +++ b/assets/js/d4836a8e.e0970bd4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7471],{4207:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var n=s(5893),r=s(1151),a=s(3992),o=s(425);const i={id:"esm-support",title:"ESM Support"},l=void 0,u={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/guides/esm-support.md",tags:[],version:"current",lastUpdatedBy:"renovate[bot]",lastUpdatedAt:1722455661e3,frontMatter:{id:"esm-support",title:"ESM Support"},sidebar:"docs",previous:{title:"Angular >=13",permalink:"/jest-preset-angular/docs/next/guides/angular-13+"},next:{title:"Configure other JSDOM versions",permalink:"/jest-preset-angular/docs/next/guides/jsdom-version"}},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,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["To use ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,n.jsx)(t.code,{children:"ts-jest"})," config option ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["There is also a ",(0,n.jsx)(t.a,{href:"/jest-preset-angular/docs/next/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,n.jsx)(t.admonition,{type:"tip",children:(0,n.jsxs)(t.p,{children:["We have ",(0,n.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,n.jsxs)(t.p,{children:["Besides, there is ",(0,n.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,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-ts",children:"// setup-jest.ts\nimport 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,n.jsx)(t.h3,{id:"examples",children:"Examples"}),"\n",(0,n.jsx)(t.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(t.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,n.jsxs)(t.admonition,{type:"tip",children:[(0,n.jsxs)(t.p,{children:["Jest will attempt to load ",(0,n.jsx)(t.strong,{children:"ESM"})," files from ",(0,n.jsx)(t.code,{children:"node_modules"})," with default ",(0,n.jsx)(t.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,n.jsx)(t.strong,{children:"ESM"})," built files or ",(0,n.jsx)(t.strong,{children:"ESM"})," files which are outside ",(0,n.jsx)(t.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,n.jsxs)(t.p,{children:["To fix that, one can use ",(0,n.jsx)(t.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,n.jsx)(t.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},425:(e,t,s)=>{s.d(t,{Z:()=>o});s(7294);var n=s(512);const r={tabItem:"tabItem_Ymn6"};var a=s(5893);function o(e){let{children:t,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.Z)(r.tabItem,o),hidden:s,children:t})}},3992:(e,t,s)=>{s.d(t,{Z:()=>w});var n=s(7294),r=s(512),a=s(2957),o=s(6550),i=s(1270),l=s(5238),u=s(3609),c=s(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(5893);function b(e){let{className:t,block:s,selectedValue:n,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:r}=e;const a=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,n.cloneElement)(e,{className:"margin-top--md"}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=f(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,s)=>{s.d(t,{Z:()=>i,a:()=>o});var n=s(7294);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/d720bb60.470578a9.js b/assets/js/d720bb60.470578a9.js deleted file mode 100644 index 5a17e5af34..0000000000 --- a/assets/js/d720bb60.470578a9.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7964],{9979:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>d,frontMatter:()=>i,metadata:()=>a,toc:()=>l});var s=n(5893),r=n(1151);const i={id:"angular-ivy",title:"Angular Ivy"},o=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},c={},l=[];function u(e){const t={code:"code",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...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 util script to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest but this script only works via the\nJavaScript version of Jest config"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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/d720bb60.5d42bf34.js b/assets/js/d720bb60.5d42bf34.js new file mode 100644 index 0000000000..778bb4ce8c --- /dev/null +++ b/assets/js/d720bb60.5d42bf34.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7964],{9979:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>d,frontMatter:()=>i,metadata:()=>a,toc:()=>l});var s=n(5893),r=n(1151);const i={id:"angular-ivy",title:"Angular Ivy"},o=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},c={},l=[];function u(e){const t={code:"code",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...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 util script to help you to run ",(0,s.jsx)(t.code,{children:"ngcc"})," with Jest but this script only works via the\nJavaScript version of Jest config"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.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,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>o});var s=n(7294);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.1fb3018a.js b/assets/js/d9330f66.1fb3018a.js deleted file mode 100644 index a809732101..0000000000 --- a/assets/js/d9330f66.1fb3018a.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2252],{2635:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var n=s(5893),r=s(1151),a=s(3992),o=s(425);const i={id:"esm-support",title:"ESM Support"},l=void 0,u={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["To use ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,n.jsx)(t.code,{children:"ts-jest"})," config option ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["There is also a ",(0,n.jsx)(t.a,{href:"/jest-preset-angular/docs/13.0/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,n.jsx)(t.admonition,{type:"tip",children:(0,n.jsxs)(t.p,{children:["We have ",(0,n.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,n.jsxs)(t.p,{children:["Besides, there is ",(0,n.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,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,n.jsx)(t.h3,{id:"examples",children:"Examples"}),"\n",(0,n.jsx)(t.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(t.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,n.jsxs)(t.admonition,{type:"tip",children:[(0,n.jsxs)(t.p,{children:["Jest will attempt to load ",(0,n.jsx)(t.strong,{children:"ESM"})," files from ",(0,n.jsx)(t.code,{children:"node_modules"})," with default ",(0,n.jsx)(t.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,n.jsx)(t.strong,{children:"ESM"})," built files or ",(0,n.jsx)(t.strong,{children:"ESM"})," files which are outside ",(0,n.jsx)(t.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,n.jsxs)(t.p,{children:["To fix that, one can use ",(0,n.jsx)(t.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,n.jsx)(t.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},425:(e,t,s)=>{s.d(t,{Z:()=>o});s(7294);var n=s(512);const r={tabItem:"tabItem_Ymn6"};var a=s(5893);function o(e){let{children:t,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.Z)(r.tabItem,o),hidden:s,children:t})}},3992:(e,t,s)=>{s.d(t,{Z:()=>w});var n=s(7294),r=s(512),a=s(2957),o=s(6550),i=s(1270),l=s(5238),u=s(3609),c=s(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(5893);function b(e){let{className:t,block:s,selectedValue:n,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:r}=e;const a=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,n.cloneElement)(e,{className:"margin-top--md"}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=f(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,s)=>{s.d(t,{Z:()=>i,a:()=>o});var n=s(7294);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/d9330f66.a9cc6b8e.js b/assets/js/d9330f66.a9cc6b8e.js new file mode 100644 index 0000000000..5bde6a76b7 --- /dev/null +++ b/assets/js/d9330f66.a9cc6b8e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2252],{2635:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>h,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var n=s(5893),r=s(1151),a=s(3992),o=s(425);const i={id:"esm-support",title:"ESM Support"},l=void 0,u={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["To use ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,n.jsx)(t.code,{children:"ts-jest"})," config option ",(0,n.jsx)(t.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["There is also a ",(0,n.jsx)(t.a,{href:"/jest-preset-angular/docs/13.0/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,n.jsx)(t.admonition,{type:"tip",children:(0,n.jsxs)(t.p,{children:["We have ",(0,n.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,n.jsxs)(t.p,{children:["Besides, there is ",(0,n.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,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-ts",children:"import 'jest-preset-angular/setup-jest.mjs';\n"})}),"\n",(0,n.jsx)(t.h3,{id:"examples",children:"Examples"}),"\n",(0,n.jsx)(t.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(t.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,n.jsxs)(t.admonition,{type:"tip",children:[(0,n.jsxs)(t.p,{children:["Jest will attempt to load ",(0,n.jsx)(t.strong,{children:"ESM"})," files from ",(0,n.jsx)(t.code,{children:"node_modules"})," with default ",(0,n.jsx)(t.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,n.jsx)(t.strong,{children:"ESM"})," built files or ",(0,n.jsx)(t.strong,{children:"ESM"})," files which are outside ",(0,n.jsx)(t.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,n.jsxs)(t.p,{children:["To fix that, one can use ",(0,n.jsx)(t.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,n.jsx)(t.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,n.jsx)(t.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,n.jsxs)(a.Z,{groupId:"code-examples",children:[(0,n.jsx)(o.Z,{value:"js",label:"JavaScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(o.Z,{value:"ts",label:"TypeScript",children:(0,n.jsx)(t.pre,{children:(0,n.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,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},425:(e,t,s)=>{s.d(t,{Z:()=>o});s(7294);var n=s(512);const r={tabItem:"tabItem_Ymn6"};var a=s(5893);function o(e){let{children:t,hidden:s,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.Z)(r.tabItem,o),hidden:s,children:t})}},3992:(e,t,s)=>{s.d(t,{Z:()=>w});var n=s(7294),r=s(512),a=s(2957),o=s(6550),i=s(1270),l=s(5238),u=s(3609),c=s(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=s(5893);function b(e){let{className:t,block:s,selectedValue:n,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,a.o5)(),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.Z)("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.Z)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function v(e){let{lazy:t,children:s,selectedValue:r}=e;const a=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,n.cloneElement)(e,{className:"margin-top--md"}):null}return(0,x.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function y(e){const t=f(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",j.tabList),children:[(0,x.jsx)(b,{...t,...e}),(0,x.jsx)(v,{...t,...e})]})}function w(e){const t=(0,g.Z)();return(0,x.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,s)=>{s.d(t,{Z:()=>i,a:()=>o});var n=s(7294);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/daab97c5.b6f09d8d.js b/assets/js/daab97c5.b6f09d8d.js new file mode 100644 index 0000000000..53ec8e0d66 --- /dev/null +++ b/assets/js/daab97c5.b6f09d8d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3939],{8268:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var o=s(5893),n=s(1151);const r={id:"processing",title:"Processing flow"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},a={},l=[];function d(e){const t={a:"a",code:"code",p:"p",...(0,n.a)(),...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 p(e={}){const{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>c,a:()=>i});var o=s(7294);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/daab97c5.d9c0485b.js b/assets/js/daab97c5.d9c0485b.js deleted file mode 100644 index b79c9acc83..0000000000 --- a/assets/js/daab97c5.d9c0485b.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3939],{8268:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>d,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var n=s(5893),o=s(1151);const r={id:"processing",title:"Processing flow"},i=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.1/processing.md",tags:[],version:"11.1",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,o.a)(),...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,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>c,a:()=>i});var n=s(7294);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/dd8b0175.e106ad6f.js b/assets/js/dd8b0175.e106ad6f.js deleted file mode 100644 index 8679380b93..0000000000 --- a/assets/js/dd8b0175.e106ad6f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3982],{12:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),o=n(3992),a=n(425);const i={id:"jsdom-version",title:"Configure other JSDOM versions"},l=void 0,u={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},c={},d=[];function m(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,r.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,r.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,r.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,r.jsxs)(o.Z,{groupId:"code-examples",children:[(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,r.jsx)(t.code,{children:"localStorage"})," or ",(0,r.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,r.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Reference: ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,r.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 p(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var o=n(5893);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,a),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),o=n(2957),a=n(6550),i=n(1270),l=n(5238),u=n(3609),c=n(1027);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 m(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.l)(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,a.k6)(),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._X)(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=m(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(!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: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.Nk)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return p({value:e,tabValues:o})?e:null})();(0,i.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!p({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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var r=n(7294);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/dd8b0175.f54af699.js b/assets/js/dd8b0175.f54af699.js new file mode 100644 index 0000000000..11bcdedcbb --- /dev/null +++ b/assets/js/dd8b0175.f54af699.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3982],{12:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),o=n(3992),a=n(425);const i={id:"jsdom-version",title:"Configure other JSDOM versions"},l=void 0,u={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:!1,unlisted:!1,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:1722455661e3,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"}},c={},d=[];function m(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,r.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,r.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,r.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,r.jsxs)(o.Z,{groupId:"code-examples",children:[(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,r.jsx)(t.code,{children:"localStorage"})," or ",(0,r.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,r.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Reference: ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,r.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 p(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var o=n(5893);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,a),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),o=n(2957),a=n(6550),i=n(1270),l=n(5238),u=n(3609),c=n(1027);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 m(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.l)(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,a.k6)(),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._X)(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=m(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(!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: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.Nk)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return p({value:e,tabValues:o})?e:null})();(0,i.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!p({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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var r=n(7294);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.521d6a2a.js b/assets/js/df70a34a.521d6a2a.js new file mode 100644 index 0000000000..2ee401c907 --- /dev/null +++ b/assets/js/df70a34a.521d6a2a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3789],{7841:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>a,contentTitle:()=>r,default:()=>u,frontMatter:()=>o,metadata:()=>l,toc:()=>c});var t=n(5893),i=n(1151);const o={id:"using-with-babel",title:"Using with Babel"},r=void 0,l={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:!1,unlisted:!1,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:1722455661e3,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"}},a={},c=[];function d(e){const s={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(s.p,{children:["If you wish to use ",(0,t.jsx)(s.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,t.jsxs)(s.ol,{children:["\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:["Install dependencies required by the official Jest documentation for ",(0,t.jsx)(s.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:["Install ",(0,t.jsx)(s.code,{children:"@babel/preset-env"})," and add ",(0,t.jsx)(s.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.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,t.jsxs)(s.p,{children:[(0,t.jsxs)(s.em,{children:["Note: do not use a ",(0,t.jsx)(s.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,t.jsx)(s.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,t.jsx)(s.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,t.jsxs)(s.ol,{start:"3",children:["\n",(0,t.jsx)(s.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,t.jsx)(s.pre,{children:(0,t.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,i.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>l,a:()=>r});var t=n(7294);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/df70a34a.d98d2333.js b/assets/js/df70a34a.d98d2333.js deleted file mode 100644 index 9468794fe7..0000000000 --- a/assets/js/df70a34a.d98d2333.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3789],{7841:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>a,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>r,toc:()=>c});var t=s(5893),i=s(1151);const o={id:"using-with-babel",title:"Using with Babel"},l=void 0,r={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},c=[];function d(e){const n={a:"a",code:"code",em:"em",li:"li",ol:"ol",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["If you wish to use ",(0,t.jsx)(n.code,{children:"Babel"}),", you need to say jest to transpile such files manually."]}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Install dependencies required by the official Jest documentation for ",(0,t.jsx)(n.a,{href:"https://jest-bot.github.io/jest/docs/babel.html",children:"Babel integration"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Install ",(0,t.jsx)(n.code,{children:"@babel/preset-env"})," and add ",(0,t.jsx)(n.code,{children:"babel.config.js"})," (or modify existing if needed) with the following content:"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.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,t.jsxs)(n.p,{children:[(0,t.jsxs)(n.em,{children:["Note: do not use a ",(0,t.jsx)(n.code,{children:".babelrc"})," file otherwise the packages that you specify in the next step will not be picked up. CF ",(0,t.jsx)(n.a,{href:"https://babeljs.io/docs/en/configuration#what-s-your-use-case",children:"Babel documentation"})," and the comment ",(0,t.jsx)(n.code,{children:"You want to compile node_modules? babel.config.js is for you!"})]}),"."]}),"\n",(0,t.jsxs)(n.ol,{start:"3",children:["\n",(0,t.jsx)(n.li,{children:"Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):"}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.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:n}={...(0,i.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>r,a:()=>l});var t=s(7294);const i={},o=t.createContext(i);function l(e){const n=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/dff5aaca.57eff886.js b/assets/js/dff5aaca.57eff886.js new file mode 100644 index 0000000000..749197b243 --- /dev/null +++ b/assets/js/dff5aaca.57eff886.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2895],{3599:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var r=s(5893),t=s(1151);const o={id:"troubleshooting",title:"Troubleshooting"},i=void 0,a={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/guides/troubleshooting",draft:!1,unlisted:!1,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:1722455661e3,frontMatter:{id:"troubleshooting",title:"Troubleshooting"},sidebar:"docs",previous:{title:"Absolute Imports",permalink:"/jest-preset-angular/docs/guides/absolute-imports"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nrequire('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// jestGlobalMocks.ts\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.\":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.jsx)(n.pre,{children:(0,r.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,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",children:"// setup-jest.ts\nwindow.$ = 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",children:"// setup-jest.ts\nimport $ 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,{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.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\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,{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,{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-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,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n resolver: '/src/jest.resolver.js',\n};\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.io/api/core/inject",children:"inject"})," instead of ",(0,r.jsx)(n.a,{href:"https://angular.io/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 h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>a,a:()=>i});var r=s(7294);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/dff5aaca.cb079aba.js b/assets/js/dff5aaca.cb079aba.js deleted file mode 100644 index 8781051a40..0000000000 --- a/assets/js/dff5aaca.cb079aba.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2895],{3599:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var r=s(5893),t=s(1151);const o={id:"troubleshooting",title:"Troubleshooting"},i=void 0,a={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/guides/troubleshooting",draft:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-14.2/guides/troubleshooting.md",tags:[],version:"14.2",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,frontMatter:{id:"troubleshooting",title:"Troubleshooting"},sidebar:"docs",previous:{title:"Absolute Imports",permalink:"/jest-preset-angular/docs/guides/absolute-imports"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// setup-jest.ts\nrequire('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// jestGlobalMocks.ts\nObject.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.\":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.jsx)(n.pre,{children:(0,r.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,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",children:"// setup-jest.ts\nwindow.$ = 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",children:"// setup-jest.ts\nimport $ 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,{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.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\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,{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,{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-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,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"// jest.config.js\nmodule.exports = {\n resolver: '/src/jest.resolver.js',\n};\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.io/api/core/inject",children:"inject"})," instead of ",(0,r.jsx)(n.a,{href:"https://angular.io/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 h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>a,a:()=>i});var r=s(7294);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.c13d6ed6.js b/assets/js/e0a3f9c8.c13d6ed6.js deleted file mode 100644 index e4a788abdf..0000000000 --- a/assets/js/e0a3f9c8.c13d6ed6.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3624],{5524:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>a,toc:()=>c});var n=t(5893),r=t(1151);const o={id:"esm-support",title:"ESM Support"},i=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.p,{children:["To use ",(0,n.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,n.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,n.jsxs)(s.p,{children:[(0,n.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,n.jsx)(s.code,{children:"ts-jest"})," config option ",(0,n.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,n.jsx)(s.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,n.jsxs)(s.p,{children:["There is also a ",(0,n.jsx)(s.a,{href:"/jest-preset-angular/docs/11.1/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,n.jsx)(s.admonition,{type:"tip",children:(0,n.jsxs)(s.p,{children:["We have ",(0,n.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,n.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,n.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.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,n.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,n.jsxs)(s.admonition,{type:"tip",children:[(0,n.jsxs)(s.p,{children:["Jest will attempt to load ",(0,n.jsx)(s.strong,{children:"ESM"})," files from ",(0,n.jsx)(s.code,{children:"node_modules"})," with default ",(0,n.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,n.jsx)(s.strong,{children:"ESM"})," built files or ",(0,n.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,n.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,n.jsxs)(s.p,{children:["To fix that, one can use ",(0,n.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,n.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,n.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.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.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},1151:(e,s,t)=>{t.d(s,{Z:()=>a,a:()=>i});var n=t(7294);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/e0a3f9c8.d07c3aab.js b/assets/js/e0a3f9c8.d07c3aab.js new file mode 100644 index 0000000000..ce89917b5b --- /dev/null +++ b/assets/js/e0a3f9c8.d07c3aab.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3624],{5524:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>i,default:()=>u,frontMatter:()=>r,metadata:()=>a,toc:()=>c});var n=t(5893),o=t(1151);const r={id:"esm-support",title:"ESM Support"},i=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},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.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.p,{children:["To use ",(0,n.jsx)(s.code,{children:"jest-preset-angular"})," with ESM support, you'll first need to check ",(0,n.jsx)(s.a,{href:"https://jestjs.io/docs/en/ecmascript-modules",children:"ESM Jest documentation"}),"."]}),"\n",(0,n.jsxs)(s.p,{children:[(0,n.jsx)(s.code,{children:"jest-preset-angular"})," supports ESM via a ",(0,n.jsx)(s.code,{children:"ts-jest"})," config option ",(0,n.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options/useESM",children:"useESM"})," in combination with jest config option ",(0,n.jsx)(s.a,{href:"https://jestjs.io/docs/en/configuration#extensionstotreatasesm-arraystring",children:"extensionsToTreatAsEsm"}),"."]}),"\n",(0,n.jsxs)(s.p,{children:["There is also a ",(0,n.jsx)(s.a,{href:"/jest-preset-angular/docs/11.1/getting-started/presets",children:"preset"})," to work with ESM."]}),"\n",(0,n.jsx)(s.admonition,{type:"tip",children:(0,n.jsxs)(s.p,{children:["We have ",(0,n.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,n.jsx)(s.h3,{id:"examples",children:"Examples"}),"\n",(0,n.jsx)(s.h4,{id:"manual-configuration",children:"Manual configuration"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.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,n.jsx)(s.h4,{id:"use-esm-presets",children:"Use ESM presets"}),"\n",(0,n.jsxs)(s.admonition,{type:"tip",children:[(0,n.jsxs)(s.p,{children:["Jest will attempt to load ",(0,n.jsx)(s.strong,{children:"ESM"})," files from ",(0,n.jsx)(s.code,{children:"node_modules"})," with default ",(0,n.jsx)(s.code,{children:"jest-resolve"})," which usually works for most of the cases.\nHowever, there are cases like Angular libraries ",(0,n.jsx)(s.strong,{children:"ESM"})," built files or ",(0,n.jsx)(s.strong,{children:"ESM"})," files which are outside ",(0,n.jsx)(s.code,{children:"node_modules"})," might not be loaded\ncorrectly."]}),(0,n.jsxs)(s.p,{children:["To fix that, one can use ",(0,n.jsx)(s.code,{children:"moduleNameMapper"})," in jest config to instruct Jest to load the correct ",(0,n.jsx)(s.strong,{children:"ESM"})," files or create a\ncustom Jest ",(0,n.jsx)(s.a,{href:"https://jestjs.io/docs/configuration#resolver-string",children:"resolver"}),"."]})]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.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,o.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},1151:(e,s,t)=>{t.d(s,{Z:()=>a,a:()=>i});var n=t(7294);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.99c5e76f.js b/assets/js/e1715838.99c5e76f.js new file mode 100644 index 0000000000..3be2afab06 --- /dev/null +++ b/assets/js/e1715838.99c5e76f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1748],{1793:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>u,frontMatter:()=>s,metadata:()=>c,toc:()=>d});var o=n(5893),r=n(1151);const s={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.a)(),...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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>i});var o=n(7294);const r={},s=o.createContext(r);function i(e){const t=o.useContext(s);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(r):e.components||r:i(e.components),o.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/e1715838.d1a74e47.js b/assets/js/e1715838.d1a74e47.js deleted file mode 100644 index 9069d16855..0000000000 --- a/assets/js/e1715838.d1a74e47.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1748],{1793:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>u,frontMatter:()=>r,metadata:()=>c,toc:()=>d});var s=n(5893),o=n(1151);const r={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},i=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/introduction.md",tags:[],version:"9.x",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.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,s.jsxs)(t.p,{children:["This is a part of the article: ",(0,s.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,s.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,s.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,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>i});var s=n(7294);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/ea131d77.6ed82487.js b/assets/js/ea131d77.6ed82487.js new file mode 100644 index 0000000000..93b59e5b4b --- /dev/null +++ b/assets/js/ea131d77.6ed82487.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2123],{9188:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>d,frontMatter:()=>n,metadata:()=>a,toc:()=>p});var o=s(5893),i=s(1151);const n={id:"absolute-imports",title:"Absolute Imports"},r=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings 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."]}),"\n",(0,o.jsxs)(t.p,{children:["More information see ",(0,o.jsx)(t.code,{children:"ts-jest"})," ",(0,o.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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>a,a:()=>r});var o=s(7294);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/ea131d77.76a320a3.js b/assets/js/ea131d77.76a320a3.js deleted file mode 100644 index 9eea48ff17..0000000000 --- a/assets/js/ea131d77.76a320a3.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2123],{9188:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>d,frontMatter:()=>n,metadata:()=>a,toc:()=>p});var o=s(5893),i=s(1151);const n={id:"absolute-imports",title:"Absolute Imports"},r=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},u={},p=[];function c(e){const t={a:"a",code:"code",p:"p",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["If you wish to use TypeScript path mappings 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."]}),"\n",(0,o.jsxs)(t.p,{children:["More information see ",(0,o.jsx)(t.code,{children:"ts-jest"})," ",(0,o.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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>a,a:()=>r});var o=s(7294);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.743834a1.js b/assets/js/eabdbf07.743834a1.js deleted file mode 100644 index 2d4080a304..0000000000 --- a/assets/js/eabdbf07.743834a1.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5255],{5044:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>d,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var n=s(5893),o=s(1151);const r={id:"processing",title:"Processing flow"},i=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/processing.md",tags:[],version:"current",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,o.a)(),...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,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>c,a:()=>i});var n=s(7294);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/eabdbf07.a7493047.js b/assets/js/eabdbf07.a7493047.js new file mode 100644 index 0000000000..cd2cc34afd --- /dev/null +++ b/assets/js/eabdbf07.a7493047.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5255],{5044:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>d,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var n=s(5893),o=s(1151);const r={id:"processing",title:"Processing flow"},i=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/processing.md",tags:[],version:"current",lastUpdatedBy:"renovate[bot]",lastUpdatedAt:1722455661e3,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"}},a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,o.a)(),...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,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>c,a:()=>i});var n=s(7294);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.088f975e.js b/assets/js/eae657ee.088f975e.js new file mode 100644 index 0000000000..4514599560 --- /dev/null +++ b/assets/js/eae657ee.088f975e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2014],{4404:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>r,metadata:()=>d,toc:()=>l});var t=n(5893),o=n(1151);const r={id:"options",title:"Options"},i=void 0,d={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:!1,unlisted:!1,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:1722455661e3,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"}},c={},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,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"jest-preset-angular"})," uses ",(0,t.jsx)(s.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,t.jsx)(s.code,{children:"globals"})," of Jest config object\nin the ",(0,t.jsx)(s.code,{children:"package.json"})," file of your project, or through a ",(0,t.jsx)(s.code,{children:"jest.config.js"}),", or ",(0,t.jsx)(s.code,{children:"jest.config.ts"})," file."]}),"\n",(0,t.jsxs)(s.p,{children:["More information about ",(0,t.jsx)(s.code,{children:"ts-jest"})," options, see ",(0,t.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,t.jsxs)(s.admonition,{type:"important",children:[(0,t.jsxs)(s.p,{children:["Since ",(0,t.jsx)(s.strong,{children:"v9.0.0"}),", ",(0,t.jsx)(s.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,t.jsx)(s.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,t.jsx)(s.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config"]}),(0,t.jsx)(s.pre,{children:(0,t.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,t.jsx)(s.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.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,t.jsx)(s.admonition,{type:"important",children:(0,t.jsxs)(s.p,{children:["Jest runs with ",(0,t.jsx)(s.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,t.jsx)(s.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,t.jsx)(s.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,t.jsx)(s.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["we're using some ",(0,t.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,t.jsx)(s.code,{children:"ts-jest"}),"."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,t.jsx)(s.code,{children:"ts"}),"), HTML (",(0,t.jsx)(s.code,{children:"html"}),"), JavaScript (",(0,t.jsx)(s.code,{children:"js"}),"), JSON (",(0,t.jsx)(s.code,{children:"json"}),") and ESM JavaScript (",(0,t.jsx)(s.code,{children:"mjs"}),") files."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.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,t.jsx)(s.code,{children:"RegExp"}),"."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,t.jsx)(s.code,{children:"package.json"})," definitions."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.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,t.jsx)(s.code,{children:"ng-reflect-*"}),", ",(0,t.jsx)(s.code,{children:'ng-version="*"'}),", ",(0,t.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,t.jsx)(s.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,t.jsx)(s.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,t.jsx)(s.code,{children:".mjs"})," files which come from ",(0,t.jsx)(s.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:'"transform"'})," \u2013 run every ",(0,t.jsx)(s.code,{children:"TS"}),", ",(0,t.jsx)(s.code,{children:"JS"}),", ",(0,t.jsx)(s.code,{children:"MJS"}),", ",(0,t.jsx)(s.code,{children:"HTML"}),", or ",(0,t.jsx)(s.code,{children:"SVG"})," file through so called ",(0,t.jsx)(s.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function h(e={}){const{wrapper:s}={...(0,o.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>d,a:()=>i});var t=n(7294);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 d(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/eae657ee.5eb1d7fa.js b/assets/js/eae657ee.5eb1d7fa.js deleted file mode 100644 index 2c009bcb50..0000000000 --- a/assets/js/eae657ee.5eb1d7fa.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2014],{4404:(e,s,n)=>{n.r(s),n.d(s,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>r,metadata:()=>d,toc:()=>l});var t=n(5893),o=n(1151);const r={id:"options",title:"Options"},i=void 0,d={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},c={},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,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.code,{children:"jest-preset-angular"})," uses ",(0,t.jsx)(s.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,t.jsx)(s.code,{children:"globals"})," of Jest config object\nin the ",(0,t.jsx)(s.code,{children:"package.json"})," file of your project, or through a ",(0,t.jsx)(s.code,{children:"jest.config.js"}),", or ",(0,t.jsx)(s.code,{children:"jest.config.ts"})," file."]}),"\n",(0,t.jsxs)(s.p,{children:["More information about ",(0,t.jsx)(s.code,{children:"ts-jest"})," options, see ",(0,t.jsx)(s.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,t.jsxs)(s.admonition,{type:"important",children:[(0,t.jsxs)(s.p,{children:["Since ",(0,t.jsx)(s.strong,{children:"v9.0.0"}),", ",(0,t.jsx)(s.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,t.jsx)(s.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,t.jsx)(s.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config"]}),(0,t.jsx)(s.pre,{children:(0,t.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,t.jsx)(s.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.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,t.jsx)(s.admonition,{type:"important",children:(0,t.jsxs)(s.p,{children:["Jest runs with ",(0,t.jsx)(s.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,t.jsx)(s.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,t.jsx)(s.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,t.jsx)(s.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["we're using some ",(0,t.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,t.jsx)(s.code,{children:"ts-jest"}),"."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,t.jsx)(s.code,{children:"ts"}),"), HTML (",(0,t.jsx)(s.code,{children:"html"}),"), JavaScript (",(0,t.jsx)(s.code,{children:"js"}),"), JSON (",(0,t.jsx)(s.code,{children:"json"}),") and ESM JavaScript (",(0,t.jsx)(s.code,{children:"mjs"}),") files."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.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,t.jsx)(s.code,{children:"RegExp"}),"."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,t.jsx)(s.code,{children:"package.json"})," definitions."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.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,t.jsx)(s.code,{children:"ng-reflect-*"}),", ",(0,t.jsx)(s.code,{children:'ng-version="*"'}),", ",(0,t.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,t.jsx)(s.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,t.jsx)(s.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,t.jsx)(s.code,{children:".mjs"})," files which come from ",(0,t.jsx)(s.code,{children:"node_modules"}),"."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:'"transform"'})," \u2013 run every ",(0,t.jsx)(s.code,{children:"TS"}),", ",(0,t.jsx)(s.code,{children:"JS"}),", ",(0,t.jsx)(s.code,{children:"MJS"}),", ",(0,t.jsx)(s.code,{children:"HTML"}),", or ",(0,t.jsx)(s.code,{children:"SVG"})," file through so called ",(0,t.jsx)(s.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function h(e={}){const{wrapper:s}={...(0,o.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}},1151:(e,s,n)=>{n.d(s,{Z:()=>d,a:()=>i});var t=n(7294);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 d(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.002523fb.js b/assets/js/ebf39289.002523fb.js new file mode 100644 index 0000000000..a05d2022b1 --- /dev/null +++ b/assets/js/ebf39289.002523fb.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6419],{3341:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>c,toc:()=>u});var s=t(5893),r=t(1151),o=t(3992),i=t(425);const a={id:"options",title:"Options"},l=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,s.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,s.jsx)(n.code,{children:"transform"})," of Jest config object\nin the ",(0,s.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,s.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,s.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,s.jsxs)(n.p,{children:["More information about ",(0,s.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,s.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,s.jsxs)(n.admonition,{type:"important",children:[(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,s.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,s.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]}),(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,s.jsx)(n.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,s.jsx)(n.code,{children:".mjs"})," files\nwill be processed by ",(0,s.jsx)(n.code,{children:"esbuild"})," in ",(0,s.jsx)(n.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,s.jsx)(n.code,{children:"esbuild"}),", one can do the following:"]}),(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.admonition,{type:"important",children:(0,s.jsxs)(n.p,{children:["Jest runs with ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,s.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,s.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,s.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["We're using ",(0,s.jsx)(n.code,{children:'"transform"'})," to pass information about configuration to use for code compilation with ",(0,s.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,s.jsx)(n.code,{children:"ts"}),"), HTML (",(0,s.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,s.jsx)(n.code,{children:"js"}),"), JSON (",(0,s.jsx)(n.code,{children:"json"}),") and ESM JavaScript (",(0,s.jsx)(n.code,{children:"mjs"}),") files."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.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,s.jsx)(n.code,{children:"RegExp"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,s.jsx)(n.code,{children:"package.json"})," definitions."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.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,s.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,s.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,s.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,s.jsx)(n.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,s.jsx)(n.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,s.jsx)(n.code,{children:".mjs"})," files which come from ",(0,s.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,s.jsx)(n.code,{children:"TS"}),", ",(0,s.jsx)(n.code,{children:"JS"}),", ",(0,s.jsx)(n.code,{children:"MJS"}),", ",(0,s.jsx)(n.code,{children:"HTML"}),", or ",(0,s.jsx)(n.code,{children:"SVG"})," file through so called ",(0,s.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},425:(e,n,t)=>{t.d(n,{Z:()=>i});t(7294);var s=t(512);const r={tabItem:"tabItem_Ymn6"};var o=t(5893);function i(e){let{children:n,hidden:t,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,i),hidden:t,children:n})}},3992:(e,n,t)=>{t.d(n,{Z:()=>w});var s=t(7294),r=t(512),o=t(2957),i=t(6550),a=t(1270),l=t(5238),c=t(3609),d=t(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=t(5893);function b(e){let{className:n,block:t,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,o?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:r}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):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!==r})))})}function y(e){const n=g(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function w(e){const n=(0,m.Z)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(n))}},1151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>i});var s=t(7294);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/ebf39289.2b8550a9.js b/assets/js/ebf39289.2b8550a9.js deleted file mode 100644 index 45a3a4ec67..0000000000 --- a/assets/js/ebf39289.2b8550a9.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6419],{3341:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>c,toc:()=>u});var s=t(5893),r=t(1151),o=t(3992),i=t(425);const a={id:"options",title:"Options"},l=void 0,c={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,s.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,s.jsx)(n.code,{children:"transform"})," of Jest config object\nin the ",(0,s.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,s.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,s.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,s.jsxs)(n.p,{children:["More information about ",(0,s.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,s.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,s.jsxs)(n.admonition,{type:"important",children:[(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,s.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,s.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]}),(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,s.jsx)(n.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,s.jsx)(n.code,{children:".mjs"})," files\nwill be processed by ",(0,s.jsx)(n.code,{children:"esbuild"})," in ",(0,s.jsx)(n.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,s.jsx)(n.code,{children:"esbuild"}),", one can do the following:"]}),(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.admonition,{type:"important",children:(0,s.jsxs)(n.p,{children:["Jest runs with ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,s.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,s.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,s.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["We're using ",(0,s.jsx)(n.code,{children:'"transform"'})," to pass information about configuration to use for code compilation with ",(0,s.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,s.jsx)(n.code,{children:"ts"}),"), HTML (",(0,s.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,s.jsx)(n.code,{children:"js"}),"), JSON (",(0,s.jsx)(n.code,{children:"json"}),") and ESM JavaScript (",(0,s.jsx)(n.code,{children:"mjs"}),") files."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.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,s.jsx)(n.code,{children:"RegExp"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,s.jsx)(n.code,{children:"package.json"})," definitions."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.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,s.jsx)(n.code,{children:"ng-reflect-*"}),", ",(0,s.jsx)(n.code,{children:'ng-version="*"'}),", ",(0,s.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,s.jsx)(n.code,{children:"no-ng-attributes"})," serializer. You need to add ",(0,s.jsx)(n.code,{children:"no-ng-attributes"})," serializer manually."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,s.jsx)(n.code,{children:".mjs"})," files which come from ",(0,s.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,s.jsx)(n.code,{children:"TS"}),", ",(0,s.jsx)(n.code,{children:"JS"}),", ",(0,s.jsx)(n.code,{children:"MJS"}),", ",(0,s.jsx)(n.code,{children:"HTML"}),", or ",(0,s.jsx)(n.code,{children:"SVG"})," file through so called ",(0,s.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},425:(e,n,t)=>{t.d(n,{Z:()=>i});t(7294);var s=t(512);const r={tabItem:"tabItem_Ymn6"};var o=t(5893);function i(e){let{children:n,hidden:t,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,i),hidden:t,children:n})}},3992:(e,n,t)=>{t.d(n,{Z:()=>w});var s=t(7294),r=t(512),o=t(2957),i=t(6550),a=t(1270),l=t(5238),c=t(3609),d=t(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=t(5893);function b(e){let{className:n,block:t,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",f.tabItem,o?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:r}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):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!==r})))})}function y(e){const n=g(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function w(e){const n=(0,m.Z)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(n))}},1151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>i});var s=t(7294);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.5da4bf7f.js b/assets/js/ec1d9510.5da4bf7f.js new file mode 100644 index 0000000000..bcf33db1b0 --- /dev/null +++ b/assets/js/ec1d9510.5da4bf7f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4293],{5986:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var r=s(5893),t=s(1151);const o={id:"troubleshooting",title:"Troubleshooting"},i=void 0,a={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:!1,unlisted:!1,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:1722455661e3,frontMatter:{id:"troubleshooting",title:"Troubleshooting"},sidebar:"docs",previous:{title:"Absolute Imports",permalink:"/jest-preset-angular/docs/11.0/guides/absolute-imports"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"Object.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.\":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.jsx)(n.pre,{children:(0,r.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,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-js",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-js",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,{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.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\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,{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,{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-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,r.jsx)(n.pre,{children:(0,r.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,t.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>a,a:()=>i});var r=s(7294);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/ec1d9510.ada7a598.js b/assets/js/ec1d9510.ada7a598.js deleted file mode 100644 index dc441e0839..0000000000 --- a/assets/js/ec1d9510.ada7a598.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4293],{5986:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var r=s(5893),t=s(1151);const o={id:"troubleshooting",title:"Troubleshooting"},i=void 0,a={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/guides/troubleshooting.md",tags:[],version:"11.0",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,frontMatter:{id:"troubleshooting",title:"Troubleshooting"},sidebar:"docs",previous:{title:"Absolute Imports",permalink:"/jest-preset-angular/docs/11.0/guides/absolute-imports"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"Object.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.\":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.jsx)(n.pre,{children:(0,r.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,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-js",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-js",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,{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.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\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,{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,{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-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,r.jsx)(n.pre,{children:(0,r.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,t.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>a,a:()=>i});var r=s(7294);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/ecfacc56.0c06863c.js b/assets/js/ecfacc56.0c06863c.js deleted file mode 100644 index 728477b031..0000000000 --- a/assets/js/ecfacc56.0c06863c.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9897],{5849:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>d,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var n=s(5893),o=s(1151);const r={id:"processing",title:"Processing flow"},i=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-11.0/processing.md",tags:[],version:"11.0",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,o.a)(),...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,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>c,a:()=>i});var n=s(7294);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/ecfacc56.56baedab.js b/assets/js/ecfacc56.56baedab.js new file mode 100644 index 0000000000..5e310430cd --- /dev/null +++ b/assets/js/ecfacc56.56baedab.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9897],{5849:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var o=s(5893),n=s(1151);const r={id:"processing",title:"Processing flow"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},a={},l=[];function d(e){const t={a:"a",code:"code",p:"p",...(0,n.a)(),...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 p(e={}){const{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>c,a:()=>i});var o=s(7294);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.9767ef0e.js b/assets/js/ef2f3ccd.9767ef0e.js new file mode 100644 index 0000000000..07d42cb890 --- /dev/null +++ b/assets/js/ef2f3ccd.9767ef0e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6584],{8723:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>c,toc:()=>u});var s=t(5893),r=t(1151),o=t(3992),i=t(425);const a={id:"options",title:"Options"},l=void 0,c={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/getting-started/options",draft:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,s.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,s.jsx)(n.code,{children:"transform"})," of Jest config object\nin the ",(0,s.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,s.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,s.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,s.jsxs)(n.p,{children:["More information about ",(0,s.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,s.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,s.jsxs)(n.admonition,{type:"important",children:[(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,s.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,s.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]}),(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,s.jsx)(n.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,s.jsx)(n.code,{children:".mjs"})," files\nwill be processed by ",(0,s.jsx)(n.code,{children:"esbuild"})," in ",(0,s.jsx)(n.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,s.jsx)(n.code,{children:"esbuild"}),", one can do the following:"]}),(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.admonition,{type:"important",children:(0,s.jsxs)(n.p,{children:["Jest runs with ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,s.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,s.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,s.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["We're using ",(0,s.jsx)(n.code,{children:'"transform"'})," to pass information about configuration to use for code compilation with ",(0,s.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,s.jsx)(n.code,{children:"ts"}),"), HTML (",(0,s.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,s.jsx)(n.code,{children:"js"}),"), JSON (",(0,s.jsx)(n.code,{children:"json"}),") and ESM JavaScript (",(0,s.jsx)(n.code,{children:"mjs"}),") files."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.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,s.jsx)(n.code,{children:"RegExp"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,s.jsx)(n.code,{children:"package.json"})," definitions."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. See more in ",(0,s.jsx)(n.a,{href:"/jest-preset-angular/docs/guides/snapshot-testing",children:"Snapshot testing"})]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,s.jsx)(n.code,{children:".mjs"})," files which come from ",(0,s.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,s.jsx)(n.code,{children:"TS"}),", ",(0,s.jsx)(n.code,{children:"JS"}),", ",(0,s.jsx)(n.code,{children:"MJS"}),", ",(0,s.jsx)(n.code,{children:"HTML"}),", or ",(0,s.jsx)(n.code,{children:"SVG"})," file through so called ",(0,s.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},425:(e,n,t)=>{t.d(n,{Z:()=>i});t(7294);var s=t(512);const r={tabItem:"tabItem_Ymn6"};var o=t(5893);function i(e){let{children:n,hidden:t,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,i),hidden:t,children:n})}},3992:(e,n,t)=>{t.d(n,{Z:()=>w});var s=t(7294),r=t(512),o=t(2957),i=t(6550),a=t(1270),l=t(5238),c=t(3609),d=t(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=t(5893);function b(e){let{className:n,block:t,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",m.tabItem,o?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:r}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):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!==r})))})}function y(e){const n=f(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",m.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function w(e){const n=(0,g.Z)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(n))}},1151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>i});var s=t(7294);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/ef2f3ccd.c3d9a2cf.js b/assets/js/ef2f3ccd.c3d9a2cf.js deleted file mode 100644 index 935988aed4..0000000000 --- a/assets/js/ef2f3ccd.c3d9a2cf.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6584],{8723:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>c,toc:()=>u});var s=t(5893),r=t(1151),o=t(3992),i=t(425);const a={id:"options",title:"Options"},l=void 0,c={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/getting-started/options",draft:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"jest-preset-angular"})," uses ",(0,s.jsx)(n.code,{children:"ts-jest"})," options under the hood, which are located under the ",(0,s.jsx)(n.code,{children:"transform"})," of Jest config object\nin the ",(0,s.jsx)(n.code,{children:"package.json"})," file of your project, or through a ",(0,s.jsx)(n.code,{children:"jest.config.js"}),", or ",(0,s.jsx)(n.code,{children:"jest.config.ts"})," file."]}),"\n",(0,s.jsxs)(n.p,{children:["More information about ",(0,s.jsx)(n.code,{children:"ts-jest"})," options, see ",(0,s.jsx)(n.a,{href:"https://kulshekhar.github.io/ts-jest/docs/getting-started/options",children:"doc"})]}),"\n",(0,s.jsxs)(n.admonition,{type:"important",children:[(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v9.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," default Jest configuration no longer provides ",(0,s.jsx)(n.code,{children:"moduleNameMapper"}),". If you wish to reuse\nthe old ",(0,s.jsx)(n.code,{children:"moduleNameMapper"})," configuration, you can put this into your Jest config."]}),(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"processing-with-esbuild",children:"Processing with esbuild"}),(0,s.jsxs)(n.p,{children:["Since ",(0,s.jsx)(n.strong,{children:"v11.0.0"}),", ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," introduced the usage of ",(0,s.jsx)(n.code,{children:"esbuild"})," to process files besides TypeScript API. By default, all ",(0,s.jsx)(n.code,{children:".mjs"})," files\nwill be processed by ",(0,s.jsx)(n.code,{children:"esbuild"})," in ",(0,s.jsx)(n.code,{children:"jest-preset-angular"}),". To configure extra files to process with ",(0,s.jsx)(n.code,{children:"esbuild"}),", one can do the following:"]}),(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.h3,{id:"exposed-configuration",children:"Exposed configuration"}),"\n",(0,s.jsxs)(o.Z,{groupId:"code-examples",children:[(0,s.jsx)(i.Z,{value:"js",label:"JavaScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(i.Z,{value:"ts",label:"TypeScript",children:(0,s.jsx)(n.pre,{children:(0,s.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,s.jsx)(n.admonition,{type:"important",children:(0,s.jsxs)(n.p,{children:["Jest runs with ",(0,s.jsx)(n.code,{children:"jest-preset-angular"})," neither in browser nor through dev server. It uses ",(0,s.jsx)(n.code,{children:"JSDOM"})," to abstract browser environment hence we depend on\n",(0,s.jsx)(n.code,{children:"JSDOM"})," implementation for real browser features."]})}),"\n",(0,s.jsx)(n.h3,{id:"brief-explanation-of-config",children:"Brief explanation of config"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["We're using ",(0,s.jsx)(n.code,{children:'"transform"'})," to pass information about configuration to use for code compilation with ",(0,s.jsx)(n.code,{children:"ts-jest"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"moduleFileExtensions"'})," \u2013 our modules are TypeScript (",(0,s.jsx)(n.code,{children:"ts"}),"), HTML (",(0,s.jsx)(n.code,{children:"html"}),"), JavaScript (",(0,s.jsx)(n.code,{children:"js"}),"), JSON (",(0,s.jsx)(n.code,{children:"json"}),") and ESM JavaScript (",(0,s.jsx)(n.code,{children:"mjs"}),") files."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.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,s.jsx)(n.code,{children:"RegExp"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"resolver"'})," - instruct Jest how to resolve entry file based on ",(0,s.jsx)(n.code,{children:"package.json"})," definitions."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"snapshotSerializers"'})," - array of serializers which will be applied to snapshot the code. See more in ",(0,s.jsx)(n.a,{href:"/jest-preset-angular/docs/guides/snapshot-testing",children:"Snapshot testing"})]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"testEnvironment"'})," \u2013 the test environment to run on."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transformIgnorePatterns"'}),": instruct Jest to transform any ",(0,s.jsx)(n.code,{children:".mjs"})," files which come from ",(0,s.jsx)(n.code,{children:"node_modules"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:'"transform"'})," \u2013 run every ",(0,s.jsx)(n.code,{children:"TS"}),", ",(0,s.jsx)(n.code,{children:"JS"}),", ",(0,s.jsx)(n.code,{children:"MJS"}),", ",(0,s.jsx)(n.code,{children:"HTML"}),", or ",(0,s.jsx)(n.code,{children:"SVG"})," file through so called ",(0,s.jsx)(n.em,{children:"Jest transformer"}),"; this lets Jest understand non-JS syntax."]}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},425:(e,n,t)=>{t.d(n,{Z:()=>i});t(7294);var s=t(512);const r={tabItem:"tabItem_Ymn6"};var o=t(5893);function i(e){let{children:n,hidden:t,className:i}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,s.Z)(r.tabItem,i),hidden:t,children:n})}},3992:(e,n,t)=>{t.d(n,{Z:()=>w});var s=t(7294),r=t(512),o=t(2957),i=t(6550),a=t(1270),l=t(5238),c=t(3609),d=t(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var x=t(5893);function b(e){let{className:n,block:t,selectedValue:s,selectValue:i,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",m.tabItem,o?.className,{"tabs__item--active":s===n}),children:t??n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:r}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===r));return e?(0,s.cloneElement)(e,{className:"margin-top--md"}):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!==r})))})}function y(e){const n=f(e);return(0,x.jsxs)("div",{className:(0,r.Z)("tabs-container",m.tabList),children:[(0,x.jsx)(b,{...n,...e}),(0,x.jsx)(v,{...n,...e})]})}function w(e){const n=(0,g.Z)();return(0,x.jsx)(y,{...e,children:u(e.children)},String(n))}},1151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>i});var s=t(7294);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.4bb3bd2e.js b/assets/js/f0447160.4bb3bd2e.js deleted file mode 100644 index 854b264959..0000000000 --- a/assets/js/f0447160.4bb3bd2e.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7894],{7261:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),o=n(3992),a=n(425);const i={id:"jsdom-version",title:"Configure other JSDOM versions"},l=void 0,u={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},c={},d=[];function m(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,r.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,r.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,r.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,r.jsxs)(o.Z,{groupId:"code-examples",children:[(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,r.jsx)(t.code,{children:"localStorage"})," or ",(0,r.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,r.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Reference: ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,r.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 p(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var o=n(5893);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,a),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),o=n(2957),a=n(6550),i=n(1270),l=n(5238),u=n(3609),c=n(1027);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 m(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.l)(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,a.k6)(),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._X)(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=m(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(!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: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.Nk)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return p({value:e,tabValues:o})?e:null})();(0,i.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!p({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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var r=n(7294);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/f0447160.edd46138.js b/assets/js/f0447160.edd46138.js new file mode 100644 index 0000000000..077fdc6277 --- /dev/null +++ b/assets/js/f0447160.edd46138.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7894],{7261:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),o=n(3992),a=n(425);const i={id:"jsdom-version",title:"Configure other JSDOM versions"},l=void 0,u={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:!1,unlisted:!1,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:1722455661e3,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"}},c={},d=[];function m(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,r.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,r.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,r.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,r.jsxs)(o.Z,{groupId:"code-examples",children:[(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,r.jsx)(t.code,{children:"localStorage"})," or ",(0,r.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,r.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Reference: ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,r.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 p(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var o=n(5893);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,a),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),o=n(2957),a=n(6550),i=n(1270),l=n(5238),u=n(3609),c=n(1027);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 m(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.l)(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,a.k6)(),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._X)(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=m(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(!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: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.Nk)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return p({value:e,tabValues:o})?e:null})();(0,i.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!p({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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var r=n(7294);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.712f464f.js b/assets/js/f14ecac0.712f464f.js new file mode 100644 index 0000000000..dfb7b5ca0b --- /dev/null +++ b/assets/js/f14ecac0.712f464f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3653],{8258:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>u,frontMatter:()=>s,metadata:()=>c,toc:()=>d});var o=n(5893),r=n(1151);const s={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,r.a)(),...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.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>i});var o=n(7294);const r={},s=o.createContext(r);function i(e){const t=o.useContext(s);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(r):e.components||r:i(e.components),o.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f14ecac0.cf465321.js b/assets/js/f14ecac0.cf465321.js deleted file mode 100644 index b4171be64a..0000000000 --- a/assets/js/f14ecac0.cf465321.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3653],{8258:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>u,frontMatter:()=>r,metadata:()=>c,toc:()=>d});var s=n(5893),o=n(1151);const r={id:"introduction",title:"Introduction",description:"Jest preset configuration for Angular projects.",slug:"/"},i=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/introduction.md",tags:[],version:"12.0",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},d=[];function l(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",strong:"strong",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(t.p,{children:[(0,s.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,s.jsxs)(t.p,{children:["This is a part of the article: ",(0,s.jsx)(t.a,{href:"https://www.xfive.co/blog/testing-angular-faster-jest/",children:"Testing Angular faster with Jest"}),"."]}),"\n",(0,s.jsx)(t.admonition,{type:"important",children:(0,s.jsxs)(t.p,{children:["Starting from ",(0,s.jsx)(t.strong,{children:"v9.0.0"}),", we follow closely native ",(0,s.jsx)(t.code,{children:"Karma + Jasmine"})," implementation which is default provided by\n",(0,s.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,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>i});var s=n(7294);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.bcc02d9d.js b/assets/js/f3212b1e.bcc02d9d.js new file mode 100644 index 0000000000..19ff5d29bf --- /dev/null +++ b/assets/js/f3212b1e.bcc02d9d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3963],{7722:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),o=n(3992),a=n(425);const i={id:"jsdom-version",title:"Configure other JSDOM versions"},l=void 0,u={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:!1,unlisted:!1,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:1722455661e3,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"}},c={},d=[];function m(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,r.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,r.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,r.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,r.jsxs)(o.Z,{groupId:"code-examples",children:[(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,r.jsx)(t.code,{children:"localStorage"})," or ",(0,r.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,r.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Reference: ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,r.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 p(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var o=n(5893);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,a),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),o=n(2957),a=n(6550),i=n(1270),l=n(5238),u=n(3609),c=n(1027);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 m(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.l)(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,a.k6)(),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._X)(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=m(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(!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: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.Nk)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return p({value:e,tabValues:o})?e:null})();(0,i.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!p({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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var r=n(7294);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/f3212b1e.cb661cbd.js b/assets/js/f3212b1e.cb661cbd.js deleted file mode 100644 index e469b86fd4..0000000000 --- a/assets/js/f3212b1e.cb661cbd.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3963],{7722:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var r=n(5893),s=n(1151),o=n(3992),a=n(425);const i={id:"jsdom-version",title:"Configure other JSDOM versions"},l=void 0,u={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},c={},d=[];function m(e){const t={a:"a",code:"code",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Jest"})," v26+ by default uses ",(0,r.jsx)(t.strong,{children:"JSDOM"})," 16 to support Node 10+."]}),"\n",(0,r.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,r.jsx)(t.code,{children:"jest-environment-jsdom-sixteen"})," and edit your Jest config like so:"]}),"\n",(0,r.jsxs)(o.Z,{groupId:"code-examples",children:[(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n"})})}),(0,r.jsx)(a.Z,{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 testEnvironment: 'jest-environment-jsdom-sixteen',\n};\n\nexport default jestConfig;\n"})})})]}),"\n",(0,r.jsxs)(t.p,{children:["If you use JSDOM v11 or lower, you might have to mock ",(0,r.jsx)(t.code,{children:"localStorage"})," or ",(0,r.jsx)(t.code,{children:"sessionStorage"})," on your own or using some third-party library by loading it in ",(0,r.jsx)(t.code,{children:"setupFilesAfterEnv"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Reference: ",(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/en/configuration.html#testenvironment-string",children:"https://jestjs.io/docs/en/configuration.html#testenvironment-string"}),", ",(0,r.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 p(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var o=n(5893);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,a),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),o=n(2957),a=n(6550),i=n(1270),l=n(5238),u=n(3609),c=n(1027);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 m(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.l)(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,a.k6)(),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._X)(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=m(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(!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: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.Nk)(n);return[s,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:s}),g=(()=>{const e=u??f;return p({value:e,tabValues:o})?e:null})();(0,i.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!p({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(1048);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.o5)(),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.Z)("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.Z)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:s}=e;const o=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=f(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(x,{...t,...e})]})}function w(e){const t=(0,b.Z)();return(0,v.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>a});var r=n(7294);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.9e81cfca.js b/assets/js/f43def45.9e81cfca.js deleted file mode 100644 index afd96f861d..0000000000 --- a/assets/js/f43def45.9e81cfca.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4479],{5722:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>g,frontMatter:()=>o,metadata:()=>i,toc:()=>d});var r=n(5893),a=n(1151),s=n(3992),l=n(425);const o={id:"angular-ivy",title:"Angular Ivy"},u=void 0,i={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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+"}},c={},d=[];function p(e){const t={code:"code",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.a)(),...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 a Jest ",(0,r.jsx)(t.code,{children:"global-setup.js"})," file to help you to run ",(0,r.jsx)(t.code,{children:"ngcc"})," with Jest. Add to 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)(s.Z,{groupId:"code-examples",children:[(0,r.jsx)(l.Z,{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 globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,r.jsx)(l.Z,{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-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,a.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var r=n(512);const a={tabItem:"tabItem_Ymn6"};var s=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,r.Z)(a.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),a=n(512),s=n(2957),l=n(6550),o=n(1270),u=n(5238),i=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const u=[],{blockElementScrollPositionUntilNextRender:i}=(0,s.o5)(),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.Z)("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.Z)("tabs__item",b.tabItem,s?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function y(e){let{lazy:t,children:n,selectedValue:a}=e;const s=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=s.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:s.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function x(e){const t=h(e);return(0,v.jsxs)("div",{className:(0,a.Z)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(y,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,v.jsx)(x,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var r=n(7294);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/f43def45.fb3623ed.js b/assets/js/f43def45.fb3623ed.js new file mode 100644 index 0000000000..b81c72f4c4 --- /dev/null +++ b/assets/js/f43def45.fb3623ed.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4479],{5722:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>g,frontMatter:()=>o,metadata:()=>i,toc:()=>d});var r=n(5893),a=n(1151),s=n(3992),l=n(425);const o={id:"angular-ivy",title:"Angular Ivy"},u=void 0,i={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:!1,unlisted:!1,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:1722455661e3,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+"}},c={},d=[];function p(e){const t={code:"code",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.a)(),...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 a Jest ",(0,r.jsx)(t.code,{children:"global-setup.js"})," file to help you to run ",(0,r.jsx)(t.code,{children:"ngcc"})," with Jest. Add to 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)(s.Z,{groupId:"code-examples",children:[(0,r.jsx)(l.Z,{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 globalSetup: 'jest-preset-angular/global-setup',\n};\n"})})}),(0,r.jsx)(l.Z,{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-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,a.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var r=n(512);const a={tabItem:"tabItem_Ymn6"};var s=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,r.Z)(a.tabItem,l),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),a=n(512),s=n(2957),l=n(6550),o=n(1270),u=n(5238),i=n(3609),c=n(1027);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.l)(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.k6)(),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._X)(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.Nk)(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.Z)((()=>{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(1048);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:o}=e;const u=[],{blockElementScrollPositionUntilNextRender:i}=(0,s.o5)(),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.Z)("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.Z)("tabs__item",b.tabItem,s?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function y(e){let{lazy:t,children:n,selectedValue:a}=e;const s=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=s.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:s.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function x(e){const t=h(e);return(0,v.jsxs)("div",{className:(0,a.Z)("tabs-container",b.tabList),children:[(0,v.jsx)(j,{...t,...e}),(0,v.jsx)(y,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,v.jsx)(x,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>l});var r=n(7294);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.47b61bdc.js b/assets/js/f546eb96.47b61bdc.js deleted file mode 100644 index 05e2d9bb0c..0000000000 --- a/assets/js/f546eb96.47b61bdc.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1197],{1100:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>d,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var n=s(5893),o=s(1151);const r={id:"processing",title:"Processing flow"},i=void 0,c={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-9.x/processing.md",tags:[],version:"9.x",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},a={},l=[];function p(e){const t={a:"a",code:"code",p:"p",...(0,o.a)(),...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,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>c,a:()=>i});var n=s(7294);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/f546eb96.7898739f.js b/assets/js/f546eb96.7898739f.js new file mode 100644 index 0000000000..b9c119ca90 --- /dev/null +++ b/assets/js/f546eb96.7898739f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1197],{1100:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>r,metadata:()=>c,toc:()=>l});var o=s(5893),n=s(1151);const r={id:"processing",title:"Processing flow"},i=void 0,c={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:!1,unlisted:!1,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:1722455661e3,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"}},a={},l=[];function d(e){const t={a:"a",code:"code",p:"p",...(0,n.a)(),...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 p(e={}){const{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>c,a:()=>i});var o=s(7294);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.3bb46acd.js b/assets/js/f97daad0.3bb46acd.js deleted file mode 100644 index bf508e727d..0000000000 --- a/assets/js/f97daad0.3bb46acd.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4887],{2108:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>i,default:()=>u,frontMatter:()=>r,metadata:()=>a,toc:()=>p});var n=s(5893),o=s(1151);const r={id:"absolute-imports",title:"Absolute Imports"},i=void 0,a={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},d={},p=[];function c(e){const t={admonition:"admonition",code:"code",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["TypeScript supports absolute imports. The preset (starting from v3.0.0) by default understands absolute imports referring to ",(0,n.jsx)(t.code,{children:"src"}),", ",(0,n.jsx)(t.code,{children:"app"}),", ",(0,n.jsx)(t.code,{children:"assets"})," and ",(0,n.jsx)(t.code,{children:"environments"})," directory, so instead:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-ts",children:"import MyComponent from '../../src/app/my.component';\nimport MyStuff from '../../src/testing/my.stuff';\n"})}),"\n",(0,n.jsx)(t.p,{children:"you can use:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-ts",children:"import MyComponent from 'app/my.component';\nimport MyStuff from 'src/testing/my.stuff';\n"})}),"\n",(0,n.jsxs)(t.p,{children:["However, if your directory structure differ from that provided by ",(0,n.jsx)(t.code,{children:"angular-cli"})," you can adjust ",(0,n.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(t.admonition,{type:"important",children:(0,n.jsxs)(t.p,{children:["If you wish to use any absolute import paths 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"]})})]})}function u(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>a,a:()=>i});var n=s(7294);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/f97daad0.bd72656e.js b/assets/js/f97daad0.bd72656e.js new file mode 100644 index 0000000000..23765255e4 --- /dev/null +++ b/assets/js/f97daad0.bd72656e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4887],{2108:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>i,default:()=>u,frontMatter:()=>r,metadata:()=>a,toc:()=>p});var n=s(5893),o=s(1151);const r={id:"absolute-imports",title:"Absolute Imports"},i=void 0,a={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:!1,unlisted:!1,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:1722455661e3,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"}},d={},p=[];function c(e){const t={admonition:"admonition",code:"code",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["TypeScript supports absolute imports. The preset (starting from v3.0.0) by default understands absolute imports referring to ",(0,n.jsx)(t.code,{children:"src"}),", ",(0,n.jsx)(t.code,{children:"app"}),", ",(0,n.jsx)(t.code,{children:"assets"})," and ",(0,n.jsx)(t.code,{children:"environments"})," directory, so instead:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-ts",children:"import MyComponent from '../../src/app/my.component';\nimport MyStuff from '../../src/testing/my.stuff';\n"})}),"\n",(0,n.jsx)(t.p,{children:"you can use:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-ts",children:"import MyComponent from 'app/my.component';\nimport MyStuff from 'src/testing/my.stuff';\n"})}),"\n",(0,n.jsxs)(t.p,{children:["However, if your directory structure differ from that provided by ",(0,n.jsx)(t.code,{children:"angular-cli"})," you can adjust ",(0,n.jsx)(t.code,{children:"moduleNameMapper"})," in Jest config:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(t.admonition,{type:"important",children:(0,n.jsxs)(t.p,{children:["If you wish to use any absolute import paths 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"]})})]})}function u(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>a,a:()=>i});var n=s(7294);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.d20cef2c.js b/assets/js/fa9f2ace.d20cef2c.js new file mode 100644 index 0000000000..b4af1aeef6 --- /dev/null +++ b/assets/js/fa9f2ace.d20cef2c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1005],{9844:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>d,toc:()=>l});var n=s(5893),r=s(1151);const o={id:"presets",title:"Presets"},i=void 0,d={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:!1,unlisted:!1,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:1722455661e3,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"}},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,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Preset name"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,n.jsx)("br",{}),"or ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,n.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,n.jsx)(t.code,{children:"js"}),", ",(0,n.jsx)(t.code,{children:".ts"}),", ",(0,n.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,n.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,n.jsx)("br",{})]}),(0,n.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,n.jsx)(t.code,{children:"js"}),", ",(0,n.jsx)(t.code,{children:".ts"}),", ",(0,n.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,n.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,n.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,n.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,n.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,n.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,n.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,n.jsxs)(t.p,{children:["All presets come with default ",(0,n.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,n.jsx)(t.admonition,{type:"important",children:(0,n.jsxs)(t.p,{children:["If you choose to override ",(0,n.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,n.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,n.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,n.jsxs)(t.p,{children:["Or through TypeScript (if ",(0,n.jsx)(t.code,{children:"ts-node"})," is installed):"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>d,a:()=>i});var n=s(7294);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/fa9f2ace.e0021ea7.js b/assets/js/fa9f2ace.e0021ea7.js deleted file mode 100644 index f724ba3c1f..0000000000 --- a/assets/js/fa9f2ace.e0021ea7.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1005],{9844:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>i,default:()=>p,frontMatter:()=>o,metadata:()=>d,toc:()=>l});var n=s(5893),r=s(1151);const o={id:"presets",title:"Presets"},i=void 0,d={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:!1,unlisted:!1,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:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h3,{id:"the-presets",children:"The presets"}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular"})," comes with 2 presets, covering most of the project's base configuration:"]}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{children:"Preset name"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular/presets/default"}),(0,n.jsx)("br",{}),"or ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})]}),(0,n.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,n.jsx)(t.code,{children:"js"}),", ",(0,n.jsx)(t.code,{children:".ts"}),", ",(0,n.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,n.jsx)(t.strong,{children:"CommonJS"})," syntax."]})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsxs)(t.td,{children:[(0,n.jsx)(t.code,{children:"jest-preset-angular/presets/defaults-esm"}),(0,n.jsx)("br",{})]}),(0,n.jsxs)(t.td,{children:["TypeScript, JavaScript and HTML files (",(0,n.jsx)(t.code,{children:"js"}),", ",(0,n.jsx)(t.code,{children:".ts"}),", ",(0,n.jsx)(t.code,{children:".html"}),") will be transformed by ",(0,n.jsx)(t.code,{children:"jest-preset-angular"})," to ",(0,n.jsx)(t.strong,{children:"ESM"})," syntax."]})]})]})]}),"\n",(0,n.jsx)(t.h3,{id:"basic-usage",children:"Basic usage"}),"\n",(0,n.jsxs)(t.p,{children:["In most cases, simply setting the ",(0,n.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,n.jsx)(t.code,{children:"jest-preset-angular"})," to your ",(0,n.jsx)(t.code,{children:"devDependencies"})," of course):"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,n.jsx)(t.h3,{id:"advanced",children:"Advanced"}),"\n",(0,n.jsxs)(t.p,{children:["All presets come with default ",(0,n.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,n.jsx)(t.admonition,{type:"important",children:(0,n.jsxs)(t.p,{children:["If you choose to override ",(0,n.jsx)(t.code,{children:"globals"})," in order to point at a specific tsconfig, you will need to make sure that original ",(0,n.jsx)(t.code,{children:"ts-jest"}),"\noptions provided through the default preset are defined to the ",(0,n.jsx)(t.code,{children:"globals.ts-jest"})," section too, otherwise you will get\nerrors."]})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,n.jsxs)(t.p,{children:["Or through TypeScript (if ",(0,n.jsx)(t.code,{children:"ts-node"})," is installed):"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.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,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},1151:(e,t,s)=>{s.d(t,{Z:()=>d,a:()=>i});var n=s(7294);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/fc80686b.03be4d54.js b/assets/js/fc80686b.03be4d54.js deleted file mode 100644 index ee087c16cf..0000000000 --- a/assets/js/fc80686b.03be4d54.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1752],{7174:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>l,metadata:()=>c,toc:()=>d});var r=n(5893),s=n(1151),a=n(3992),o=n(425);const l={id:"presets",title:"Presets"},i=void 0,c={id:"getting-started/presets",title:"Presets",description:"The presets",source:"@site/docs/getting-started/presets.md",sourceDirName:"getting-started",slug:"/getting-started/presets",permalink:"/jest-preset-angular/docs/next/getting-started/presets",draft:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/getting-started/presets.md",tags:[],version:"current",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,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"}},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,s.a)(),...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)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(o.Z,{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)(o.Z,{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)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(o.Z,{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)(o.Z,{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,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>o});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var a=n(5893);function o(e){let{children:t,hidden:n,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,o),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),a=n(2957),o=n(6550),l=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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 s=(0,o.k6)(),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._X)(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 g(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(!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 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}),[g,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,u.Nk)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),j=(()=>{const e=c??g;return h({value:e,tabValues:a})?e:null})();(0,l.Z)((()=>{j&&i(j)}),[j]);return{selectedValue:o,selectValue:(0,r.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(1048);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:r,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),s=l[n].value;s!==r&&(c(t),o(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,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.Z)("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:r===t?0:-1,"aria-selected":r===t,ref:e=>i.push(e),onKeyDown:d,onClick:u,...a,className:(0,s.Z)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:s}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,s.Z)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>l,a:()=>o});var r=n(7294);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/fc80686b.0a73bf84.js b/assets/js/fc80686b.0a73bf84.js new file mode 100644 index 0000000000..c94c665333 --- /dev/null +++ b/assets/js/fc80686b.0a73bf84.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1752],{7174:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>h,frontMatter:()=>l,metadata:()=>c,toc:()=>d});var r=n(5893),s=n(1151),a=n(3992),o=n(425);const l={id:"presets",title:"Presets"},i=void 0,c={id:"getting-started/presets",title:"Presets",description:"The presets",source:"@site/docs/getting-started/presets.md",sourceDirName:"getting-started",slug:"/getting-started/presets",permalink:"/jest-preset-angular/docs/next/getting-started/presets",draft:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/docs/getting-started/presets.md",tags:[],version:"current",lastUpdatedBy:"renovate[bot]",lastUpdatedAt:1722455661e3,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"}},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,s.a)(),...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)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(o.Z,{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)(o.Z,{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)(a.Z,{groupId:"code-examples",children:[(0,r.jsx)(o.Z,{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)(o.Z,{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,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},425:(e,t,n)=>{n.d(t,{Z:()=>o});n(7294);var r=n(512);const s={tabItem:"tabItem_Ymn6"};var a=n(5893);function o(e){let{children:t,hidden:n,className:o}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.Z)(s.tabItem,o),hidden:n,children:t})}},3992:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),s=n(512),a=n(2957),o=n(6550),l=n(1270),i=n(5238),c=n(3609),u=n(1027);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.l)(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 s=(0,o.k6)(),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._X)(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 g(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(!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 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}),[g,m]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,u.Nk)(n);return[s,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:s}),j=(()=>{const e=c??g;return h({value:e,tabValues:a})?e:null})();(0,l.Z)((()=>{j&&i(j)}),[j]);return{selectedValue:o,selectValue:(0,r.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(1048);const j={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function x(e){let{className:t,block:n,selectedValue:r,selectValue:o,tabValues:l}=e;const i=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),u=e=>{const t=e.currentTarget,n=i.indexOf(t),s=l[n].value;s!==r&&(c(t),o(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,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.Z)("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:r===t?0:-1,"aria-selected":r===t,ref:e=>i.push(e),onKeyDown:d,onClick:u,...a,className:(0,s.Z)("tabs__item",j.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function v(e){let{lazy:t,children:n,selectedValue:s}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function y(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,s.Z)("tabs-container",j.tabList),children:[(0,b.jsx)(x,{...t,...e}),(0,b.jsx)(v,{...t,...e})]})}function w(e){const t=(0,m.Z)();return(0,b.jsx)(y,{...e,children:d(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>l,a:()=>o});var r=n(7294);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/fea96f18.977c34d3.js b/assets/js/fea96f18.977c34d3.js new file mode 100644 index 0000000000..d7b03a474d --- /dev/null +++ b/assets/js/fea96f18.977c34d3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6347],{2687:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var r=s(5893),t=s(1151);const o={id:"troubleshooting",title:"Troubleshooting"},i=void 0,a={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:!1,unlisted:!1,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:1722455661e3,frontMatter:{id:"troubleshooting",title:"Troubleshooting"},sidebar:"docs",previous:{title:"Absolute Imports",permalink:"/jest-preset-angular/docs/12.0/guides/absolute-imports"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"Object.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.\":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.jsx)(n.pre,{children:(0,r.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,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-js",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-js",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,{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.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\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,{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,{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-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,r.jsx)(n.pre,{children:(0,r.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,t.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>a,a:()=>i});var r=s(7294);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/fea96f18.e3c618a0.js b/assets/js/fea96f18.e3c618a0.js deleted file mode 100644 index e1c24fdb67..0000000000 --- a/assets/js/fea96f18.e3c618a0.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6347],{2687:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>d});var r=s(5893),t=s(1151);const o={id:"troubleshooting",title:"Troubleshooting"},i=void 0,a={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:!1,unlisted:!1,editUrl:"https://github.com/thymikee/jest-preset-angular/edit/main/website/versioned_docs/version-12.0/guides/troubleshooting.md",tags:[],version:"12.0",lastUpdatedBy:"ahnpnl",lastUpdatedAt:1722435819e3,frontMatter:{id:"troubleshooting",title:"Troubleshooting"},sidebar:"docs",previous:{title:"Absolute Imports",permalink:"/jest-preset-angular/docs/12.0/guides/absolute-imports"}},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,t.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["You can check Jest ",(0,r.jsx)(n.a,{href:"https://jestjs.io/docs/en/troubleshooting",children:"troubleshooting guide"})]}),"\n",(0,r.jsx)(n.h2,{id:"common-issues",children:"Common issues"}),"\n",(0,r.jsxs)(n.p,{children:["Problems may arise if you're using custom builds (this preset is tailored for ",(0,r.jsx)(n.code,{children:"angular-cli"})," as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs."]}),"\n",(0,r.jsx)(n.h3,{id:"cant-resolve-all-parameters-for-someclass",children:"Can't resolve all parameters for SomeClass(?)"}),"\n",(0,r.jsxs)(n.p,{children:["With Angular 8 and higher, a ",(0,r.jsx)(n.a,{href:"https://github.com/thymikee/jest-preset-angular/issues/288",children:"change to the way the Angular CLI works"})," may be causing your metadata to be lost. You can update your ",(0,r.jsx)(n.code,{children:"tsconfig.spec.json"})," to include the ",(0,r.jsx)(n.code,{children:"emitDecoratorMetadata"})," compiler option:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:' "compilerOptions": {\n "emitDecoratorMetadata": true\n'})}),"\n",(0,r.jsxs)(n.p,{children:["In general, this is related to Angular's reflection and also depends on a reflection library, as e. g. included in ",(0,r.jsx)(n.code,{children:"core-js"}),". We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install ",(0,r.jsx)(n.code,{children:"core-js"})," and import the reflection library in your ",(0,r.jsx)(n.code,{children:"setup-jest.ts"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-typescript",children:"require('core-js/es/reflect');\nrequire('core-js/proposals/reflect-metadata');\n"})}),"\n",(0,r.jsx)(n.p,{children:"Note that this might also be related to other issues with the dependency injection and parameter type reflection."}),"\n",(0,r.jsxs)(n.h3,{id:"input-bindings-are-not-reflected-into-fixture-when-changedetectionstrategyonpush-is-used",children:["@Input() bindings are not reflected into fixture when ",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.OnPush"})," is used"]}),"\n",(0,r.jsxs)(n.p,{children:["This issue is not related to Jest, ",(0,r.jsx)(n.a,{href:"https://github.com/angular/angular/issues/12313",children:"it's a known Angular bug"})]}),"\n",(0,r.jsxs)(n.p,{children:["To mitigate this, you need to wrap your component under test, into some container component with default change detection strategy (",(0,r.jsx)(n.code,{children:"ChangeDetectionStrategy.Default"}),") and pass props through it, or overwrite change detection strategy within ",(0,r.jsx)(n.code,{children:"TestBed"})," setup, if it's not critical for the test."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"// override change detection strategy\nbeforeEach(async(() => {\n TestBed.configureTestingModule({ declarations: [PizzaItemComponent] })\n .overrideComponent(PizzaItemComponent, {\n set: { changeDetection: ChangeDetectionStrategy.Default },\n })\n .compileComponents();\n}));\n"})}),"\n",(0,r.jsx)(n.h3,{id:"the-animation-trigger-transformmenu-has-failed",children:'The animation trigger "transformMenu" has failed'}),"\n",(0,r.jsx)(n.p,{children:"The currently used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround."}),"\n",(0,r.jsxs)(n.p,{children:["Add this to your ",(0,r.jsx)(n.code,{children:"jestGlobalMocks"})," file"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"Object.defineProperty(document.body.style, 'transform', {\n value: () => {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n});\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Reference: ",(0,r.jsx)(n.a,{href:"https://github.com/angular/material2/issues/7101",children:"https://github.com/angular/material2/issues/7101"})]}),"\n",(0,r.jsx)(n.h3,{id:"unexpected-token-importexportother",children:"Unexpected token [import|export|other]"}),"\n",(0,r.jsxs)(n.p,{children:["This means, that a file is not transformed through ",(0,r.jsx)(n.code,{children:"TypeScript"})," compiler, e.g. because it is a ",(0,r.jsx)(n.code,{children:"JS"})," file with ",(0,r.jsx)(n.code,{children:"TS"})," syntax, or\nit is published to npm as uncompiled source files. Here's what you can do. A typical Jest error is like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"({\"Object.\":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.jsx)(n.pre,{children:(0,r.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,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-js",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-js",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,{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.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"// jest.config.js\nmodule.exports = {\n globals: {\n 'ts-jest': {\n //...\n babelConfig: true\n }\n }\n}\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,{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,{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-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,r.jsx)(n.pre,{children:(0,r.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,t.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},1151:(e,n,s)=>{s.d(n,{Z:()=>a,a:()=>i});var r=s(7294);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.d6e35175.js b/assets/js/main.89705972.js similarity index 95% rename from assets/js/main.d6e35175.js rename to assets/js/main.89705972.js index c568dba28d..a5e3609bda 100644 --- a/assets/js/main.d6e35175.js +++ b/assets/js/main.89705972.js @@ -1,2 +1,2 @@ -/*! For license information please see main.d6e35175.js.LICENSE.txt */ -(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[179],{830:(e,t,n)=>{"use strict";n.d(t,{W:()=>a});var r=n(7294);function a(){return r.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},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"}))}},997:(e,t,n)=>{"use strict";n.d(t,{Z:()=>p});n(7294);var r=n(8356),a=n.n(r),o=n(6887);const s={"029bedf1":[()=>n.e(7785).then(n.bind(n,8221)),"@site/versioned_docs/version-11.1/guides/using-with-babel.md",8221],"02a1e558":[()=>Promise.all([n.e(532),n.e(4407)]).then(n.bind(n,1861)),"@site/versioned_docs/version-8.x/getting-started/installation.md",1861],"03be7dae":[()=>n.e(7729).then(n.bind(n,3948)),"@site/docs/guides/troubleshooting.md",3948],"04ae74d1":[()=>Promise.all([n.e(532),n.e(8677)]).then(n.bind(n,8428)),"@site/versioned_docs/version-12.0/getting-started/presets.md",8428],"04b3fc6c":[()=>n.e(6925).then(n.bind(n,4588)),"@site/versioned_docs/version-10.x/getting-started/presets.md",4588],"05916282":[()=>n.e(4331).then(n.bind(n,8977)),"@site/versioned_docs/version-14.0/guides/absolute-imports.md",8977],"0d71a3f1":[()=>n.e(9574).then(n.bind(n,323)),"@site/versioned_docs/version-9.x/getting-started/test-environment.md",323],"0dc350cc":[()=>Promise.all([n.e(532),n.e(7801)]).then(n.bind(n,8978)),"@site/versioned_docs/version-14.0/guides/jsdom-version.md",8978],"0e35f71d":[()=>Promise.all([n.e(532),n.e(4828)]).then(n.bind(n,1297)),"@site/versioned_docs/version-12.0/guides/using-with-babel.md",1297],"13973f06":[()=>n.e(4188).then(n.bind(n,9088)),"@site/versioned_docs/version-12.0/processing.md",9088],"1438ea8f":[()=>Promise.all([n.e(532),n.e(2839)]).then(n.bind(n,1119)),"@site/versioned_docs/version-14.2/guides/jsdom-version.md",1119],"14b133ce":[()=>Promise.all([n.e(532),n.e(7993)]).then(n.bind(n,5168)),"@site/docs/guides/angular-ivy.md",5168],"151633a5":[()=>n.e(6371).then(n.bind(n,4697)),"@site/versioned_docs/version-11.0/introduction.md",4697],17896441:[()=>Promise.all([n.e(532),n.e(7918)]).then(n.bind(n,7021)),"@theme/DocItem",7021],"1a421168":[()=>n.e(7119).then(n.bind(n,829)),"@site/docs/getting-started/test-environment.md",829],"1a4e3797":[()=>Promise.all([n.e(532),n.e(7920)]).then(n.bind(n,7988)),"@theme/SearchPage",7988],"1a5572f6":[()=>Promise.all([n.e(532),n.e(2769)]).then(n.bind(n,8603)),"@site/versioned_docs/version-14.0/guides/angular-ivy.md",8603],"1df93b7f":[()=>Promise.all([n.e(532),n.e(3237)]).then(n.bind(n,5810)),"@site/src/pages/index.tsx",5810],"1e388ac9":[()=>Promise.all([n.e(532),n.e(157)]).then(n.bind(n,6802)),"@site/versioned_docs/version-14.2/getting-started/presets.md",6802],"203fc93e":[()=>Promise.all([n.e(532),n.e(5590)]).then(n.bind(n,6577)),"@site/versioned_docs/version-14.2/guides/angular-ivy.md",6577],"22e4d634":[()=>n.e(6122).then(n.bind(n,7863)),"@site/versioned_docs/version-10.x/guides/troubleshooting.md",7863],"252e2b80":[()=>n.e(9254).then(n.bind(n,9355)),"@site/versioned_docs/version-10.x/getting-started/options.md",9355],"25e9e857":[()=>n.e(9565).then(n.t.bind(n,1113,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-next-3ad.json",1113],"26cb42b7":[()=>Promise.all([n.e(532),n.e(7079)]).then(n.bind(n,3405)),"@site/versioned_docs/version-14.0/guides/esm-support.md",3405],"27299a3b":[()=>Promise.all([n.e(532),n.e(4993)]).then(n.bind(n,6436)),"@site/versioned_docs/version-9.x/getting-started/installation.md",6436],"29d26392":[()=>n.e(7552).then(n.bind(n,6366)),"@site/versioned_docs/version-11.1/getting-started/presets.md",6366],"2ab18ce5":[()=>n.e(2590).then(n.bind(n,2413)),"@site/versioned_docs/version-14.2/introduction.md",2413],"2ae17008":[()=>n.e(6550).then(n.bind(n,2543)),"@site/versioned_docs/version-8.x/guides/esm-support.md",2543],"2e81e74f":[()=>Promise.all([n.e(532),n.e(1753)]).then(n.bind(n,1130)),"@site/versioned_docs/version-13.0/guides/angular-ivy.md",1130],30388853:[()=>n.e(2965).then(n.bind(n,2037)),"@site/versioned_docs/version-13.0/processing.md",2037],"33a5adb4":[()=>Promise.all([n.e(532),n.e(3351),n.e(1591)]).then(n.bind(n,2153)),"@site/versioned_docs/version-14.2/guides/snapshot-testing.md",2153],"388d3430":[()=>Promise.all([n.e(532),n.e(851)]).then(n.bind(n,1723)),"@site/versioned_docs/version-14.0/guides/angular-13+.md",1723],"3c7caf67":[()=>Promise.all([n.e(532),n.e(4979)]).then(n.bind(n,5210)),"@site/versioned_docs/version-14.2/getting-started/installation.md",5210],"407f8801":[()=>Promise.all([n.e(532),n.e(6682)]).then(n.bind(n,2881)),"@site/versioned_docs/version-9.x/guides/jsdom-version.md",2881],"433cefd8":[()=>Promise.all([n.e(532),n.e(7906)]).then(n.bind(n,7075)),"@site/versioned_docs/version-12.0/guides/angular-ivy.md",7075],"4351d34b":[()=>Promise.all([n.e(532),n.e(7021)]).then(n.bind(n,7031)),"@site/docs/guides/jsdom-version.md",7031],"44b4d73b":[()=>Promise.all([n.e(532),n.e(5867)]).then(n.bind(n,9837)),"@site/versioned_docs/version-13.0/guides/angular-13+.md",9837],"47c825a2":[()=>Promise.all([n.e(532),n.e(8562)]).then(n.bind(n,4769)),"@site/docs/guides/using-with-babel.md",4769],"47cccd8d":[()=>n.e(6018).then(n.bind(n,209)),"@site/versioned_docs/version-12.0/guides/absolute-imports.md",209],"48dd39e2":[()=>Promise.all([n.e(532),n.e(9664)]).then(n.bind(n,6185)),"@site/versioned_docs/version-12.0/getting-started/options.md",6185],"494f4f5e":[()=>n.e(5665).then(n.bind(n,7887)),"@site/versioned_docs/version-10.x/guides/angular-ivy.md",7887],"4b3f866b":[()=>Promise.all([n.e(532),n.e(8380)]).then(n.bind(n,5182)),"@site/versioned_docs/version-14.2/guides/esm-support.md",5182],"4e0c07c5":[()=>Promise.all([n.e(532),n.e(7791)]).then(n.bind(n,3513)),"@site/docs/getting-started/options.md",3513],"51d67042":[()=>n.e(2465).then(n.bind(n,4133)),"@site/versioned_docs/version-11.0/guides/using-with-babel.md",4133],54071611:[()=>Promise.all([n.e(532),n.e(9783)]).then(n.bind(n,5071)),"@site/versioned_docs/version-10.x/getting-started/installation.md",5071],"54f44165":[()=>Promise.all([n.e(532),n.e(152)]).then(n.bind(n,4646)),"@site/docs/getting-started/installation.md",4646],"5635425a":[()=>n.e(7478).then(n.bind(n,4258)),"@site/versioned_docs/version-9.x/guides/esm-support.md",4258],"56acf0ae":[()=>Promise.all([n.e(532),n.e(7225)]).then(n.bind(n,8929)),"@site/versioned_docs/version-13.0/guides/jsdom-version.md",8929],"58f4fbf7":[()=>n.e(1445).then(n.t.bind(n,7770,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-8-x-495.json",7770],"5ae6b2db":[()=>n.e(3294).then(n.bind(n,8815)),"@site/versioned_docs/version-11.1/introduction.md",8815],"5b125e0e":[()=>Promise.all([n.e(532),n.e(9960)]).then(n.bind(n,7033)),"@site/docs/guides/angular-13+.md",7033],"5b1cb890":[()=>Promise.all([n.e(532),n.e(9775)]).then(n.bind(n,1424)),"@site/versioned_docs/version-13.0/getting-started/presets.md",1424],"5d23d50c":[()=>n.e(2615).then(n.t.bind(n,5795,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-12-0-4a9.json",5795],"5e95c892":[()=>n.e(9661).then(n.bind(n,4942)),"@theme/DocsRoot",4942],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,6809)),"@generated/docusaurus.config",6809],"5ee9d842":[()=>n.e(3145).then(n.bind(n,1557)),"@site/versioned_docs/version-11.1/getting-started/test-environment.md",1557],"5f85402d":[()=>Promise.all([n.e(532),n.e(1430)]).then(n.bind(n,6071)),"@site/versioned_docs/version-12.0/getting-started/installation.md",6071],"6059e070":[()=>Promise.all([n.e(532),n.e(813)]).then(n.bind(n,7145)),"@site/versioned_docs/version-13.0/getting-started/installation.md",7145],"6266f1ba":[()=>n.e(8116).then(n.bind(n,1561)),"@site/versioned_docs/version-8.x/getting-started/options.md",1561],"63150b11":[()=>n.e(3263).then(n.bind(n,7447)),"@site/versioned_docs/version-9.x/getting-started/options.md",7447],"651850eb":[()=>n.e(9188).then(n.bind(n,9912)),"@site/versioned_docs/version-8.x/introduction.md",9912],"6608151e":[()=>n.e(407).then(n.bind(n,4683)),"@site/versioned_docs/version-10.x/introduction.md",4683],68240572:[()=>Promise.all([n.e(532),n.e(3351),n.e(4732)]).then(n.bind(n,4557)),"@site/docs/guides/snapshot-testing.md",4557],"68e3f1d5":[()=>Promise.all([n.e(532),n.e(1803)]).then(n.bind(n,3524)),"@site/versioned_docs/version-12.0/guides/angular-13+.md",3524],"6916680a":[()=>Promise.all([n.e(532),n.e(6997)]).then(n.bind(n,8288)),"@site/versioned_docs/version-11.0/getting-started/installation.md",8288],"6a6dcee7":[()=>n.e(9195).then(n.bind(n,544)),"@site/versioned_docs/version-14.2/getting-started/test-environment.md",544],"6d1ddfa7":[()=>n.e(1398).then(n.bind(n,7329)),"@site/versioned_docs/version-13.0/guides/absolute-imports.md",7329],"6f809103":[()=>Promise.all([n.e(532),n.e(6e3)]).then(n.bind(n,2034)),"@site/versioned_docs/version-14.0/guides/using-with-babel.md",2034],"710ad8a9":[()=>Promise.all([n.e(532),n.e(1131)]).then(n.bind(n,2038)),"@site/versioned_docs/version-11.0/guides/jsdom-version.md",2038],"72f058d3":[()=>n.e(1688).then(n.bind(n,4073)),"@site/versioned_docs/version-8.x/guides/troubleshooting.md",4073],"732c3ce9":[()=>n.e(862).then(n.bind(n,4633)),"@site/versioned_docs/version-13.0/getting-started/test-environment.md",4633],"79ea3e73":[()=>n.e(4911).then(n.bind(n,3092)),"@site/versioned_docs/version-9.x/getting-started/presets.md",3092],"7aeeadd4":[()=>n.e(2125).then(n.bind(n,1448)),"@site/versioned_docs/version-8.x/getting-started/test-environment.md",1448],"7d7dbec2":[()=>n.e(4716).then(n.t.bind(n,6659,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-9-x-465.json",6659],"80b4c599":[()=>n.e(1071).then(n.bind(n,2368)),"@site/versioned_docs/version-12.0/getting-started/test-environment.md",2368],"85e14910":[()=>Promise.all([n.e(532),n.e(1253)]).then(n.bind(n,4783)),"@site/versioned_docs/version-14.0/getting-started/installation.md",4783],"8665e647":[()=>Promise.all([n.e(532),n.e(7983)]).then(n.bind(n,1307)),"@site/versioned_docs/version-11.1/getting-started/installation.md",1307],"8afa1348":[()=>n.e(2623).then(n.bind(n,7597)),"@site/versioned_docs/version-10.x/processing.md",7597],"8b263414":[()=>n.e(5223).then(n.bind(n,255)),"@site/versioned_docs/version-11.0/guides/angular-ivy.md",255],"9251a350":[()=>n.e(5565).then(n.bind(n,715)),"@site/versioned_docs/version-11.0/guides/esm-support.md",715],"93f0793d":[()=>n.e(2151).then(n.bind(n,5310)),"@site/versioned_docs/version-9.x/guides/using-with-babel.md",5310],"9798ce17":[()=>Promise.all([n.e(532),n.e(2798)]).then(n.bind(n,5770)),"@site/versioned_docs/version-14.0/getting-started/presets.md",5770],"9903dc99":[()=>n.e(3008).then(n.bind(n,3166)),"@site/versioned_docs/version-8.x/guides/angular-ivy.md",3166],"9a2fa73a":[()=>Promise.all([n.e(532),n.e(4166)]).then(n.bind(n,6625)),"@site/versioned_docs/version-13.0/guides/using-with-babel.md",6625],"9bc9e25c":[()=>n.e(5781).then(n.bind(n,1354)),"@site/versioned_docs/version-13.0/introduction.md",1354],"9d48492b":[()=>n.e(9104).then(n.bind(n,4213)),"@site/versioned_docs/version-14.0/getting-started/test-environment.md",4213],"9fc1d339":[()=>n.e(1917).then(n.bind(n,8359)),"@site/versioned_docs/version-11.1/guides/troubleshooting.md",8359],a09c2993:[()=>n.e(4128).then(n.bind(n,9273)),"@site/docs/introduction.md",9273],a389e28e:[()=>Promise.all([n.e(532),n.e(2472)]).then(n.bind(n,9993)),"@site/versioned_docs/version-12.0/guides/esm-support.md",9993],a7456010:[()=>n.e(5980).then(n.t.bind(n,9365,19)),"@generated/docusaurus-plugin-content-pages/default/__plugin.json",9365],a74b641e:[()=>n.e(879).then(n.bind(n,9504)),"@site/versioned_docs/version-9.x/guides/absolute-imports.md",9504],a7bd4aaa:[()=>n.e(8518).then(n.bind(n,604)),"@theme/DocVersionRoot",604],a7d61b99:[()=>Promise.all([n.e(532),n.e(5172)]).then(n.bind(n,6149)),"@site/versioned_docs/version-12.0/guides/jsdom-version.md",6149],a89007e0:[()=>Promise.all([n.e(532),n.e(2174)]).then(n.bind(n,9240)),"@site/versioned_docs/version-14.2/guides/angular-13+.md",9240],a94703ab:[()=>Promise.all([n.e(532),n.e(4368)]).then(n.bind(n,3699)),"@theme/DocRoot",3699],a9789633:[()=>n.e(1175).then(n.bind(n,5763)),"@site/versioned_docs/version-9.x/guides/troubleshooting.md",5763],aa079c8b:[()=>Promise.all([n.e(532),n.e(3334)]).then(n.bind(n,4042)),"@site/versioned_docs/version-13.0/getting-started/options.md",4042],aad144a3:[()=>n.e(1086).then(n.bind(n,1728)),"@site/versioned_docs/version-11.1/guides/angular-13+.md",1728],aba21aa0:[()=>n.e(3629).then(n.t.bind(n,1765,19)),"@generated/docusaurus-plugin-content-docs/default/__plugin.json",1765],adb64ee2:[()=>n.e(4757).then(n.bind(n,3667)),"@site/versioned_docs/version-8.x/processing.md",3667],afba4106:[()=>n.e(229).then(n.bind(n,4170)),"@site/versioned_docs/version-11.0/getting-started/test-environment.md",4170],b2161dc5:[()=>n.e(7496).then(n.bind(n,9527)),"@site/versioned_docs/version-14.0/processing.md",9527],b4c5bdfe:[()=>n.e(8610).then(n.bind(n,2648)),"@site/versioned_docs/version-14.2/processing.md",2648],b647df5a:[()=>n.e(336).then(n.bind(n,8172)),"@site/versioned_docs/version-8.x/guides/using-with-babel.md",8172],b83f237d:[()=>n.e(7256).then(n.bind(n,4289)),"@site/versioned_docs/version-14.2/guides/absolute-imports.md",4289],bb70b9c8:[()=>n.e(3964).then(n.t.bind(n,6404,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-3da.json",6404],c00c612c:[()=>n.e(2194).then(n.bind(n,6687)),"@site/versioned_docs/version-10.x/getting-started/test-environment.md",6687],c141421f:[()=>n.e(1004).then(n.t.bind(n,1324,19)),"@generated/docusaurus-theme-search-algolia/default/__plugin.json",1324],c1865e7c:[()=>n.e(6182).then(n.t.bind(n,5050,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-14-0-33f.json",5050],c1bdbc58:[()=>n.e(1075).then(n.bind(n,3281)),"@site/versioned_docs/version-14.0/introduction.md",3281],c44fa306:[()=>n.e(1631).then(n.bind(n,4069)),"@site/versioned_docs/version-8.x/getting-started/presets.md",4069],c49413db:[()=>n.e(8058).then(n.bind(n,1657)),"@site/versioned_docs/version-10.x/guides/esm-support.md",1657],c4ba122c:[()=>Promise.all([n.e(532),n.e(9002)]).then(n.bind(n,1948)),"@site/versioned_docs/version-14.2/guides/using-with-babel.md",1948],c62dfc48:[()=>n.e(1337).then(n.bind(n,8480)),"@site/versioned_docs/version-14.0/guides/troubleshooting.md",8480],c7279284:[()=>n.e(9932).then(n.bind(n,7243)),"@site/versioned_docs/version-11.0/getting-started/options.md",7243],c9f7f11b:[()=>n.e(2043).then(n.t.bind(n,3378,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-10-x-ab5.json",3378],cd9c57cb:[()=>n.e(3715).then(n.bind(n,7185)),"@site/versioned_docs/version-10.x/guides/absolute-imports.md",7185],d069ae84:[()=>n.e(2367).then(n.bind(n,4531)),"@site/versioned_docs/version-11.0/guides/angular-13+.md",4531],d19b9e8a:[()=>n.e(2822).then(n.bind(n,3800)),"@site/docs/guides/absolute-imports.md",3800],d1b207fe:[()=>n.e(322).then(n.bind(n,1254)),"@site/versioned_docs/version-13.0/guides/troubleshooting.md",1254],d2df711a:[()=>n.e(5400).then(n.bind(n,3822)),"@site/versioned_docs/version-11.0/guides/absolute-imports.md",3822],d30d9744:[()=>n.e(3824).then(n.t.bind(n,801,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-13-0-e91.json",801],d4836a8e:[()=>Promise.all([n.e(532),n.e(7471)]).then(n.bind(n,4207)),"@site/docs/guides/esm-support.md",4207],d720bb60:[()=>n.e(7964).then(n.bind(n,9979)),"@site/versioned_docs/version-9.x/guides/angular-ivy.md",9979],d9330f66:[()=>Promise.all([n.e(532),n.e(2252)]).then(n.bind(n,2635)),"@site/versioned_docs/version-13.0/guides/esm-support.md",2635],daab97c5:[()=>n.e(3939).then(n.bind(n,8268)),"@site/versioned_docs/version-11.1/processing.md",8268],dc033a20:[()=>n.e(6307).then(n.t.bind(n,8638,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-11-0-0a4.json",8638],dd8b0175:[()=>Promise.all([n.e(532),n.e(3982)]).then(n.bind(n,12)),"@site/versioned_docs/version-11.1/guides/jsdom-version.md",12],df70a34a:[()=>n.e(3789).then(n.bind(n,7841)),"@site/versioned_docs/version-10.x/guides/using-with-babel.md",7841],dff5aaca:[()=>n.e(2895).then(n.bind(n,3599)),"@site/versioned_docs/version-14.2/guides/troubleshooting.md",3599],e0a3f9c8:[()=>n.e(3624).then(n.bind(n,5524)),"@site/versioned_docs/version-11.1/guides/esm-support.md",5524],e1715838:[()=>n.e(1748).then(n.bind(n,1793)),"@site/versioned_docs/version-9.x/introduction.md",1793],ea131d77:[()=>n.e(2123).then(n.bind(n,9188)),"@site/versioned_docs/version-11.1/guides/absolute-imports.md",9188],eabdbf07:[()=>n.e(5255).then(n.bind(n,5044)),"@site/docs/processing.md",5044],eae657ee:[()=>n.e(2014).then(n.bind(n,4404)),"@site/versioned_docs/version-11.1/getting-started/options.md",4404],ebf39289:[()=>Promise.all([n.e(532),n.e(6419)]).then(n.bind(n,3341)),"@site/versioned_docs/version-14.0/getting-started/options.md",3341],ec1d9510:[()=>n.e(4293).then(n.bind(n,5986)),"@site/versioned_docs/version-11.0/guides/troubleshooting.md",5986],ecfacc56:[()=>n.e(9897).then(n.bind(n,5849)),"@site/versioned_docs/version-11.0/processing.md",5849],ef2f3ccd:[()=>Promise.all([n.e(532),n.e(6584)]).then(n.bind(n,8723)),"@site/versioned_docs/version-14.2/getting-started/options.md",8723],f0447160:[()=>Promise.all([n.e(532),n.e(7894)]).then(n.bind(n,7261)),"@site/versioned_docs/version-8.x/guides/jsdom-version.md",7261],f14ecac0:[()=>n.e(3653).then(n.bind(n,8258)),"@site/versioned_docs/version-12.0/introduction.md",8258],f3212b1e:[()=>Promise.all([n.e(532),n.e(3963)]).then(n.bind(n,7722)),"@site/versioned_docs/version-10.x/guides/jsdom-version.md",7722],f43def45:[()=>Promise.all([n.e(532),n.e(4479)]).then(n.bind(n,5722)),"@site/versioned_docs/version-11.1/guides/angular-ivy.md",5722],f546eb96:[()=>n.e(1197).then(n.bind(n,1100)),"@site/versioned_docs/version-9.x/processing.md",1100],f67ebb5d:[()=>n.e(1291).then(n.t.bind(n,912,19)),"@generated/docusaurus-plugin-content-docs/default/p/jest-preset-angular-docs-11-1-cd3.json",912],f97daad0:[()=>n.e(4887).then(n.bind(n,2108)),"@site/versioned_docs/version-8.x/guides/absolute-imports.md",2108],fa17a3e5:[()=>n.e(3181).then(n.bind(n,9470)),"@site/src/pages/versions.tsx",9470],fa9f2ace:[()=>n.e(1005).then(n.bind(n,9844)),"@site/versioned_docs/version-11.0/getting-started/presets.md",9844],fc80686b:[()=>Promise.all([n.e(532),n.e(1752)]).then(n.bind(n,7174)),"@site/docs/getting-started/presets.md",7174],fea96f18:[()=>n.e(6347).then(n.bind(n,2687)),"@site/versioned_docs/version-12.0/guides/troubleshooting.md",2687]};var i=n(5893);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(5304),u=n(9656);function d(e,t){if("*"===e)return a()({loading:l,loader:()=>n.e(868).then(n.bind(n,868)),modules:["@theme/NotFound"],webpack:()=>[868],render(e,t){const n=e.default;return(0,i.jsx)(u.z,{value:{plugin:{name:"native",id:"default"}},children:(0,i.jsx)(n,{...t})})}});const r=o[`${e}-${t}`],d={},p=[],f=[],g=(0,c.Z)(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]))})),a().Map({loading:l,loader:d,modules:p,webpack:()=>f,render(t,n){const a=JSON.parse(JSON.stringify(r));Object.entries(t).forEach((t=>{let[n,r]=t;const o=r.default;if(!o)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 o&&"function"!=typeof o||Object.keys(r).filter((e=>"default"!==e)).forEach((e=>{o[e]=r[e]}));let s=a;const i=n.split(".");i.slice(0,-1).forEach((e=>{s=s[e]})),s[i[i.length-1]]=o}));const o=a.__comp;delete a.__comp;const s=a.__context;delete a.__context;const l=a.__props;return delete a.__props,(0,i.jsx)(u.z,{value:s,children:(0,i.jsx)(o,{...a,...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","ada"),routes:[{path:"/jest-preset-angular/docs/10.x",component:d("/jest-preset-angular/docs/10.x","188"),routes:[{path:"/jest-preset-angular/docs/10.x",component:d("/jest-preset-angular/docs/10.x","641"),routes:[{path:"/jest-preset-angular/docs/10.x/",component:d("/jest-preset-angular/docs/10.x/","cae"),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","af6"),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","519"),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","91e"),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","917"),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","8c2"),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","02d"),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","cb6"),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","d67"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/10.x/guides/troubleshooting",component:d("/jest-preset-angular/docs/10.x/guides/troubleshooting","a8c"),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","095"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/10.x/processing",component:d("/jest-preset-angular/docs/10.x/processing","ebd"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/11.0",component:d("/jest-preset-angular/docs/11.0","400"),routes:[{path:"/jest-preset-angular/docs/11.0",component:d("/jest-preset-angular/docs/11.0","0c2"),routes:[{path:"/jest-preset-angular/docs/11.0/",component:d("/jest-preset-angular/docs/11.0/","534"),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","69e"),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","9e8"),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","1e4"),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","c89"),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","809"),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+","8af"),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","690"),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","770"),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","f60"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.0/guides/troubleshooting",component:d("/jest-preset-angular/docs/11.0/guides/troubleshooting","364"),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","36a"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.0/processing",component:d("/jest-preset-angular/docs/11.0/processing","e7b"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/11.1",component:d("/jest-preset-angular/docs/11.1","fe6"),routes:[{path:"/jest-preset-angular/docs/11.1",component:d("/jest-preset-angular/docs/11.1","b05"),routes:[{path:"/jest-preset-angular/docs/11.1/",component:d("/jest-preset-angular/docs/11.1/","4b1"),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","e0e"),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","b45"),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","ebb"),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","7f2"),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","3d1"),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+","923"),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","384"),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","1c1"),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","369"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.1/guides/troubleshooting",component:d("/jest-preset-angular/docs/11.1/guides/troubleshooting","587"),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","d66"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/11.1/processing",component:d("/jest-preset-angular/docs/11.1/processing","32c"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/12.0",component:d("/jest-preset-angular/docs/12.0","d6c"),routes:[{path:"/jest-preset-angular/docs/12.0",component:d("/jest-preset-angular/docs/12.0","e0f"),routes:[{path:"/jest-preset-angular/docs/12.0/",component:d("/jest-preset-angular/docs/12.0/","574"),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","031"),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","8e1"),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","a88"),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","6dc"),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","675"),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+","f8a"),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","c67"),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","b97"),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","c92"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/12.0/guides/troubleshooting",component:d("/jest-preset-angular/docs/12.0/guides/troubleshooting","5d3"),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","761"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/12.0/processing",component:d("/jest-preset-angular/docs/12.0/processing","70e"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/13.0",component:d("/jest-preset-angular/docs/13.0","d56"),routes:[{path:"/jest-preset-angular/docs/13.0",component:d("/jest-preset-angular/docs/13.0","9dc"),routes:[{path:"/jest-preset-angular/docs/13.0/",component:d("/jest-preset-angular/docs/13.0/","2e9"),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","61b"),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","7d1"),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","ddc"),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","164"),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","b3a"),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+","464"),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","e07"),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","62b"),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","164"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/13.0/guides/troubleshooting",component:d("/jest-preset-angular/docs/13.0/guides/troubleshooting","720"),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","366"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/13.0/processing",component:d("/jest-preset-angular/docs/13.0/processing","c83"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/14.0",component:d("/jest-preset-angular/docs/14.0","43d"),routes:[{path:"/jest-preset-angular/docs/14.0",component:d("/jest-preset-angular/docs/14.0","757"),routes:[{path:"/jest-preset-angular/docs/14.0/",component:d("/jest-preset-angular/docs/14.0/","3c6"),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","cd5"),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","178"),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","31f"),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","650"),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","52d"),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+","554"),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","cff"),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","d62"),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","2d3"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.0/guides/troubleshooting",component:d("/jest-preset-angular/docs/14.0/guides/troubleshooting","d8a"),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","c25"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/14.0/processing",component:d("/jest-preset-angular/docs/14.0/processing","732"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/8.x",component:d("/jest-preset-angular/docs/8.x","fbb"),routes:[{path:"/jest-preset-angular/docs/8.x",component:d("/jest-preset-angular/docs/8.x","901"),routes:[{path:"/jest-preset-angular/docs/8.x/",component:d("/jest-preset-angular/docs/8.x/","b38"),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","489"),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","26d"),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","e80"),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","a09"),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","4c7"),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","ad4"),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","5ab"),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","e38"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/8.x/guides/troubleshooting",component:d("/jest-preset-angular/docs/8.x/guides/troubleshooting","bdb"),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","45e"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/8.x/processing",component:d("/jest-preset-angular/docs/8.x/processing","227"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/9.x",component:d("/jest-preset-angular/docs/9.x","229"),routes:[{path:"/jest-preset-angular/docs/9.x",component:d("/jest-preset-angular/docs/9.x","fa4"),routes:[{path:"/jest-preset-angular/docs/9.x/",component:d("/jest-preset-angular/docs/9.x/","fe0"),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","47d"),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","7e4"),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","33c"),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","cee"),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","2cc"),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","356"),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","87c"),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","61f"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/9.x/guides/troubleshooting",component:d("/jest-preset-angular/docs/9.x/guides/troubleshooting","a71"),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","672"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/9.x/processing",component:d("/jest-preset-angular/docs/9.x/processing","f58"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs/next",component:d("/jest-preset-angular/docs/next","76a"),routes:[{path:"/jest-preset-angular/docs/next",component:d("/jest-preset-angular/docs/next","800"),routes:[{path:"/jest-preset-angular/docs/next/",component:d("/jest-preset-angular/docs/next/","677"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/getting-started/installation",component:d("/jest-preset-angular/docs/next/getting-started/installation","633"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/getting-started/options",component:d("/jest-preset-angular/docs/next/getting-started/options","072"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/getting-started/presets",component:d("/jest-preset-angular/docs/next/getting-started/presets","333"),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","42f"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/absolute-imports",component:d("/jest-preset-angular/docs/next/guides/absolute-imports","75a"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/angular-13+",component:d("/jest-preset-angular/docs/next/guides/angular-13+","3c0"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/angular-ivy",component:d("/jest-preset-angular/docs/next/guides/angular-ivy","6e2"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/esm-support",component:d("/jest-preset-angular/docs/next/guides/esm-support","49e"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/jsdom-version",component:d("/jest-preset-angular/docs/next/guides/jsdom-version","068"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/snapshot-testing",component:d("/jest-preset-angular/docs/next/guides/snapshot-testing","65a"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/guides/troubleshooting",component:d("/jest-preset-angular/docs/next/guides/troubleshooting","2c8"),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","d6d"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/next/processing",component:d("/jest-preset-angular/docs/next/processing","c2a"),exact:!0,sidebar:"docs"}]}]},{path:"/jest-preset-angular/docs",component:d("/jest-preset-angular/docs","ae8"),routes:[{path:"/jest-preset-angular/docs",component:d("/jest-preset-angular/docs","4a3"),routes:[{path:"/jest-preset-angular/docs/",component:d("/jest-preset-angular/docs/","3d4"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/getting-started/installation",component:d("/jest-preset-angular/docs/getting-started/installation","a1f"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/getting-started/options",component:d("/jest-preset-angular/docs/getting-started/options","c16"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/getting-started/presets",component:d("/jest-preset-angular/docs/getting-started/presets","64f"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/getting-started/test-environment",component:d("/jest-preset-angular/docs/getting-started/test-environment","22c"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/absolute-imports",component:d("/jest-preset-angular/docs/guides/absolute-imports","fad"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/angular-13+",component:d("/jest-preset-angular/docs/guides/angular-13+","504"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/angular-ivy",component:d("/jest-preset-angular/docs/guides/angular-ivy","479"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/esm-support",component:d("/jest-preset-angular/docs/guides/esm-support","a0e"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/jsdom-version",component:d("/jest-preset-angular/docs/guides/jsdom-version","57b"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/snapshot-testing",component:d("/jest-preset-angular/docs/guides/snapshot-testing","9eb"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/troubleshooting",component:d("/jest-preset-angular/docs/guides/troubleshooting","e2e"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/guides/using-with-babel",component:d("/jest-preset-angular/docs/guides/using-with-babel","fdb"),exact:!0,sidebar:"docs"},{path:"/jest-preset-angular/docs/processing",component:d("/jest-preset-angular/docs/processing","2eb"),exact:!0,sidebar:"docs"}]}]}]},{path:"/jest-preset-angular/",component:d("/jest-preset-angular/","c4f"),exact:!0},{path:"*",component:d("*")}]},8121:(e,t,n)=>{"use strict";n.d(t,{_:()=>o,t:()=>s});var r=n(7294),a=n(5893);const o=r.createContext(!1);function s(e){let{children:t}=e;const[n,s]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{s(!0)}),[]),(0,a.jsx)(o.Provider,{value:n,children:t})}},9717:(e,t,n)=>{"use strict";var r=n(7294),a=n(745),o=n(405),s=n(3727),i=n(6809),l=n(6136);const c=[n(984),n(2251),n(9957),n(6930),n(5117)];var u=n(997),d=n(6550),p=n(8790),f=n(5893);function g(e){let{children:t}=e;return(0,f.jsx)(f.Fragment,{children:t})}var m=n(1514),h=n(9962),b=n(9524),v=n(107),y=n(9488),w=n(626),x=n(8181),k=n(246),j=n(3905),S=n(3647);function _(){const{i18n:{currentLocale:e,defaultLocale:t,localeConfigs:n}}=(0,h.Z)(),r=(0,w.l)(),a=n[e].htmlLang,o=e=>e.replace("-","_");return(0,f.jsxs)(m.Z,{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:o(a)}),Object.values(n).filter((e=>a!==e.htmlLang)).map((e=>(0,f.jsx)("meta",{property:"og:locale:alternate",content:o(e.htmlLang)},`meta-og-${e.htmlLang}`)))]})}function E(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,h.Z)(),r=function(){const{siteConfig:{url:e,baseUrl:t,trailingSlash:n}}=(0,h.Z)(),{pathname:r}=(0,d.TH)();return e+(0,j.applyTrailingSlash)((0,b.ZP)(r),{trailingSlash:n,baseUrl:t})}(),a=t?`${n}${t}`:r;return(0,f.jsxs)(m.Z,{children:[(0,f.jsx)("meta",{property:"og:url",content:a}),(0,f.jsx)("link",{rel:"canonical",href:a})]})}function C(){const{i18n:{currentLocale:e}}=(0,h.Z)(),{metadata:t,image:n}=(0,v.L)();return(0,f.jsxs)(f.Fragment,{children:[(0,f.jsxs)(m.Z,{children:[(0,f.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,f.jsx)("body",{className:x.h})]}),n&&(0,f.jsx)(y.d,{image:n}),(0,f.jsx)(E,{}),(0,f.jsx)(_,{}),(0,f.jsx)(S.Z,{tag:k.HX,locale:e}),(0,f.jsx)(m.Z,{children:t.map(((e,t)=>(0,f.jsx)("meta",{...e},t)))})]})}const T=new Map;var A=n(8121),P=n(694),L=n(1270);function R(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()=>a.forEach((e=>e?.()))}const N=function(e){let{children:t,location:n,previousLocation:r}=e;return(0,L.Z)((()=>{r!==n&&(!function(e){let{location:t,previousLocation:n}=e;if(!n)return;const r=t.pathname===n.pathname,a=t.hash===n.hash,o=t.search===n.search;if(r&&a&&!o)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}),R("onRouteDidUpdate",{previousLocation:r,location:n}))}),[r,n]),t};function O(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,p.f)(u.Z,e))).flat();return Promise.all(t.map((e=>e.route.component.preload?.())))}class I extends r.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=l.Z.canUseDOM?R("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=R("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),O(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)(N,{previousLocation:this.previousLocation,location:t,children:(0,f.jsx)(d.AW,{location:t,render:()=>e})})}}const D=I,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 T.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return T.set(e.pathname,t),{...e,pathname:t}}((0,d.TH)());return(0,f.jsx)(D,{location:e,children:G})}function K(){return(0,f.jsx)(H.Z,{children:(0,f.jsx)(P.M,{children:(0,f.jsxs)(A.t,{children:[(0,f.jsxs)(g,{children:[(0,f.jsx)(q,{}),(0,f.jsx)(C,{}),(0,f.jsx)(U,{}),(0,f.jsx)(V,{})]}),(0,f.jsx)(W,{})]})})})}var Q=n(6887);const Y=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 a=document.getElementsByTagName("head")[0]??document.getElementsByName("script")[0]?.parentNode;a?.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 X=n(5304);const J=new Set,ee=new Set,te=()=>navigator.connection?.effectiveType.includes("2g")||navigator.connection?.saveData,ne={prefetch:e=>{if(!(e=>!te()&&!ee.has(e)&&!J.has(e))(e))return!1;J.add(e);const t=(0,p.f)(u.Z,e).flatMap((e=>{return t=e.route.path,Object.entries(Q).filter((e=>{let[n]=e;return n.replace(/-[^-]+$/,"")===t})).flatMap((e=>{let[,t]=e;return Object.values((0,X.Z)(t))}));var t}));return Promise.all(t.map((e=>{const t=n.gca(e);return t&&!t.includes("undefined")?Y(t).catch((()=>{})):Promise.resolve()})))},preload:e=>!!(e=>!te()&&!ee.has(e))(e)&&(ee.add(e),O(e))},re=Object.freeze(ne);function ae(e){let{children:t}=e;return"hash"===i.default.future.experimental_router?(0,f.jsx)(s.UT,{children:t}):(0,f.jsx)(s.VK,{children:t})}const oe=Boolean(!0);if(l.Z.canUseDOM){window.docusaurus=re;const e=document.getElementById("__docusaurus"),t=(0,f.jsx)(o.B6,{children:(0,f.jsx)(ae,{children:(0,f.jsx)(K,{})})}),n=(e,t)=>{console.error("Docusaurus React Root onRecoverableError:",e,t)},s=()=>{if(window.docusaurusRoot)window.docusaurusRoot.render(t);else if(oe)window.docusaurusRoot=a.hydrateRoot(e,t,{onRecoverableError:n});else{const r=a.createRoot(e,{onRecoverableError:n});r.render(t),window.docusaurusRoot=r}};O(window.location.pathname).then((()=>{(0,r.startTransition)(s)}))}},694:(e,t,n)=>{"use strict";n.d(t,{_:()=>d,M:()=>p});var r=n(7294),a=n(6809);const o=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.2","label":"14.2","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.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(7529);const l=JSON.parse('{"docusaurusVersion":"3.4.0","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"3.4.0"},"docusaurus-plugin-content-blog":{"type":"package","name":"@docusaurus/plugin-content-blog","version":"3.4.0"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"3.4.0"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"3.4.0"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"3.4.0"},"docusaurus-theme-search-algolia":{"type":"package","name":"@docusaurus/theme-search-algolia","version":"3.4.0"},"docusaurus-plugin-ideal-image":{"type":"package","name":"@docusaurus/plugin-ideal-image","version":"3.4.0"},"docusaurus-plugin-pwa":{"type":"package","name":"@docusaurus/plugin-pwa","version":"3.4.0"}}}');var c=n(5893);const u={siteConfig:a.default,siteMetadata:l,globalData:o,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})}},3256:(e,t,n)=>{"use strict";n.d(t,{Z:()=>m});var r=n(7294),a=n(6136),o=n(1514),s=n(3905),i=n(1615),l=n(9656),c=n(5893);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.getErrorCausalChain)(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.z,{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)(o.Z,{children:(0,c.jsx)("title",{children:"Page Error"})}),(0,c.jsx)(i.Z,{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){a.Z.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}}},6136:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});const r="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,a={canUseDOM:r,canUseEventListeners:r&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:r&&"IntersectionObserver"in window,canUseViewport:r&&"screen"in window}},1514:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});n(7294);var r=n(405),a=n(5893);function o(e){return(0,a.jsx)(r.ql,{...e})}},4791:(e,t,n)=>{"use strict";n.d(t,{Z:()=>f});var r=n(7294),a=n(3727),o=n(3905),s=n(9962),i=n(2735),l=n(6136),c=n(168),u=n(9524),d=n(5893);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.Z)(),{trailingSlash:w,baseUrl:x}=y,k=y.future.experimental_router,{withBaseUrl:j}=(0,u.Cg)(),S=(0,c.Z)(),_=(0,r.useRef)(null);(0,r.useImperativeHandle)(t,(()=>_.current));const E=p||f;const C=(0,i.Z)(E),T=E?.replace("pathname://","");let A=void 0!==T?(P=T,b&&(e=>e.startsWith("/"))(P)?j(P):P):void 0;var P;"hash"===k&&A?.startsWith("./")&&(A=A?.slice(1)),A&&C&&(A=(0,o.applyTrailingSlash)(A,{trailingSlash:w,baseUrl:x}));const L=(0,r.useRef)(!1),R=n?a.OL:a.rU,N=l.Z.canUseIntersectionObserver,O=(0,r.useRef)(),I=()=>{L.current||null==A||(window.docusaurus.preload(A),L.current=!0)};(0,r.useEffect)((()=>(!N&&C&&null!=A&&window.docusaurus.prefetch(A),()=>{N&&O.current&&O.current.disconnect()})),[O,A,N,C]);const D=A?.startsWith("#")??!1,M=!v.target||"_self"===v.target,F=!A||!C||!M;return h||!D&&F||S.collectLink(A),v.id&&S.collectAnchor(v.id),F?(0,d.jsx)("a",{ref:_,href:A,...E&&!C&&{target:"_blank",rel:"noopener noreferrer"},...v}):(0,d.jsx)(R,{...v,onMouseEnter:I,onTouchStart:I,innerRef:e=>{_.current=e,N&&e&&C&&(O.current=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(O.current.unobserve(e),O.current.disconnect(),null!=A&&window.docusaurus.prefetch(A))}))})),O.current.observe(e))},to:A,...n&&{isActive:m,activeClassName:g}})}const f=r.forwardRef(p)},7325:(e,t,n)=>{"use strict";n.d(t,{Z:()=>c,I:()=>l});var r=n(7294),a=n(5893);function o(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(7529);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 o(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,a.jsx)(a.Fragment,{children:o(s,r)})}},6875:(e,t,n)=>{"use strict";n.d(t,{m:()=>r});const r="default"},2735:(e,t,n)=>{"use strict";function r(e){return/^(?:\w*:|\/\/)/.test(e)}function a(e){return void 0!==e&&!r(e)}n.d(t,{Z:()=>a,b:()=>r})},9524:(e,t,n)=>{"use strict";n.d(t,{Cg:()=>s,ZP:()=>i});var r=n(7294),a=n(9962),o=n(2735);function s(){const{siteConfig:e}=(0,a.Z)(),{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:a=!1,absolute:s=!1}={},router:i}=e;if(!r||r.startsWith("#")||(0,o.b)(r))return r;if("hash"===i)return r.startsWith("/")?`.${r}`:`./${r}`;if(a)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)}},168:(e,t,n)=>{"use strict";n.d(t,{Z:()=>s});var r=n(7294);n(5893);const a=r.createContext({collectAnchor:()=>{},collectLink:()=>{}}),o=()=>(0,r.useContext)(a);function s(){return o()}},9962:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7294),a=n(694);function o(){return(0,r.useContext)(a._)}},1048:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7294),a=n(8121);function o(){return(0,r.useContext)(a._)}},1270:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});var r=n(7294);const a=n(6136).Z.canUseDOM?r.useLayoutEffect:r.useEffect},5304:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});const r=e=>"object"==typeof e&&!!e&&Object.keys(e).length>0;function a(e){const t={};return function e(n,a){Object.entries(n).forEach((n=>{let[o,s]=n;const i=a?`${a}.${o}`:o;r(s)?e(s,i):t[i]=s}))}(e),t}},9656:(e,t,n)=>{"use strict";n.d(t,{_:()=>o,z:()=>s});var r=n(7294),a=n(5893);const o=r.createContext(null);function s(e){let{children:t,value:n}=e;const s=r.useContext(o),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,a.jsx)(o.Provider,{value:i,children:t})}},9871:(e,t,n)=>{"use strict";n.d(t,{Iw:()=>b,gA:()=>f,WS:()=>g,_r:()=>d,Jo:()=>v,zh:()=>p,yW:()=>h,gB:()=>m});var r=n(6550),a=n(9962),o=n(6875);function s(e,t){void 0===t&&(t={});const n=function(){const{globalData:e}=(0,a.Z)();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){const n=i(e);return[...e.versions.filter((e=>e!==n)),n].find((e=>!!(0,r.LX)(t,{path:e.path,exact:!1,strict:!1})))}function c(e,t){const n=l(e,t),a=n?.docs.find((e=>!!(0,r.LX)(t,{path:e.path,exact:!0,strict:!1})));return{activeVersion:n,activeDoc:a,alternateDocVersions:a?function(t){const n={};return e.versions.forEach((e=>{e.docs.forEach((r=>{r.id===t&&(n[e.name]=r)}))})),n}(a.id):{}}}const u={},d=()=>s("docusaurus-plugin-content-docs")??u,p=e=>{try{return function(e,t,n){void 0===t&&(t=o.m),void 0===n&&(n={});const r=s(e),a=r?.[t];if(!a&&n.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${t}".`);return a}("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.TH)();return function(e,t,n){void 0===n&&(n={});const a=Object.entries(e).sort(((e,t)=>t[1].path.localeCompare(e[1].path))).find((e=>{let[,n]=e;return!!(0,r.LX)(t,{path:n.path,exact:!1,strict:!1})})),o=a?{pluginId:a[0],pluginData:a[1]}:void 0;if(!o&&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 o}(t,n,e)}function g(e){void 0===e&&(e={});const t=f(e),{pathname:n}=(0,r.TH)();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.TH)();return c(t,n)}function v(e){const t=p(e),{pathname:n}=(0,r.TH)();return function(e,t){const n=i(e);return{latestDocSuggestion:c(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(t,n)}},5117:(e,t,n)=>{"use strict";n.r(t);var r=n(6136),a=n(1027);const o="/jest-preset-angular/sw.js",s=["appInstalled","queryString"],i=!1,l=(0,a.WA)("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.Z.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(5131).then(n.bind(n,5131)),p()]),r=new e(function(e){const t=JSON.stringify(e),n=`${o}?params=${encodeURIComponent(t)}`;return c("service worker url",{url:n,params:e}),n}({offlineMode:t,debug:i})),a=()=>r.messageSW({type:"SKIP_WAITING"}),s=()=>(c("handleServiceWorkerWaiting"),t?n.e(363).then(n.bind(n,363)).then((e=>{let{renderReloadPopup:t}=e;return t({onReload(){r.addEventListener("controlling",(()=>{window.location.reload()})),a()}})})):a());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)))))},9957:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>o});var r=n(4865),a=n.n(r);a().configure({showSpinner:!1});const o={onRouteUpdate(e){let{location:t,previousLocation:n}=e;if(n&&t.pathname!==n.pathname){const e=window.setTimeout((()=>{a().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){a().done()}}},2251:(e,t,n)=>{"use strict";n.r(t);var r=n(2573),a=n(6809);!function(e){const{themeConfig:{prism:t}}=a.default,{additionalLanguages:r}=t;globalThis.Prism=e,r.forEach((e=>{"php"===e&&n(6854),n(6726)(`./prism-${e}`)})),delete globalThis.Prism}(r.p1)},3899:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});n(7294);var r=n(512),a=n(7325),o=n(107),s=n(4791),i=n(168);const l={anchorWithStickyNavbar:"anchorWithStickyNavbar_LWe7",anchorWithHideOnScrollNavbar:"anchorWithHideOnScrollNavbar_WYt5"};var c=n(5893);function u(e){let{as:t,id:n,...u}=e;const d=(0,i.Z)(),{navbar:{hideOnScroll:p}}=(0,o.L)();if("h1"===t||!n)return(0,c.jsx)(t,{...u,id:void 0});d.collectAnchor(n);const f=(0,a.I)({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.Z)("anchor",p?l.anchorWithHideOnScrollNavbar:l.anchorWithStickyNavbar,u.className),id:n,children:[u.children,(0,c.jsx)(s.Z,{className:"hash-link",to:`#${n}`,"aria-label":f,title:f,children:"\u200b"})]})}},4082:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});n(7294);const r={iconExternalLink:"iconExternalLink_nPIU"};var a=n(5893);function o(e){let{width:t=13.5,height:n=13.5}=e;return(0,a.jsx)("svg",{width:t,height:n,"aria-hidden":"true",viewBox:"0 0 24 24",className:r.iconExternalLink,children:(0,a.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"})})}},1615:(e,t,n)=>{"use strict";n.d(t,{Z:()=>Rt});var r=n(7294),a=n(512),o=n(3256),s=n(9488),i=n(6550),l=n(7325),c=n(3266),u=n(5893);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.k6)(),n=(0,r.useCallback)((e=>{e.preventDefault();const t=document.querySelector("main:first-of-type")??document.getElementById(d);t&&p(t)}),[]);return(0,c.S)((n=>{let{location:r}=n;e.current&&!r.hash&&"PUSH"===t&&p(e.current)})),{containerRef:e,onClick:n}}const g=(0,l.I)({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(3702),b=n(8181);const v={skipToContent:"skipToContent_fXgn"};function y(){return(0,u.jsx)(m,{className:v.skipToContent})}var w=n(107),x=n(5830);function k(e){let{width:t=21,height:n=21,color:r="currentColor",strokeWidth:a=1.2,className:o,...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:a,children:(0,u.jsx)("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})})})}const j={closeButton:"closeButton_CVFx"};function S(e){return(0,u.jsx)("button",{type:"button","aria-label":(0,l.I)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"}),...e,className:(0,a.Z)("clean-btn close",j.closeButton,e.className),children:(0,u.jsx)(k,{width:14,height:14,strokeWidth:3.1})})}const _={content:"content_knG7"};function E(e){const{announcementBar:t}=(0,w.L)(),{content:n}=t;return(0,u.jsx)("div",{...e,className:(0,a.Z)(_.content,e.className),dangerouslySetInnerHTML:{__html:n}})}const C={announcementBar:"announcementBar_mb4j",announcementBarPlaceholder:"announcementBarPlaceholder_vyr4",announcementBarClose:"announcementBarClose_gvF7",announcementBarContent:"announcementBarContent_xLdY"};function T(){const{announcementBar:e}=(0,w.L)(),{isActive:t,close:n}=(0,x.n)();if(!t)return null;const{backgroundColor:r,textColor:a,isCloseable:o}=e;return(0,u.jsxs)("div",{className:C.announcementBar,style:{backgroundColor:r,color:a},role:"banner",children:[o&&(0,u.jsx)("div",{className:C.announcementBarPlaceholder}),(0,u.jsx)(E,{className:C.announcementBarContent}),o&&(0,u.jsx)(S,{onClick:n,className:C.announcementBarClose})]})}var A=n(735),P=n(2957);var L=n(3768),R=n(3086);const N=r.createContext(null);function O(e){let{children:t}=e;const n=function(){const e=(0,A.e)(),t=(0,R.HY)(),[n,a]=(0,r.useState)(!1),o=null!==t.component,s=(0,L.D9)(o);return(0,r.useEffect)((()=>{o&&!s&&a(!0)}),[o,s]),(0,r.useEffect)((()=>{o?e.shown||a(!0):a(!1)}),[e.shown,o]),(0,r.useMemo)((()=>[n,a]),[n])}();return(0,u.jsx)(N.Provider,{value:n,children:t})}function I(e){if(e.component){const t=e.component;return(0,u.jsx)(t,{...e.props})}}function D(){const e=(0,r.useContext)(N);if(!e)throw new L.i6("NavbarSecondaryMenuDisplayProvider");const[t,n]=e,a=(0,r.useCallback)((()=>n(!1)),[n]),o=(0,R.HY)();return(0,r.useMemo)((()=>({shown:t,hide:a,content:I(o)})),[a,o,t])}function M(e){let{header:t,primaryMenu:n,secondaryMenu:r}=e;const{shown:o}=D();return(0,u.jsxs)("div",{className:"navbar-sidebar",children:[t,(0,u.jsxs)("div",{className:(0,a.Z)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":o}),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(9200),B=n(1048);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 $(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 U={toggle:"toggle_vylO",toggleButton:"toggleButton_gllP",darkToggleIcon:"darkToggleIcon_wfgR",lightToggleIcon:"lightToggleIcon_pyhR",toggleButtonDisabled:"toggleButtonDisabled_aARS"};function q(e){let{className:t,buttonClassName:n,value:r,onChange:o}=e;const s=(0,B.Z)(),i=(0,l.I)({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.I)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,l.I)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return(0,u.jsx)("div",{className:(0,a.Z)(U.toggle,t),children:(0,u.jsxs)("button",{className:(0,a.Z)("clean-btn",U.toggleButton,!s&&U.toggleButtonDisabled,n),type:"button",onClick:()=>o("dark"===r?"light":"dark"),disabled:!s,title:i,"aria-label":i,"aria-live":"polite",children:[(0,u.jsx)(z,{className:(0,a.Z)(U.toggleIcon,U.lightToggleIcon)}),(0,u.jsx)($,{className:(0,a.Z)(U.toggleIcon,U.darkToggleIcon)})]})})}const H=r.memo(q),Z={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_X3D1"};function W(e){let{className:t}=e;const n=(0,w.L)().navbar.style,r=(0,w.L)().colorMode.disableSwitch,{colorMode:a,setColorMode:o}=(0,F.I)();return r?null:(0,u.jsx)(H,{className:t,buttonClassName:"dark"===n?Z.darkNavbarColorModeToggle:void 0,value:a,onChange:o})}var G=n(6811);function V(){return(0,u.jsx)(G.Z,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function K(){const e=(0,A.e)();return(0,u.jsx)("button",{type:"button","aria-label":(0,l.I)({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)(k,{color:"var(--ifm-color-emphasis-600)"})})}function Q(){return(0,u.jsxs)("div",{className:"navbar-sidebar__brand",children:[(0,u.jsx)(V,{}),(0,u.jsx)(W,{className:"margin-right--md"}),(0,u.jsx)(K,{})]})}var Y=n(4791),X=n(9524),J=n(2735),ee=n(1500),te=n(4082);function ne(e){let{activeBasePath:t,activeBaseRegex:n,to:r,href:a,label:o,html:s,isDropdownLink:i,prependBaseUrlToHref:l,...c}=e;const d=(0,X.ZP)(r),p=(0,X.ZP)(t),f=(0,X.ZP)(a,{forcePrependBaseUrl:!0}),g=o&&a&&!(0,J.Z)(a),m=s?{dangerouslySetInnerHTML:{__html:s}}:{children:(0,u.jsxs)(u.Fragment,{children:[o,g&&(0,u.jsx)(te.Z,{...i&&{width:12,height:12}})]})};return a?(0,u.jsx)(Y.Z,{href:l?f:a,...c,...m}):(0,u.jsx)(Y.Z,{to:d,isNavLink:!0,...(t||n)&&{isActive:(e,t)=>n?(0,ee.F)(n,t.pathname):t.pathname.startsWith(p)},...c,...m})}function re(e){let{className:t,isDropdownItem:n=!1,...r}=e;const o=(0,u.jsx)(ne,{className:(0,a.Z)(n?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:n,...r});return n?(0,u.jsx)("li",{children:o}):o}function ae(e){let{className:t,isDropdownItem:n,...r}=e;return(0,u.jsx)("li",{className:"menu__list-item",children:(0,u.jsx)(ne,{className:(0,a.Z)("menu__link",t),...r})})}function oe(e){let{mobile:t=!1,position:n,...r}=e;const a=t?ae:re;return(0,u.jsx)(a,{...r,activeClassName:r.activeClassName??(t?"menu__link--active":"navbar__link--active")})}var se=n(4639),ie=n(9003),le=n(9962);const ce={dropdownNavbarItemMobile:"dropdownNavbarItemMobile_S0Fm"};function ue(e,t){return e.some((e=>function(e,t){return!!(0,ie.Mg)(e.to,t)||!!(0,ee.F)(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)))}function de(e){let{items:t,position:n,className:o,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,a.Z)("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,a.Z)("navbar__link",o),...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)(He,{isDropdownItem:!0,activeClassName:"dropdown__link--active",...e,key:t})))})]})}function pe(e){let{items:t,className:n,position:o,onClick:s,...l}=e;const c=function(){const{siteConfig:{baseUrl:e}}=(0,le.Z)(),{pathname:t}=(0,i.TH)();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,a.Z)("menu__list-item",{"menu__list-item--collapsed":p}),children:[(0,u.jsx)(ne,{role:"button",className:(0,a.Z)(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.z,{lazy:!0,as:"ul",className:"menu__list",collapsed:p,children:t.map(((e,t)=>(0,r.createElement)(He,{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(626);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(3935);function ve(){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"}))}var ye=n(830),we=["translations"];function xe(){return xe=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var _e="Ctrl";var Ee=r.forwardRef((function(e,t){var n=e.translations,a=void 0===n?{}:n,o=Se(e,we),s=a.buttonText,i=void 0===s?"Search":s,l=a.buttonAriaLabel,c=void 0===l?"Search":l,u=ke((0,r.useState)(null),2),d=u[0],p=u[1];return(0,r.useEffect)((function(){"undefined"!=typeof navigator&&(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?p("\u2318"):p(_e))}),[]),r.createElement("button",xe({type:"button",className:"DocSearch DocSearch-Button","aria-label":c},o,{ref:t}),r.createElement("span",{className:"DocSearch-Button-Container"},r.createElement(ye.W,null),r.createElement("span",{className:"DocSearch-Button-Placeholder"},i)),r.createElement("span",{className:"DocSearch-Button-Keys"},null!==d&&r.createElement(r.Fragment,null,r.createElement("kbd",{className:"DocSearch-Button-Key"},d===_e?r.createElement(ve,null):d),r.createElement("kbd",{className:"DocSearch-Button-Key"},"K"))))})),Ce=n(1514),Te=n(5358),Ae=n(2327),Pe=n(246);const Le={button:{buttonText:(0,l.I)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"}),buttonAriaLabel:(0,l.I)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"})},modal:{searchBox:{resetButtonTitle:(0,l.I)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),resetButtonAriaLabel:(0,l.I)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),cancelButtonText:(0,l.I)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"}),cancelButtonAriaLabel:(0,l.I)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"})},startScreen:{recentSearchesTitle:(0,l.I)({id:"theme.SearchModal.startScreen.recentSearchesTitle",message:"Recent",description:"The title for recent searches"}),noRecentSearchesText:(0,l.I)({id:"theme.SearchModal.startScreen.noRecentSearchesText",message:"No recent searches",description:"The text when no recent searches"}),saveRecentSearchButtonTitle:(0,l.I)({id:"theme.SearchModal.startScreen.saveRecentSearchButtonTitle",message:"Save this search",description:"The label for save recent search button"}),removeRecentSearchButtonTitle:(0,l.I)({id:"theme.SearchModal.startScreen.removeRecentSearchButtonTitle",message:"Remove this search from history",description:"The label for remove recent search button"}),favoriteSearchesTitle:(0,l.I)({id:"theme.SearchModal.startScreen.favoriteSearchesTitle",message:"Favorite",description:"The title for favorite searches"}),removeFavoriteSearchButtonTitle:(0,l.I)({id:"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle",message:"Remove this search from favorites",description:"The label for remove favorite search button"})},errorScreen:{titleText:(0,l.I)({id:"theme.SearchModal.errorScreen.titleText",message:"Unable to fetch results",description:"The title for error screen of search modal"}),helpText:(0,l.I)({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.I)({id:"theme.SearchModal.footer.selectText",message:"to select",description:"The explanatory text of the action for the enter key"}),selectKeyAriaLabel:(0,l.I)({id:"theme.SearchModal.footer.selectKeyAriaLabel",message:"Enter key",description:"The ARIA label for the Enter key button that makes the selection"}),navigateText:(0,l.I)({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.I)({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.I)({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.I)({id:"theme.SearchModal.footer.closeText",message:"to close",description:"The explanatory text of the action for Escape key"}),closeKeyAriaLabel:(0,l.I)({id:"theme.SearchModal.footer.closeKeyAriaLabel",message:"Escape key",description:"The ARIA label for the Escape key button that close the modal"}),searchByText:(0,l.I)({id:"theme.SearchModal.footer.searchByText",message:"Search by",description:"The text explain that the search is making by Algolia"})},noResultsScreen:{noResultsText:(0,l.I)({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.I)({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.I)({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.I)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText",message:"Let us know.",description:"The text for the link to report missing results"})}},placeholder:(0,l.I)({id:"theme.SearchModal.placeholder",message:"Search docs",description:"The placeholder of the input of the DocSearch pop-up modal"})};let Re=null;function Ne(e){let{hit:t,children:n}=e;return(0,u.jsx)(Y.Z,{to:t.url,children:n})}function Oe(e){let{state:t,onClose:n}=e;const r=(0,Te.M)();return(0,u.jsx)(Y.Z,{to:r(t.query),onClick:n,children:(0,u.jsx)(l.Z,{id:"theme.SearchBar.seeAll",values:{count:t.context.nbHits},children:"See all {count} results"})})}function Ie(e){let{contextualSearch:t,externalUrlRegex:a,...o}=e;const{siteMetadata:s}=(0,le.Z)(),l=(0,Ae.l)(),c=function(){const{locale:e,tags:t}=(0,Pe._q)();return[`language:${e}`,t.map((e=>`docusaurus_tag:${e}`))]}(),d=o.searchParameters?.facetFilters??[],p=t?function(e,t){const n=e=>"string"==typeof e?[e]:e;return[...n(e),...n(t)]}(c,d):d,f={...o.searchParameters,facetFilters:p},g=(0,i.k6)(),m=(0,r.useRef)(null),h=(0,r.useRef)(null),[b,v]=(0,r.useState)(!1),[y,w]=(0,r.useState)(void 0),x=(0,r.useCallback)((()=>Re?Promise.resolve():Promise.all([n.e(1426).then(n.bind(n,1426)),Promise.all([n.e(532),n.e(6945)]).then(n.bind(n,6945)),Promise.all([n.e(532),n.e(2153)]).then(n.bind(n,6798))]).then((e=>{let[{DocSearchModal:t}]=e;Re=t}))),[]),k=(0,r.useCallback)((()=>{if(!m.current){const e=document.createElement("div");m.current=e,document.body.insertBefore(e,document.body.firstChild)}}),[]),j=(0,r.useCallback)((()=>{k(),x().then((()=>v(!0)))}),[x,k]),S=(0,r.useCallback)((()=>{v(!1),h.current?.focus()}),[]),_=(0,r.useCallback)((e=>{e.preventDefault(),w(e.key),j()}),[j]),E=(0,r.useRef)({navigate(e){let{itemUrl:t}=e;(0,ee.F)(a,t)?window.location.href=t:g.push(t)}}).current,C=(0,r.useRef)((e=>o.transformItems?o.transformItems(e):e.map((e=>({...e,url:l(e.url)}))))).current,T=(0,r.useMemo)((()=>e=>(0,u.jsx)(Oe,{...e,onClose:S})),[S]),A=(0,r.useCallback)((e=>(e.addAlgoliaAgent("docusaurus",s.docusaurusVersion),e)),[s.docusaurusVersion]);return function(e){var t=e.isOpen,n=e.onOpen,a=e.onClose,o=e.onInput,s=e.searchButtonRef;r.useEffect((function(){function e(e){var r;(27===e.keyCode&&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)&&(e.preventDefault(),t?a():document.body.classList.contains("DocSearch--active")||document.body.classList.contains("DocSearch--active")||n()),s&&s.current===document.activeElement&&o&&/[a-zA-Z0-9]/.test(String.fromCharCode(e.keyCode))&&o(e)}return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}}),[t,n,a,o,s])}({isOpen:b,onOpen:j,onClose:S,onInput:_,searchButtonRef:h}),(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(Ce.Z,{children:(0,u.jsx)("link",{rel:"preconnect",href:`https://${o.appId}-dsn.algolia.net`,crossOrigin:"anonymous"})}),(0,u.jsx)(Ee,{onTouchStart:x,onFocus:x,onMouseOver:x,onClick:j,ref:h,translations:Le.button}),b&&Re&&m.current&&(0,be.createPortal)((0,u.jsx)(Re,{onClose:S,initialScrollY:window.scrollY,initialQuery:y,navigator:E,transformItems:C,hitComponent:Ne,transformSearchClient:A,...o.searchPagePath&&{resultsFooterComponent:T},...o,searchParameters:f,placeholder:Le.placeholder,translations:Le.modal}),m.current)]})}function De(){const{siteConfig:e}=(0,le.Z)();return(0,u.jsx)(Ie,{...e.themeConfig.algolia})}const Me={navbarSearchContainer:"navbarSearchContainer_Bca1"};function Fe(e){let{children:t,className:n}=e;return(0,u.jsx)("div",{className:(0,a.Z)(n,Me.navbarSearchContainer),children:t})}var Be=n(9871),ze=n(8259);var $e=n(6409);const Ue=e=>e.docs.find((t=>t.id===e.mainDocId));const qe={default:oe,localeDropdown:function(e){let{mobile:t,dropdownItemsBefore:n,dropdownItemsAfter:r,queryString:a="",...o}=e;const{i18n:{currentLocale:s,locales:c,localeConfigs:d}}=(0,le.Z)(),p=(0,ge.l)(),{search:f,hash:g}=(0,i.TH)(),m=[...n,...c.map((e=>{const n=`${`pathname://${p.createUrl({locale:e,fullyQualified:!1})}`}${f}${g}${a}`;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.I)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):d[s].label;return(0,u.jsx)(fe,{...o,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)(Fe,{className:n,children:(0,u.jsx)(De,{})})},dropdown:fe,html:function(e){let{value:t,className:n,mobile:r=!1,isDropdownItem:o=!1}=e;const s=o?"li":"div";return(0,u.jsx)(s,{className:(0,a.Z)({navbar__item:!r&&!o,"menu__list-item":r},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){let{docId:t,label:n,docsPluginId:r,...a}=e;const{activeDoc:o}=(0,Be.Iw)(r),s=(0,ze.vY)(t,r),i=o?.path===s?.path;return null===s||s.unlisted&&!i?null:(0,u.jsx)(oe,{exact:!0,...a,isActive:()=>i||!!o?.sidebar&&o.sidebar===s.sidebar,label:n??s.id,to:s.path})},docSidebar:function(e){let{sidebarId:t,label:n,docsPluginId:r,...a}=e;const{activeDoc:o}=(0,Be.Iw)(r),s=(0,ze.oz)(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)(oe,{exact:!0,...a,isActive:()=>o?.sidebar===t,label:n??s.label,to:s.path})},docsVersion:function(e){let{label:t,to:n,docsPluginId:r,...a}=e;const o=(0,ze.lO)(r)[0],s=t??o.label,i=n??(e=>e.docs.find((t=>t.id===e.mainDocId)))(o).path;return(0,u.jsx)(oe,{...a,label:s,to:i})},docsVersionDropdown:function(e){let{mobile:t,docsPluginId:n,dropdownActiveClassDisabled:r,dropdownItemsBefore:a,dropdownItemsAfter:o,...s}=e;const{search:c,hash:d}=(0,i.TH)(),p=(0,Be.Iw)(n),f=(0,Be.gB)(n),{savePreferredVersionName:g}=(0,$e.J)(n),m=[...a,...f.map((e=>{const t=p.alternateDocVersions[e.name]??Ue(e);return{label:e.label,to:`${t.path}${c}${d}`,isActive:()=>e===p.activeVersion,onClick:()=>g(e.name)}})),...o],h=(0,ze.lO)(n)[0],b=t&&m.length>1?(0,l.I)({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:Ue(h).path;return m.length<=1?(0,u.jsx)(oe,{...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 He(e){let{type:t,...n}=e;const r=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(t,n),a=qe[r];if(!a)throw new Error(`No NavbarItem component found for type "${t}".`);return(0,u.jsx)(a,{...n})}function Ze(){const e=(0,A.e)(),t=(0,w.L)().navbar.items;return(0,u.jsx)("ul",{className:"menu__list",children:t.map(((t,n)=>(0,r.createElement)(He,{mobile:!0,...t,onClick:()=>e.toggle(),key:n})))})}function We(e){return(0,u.jsx)("button",{...e,type:"button",className:"clean-btn navbar-sidebar__back",children:(0,u.jsx)(l.Z,{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 Ge(){const e=0===(0,w.L)().navbar.items.length,t=D();return(0,u.jsxs)(u.Fragment,{children:[!e&&(0,u.jsx)(We,{onClick:()=>t.hide()}),t.content]})}function Ve(){const e=(0,A.e)();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)(Q,{}),primaryMenu:(0,u.jsx)(Ze,{}),secondaryMenu:(0,u.jsx)(Ge,{})}):null}const Ke={navbarHideable:"navbarHideable_m1mJ",navbarHidden:"navbarHidden_jGov"};function Qe(e){return(0,u.jsx)("div",{role:"presentation",...e,className:(0,a.Z)("navbar-sidebar__backdrop",e.className)})}function Ye(e){let{children:t}=e;const{navbar:{hideOnScroll:n,style:o}}=(0,w.L)(),s=(0,A.e)(),{navbarRef:i,isNavbarVisible:d}=function(e){const[t,n]=(0,r.useState)(e),a=(0,r.useRef)(!1),o=(0,r.useRef)(0),s=(0,r.useCallback)((e=>{null!==e&&(o.current=e.getBoundingClientRect().height)}),[]);return(0,P.RF)(((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 a.current=!0,void n(!1);n(!0)})),{navbarRef:s,isNavbarVisible:t}}(n);return(0,u.jsxs)("nav",{ref:i,"aria-label":(0,l.I)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,a.Z)("navbar","navbar--fixed-top",n&&[Ke.navbarHideable,!d&&Ke.navbarHidden],{"navbar--dark":"dark"===o,"navbar--primary":"primary"===o,"navbar-sidebar--show":s.shown}),children:[t,(0,u.jsx)(Qe,{onClick:s.toggle}),(0,u.jsx)(Ve,{})]})}var Xe=n(3905);const Je={errorBoundaryError:"errorBoundaryError_a6uf",errorBoundaryFallback:"errorBoundaryFallback_VBag"};function et(e){return(0,u.jsx)("button",{type:"button",...e,children:(0,u.jsx)(l.Z,{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 tt(e){let{error:t}=e;const n=(0,Xe.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,u.jsx)("p",{className:Je.errorBoundaryError,children:n})}class nt extends r.Component{componentDidCatch(e,t){throw this.props.onError(e,t)}render(){return this.props.children}}const rt="right";function at(e){let{width:t=30,height:n=30,className:r,...a}=e;return(0,u.jsx)("svg",{className:r,width:t,height:n,viewBox:"0 0 30 30","aria-hidden":"true",...a,children:(0,u.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"})})}function ot(){const{toggle:e,shown:t}=(0,A.e)();return(0,u.jsx)("button",{onClick:e,"aria-label":(0,l.I)({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)(at,{})})}const st={colorModeToggle:"colorModeToggle_DEke"};function it(e){let{items:t}=e;return(0,u.jsx)(u.Fragment,{children:t.map(((e,t)=>(0,u.jsx)(nt,{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)(He,{...e})},t)))})}function lt(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 ct(){const e=(0,A.e)(),t=(0,w.L)().navbar.items,[n,r]=function(e){function t(e){return"left"===(e.position??rt)}return[e.filter(t),e.filter((e=>!t(e)))]}(t),a=t.find((e=>"search"===e.type));return(0,u.jsx)(lt,{left:(0,u.jsxs)(u.Fragment,{children:[!e.disabled&&(0,u.jsx)(ot,{}),(0,u.jsx)(V,{}),(0,u.jsx)(it,{items:n})]}),right:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(it,{items:r}),(0,u.jsx)(W,{className:st.colorModeToggle}),!a&&(0,u.jsx)(Fe,{children:(0,u.jsx)(De,{})})]})})}function ut(){return(0,u.jsx)(Ye,{children:(0,u.jsx)(ct,{})})}function dt(e){let{item:t}=e;const{to:n,href:r,label:a,prependBaseUrlToHref:o,...s}=t,i=(0,X.ZP)(n),l=(0,X.ZP)(r,{forcePrependBaseUrl:!0});return(0,u.jsxs)(Y.Z,{className:"footer__link-item",...r?{href:o?l:r}:{to:i},...s,children:[a,r&&!(0,J.Z)(r)&&(0,u.jsx)(te.Z,{})]})}function pt(e){let{item:t}=e;return t.html?(0,u.jsx)("li",{className:"footer__item",dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)("li",{className:"footer__item",children:(0,u.jsx)(dt,{item:t})},t.href??t.to)}function ft(e){let{column:t}=e;return(0,u.jsxs)("div",{className:"col footer__col",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)(pt,{item:e},t)))})]})}function gt(e){let{columns:t}=e;return(0,u.jsx)("div",{className:"row footer__links",children:t.map(((e,t)=>(0,u.jsx)(ft,{column:e},t)))})}function mt(){return(0,u.jsx)("span",{className:"footer__link-separator",children:"\xb7"})}function ht(e){let{item:t}=e;return t.html?(0,u.jsx)("span",{className:"footer__link-item",dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)(dt,{item:t})}function bt(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)(ht,{item:e}),t.length!==n+1&&(0,u.jsx)(mt,{})]},n)))})})}function vt(e){let{links:t}=e;return function(e){return"title"in e[0]}(t)?(0,u.jsx)(gt,{columns:t}):(0,u.jsx)(bt,{links:t})}var yt=n(4277);const wt={footerLogoLink:"footerLogoLink_BH7S"};function xt(e){let{logo:t}=e;const{withBaseUrl:n}=(0,X.Cg)(),r={light:n(t.src),dark:n(t.srcDark??t.src)};return(0,u.jsx)(yt.Z,{className:(0,a.Z)("footer__logo",t.className),alt:t.alt,sources:r,width:t.width,height:t.height,style:t.style})}function kt(e){let{logo:t}=e;return t.href?(0,u.jsx)(Y.Z,{href:t.href,className:wt.footerLogoLink,target:t.target,children:(0,u.jsx)(xt,{logo:t})}):(0,u.jsx)(xt,{logo:t})}function jt(e){let{copyright:t}=e;return(0,u.jsx)("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}})}function St(e){let{style:t,links:n,logo:r,copyright:o}=e;return(0,u.jsx)("footer",{className:(0,a.Z)("footer",{"footer--dark":"dark"===t}),children:(0,u.jsxs)("div",{className:"container container-fluid",children:[n,(r||o)&&(0,u.jsxs)("div",{className:"footer__bottom text--center",children:[r&&(0,u.jsx)("div",{className:"margin-bottom--sm",children:r}),o]})]})})}function _t(){const{footer:e}=(0,w.L)();if(!e)return null;const{copyright:t,links:n,logo:r,style:a}=e;return(0,u.jsx)(St,{style:a,links:n&&n.length>0&&(0,u.jsx)(vt,{links:n}),logo:r&&(0,u.jsx)(kt,{logo:r}),copyright:t&&(0,u.jsx)(jt,{copyright:t})})}const Et=r.memo(_t),Ct=(0,L.Qc)([F.S,x.p,P.OC,$e.L5,s.VC,function(e){let{children:t}=e;return(0,u.jsx)(R.n2,{children:(0,u.jsx)(A.M,{children:(0,u.jsx)(O,{children:t})})})}]);function Tt(e){let{children:t}=e;return(0,u.jsx)(Ct,{children:t})}var At=n(3899);function Pt(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)(At.Z,{as:"h1",className:"hero__title",children:(0,u.jsx)(l.Z,{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)(et,{onClick:n,className:"button button--primary shadow--lw"})}),(0,u.jsx)("hr",{}),(0,u.jsx)("div",{className:"margin-vert--md",children:(0,u.jsx)(tt,{error:t})})]})})})}const Lt={mainWrapper:"mainWrapper_z2l0"};function Rt(e){const{children:t,noFooter:n,wrapperClassName:r,title:i,description:l}=e;return(0,b.t)(),(0,u.jsxs)(Tt,{children:[(0,u.jsx)(s.d,{title:i,description:l}),(0,u.jsx)(y,{}),(0,u.jsx)(T,{}),(0,u.jsx)(ut,{}),(0,u.jsx)("div",{id:d,className:(0,a.Z)(h.k.wrapper.main,Lt.mainWrapper,r),children:(0,u.jsx)(o.Z,{fallback:e=>(0,u.jsx)(Pt,{...e}),children:t})}),!n&&(0,u.jsx)(Et,{})]})}},6811:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});n(7294);var r=n(4791),a=n(9524),o=n(9962),s=n(107),i=n(4277),l=n(5893);function c(e){let{logo:t,alt:n,imageClassName:r}=e;const o={light:(0,a.ZP)(t.src),dark:(0,a.ZP)(t.srcDark||t.src)},s=(0,l.jsx)(i.Z,{className:t.className,sources:o,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,o.Z)(),{navbar:{title:n,logo:i}}=(0,s.L)(),{imageClassName:u,titleClassName:d,...p}=e,f=(0,a.ZP)(i?.href||"/"),g=n?"":t,m=i?.alt??g;return(0,l.jsxs)(r.Z,{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})]})}},3647:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});n(7294);var r=n(1514),a=n(5893);function o(e){let{locale:t,version:n,tag:o}=e;const s=t;return(0,a.jsxs)(r.Z,{children:[t&&(0,a.jsx)("meta",{name:"docusaurus_locale",content:t}),n&&(0,a.jsx)("meta",{name:"docusaurus_version",content:n}),o&&(0,a.jsx)("meta",{name:"docusaurus_tag",content:o}),s&&(0,a.jsx)("meta",{name:"docsearch:language",content:s}),n&&(0,a.jsx)("meta",{name:"docsearch:version",content:n}),o&&(0,a.jsx)("meta",{name:"docsearch:docusaurus_tag",content:o})]})}},4277:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});var r=n(7294),a=n(512),o=n(1048),s=n(9200);const i={themedComponent:"themedComponent_mlkZ","themedComponent--light":"themedComponent--light_NVdE","themedComponent--dark":"themedComponent--dark_xIcU"};var l=n(5893);function c(e){let{className:t,children:n}=e;const c=(0,o.Z)(),{colorMode:u}=(0,s.I)();return(0,l.jsx)(l.Fragment,{children:(c?"dark"===u?["dark"]:["light"]:["light","dark"]).map((e=>{const o=n({theme:e,className:(0,a.Z)(t,i.themedComponent,i[`themedComponent--${e}`])});return(0,l.jsx)(r.Fragment,{children:o},e)}))})}function u(e){const{sources:t,className:n,alt:r,...a}=e;return(0,l.jsx)(c,{className:n,children:e=>{let{theme:n,className:o}=e;return(0,l.jsx)("img",{src:t[n],alt:r,className:o,...a})}})}},4639:(e,t,n)=>{"use strict";n.d(t,{u:()=>c,z:()=>b});var r=n(7294),a=n(6136),o=n(1270),s=n(8986),i=n(5893);const l="ease-in-out";function c(e){let{initialState:t}=e;const[n,a]=(0,r.useState)(t??!1),o=(0,r.useCallback)((()=>{a((e=>!e))}),[]);return{collapsed:n,setCollapsed:a,toggleCollapsed:o}}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:a}=e;const o=(0,r.useRef)(!1);(0,r.useEffect)((()=>{const e=t.current;function r(){const t=e.scrollHeight,n=a?.duration??function(e){if((0,s.n)())return 1;const t=e/36;return Math.round(10*(4+15*t**.25+t/5))}(t);return{transition:`height ${n}ms ${a?.easing??l}`,height:`${t}px`}}function i(){const t=r();e.style.transition=t.transition,e.style.height=t.height}if(!o.current)return p(e,n),void(o.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,a])}function g(e){if(!a.Z.canUseDOM)return e?u:d}function m(e){let{as:t="div",collapsed:n,children:a,animation:o,onCollapseTransitionEnd:s,className:l,disableSSRStyle:c}=e;const u=(0,r.useRef)(null);return f({collapsibleRef:u,collapsed:n,animation:o}),(0,i.jsx)(t,{ref:u,style:c?void 0:g(n),onTransitionEnd:e=>{"height"===e.propertyName&&(p(u.current,n),s?.(n))},className:l,children:a})}function h(e){let{collapsed:t,...n}=e;const[a,s]=(0,r.useState)(!t),[l,c]=(0,r.useState)(t);return(0,o.Z)((()=>{t||s(!0)}),[t]),(0,o.Z)((()=>{a&&c(t)}),[a,t]),a?(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})}},5830:(e,t,n)=>{"use strict";n.d(t,{n:()=>m,p:()=>g});var r=n(7294),a=n(1048),o=n(1027),s=n(3768),i=n(107),l=n(5893);const c=(0,o.WA)("docusaurus.announcement.dismiss"),u=(0,o.WA)("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.L)(),t=(0,a.Z)(),[n,o]=(0,r.useState)((()=>!!t&&d()));(0,r.useEffect)((()=>{o(d())}),[]);const s=(0,r.useCallback)((()=>{p(!0),o(!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()||o(!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.i6("AnnouncementBarProvider");return e}},9200:(e,t,n)=>{"use strict";n.d(t,{I:()=>b,S:()=>h});var r=n(7294),a=n(6136),o=n(3768),s=n(1027),i=n(107),l=n(5893);const c=r.createContext(void 0),u="theme",d=(0,s.WA)(u),p={light:"light",dark:"dark"},f=e=>e===p.dark?p.dark:p.light,g=e=>a.Z.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.L)(),[a,o]=(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:a=!0}=r;t?(o(t),a&&m(t)):(o(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(a))}),[a]),(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:a,setColorMode:s,get isDarkTheme(){return a===p.dark},setLightTheme(){s(p.light)},setDarkTheme(){s(p.dark)}})),[a,s])}();return(0,l.jsx)(c.Provider,{value:n,children:t})}function b(){const e=(0,r.useContext)(c);if(null==e)throw new o.i6("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},6409:(e,t,n)=>{"use strict";n.d(t,{J:()=>y,L5:()=>b,Oh:()=>w});var r=n(7294),a=n(9871),o=n(6875),s=n(107),i=n(8259),l=n(3768),c=n(1027),u=n(5893);const d=e=>`docs-preferred-version-${e}`,p={save:(e,t,n)=>{(0,c.WA)(d(e),{persistence:t}).set(n)},read:(e,t)=>(0,c.WA)(d(e),{persistence:t}).get(),clear:(e,t)=>{(0,c.WA)(d(e),{persistence:t}).del()}},f=e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}])));const g=r.createContext(null);function m(){const e=(0,a._r)(),t=(0,s.L)().docs.versionPersistence,n=(0,r.useMemo)((()=>Object.keys(e)),[e]),[o,i]=(0,r.useState)((()=>f(n)));(0,r.useEffect)((()=>{i(function(e){let{pluginIds:t,versionPersistence:n,allDocsData:r}=e;function a(e){const t=p.read(e,n);return r[e].versions.some((e=>e.name===t))?{preferredVersionName:t}:(p.clear(e,n),{preferredVersionName:null})}return Object.fromEntries(t.map((e=>[e,a(e)])))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]);return[o,(0,r.useMemo)((()=>({savePreferredVersion:function(e,n){p.save(e,t,n),i((t=>({...t,[e]:{preferredVersionName:n}})))}})),[t])]}function h(e){let{children:t}=e;const n=m();return(0,u.jsx)(g.Provider,{value:n,children:t})}function b(e){let{children:t}=e;return i.cE?(0,u.jsx)(h,{children:t}):(0,u.jsx)(u.Fragment,{children:t})}function v(){const e=(0,r.useContext)(g);if(!e)throw new l.i6("DocsPreferredVersionContextProvider");return e}function y(e){void 0===e&&(e=o.m);const t=(0,a.zh)(e),[n,s]=v(),{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 w(){const e=(0,a._r)(),[t]=v();function n(n){const r=e[n],{preferredVersionName:a}=t[n];return r.versions.find((e=>e.name===a))??null}const r=Object.keys(e);return Object.fromEntries(r.map((e=>[e,n(e)])))}},4432:(e,t,n)=>{"use strict";n.d(t,{V:()=>c,b:()=>l});var r=n(7294),a=n(3768),o=n(5893);const s=Symbol("EmptyContext"),i=r.createContext(s);function l(e){let{children:t,name:n,items:a}=e;const s=(0,r.useMemo)((()=>n&&a?{name:n,items:a}:null),[n,a]);return(0,o.jsx)(i.Provider,{value:s,children:t})}function c(){const e=(0,r.useContext)(i);if(e===s)throw new a.i6("DocsSidebarProvider");return e}},8801:(e,t,n)=>{"use strict";n.d(t,{E:()=>l,q:()=>i});var r=n(7294),a=n(3768),o=n(5893);const s=r.createContext(null);function i(e){let{children:t,version:n}=e;return(0,o.jsx)(s.Provider,{value:n,children:t})}function l(){const e=(0,r.useContext)(s);if(null===e)throw new a.i6("DocsVersionProvider");return e}},735:(e,t,n)=>{"use strict";n.d(t,{M:()=>p,e:()=>f});var r=n(7294),a=n(3086),o=n(3488),s=n(5238),i=n(107),l=n(3768),c=n(5893);const u=r.createContext(void 0);function d(){const e=function(){const e=(0,a.HY)(),{items:t}=(0,i.L)().navbar;return 0===t.length&&!e.component}(),t=(0,o.i)(),n=!e&&"mobile"===t,[l,c]=(0,r.useState)(!1);(0,s.Rb)((()=>{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.i6("NavbarMobileSidebarProvider");return e}},3086:(e,t,n)=>{"use strict";n.d(t,{HY:()=>l,Zo:()=>c,n2:()=>i});var r=n(7294),a=n(3768),o=n(5893);const s=r.createContext(null);function i(e){let{children:t}=e;const n=(0,r.useState)({component:null,props:null});return(0,o.jsx)(s.Provider,{value:n,children:t})}function l(){const e=(0,r.useContext)(s);if(!e)throw new a.i6("NavbarSecondaryMenuContentProvider");return e[0]}function c(e){let{component:t,props:n}=e;const o=(0,r.useContext)(s);if(!o)throw new a.i6("NavbarSecondaryMenuContentProvider");const[,i]=o,l=(0,a.Ql)(n);return(0,r.useEffect)((()=>{i({component:t,props:l})}),[i,t,l]),(0,r.useEffect)((()=>()=>i({component:null,props:null})),[i]),null}},8181:(e,t,n)=>{"use strict";n.d(t,{h:()=>a,t:()=>o});var r=n(7294);const a="navigation-with-keyboard";function o(){(0,r.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(a),"mousedown"===e.type&&document.body.classList.remove(a)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(a),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},5358:(e,t,n)=>{"use strict";n.d(t,{K:()=>i,M:()=>l});var r=n(7294),a=n(9962),o=n(5238);const s="q";function i(){return(0,o.Nc)(s)}function l(){const{siteConfig:{baseUrl:e,themeConfig:t}}=(0,a.Z)(),{algolia:{searchPagePath:n}}=t;return(0,r.useCallback)((t=>`${e}${n}?${s}=${encodeURIComponent(t)}`),[e,n])}},3488:(e,t,n)=>{"use strict";n.d(t,{i:()=>i});var r=n(7294),a=n(6136);const o={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(!a.Z.canUseDOM)throw new Error("getWindowSize() should only be called after React hydration");return window.innerWidth>e?o.desktop:o.mobile}(t))}return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[t]),n}},3702:(e,t,n)=>{"use strict";n.d(t,{k:()=>r});const r={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-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",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"}}},8986:(e,t,n)=>{"use strict";function r(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}n.d(t,{n:()=>r})},8259:(e,t,n)=>{"use strict";n.d(t,{LM:()=>f,SN:()=>S,_F:()=>h,cE:()=>p,f:()=>v,lO:()=>x,oz:()=>k,s1:()=>w,vY:()=>j});var r=n(7294),a=n(6550),o=n(8790),s=n(9871),i=n(6409),l=n(8801),c=n(4432),u=n(3609),d=n(9003);const p=!!s._r;function f(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=f(t);if(e)return e}}(e):void 0:e.href}const g=(e,t)=>void 0!==e&&(0,d.Mg)(e,t),m=(e,t)=>e.some((e=>h(e,t)));function h(e,t){return"link"===e.type?g(e.href,t):"category"===e.type&&(g(e.href,t)||m(e.items,t))}function b(e,t){switch(e.type){case"category":return h(e,t)||e.items.some((e=>b(e,t)));case"link":return!e.unlisted||h(e,t);default:return!0}}function v(e,t){return(0,r.useMemo)((()=>e.filter((e=>b(e,t)))),[e,t])}function y(e){let{sidebarItems:t,pathname:n,onlyCategories:r=!1}=e;const a=[];return function e(t){for(const o of t)if("category"===o.type&&((0,d.Mg)(o.href,n)||e(o.items))||"link"===o.type&&(0,d.Mg)(o.href,n)){return r&&"category"!==o.type||a.unshift(o),!0}return!1}(t),a}function w(){const e=(0,c.V)(),{pathname:t}=(0,a.TH)(),n=(0,s.gA)()?.pluginData.breadcrumbs;return!1!==n&&e?y({sidebarItems:e.items,pathname:t}):null}function x(e){const{activeVersion:t}=(0,s.Iw)(e),{preferredVersion:n}=(0,i.J)(e),a=(0,s.yW)(e);return(0,r.useMemo)((()=>(0,u.j)([t,n,a].filter(Boolean))),[t,n,a])}function k(e,t){const n=x(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=x(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,u.j)(t.map((e=>e.id))).join("\n- ")}`)}return r}),[e,n])}function S(e){let{route:t}=e;const n=(0,a.TH)(),r=(0,l.E)(),s=t.routes,i=s.find((e=>(0,a.LX)(n.pathname,e)));if(!i)return null;const c=i.sidebar,u=c?r.docsSidebars[c]:void 0;return{docElement:(0,o.H)(s),sidebarName:c,sidebarItems:u}}},2733:(e,t,n)=>{"use strict";n.d(t,{p:()=>a});var r=n(9962);function a(e){const{siteConfig:t}=(0,r.Z)(),{title:n,titleDelimiter:a}=t;return e?.trim().length?`${e.trim()} ${a} ${n}`:n}},5238:(e,t,n)=>{"use strict";n.d(t,{Nc:()=>c,Rb:()=>s,_X:()=>l});var r=n(7294),a=n(6550),o=n(3768);function s(e){!function(e){const t=(0,a.k6)(),n=(0,o.zX)(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,a.k6)();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,a.k6)();return(0,r.useCallback)(((n,r)=>{const a=new URLSearchParams(t.location.search);n?a.set(e,n):a.delete(e),(r?.push?t.push:t.replace)({search:a.toString()})}),[e,t])}(e);return[t,n]}},3609:(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 a(e){return Array.from(new Set(e))}n.d(t,{j:()=>a,l:()=>r})},9488:(e,t,n)=>{"use strict";n.d(t,{FG:()=>f,d:()=>d,VC:()=>g});var r=n(7294),a=n(512),o=n(1514),s=n(9656);function i(){const e=r.useContext(s._);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}var l=n(9524),c=n(2733),u=n(5893);function d(e){let{title:t,description:n,keywords:r,image:a,children:s}=e;const i=(0,c.p)(t),{withBaseUrl:d}=(0,l.Cg)(),p=a?d(a,{absolute:!0}):void 0;return(0,u.jsxs)(o.Z,{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,a.Z)(s,t);return(0,u.jsxs)(p.Provider,{value:i,children:[(0,u.jsx)(o.Z,{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 o=`plugin-id-${n.plugin.id}`;return(0,u.jsx)(f,{className:(0,a.Z)(r,o),children:t})}},3768:(e,t,n)=>{"use strict";n.d(t,{D9:()=>i,Qc:()=>u,Ql:()=>c,i6:()=>l,zX:()=>s});var r=n(7294),a=n(1270),o=n(5893);function s(e){const t=(0,r.useRef)(e);return(0,a.Z)((()=>{t.current=e}),[e]),(0,r.useCallback)((function(){return t.current(...arguments)}),[])}function i(e){const t=(0,r.useRef)();return(0,a.Z)((()=>{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,o.jsx)(o.Fragment,{children:e.reduceRight(((e,t)=>(0,o.jsx)(t,{children:e})),n)})}}},1500:(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,{F:()=>r})},9003:(e,t,n)=>{"use strict";n.d(t,{Mg:()=>s,Ns:()=>i});var r=n(7294),a=n(997),o=n(9962);function s(e,t){const n=e=>(!e||e.endsWith("/")?e:`${e}/`)?.toLowerCase();return n(e)===n(t)}function i(){const{baseUrl:e}=(0,o.Z)().siteConfig;return(0,r.useMemo)((()=>function(e){let{baseUrl:t,routes:n}=e;function r(e){return e.path===t&&!0===e.exact}function a(e){return e.path===t&&!e.exact}return function e(t){if(0===t.length)return;return t.find(r)||e(t.filter(a).flatMap((e=>e.routes??[])))}(n)}({routes:a.Z,baseUrl:e})),[e])}},2957:(e,t,n)=>{"use strict";n.d(t,{Ct:()=>m,OC:()=>u,RF:()=>f,o5:()=>g});var r=n(7294),a=n(6136),o=n(1048),s=n(1270),i=n(3768),l=n(5893);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.i6("ScrollControllerProvider");return e}const p=()=>a.Z.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function f(e,t){void 0===t&&(t=[]);const{scrollEventsEnabledRef:n}=d(),a=(0,r.useRef)(p()),o=(0,i.zX)(e);(0,r.useEffect)((()=>{const e=()=>{if(!n.current)return;const e=p();o(e,a.current),a.current=e},t={passive:!0};return e(),window.addEventListener("scroll",e,t),()=>window.removeEventListener("scroll",e,t)}),[o,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),a=(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.Z)((()=>{queueMicrotask((()=>n.current?.()))})),{blockElementScrollPositionUntilNextRender:a}}function m(){const e=(0,r.useRef)(null),t=(0,o.Z)()&&"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 a=document.documentElement.scrollTop;(n&&a>e||!n&&at&&cancelAnimationFrame(t)}(n)},cancelScroll:()=>e.current?.()}}},246:(e,t,n)=>{"use strict";n.d(t,{HX:()=>s,_q:()=>l,os:()=>i});var r=n(9871),a=n(9962),o=n(6409);const s="default";function i(e,t){return`docs-${e}-${t}`}function l(){const{i18n:e}=(0,a.Z)(),t=(0,r._r)(),n=(0,r.WS)(),l=(0,o.Oh)();const c=[s,...Object.keys(t).map((function(e){const r=n?.activePlugin.pluginId===e?n.activeVersion:void 0,a=l[e],o=t[e].versions.find((e=>e.isLast));return i(e,(r??a??o).name)}))];return{locale:e.currentLocale,tags:c}}},1027:(e,t,n)=>{"use strict";n.d(t,{WA:()=>u,Nk:()=>d});var r=n(7294);const a=JSON.parse('{"d":"localStorage","u":""}'),o=a.d;function s(e){let{key:t,oldValue:n,newValue:r,storage:a}=e;if(n===r)return;const o=document.createEvent("StorageEvent");o.initStorageEvent("storage",!1,!1,t,n,r,window.location.href,a),window.dispatchEvent(o)}function i(e){if(void 0===e&&(e=o),"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}${a.u}`;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(),a=(0,r.useCallback)((e=>"undefined"==typeof window?()=>{}:n.listen(e)),[n]);return[(0,r.useSyncExternalStore)(a,(()=>"undefined"==typeof window?null:n.get()),(()=>null)),n]}},626:(e,t,n)=>{"use strict";n.d(t,{l:()=>s});var r=n(9962),a=n(6550),o=n(3905);function s(){const{siteConfig:{baseUrl:e,url:t,trailingSlash:n},i18n:{defaultLocale:s,currentLocale:i}}=(0,r.Z)(),{pathname:l}=(0,a.TH)(),c=(0,o.applyTrailingSlash)(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}`}}}},3266:(e,t,n)=>{"use strict";n.d(t,{S:()=>s});var r=n(7294),a=n(6550),o=n(3768);function s(e){const t=(0,a.TH)(),n=(0,o.D9)(t),s=(0,o.zX)(e);(0,r.useEffect)((()=>{n&&t!==n&&s({location:t,previousLocation:n})}),[s,t,n])}},107:(e,t,n)=>{"use strict";n.d(t,{L:()=>a});var r=n(9962);function a(){return(0,r.Z)().siteConfig.themeConfig}},7263:(e,t,n)=>{"use strict";n.d(t,{L:()=>a});var r=n(9962);function a(){const{siteConfig:{themeConfig:e}}=(0,r.Z)();return e}},2327:(e,t,n)=>{"use strict";n.d(t,{l:()=>i});var r=n(7294),a=n(1500),o=n(9524),s=n(7263);function i(){const{withBaseUrl:e}=(0,o.Cg)(),{algolia:{externalUrlRegex:t,replaceSearchResultPathname:n}}=(0,s.L)();return(0,r.useCallback)((r=>{const o=new URL(r);if((0,a.F)(t,o.href))return r;const s=`${o.pathname+o.hash}`;return e(function(e,t){return t?e.replaceAll(new RegExp(t.from,"g"),t.to):e}(s,n))}),[e,t,n])}},4136:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.removeTrailingSlash=t.addLeadingSlash=t.addTrailingSlash=void 0;const r=n(1827);function a(e){return e.endsWith("/")?e:`${e}/`}function o(e){return(0,r.removeSuffix)(e,"/")}t.addTrailingSlash=a,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,n?a(l):o(l));var l;return e.replace(s,i)},t.addLeadingSlash=function(e){return(0,r.addPrefix)(e,"/")},t.removeTrailingSlash=o},5806:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=void 0,t.getErrorCausalChain=function e(t){return t.cause?[t,...e(t.cause)]:[t]}},3905:function(e,t,n){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=t.removePrefix=t.addSuffix=t.removeSuffix=t.addPrefix=t.removeTrailingSlash=t.addLeadingSlash=t.addTrailingSlash=t.applyTrailingSlash=t.blogPostContainerID=void 0,t.blogPostContainerID="__blog-post-container";var a=n(4136);Object.defineProperty(t,"applyTrailingSlash",{enumerable:!0,get:function(){return r(a).default}}),Object.defineProperty(t,"addTrailingSlash",{enumerable:!0,get:function(){return a.addTrailingSlash}}),Object.defineProperty(t,"addLeadingSlash",{enumerable:!0,get:function(){return a.addLeadingSlash}}),Object.defineProperty(t,"removeTrailingSlash",{enumerable:!0,get:function(){return a.removeTrailingSlash}});var o=n(1827);Object.defineProperty(t,"addPrefix",{enumerable:!0,get:function(){return o.addPrefix}}),Object.defineProperty(t,"removeSuffix",{enumerable:!0,get:function(){return o.removeSuffix}}),Object.defineProperty(t,"addSuffix",{enumerable:!0,get:function(){return o.addSuffix}}),Object.defineProperty(t,"removePrefix",{enumerable:!0,get:function(){return o.removePrefix}});var s=n(5806);Object.defineProperty(t,"getErrorCausalChain",{enumerable:!0,get:function(){return s.getErrorCausalChain}})},1827:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.removePrefix=t.addSuffix=t.removeSuffix=t.addPrefix=void 0,t.addPrefix=function(e,t){return e.startsWith(t)?e:`${t}${e}`},t.removeSuffix=function(e,t){return""===t?e: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}},9318:(e,t,n)=>{"use strict";n.d(t,{lX:()=>w,q_:()=>E,ob:()=>f,PP:()=>T,Ep:()=>p});var r=n(7462);function a(e){return"/"===e.charAt(0)}function o(e,t){for(var n=t,r=n+1,a=e.length;r=0;p--){var f=s[p];"."===f?o(s,p):".."===f?(o(s,p),d++):d&&(o(s,p),d--)}if(!c)for(;d--;d)s.unshift("..");!c||""===s[0]||s[0]&&a(s[0])||s.unshift("");var g=s.join("/");return n&&"/"!==g.substr(-1)&&(g+="/"),g};var i=n(2177);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,a=t||"/";return n&&"?"!==n&&(a+="?"===n.charAt(0)?n:"?"+n),r&&"#"!==r&&(a+="#"===r.charAt(0)?r:"#"+r),a}function f(e,t,n,a){var o;"string"==typeof e?(o=function(e){var t=e||"/",n="",r="",a=t.indexOf("#");-1!==a&&(r=t.substr(a),t=t.substr(0,a));var o=t.indexOf("?");return-1!==o&&(n=t.substr(o),t=t.substr(0,o)),{pathname:t,search:"?"===n?"":n,hash:"#"===r?"":r}}(e),o.state=t):(void 0===(o=(0,r.Z)({},e)).pathname&&(o.pathname=""),o.search?"?"!==o.search.charAt(0)&&(o.search="?"+o.search):o.search="",o.hash?"#"!==o.hash.charAt(0)&&(o.hash="#"+o.hash):o.hash="",void 0!==t&&void 0===o.state&&(o.state=t));try{o.pathname=decodeURI(o.pathname)}catch(i){throw i instanceof URIError?new URIError('Pathname "'+o.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):i}return n&&(o.key=n),a?o.pathname?"/"!==o.pathname.charAt(0)&&(o.pathname=s(o.pathname,a.pathname)):o.pathname=a.pathname:o.pathname||(o.pathname="/"),o}function g(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,r,a){if(null!=e){var o="function"==typeof e?e(t,n):e;"string"==typeof o?"function"==typeof r?r(o,a):a(!0):a(!1!==o)}else a(!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,a):n.push(a),d({action:r,location:a,index:t,entries:n})}}))},replace:function(e,t){var r="REPLACE",a=f(e,t,m(),w.location);u.confirmTransitionTo(a,r,n,(function(e){e&&(w.entries[w.index]=a,d({action:r,location:a}))}))},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(9864),a={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},o={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]||a}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 a=f(n);a&&a!==g&&e(t,a,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,a,o,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,a,o,s,i],u=0;(l=new Error(t.replace(/%s/g,(function(){return c[u++]})))).name="Invariant Violation"}throw l.framesToPop=1,l}}},5826:e=>{e.exports=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)}},984:(e,t,n)=>{"use strict";n.r(t)},6930:(e,t,n)=>{"use strict";n.r(t)},4865:function(e,t,n){var r,a;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 a(e,t,n){return en?n:e}function o(e){return 100*(-1+e)}function s(e,t,n){var a;return(a="translate3d"===r.positionUsing?{transform:"translate3d("+o(e)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+o(e)+"%,0)"}:{"margin-left":o(e)+"%"}).transition="all "+t+"ms "+n,a}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=a(e,r.minimum,1),n.status=1===e?null:e;var o=n.render(!t),c=o.querySelector(r.barSelector),u=r.speed,d=r.easing;return o.offsetWidth,i((function(t){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),l(c,s(e,u,d)),1===e?(l(o,{transition:"none",opacity:1}),o.offsetWidth,setTimeout((function(){l(o,{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)*a(Math.random()*t,.1,.95)),t=a(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 a,s=t.querySelector(r.barSelector),i=e?"-100":o(n.status||0),c=document.querySelector(r.parent);return l(s,{transition:"all 0 linear",transform:"translate3d("+i+"%,0,0)"}),r.showSpinner||(a=t.querySelector(r.spinnerSelector))&&f(a),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,a=e.length,o=t.charAt(0).toUpperCase()+t.slice(1);a--;)if((r=e[a]+o)in n)return r;return t}function a(e){return e=n(e),t[e]||(t[e]=r(e))}function o(e,t,n){t=a(t),e.style[t]=n}return function(e,t){var n,r,a=arguments;if(2==a.length)for(n in t)void 0!==(r=t[n])&&t.hasOwnProperty(n)&&o(e,n,r);else o(e,a[1],a[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===(a="function"==typeof r?r.call(t,n,t,e):r)||(e.exports=a)},9901: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"}}})},2885:(e,t,n)=>{const r=n(9901),a=n(9642),o=new Set;function s(e){void 0===e?e=Object.keys(r.languages).filter((e=>"meta"!=e)):Array.isArray(e)||(e=[e]);const t=[...o,...Object.keys(Prism.languages)];a(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(6500).resolve(t)],delete Prism.languages[e],n(6500)(t),o.add(e)}))}s.silent=!1,e.exports=s},6854:()=>{!function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,r,a,o){if(n.language===r){var s=n.tokenStack=[];n.code=n.code.replace(a,(function(e){if("function"==typeof o&&!o(e))return e;for(var a,i=s.length;-1!==n.code.indexOf(a=t(r,i));)++i;return s[i]=e,a})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,r){if(n.language===r&&n.tokenStack){n.grammar=e.languages[r];var a=0,o=Object.keys(n.tokenStack);!function s(i){for(var l=0;l=o.length);l++){var c=i[l];if("string"==typeof c||c.content&&"string"==typeof c.content){var u=o[a],d=n.tokenStack[u],p="string"==typeof c?c:c.content,f=t(r,u),g=p.indexOf(f);if(g>-1){++a;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)},6726:(e,t,n)=>{var r={"./":2885};function a(e){var t=o(e);return n(t)}function o(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}a.keys=function(){return Object.keys(r)},a.resolve=o,e.exports=a,a.id=6726},6500:(e,t,n)=>{var r={"./":2885};function a(e){var t=o(e);return n(t)}function o(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}a.keys=function(){return Object.keys(r)},a.resolve=o,e.exports=a,a.id=6500},9642: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 a(t,o),i[t]=!0,n[t])i[s]=!0}t(l.require,c),t(l.optional,c),t(l.modify,c)}n[r]=i,o.pop()}}return function(e){var t=n[e];return t||(a(e,r),t=n[e]),t}}function a(e){for(var t in e)return!0;return!1}return function(o,s,i){var l=function(e){var t={};for(var n in e){var r=e[n];for(var a in r)if("meta"!=a){var o=r[a];t[a]="string"==typeof o?{title:o}:o}}return t}(o),c=function(e){var n;return function(r){if(r in e)return r;if(!n)for(var a in n={},e){var o=e[a];t(o&&o.alias,(function(t){if(t in n)throw new Error(t+" cannot be alias for both "+a+" and "+n[t]);if(t in e)throw new Error(t+" cannot be alias of "+a+" because it is a component.");n[t]=a}))}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;a(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,a){var o=a?a.series:void 0,s=a?a.parallel:e,i={},l={};function c(e){if(e in i)return i[e];l[e]=!0;var a,u=[];for(var d in t(e))d in n&&u.push(d);if(0===u.length)a=r(e);else{var p=s(u.map((function(e){var t=c(e);return delete l[e],t})));o?a=o(p,(function(){return r(e)})):r(e)}return i[e]=a}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},2703:(e,t,n)=>{"use strict";var r=n(414);function a(){}function o(){}o.resetWarningCache=a,e.exports=function(){function e(e,t,n,a,o,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:o,resetWarningCache:a};return n.PropTypes=n,n}},5697:(e,t,n)=>{e.exports=n(2703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},4448:(e,t,n)=>{"use strict";var r=n(7294),a=n(3840);function o(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n