Unit Testing - Stencil.js

Stencil makes it easy to unit test components and app utility functions using Jest. Unit tests validate the code in isolation. Well written tests are fast, ... DocsResourcesBlogEnterpriseEnglish日本語IntroductionOverviewGoalsandObjectivesGettingStartedMyFirstComponentComponentsAPIComponentLifecycleMethodsPropertiesInternalStateReactiveDataUsingJSXEventsMethodsHostElementStylingFunctionalComponentsFrameworkIntegrationsOverviewBindingsAngularReactVueEmberJavaScriptStaticSiteGenerationOverviewPrerenderConfigBasicsDebuggingMetatagsServerSideRenderingDeploymentConfigOverviewDevServerPluginsExtrasCLIOutputTargetsOverviewdistdist-custom-elementsdist-custom-elements-bundlewwwstatsdocs-readmedocs-jsondocs-customCopyTasksGuidesAssetsBundlingDesignSystemsFormsHydrateAppPublishingServiceWorkersStencilStoreStyleGuideTypedComponentsWebWorkersTestingOverviewConfigUnitTestingEnd-to-endTestingMockingVisualScreenshotDiffScreenshotConnectorCoreCompilerAPICompilerAPICLIAPIDevServerAPICommunityStencilonTwitterStencilonSlackStencilonGitHubLegalTelemetryPrivacyPolicyReferenceSupportPolicyVersioningBrowserSupportFAQUnitTesting Stencilmakesiteasytounittestcomponentsandapputilityfunctionsusing Jest.Unittestsvalidatethecodeinisolation.Wellwrittentestsarefast,repeatable,andeasytoreasonabout. Torununittests,runstenciltest--spec.Filesendingin .spec.tswillbeexecuted. newSpecPage() InordertounittestacomponentasrenderedHTML,testscanuse newSpecPage()importedfrom @stencil/core/testing.Thistestingutilitymethodissimilarto newE2EPage(),however, newSpecPage()ismuchfastersinceitdoesnotrequireafull Puppeteerinstancetoberunning.Pleaseseethe newE2EPage()docsonmoreinformationaboutcompleteEnd-to-endtestingwithPuppeteer. BelowisasimpleexamplewherenewSpecPage()isgivenonecomponentclasswhichwasimported,andtheinitialHTMLtouseforthetest.Inthisexample,whenthecomponent MyCmprendersitsetsitstextcontentas"Success!".Thematcher toEqualHtml()isthenusedtoensurethecomponentrendersasexpected. import{newSpecPage}from'@stencil/core/testing'; import{MyCmp}from'../my-cmp'; it('shouldrendermycomponent',async()=>{ constpage=awaitnewSpecPage({ components:[MyCmp], html:``, }); expect(page.root).toEqualHtml(` Success! `); }); Theexamplebelowusesthetemplateoptiontotestthecomponent //mycmp.spec.tsx //Sincethe'template'argumentto`newSpecPage`isusingjsxsyntax,thisshouldbeina.tsxfile. import{h}from'@stencil/core'; import{newSpecPage}from'@stencil/core/testing'; import{MyCmp}from'../my-cmp'; it('shouldrendermycomponent',async()=>{ constgreeting='HelloWorld'; constpage=awaitnewSpecPage({ components:[MyCmp], template:()=>(), }); expect(page.root).toEqualHtml(` HelloWorld `); }); SpecPageOptions ThenewSpecPage(options)methodtakesanoptionsargumenttohelpwritetests: OptionDescription components Anarrayofcomponentstotest.Componentclassescanbeimportedintothespecfile,thentheirreferenceshouldbeaddedtothe componentarrayinordertobeusedthroughoutthetest. Required html TheinitialHTMLusedtogeneratethetest.Thiscanbeusefultoconstructacollectionofcomponentsworkingtogether,andassignHTMLattributes.Thisvaluesetsthemocked document.body.innerHTML. template TheinitialJSXusedtogeneratethetest.Usetemplatewhenyouwanttoinitializeacomponentusingtheirproperties,insteadoftheirHTMLattributes.Itwillrenderthespecifiedtemplate(JSX)into document.body. autoApplyChanges Bydefault,anychangestocomponentpropertiesandattributesmustcall page.waitForChanges()inordertotesttheupdates.Asanoption, autoApplyChangescontinuouslyflushesthequeueinthebackground.Defaultsto false cookie Setsthemockeddocument.cookie. direction Setsthemockeddirattributeon . language Setsthemockedlangattributeon . referrer Setsthemockeddocument.referrer. supportsShadowDom ManuallysetifthemockeddocumentsupportsShadowDOMornot.Defaultsto true userAgent Setsthemockednavigator.userAgent. url Setsthemockedbrowser'slocation.href. SpecPageResults Thereturned"page"objectfromnewSpecPage()containstheinitialresultsfromthefirstrender.It'salsoimportanttonotethatthereturnedpageresultisa Promise,soforconvenienceit'srecommendedtouseasync/await. Themostusefulpropertyonthepageresultswouldberoot,whichisforconveniencetofindthefirstrootcomponentinthedocument.Forexample,ifacomponentisnestedinmany