1"use strict";(self.webpackChunk_stencil_stencil_site=self.webpackChunk_stencil_stencil_site||[]).push([[6326],{47543:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>r,default:()=>h,frontMatter:()=>o,metadata:()=>d,toc:()=>l});var i=n(74848),s=n(28453);const o={title:"Testing",sidebar_label:"Overview",description:"Testing overview.",slug:"/testing-overview"},r="Testing",d={id:"testing/overview",title:"Testing",description:"Testing overview.",source:"@site/versioned_docs/version-v4.41/testing/01-overview.md",sourceDirName:"testing",slug:"/testing-overview",permalink:"/docs/v4.41/testing-overview",draft:!1,unlisted:!1,editUrl:"https://github.com/ionic-team/stencil-site/tree/main/versioned_docs/version-v4.41/testing/01-overview.md",tags:[],version:"v4.41",sidebarPosition:1,frontMatter:{title:"Testing",sidebar_label:"Overview",description:"Testing overview.",slug:"/testing-overview"},sidebar:"docs",previous:{title:"Dev Server API",permalink:"/docs/v4.41/dev-server-api"},next:{title:"Overview",permalink:"/docs/v4.41/testing/stencil-testrunner/overview"}},c={},l=[{value:"Unit Testing vs. End-to-end Testing",id:"unit-testing-vs-end-to-end-testing",level:2},{value:"Library Support",id:"library-support",level:2}];function a(e){const t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"testing",children:"Testing"})}),"\n",(0,i.jsx)(t.p,{children:"In order to ensure that your Stencil components work the way you expect, Stencil provides testing support out of the\nbox. Stencil offers both unit testing and end-to-end testing capabilities."}),"\n",(0,i.jsx)(t.h2,{id:"unit-testing-vs-end-to-end-testing",children:"Unit Testing vs. End-to-end Testing"}),"\n",(0,i.jsx)(t.p,{children:"Testing within Stencil is broken up into two distinct types: Unit tests and End-to-end (e2e) tests."}),"\n",(0,i.jsx)(t.p,{children:"There are several philosophies on how testing should be done, and how to differentiate what should be considered a unit\ntest versus an end-to-end test. Stencil takes an opinionated stance so developers have a description of each to better\nchoose when to use each type of testing:"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"Unit tests"})," focus on testing a component's methods in isolation. For example, when a method is given the argument\n",(0,i.jsx)(t.code,{children:"X"}),", it should return ",(0,i.jsx)(t.code,{children:"Y"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"End-to-end tests"})," focus on how the components are rendered in the DOM and how the individual components work\ntogether. For example, when ",(0,i.jsx)(t.code,{children:"my-component"})," has the ",(0,i.jsx)(t.code,{children:"X"})," attribute, the child component then renders the text ",(0,i.jsx)(t.code,{children:"Y"}),", and\nexpects to receive the event ",(0,i.jsx)(t.code,{children:"Z"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"library-support",children:"Library Support"}),"\n",(0,i.jsx)(t.p,{children:"Stencil currently supports the following tools for testing components:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"/docs/v4.41/testing/stencil-testrunner/overview",children:"Stencil Test Runner"}),": a built-in test runner based on Jest v27 - v29 for unit and end-to-end testing with Puppeteer to run within an actual browser in order to provide more realistic results."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"/docs/v4.41/testing/webdriverio/overview",children:"WebdriverIO"}),": a browser and mobile automation test framework for Node.js that allows you to run component and end-to-end tests across all browsers."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"/docs/v4.41/testing/playwright/overview",children:"Playwright"}),": an automated end-to-end testing framework that can run across all major browsers"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"/docs/v4.41/testing/jest",children:"Jest v30+"}),": successor of the Stencil Test Runner for unit testing support in Jest v30 and up."]}),"\n"]}),"\n",(0,i.jsx)(t.admonition,{type:"info",children:(0,i.jsx)(t.p,{children:"We are actively working to supp
1ort a wider range of testing tools, including Playwright. Stay tuned for updates!"})})]})}function h(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},28453:(e,t,n)=>{n.d(t,{R:()=>r,x:()=>d});var i=n(96540);const s={},o=i.createContext(s);function r(e){const t=i.useContext(o);return i.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(s):e.components||s:r(e.components),i.createElement(o.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.