--- title: Create a component harness for your tests with Angular CDK description: A step-by-step guide to creating and consuming custom Angular CDK component harnesses. Covers extending ComponentHarness, using locatorFor to query child... canonical: https://daily.dev/posts/create-a-component-harness-for-your-tests-with-angular-cdk-lwgwv9ltk twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Create a component harness for your tests with Angular CDK | daily.dev og:description: A step-by-step guide to creating and consuming custom Angular CDK component harnesses. Covers extending ComponentHarness, using locatorFor to query child... og:url: https://daily.dev/posts/create-a-component-harness-for-your-tests-with-angular-cdk-lwgwv9ltk og:image: https://api.daily.dev/og/posts/lwGWV9ltk.png og:image:alt: Create a component harness for your tests with Angular CDK og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Create a component harness for your tests with Angular CDK **[Playful Programming](https://daily.dev/sources/playfulprogramming)** · [@layzeedk](https://daily.dev/layzeedk) · 24 min read · 0 upvotes · 0 comments ## Summary A step-by-step guide to creating and consuming custom Angular CDK component harnesses. Covers extending ComponentHarness, using locatorFor to query child harnesses like MatSelectHarness, implementing harness filters, and reusing the same harness across unit tests (TestbedHarnessEnvironment) and end-to-end tests (ProtractorHarnessEnvironment). Also addresses practical issues like whitespace differences between test environments and animation flakiness, with solutions using coerceRegExp and forceStabilize. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: --- Tags: [#testing](https://daily.dev/tags/testing), [#typescript](https://daily.dev/tags/typescript), [#angular](https://daily.dev/tags/angular) [View this post on daily.dev](https://daily.dev/posts/create-a-component-harness-for-your-tests-with-angular-cdk-lwgwv9ltk) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Create a component harness for your tests with Angular CDK","url":"https://daily.dev/posts/create-a-component-harness-for-your-tests-with-angular-cdk-lwgwv9ltk","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/create-a-component-harness-for-your-tests-with-angular-cdk-lwgwv9ltk"},"datePublished":"2026-03-16T21:46:54.725Z","dateModified":"2026-03-17T18:02:11.084Z","description":"A step-by-step guide to creating and consuming custom Angular CDK component harnesses. Covers extending ComponentHarness, using locatorFor to query child...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/f0fb3b1c0be531cff5d4d02767cef785?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/f0fb3b1c0be531cff5d4d02767cef785?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Playful Programming","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Person","name":"Lars Gyrup Brink Nielsen","url":"https://daily.dev/layzeedk","image":"https://avatars1.githubusercontent.com/u/6364586?v=4","description":"Tech Writer, Tech Speaker, FOSS Maintainer, Microsoft MVP.","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":410}},"commentCount":0,"discussionUrl":"https://daily.dev/posts/create-a-component-harness-for-your-tests-with-angular-cdk-lwgwv9ltk","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"testing,typescript,angular","timeRequired":"PT24M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Playful Programming","item":"https://daily.dev/sources/playfulprogramming"},{"@type":"ListItem","position":3,"name":"Create a component harness for your tests with Angular CDK"}]} ```