{"id":634,"date":"2025-01-09T11:14:00","date_gmt":"2025-01-09T10:14:00","guid":{"rendered":"https:\/\/itsonix.laolaweb.com\/?p=634"},"modified":"2026-05-13T11:22:24","modified_gmt":"2026-05-13T09:22:24","slug":"testing-library-die-zukunft-des-softwaretestens","status":"publish","type":"post","link":"https:\/\/itsonix.eu\/de\/blog\/testing-library-die-zukunft-des-softwaretestens\/","title":{"rendered":"Testing Library \u2013 die Zukunft des Softwaretestens?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">In der Softwareentwicklung sind automatisierte Tests unerl\u00e4sslich, um fortw\u00e4hrend sicherzustellen, dass Anwendungen zuverl\u00e4ssig und fehlerfrei funktionieren. Sie bieten sowohl den Endnutzenden als auch den Entwicklungsteams Sicherheit und Vertrauen in die Softwarequalit\u00e4t. Gerade die Testing Library von Kent C. Dodds hat sich in den letzten Jahren als ein m\u00e4chtiges Werkzeug etabliert, das weit \u00fcber klassische Unit-Tests hinausgeht. Sie fokussiert sich dabei auf Tests f\u00fcr Applikationen, die auf Web-Technologien basieren, wie React, Angular, Vue oder auch React Native.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In diesem Beitrag beleuchten unsere Xperten, warum Tests so wichtig sind, welche Prinzipien hinter der Testing Library stehen und wie sie helfen, die Qualit\u00e4t von Software zu gew\u00e4hrleisten. Automatisierte Tests stellen bei uns im Build-Prozess sicher, dass eine Anwendung unseren hohen Qualit\u00e4tsstandards entspricht, bevor sie f\u00fcr die Endnutzenden freigegeben wird.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Warum testen?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Tests sind ein integraler Bestandteil erfolgreicher Softwareentwicklung und erf\u00fcllen viele wichtige Funktionen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Funktionalit\u00e4ten sicherstellen:<\/strong> Tests gew\u00e4hrleisten, dass eine Anwendung so funktioniert, wie sie gedacht ist. Wenn sich die Anwendung unerwartet verh\u00e4lt, ist es wichtig, dass Tests fehlschlagen.<\/li>\n\n\n\n<li><strong>Dokumentation:<\/strong> Tests dokumentieren das Verhalten der Anwendung. Sie sind eine lebende Dokumentation, die beschreibt, wie sich die Anwendung in bestimmten Szenarien verh\u00e4lt.<\/li>\n\n\n\n<li><strong>Automatisierung:<\/strong> Automatisierte Tests verhindern, dass Entwickelnde wichtige Schritte im Testprozess vergessen.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Tests erf\u00fcllen also zwei zentrale Aufgaben:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sie stellen f\u00fcr die Endnutzenden sicher, dass die Software zuverl\u00e4ssig funktioniert.<\/li>\n\n\n\n<li>Sie helfen den Entwicklungsteams, keine wichtigen Details zu \u00fcbersehen, und sparen gleichzeitig wertvolle Zeit. Dar\u00fcber hinaus st\u00e4rken Tests das Vertrauen der Entwickelnden in ihre Arbeit. Sie erlauben ihnen eine bessere Bewertung, ob die geforderte Qualit\u00e4t auch erreicht wird.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Vertrauen durch Tests gewinnen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Tests k\u00f6nnen Vertrauen jedoch nur schaffen, wenn diese aussagekr\u00e4ftig und realit\u00e4tsnah sind. Eine der gr\u00f6\u00dften Herausforderungen bei der Erstellung von Tests ist sicherzustellen, dass sie nicht nur isolierte Einheiten \u00fcberpr\u00fcfen, sondern auch die tats\u00e4chliche Nutzung der Anwendung widerspiegeln.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unzureichende Tests lassen sich oft daran erkennen, dass bspw. alle Importe simuliert werden (Mocking), mit Daten gearbeitet wird, die in der realen Anwendung nicht vorkommen oder flache Renderings (Shallow-Rendering) durchgef\u00fchrt werden, bei denen Child-Components ebenfalls simuliert sind. Je integrativer und realistischer Tests sich verhalten, desto aussagekr\u00e4ftiger sind sie.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn Tests aussagekr\u00e4ftiger sind, steigt die Wahrscheinlichkeit, dass die Tests in einem Fehlerfall auch wirklich fehlschlagen. Dadurch gewinnt das Entwicklungsteam Vertrauen sowohl in die Tests als auch in die Anwendung.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Zusammenfassend l\u00e4sst sich sagen, um Vertrauen in Tests zu st\u00e4rken, ist es entscheidend, dass diese nicht nur isolierte Funktionalit\u00e4ten \u00fcberpr\u00fcfen, sondern m\u00f6glichst nah an der realen Nutzung durch die Endnutzenden orientiert sind. Hier setzt die Testing Library an, die speziell entwickelt wurde, um diese L\u00fccke zu schlie\u00dfen. Sie hilft Entwicklungsteams dabei, ihre Tests praxisn\u00e4her \u2013 mit den Nutzenden im Fokus \u2013 zu gestalten und somit die Aussagekraft der Tests sowie das Vertrauen in die gesamte Anwendung zu erh\u00f6hen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was ist die Testing Library und woher kommt sie?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Die Testing Library ist eine Sammlung von Testing Utilities, die von Kent C. Dodds, einem JavaScript-Entwickler und Lehrer, ins Leben gerufen wurde. Sie wurde entwickelt, um die Art und Weise zu verbessern, wie Entwickelnde grafische Oberfl\u00e4chen (UIs) testen. Die Testing Library verfolgt das Prinzip: Je n\u00e4her deine Tests der tats\u00e4chlichen Nutzung deiner Software kommen, desto mehr Vertrauen k\u00f6nnen sie dir geben. Dieses Prinzip betont die Wichtigkeit, Tests so zu gestalten, dass sie das tats\u00e4chliche User-Verhalten m\u00f6glichst realistisch abbilden, um die Aussagekraft der Tests und das Vertrauen in die Software zu erh\u00f6hen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Kent C. Dodds entwickelte die Testing Library als Reaktion auf traditionelle Testing-Methoden, die oft zu stark auf interne Implementierungsdetails fokussieren und weniger auf die reale User-Erfahrung. Er wollte ein Werkzeug kreieren, das Tests st\u00e4rker an den tats\u00e4chlichen Interaktionen ausrichtet, die Endnutzende mit der Software haben.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Die Prinzipien der Testing Library<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Realit\u00e4tsnahe Tests:<\/strong> Das Hauptziel der Testing Library ist es, Tests so nah wie m\u00f6glich an der realen Nutzung der Software zu gestalten. Dadurch wird die Aussagekraft der Tests erh\u00f6ht und es entsteht mehr Vertrauen in die Ergebnisse.<\/li>\n\n\n\n<li><strong>Framework-Unabh\u00e4ngigkeit:<\/strong> Die Testing Library ist nicht auf ein spezifisches JavaScript-Framework beschr\u00e4nkt. Sie bietet Implementierungen f\u00fcr verschiedene Frameworks wie React (React Testing Library), Angular (Angular Testing Library), Vue (Vue Testing Library) und auch f\u00fcr generisches DOM-Testing, wie bspw. f\u00fcr Cypress (Cypress Testing Library). Das macht sie vielseitig und breit einsetzbar \u2013 sie ist somit Framework-agnostisch.<\/li>\n\n\n\n<li><strong>Fokus auf Barrierefreiheit (Accessibility):<\/strong> Ein zentrales Konzept der Testing Library ist die Priorisierung von barrierefreien Abfragen (Accessibility Queries). Diese Queries simulieren die Interaktionen, die Nutzende mit einem Screenreader oder einer anderen Assistenztechnologie durchf\u00fchren w\u00fcrden. So wird sichergestellt, dass die Kernstruktur der Anwendung auch f\u00fcr User mit Einschr\u00e4nkungen gut nutzbar ist.<\/li>\n\n\n\n<li><strong>Minimale Kenntnis interner Details:<\/strong> Die Testing Library ermutigt dazu, Tests zu schreiben, die wenig bis keine Kenntnis \u00fcber die internen Details der Komponenten haben. Stattdessen sollte der Fokus auf den sichtbaren und zug\u00e4nglichen Teilen der UI liegen. Das f\u00f6rdert eine bessere Wartbarkeit der Tests und verhindert, dass Tests durch \u00c4nderungen in der Implementierung fehlschlagen, die aus User-Sicht irrelevant sind.<\/li>\n\n\n\n<li><strong>Nutzungszentrierte Interaktionen:<\/strong> Anstatt spezifische DOM-Ereignisse direkt auszul\u00f6sen (z. B. <code>fireEvent.click<\/code>), ermutigt die Testing Library zur Verwendung von <code>userEvent<\/code>, das realistischere User-Interaktionen simuliert. Dadurch sind die Tests robuster und n\u00e4her an den tats\u00e4chlichen Erfahrungen der Nutzenden.<br>Diese Prinzipien spiegeln sich auch in der von Kent C. Dodds entwickelten Testing Trophy wider, einer modernen Alternative zur klassischen Testing-Pyramide. Die Testing Trophy konzentriert sich auf den Return on Investment (ROI) der Tests und betont dabei die Wichtigkeit von integrativen Tests.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Testing Trophy<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"520\" src=\"https:\/\/test.itsonix.eu\/wp-content\/uploads\/2026\/05\/Group-627130-1-1024x520.png\" alt=\"\" class=\"wp-image-637\" title=\"Group%20627130\" srcset=\"https:\/\/itsonix.eu\/wp-content\/uploads\/2026\/05\/Group-627130-1-1024x520.png 1024w, https:\/\/itsonix.eu\/wp-content\/uploads\/2026\/05\/Group-627130-1-300x152.png 300w, https:\/\/itsonix.eu\/wp-content\/uploads\/2026\/05\/Group-627130-1-768x390.png 768w, https:\/\/itsonix.eu\/wp-content\/uploads\/2026\/05\/Group-627130-1.png 1372w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Statische Tests:<\/strong> Tools wie ESLint, Typed Languages oder Sonar analysieren den Code ohne Ausf\u00fchrung.<\/li>\n\n\n\n<li><strong>Unit- und Komponententests:<\/strong> Diese Tests \u00fcberpr\u00fcfen einzelne Funktionen oder Komponenten isoliert.<\/li>\n\n\n\n<li><strong>Service- und Integrationstests:<\/strong> Tests, die die Interaktion mehrerer Komponenten oder Systeme \u00fcberpr\u00fcfen.<\/li>\n\n\n\n<li><strong>End-to-End (E2E) Tests:<\/strong> Diese Tests simulieren den kompletten Ablauf aus der Perspektive der Endnutzenden.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Wichtige Tools und Konzepte der Testing Library<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Queries:<\/strong> Die Testing Library stellt verschiedene Abfragemethoden bereit, wie <code>getByRole<\/code>, <code>getByLabelText<\/code> oder <code>getByText<\/code>. Diese Methoden werden nach ihrer Priorit\u00e4t geordnet, wobei die Abfragen, die am besten mit der tats\u00e4chlichen Nutzung der Anwendung \u00fcbereinstimmen (z. B. <code>getByRole<\/code>), bevorzugt werden.<\/li>\n\n\n\n<li><strong>userEvent vs. fireEvent:<\/strong> <code>userEvent<\/code> simuliert komplexere Interaktionen, die dem tats\u00e4chlichen User-Verhalten entsprechen, w\u00e4hrend <code>fireEvent<\/code> direkt DOM-Ereignisse ausl\u00f6st. <code>userEvent<\/code> wird bevorzugt, da es realistischere Szenarien abdeckt.<\/li>\n\n\n\n<li><strong>Jest-DOM:<\/strong> Hierbei handelt es sich um eine Erweiterung der Testing Library, die zus\u00e4tzliche Matcher f\u00fcr Jest (ein JavaScript-Testing-Framework) bietet. Sie erm\u00f6glicht einfache \u00dcberpr\u00fcfungen des DOM-Zustands, wie <code>toBeVisible<\/code>, <code>toHaveTextContent<\/code> und andere.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Beispiel<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Um die Anwendung der Testing Library greifbarer zu machen, haben unsere Xperten ein kompaktes Beispiel entwickelt. Dabei kommen alle zuvor genannten Tools und Konzepte zum Einsatz: Getestet wird eine Komponente mit interaktiven Elementen. Das Beispiel ist in Angular umgesetzt, l\u00e4sst sich aber auch problemlos auf andere Frameworks \u00fcbertragen.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Die Komponente<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Wir starten mit einem Template f\u00fcr unsere Beispielkomponente. Es enth\u00e4lt verschiedene \u00dcberschriften sowie einen \u201eTipp des Tages\u201c, der per Button ausgeblendet werden kann.<\/p>\n\n\n<div\n    class=\"align wp-block-bch-code-highlight\"    id=\"bhcCodeHighlight-1\"\n    data-attributes='{&quot;cId&quot;:&quot;1f588fc2-5&quot;,&quot;headerPart&quot;:true,&quot;align&quot;:&quot;&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;lineNumbers&quot;:true,&quot;copyBtnOption&quot;:&quot;Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;headingTitleTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:18,&quot;tablet&quot;:13,&quot;mobile&quot;:11},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;,&quot;textTransform&quot;:&quot;uppercase&quot;},&quot;codeTypo&quot;:{&quot;desktop&quot;:18,&quot;tablet&quot;:15,&quot;mobile&quot;:14},&quot;clipBoard&quot;:true,&quot;wordWrap&quot;:true,&quot;width&quot;:{&quot;desktop&quot;:&quot;100%&quot;,&quot;tablet&quot;:&quot;100%&quot;,&quot;mobile&quot;:&quot;100%&quot;},&quot;height&quot;:{&quot;desktop&quot;:&quot;0px&quot;,&quot;tablet&quot;:&quot;0px&quot;,&quot;mobile&quot;:&quot;0px&quot;},&quot;padding&quot;:{&quot;top&quot;:&quot;0px&quot;,&quot;right&quot;:&quot;0px&quot;,&quot;bottom&quot;:&quot;0px&quot;,&quot;left&quot;:&quot;0px&quot;},&quot;background&quot;:{&quot;color&quot;:&quot;#d3cfcf42&quot;},&quot;headerBg&quot;:{&quot;color&quot;:&quot;#2f446e&quot;},&quot;headerTextColor&quot;:{&quot;color&quot;:&quot;#ffff&quot;},&quot;headerThemeOpt&quot;:&quot;one&quot;,&quot;layout&quot;:{&quot;align&quot;:&quot;left&quot;},&quot;border&quot;:{&quot;color&quot;:&quot;#000&quot;,&quot;style&quot;:&quot;solid&quot;,&quot;width&quot;:&quot;0px&quot;},&quot;shadow&quot;:[{&quot;hOffset&quot;:&quot;0px&quot;,&quot;vOffset&quot;:&quot;0px&quot;,&quot;blur&quot;:&quot;0px&quot;,&quot;spread&quot;:&quot;0px&quot;,&quot;color&quot;:&quot;rgba(0, 0, 0, 0.16)&quot;,&quot;isInset&quot;:false}],&quot;alignment&quot;:&quot;center&quot;,&quot;copyTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:13,&quot;tablet&quot;:13,&quot;mobile&quot;:11},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;},&quot;clipBoardColors&quot;:{&quot;color&quot;:&quot;#fff&quot;,&quot;bg&quot;:&quot;#00000024&quot;},&quot;copyIconSize&quot;:{&quot;desktop&quot;:24,&quot;tablet&quot;:20,&quot;mobile&quot;:18},&quot;copyBtnPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;}},&quot;headerPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;14px&quot;,&quot;left&quot;:&quot;14px&quot;,&quot;bottom&quot;:&quot;14px&quot;,&quot;right&quot;:&quot;14px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;12px&quot;,&quot;left&quot;:&quot;12px&quot;,&quot;bottom&quot;:&quot;12px&quot;,&quot;right&quot;:&quot;12px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;10px&quot;,&quot;left&quot;:&quot;10px&quot;,&quot;bottom&quot;:&quot;10px&quot;,&quot;right&quot;:&quot;10px&quot;}},&quot;copyBtnPosition&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;}},&quot;codeBg&quot;:{&quot;color&quot;:&quot;&quot;},&quot;outputOption&quot;:false,&quot;outputText&quot;:&quot;Hello Word !&quot;,&quot;outputColors&quot;:{&quot;color&quot;:&quot;#fff&quot;,&quot;bg&quot;:&quot;#2F446E&quot;},&quot;outputTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:21,&quot;tablet&quot;:17,&quot;mobile&quot;:13},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;},&quot;outputPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;8px&quot;,&quot;left&quot;:&quot;8px&quot;,&quot;bottom&quot;:&quot;8px&quot;,&quot;right&quot;:&quot;8px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;7px&quot;,&quot;left&quot;:&quot;7px&quot;,&quot;bottom&quot;:&quot;7px&quot;,&quot;right&quot;:&quot;7px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;5px&quot;,&quot;right&quot;:&quot;5px&quot;}},&quot;outputBorder&quot;:{&quot;color&quot;:&quot;#000&quot;,&quot;style&quot;:&quot;solid&quot;,&quot;width&quot;:&quot;0px&quot;,&quot;radius&quot;:&quot;7px&quot;},&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true}}'\n>\n    <pre class=\"bchCodeData\" style=\"display:none;\">&quot;&lt;div&gt;\\n  &lt;h1&gt;Hello Blog&lt;\\\/h1&gt;\\n  @if (isSectionVisible()) {\\n   &lt;section&gt;\\n    &lt;h2&gt;Tipp des Tages&lt;\\\/h2&gt;\\n    &lt;p&gt;Testing Library macht Refactorings sicherer.&lt;\\\/p&gt;\\n   &lt;\\\/section&gt;\\n  } @else {\\n   &lt;section&gt;\\n    &lt;h2&gt;Du hast den Tipp des Tages schon gesehen.&lt;\\\/h2&gt;\\n   &lt;\\\/section&gt;\\n  }\\n  &lt;button type=\\&quot;button\\&quot; [disabled]=\\&quot;!isSectionVisible()\\&quot; (click)=\\&quot;hideTipOfTheDay()\\&quot;&gt;Ausblenden&lt;\\\/button&gt;\\n&lt;\\\/div&gt;&quot;<\/pre>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Die Logik liegt wie gewohnt im TypeScript der Komponente. Hier haben wir eine Aktion implementiert, die durch einen Button-Klick ausgel\u00f6st wird, sowie ein Signal, das das Template reaktiv gestaltet. Signale haben wir bereits in unserem <a href=\"https:\/\/www.itsonix.eu\/de\/admin\/pages\/blog\/2023-signale-richtig-deuten-angular-veraendert-sich\" target=\"_blank\" rel=\"noreferrer noopener\">Blog<\/a> vorgestellt.<\/p>\n\n\n<div\n    class=\"align wp-block-bch-code-highlight\"    id=\"bhcCodeHighlight-2\"\n    data-attributes='{&quot;cId&quot;:&quot;8b36b76b-a&quot;,&quot;headerPart&quot;:true,&quot;align&quot;:&quot;&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;lineNumbers&quot;:true,&quot;copyBtnOption&quot;:&quot;Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;headingTitleTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:18,&quot;tablet&quot;:13,&quot;mobile&quot;:11},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;,&quot;textTransform&quot;:&quot;uppercase&quot;},&quot;codeTypo&quot;:{&quot;desktop&quot;:18,&quot;tablet&quot;:15,&quot;mobile&quot;:14},&quot;clipBoard&quot;:true,&quot;wordWrap&quot;:true,&quot;width&quot;:{&quot;desktop&quot;:&quot;100%&quot;,&quot;tablet&quot;:&quot;100%&quot;,&quot;mobile&quot;:&quot;100%&quot;},&quot;height&quot;:{&quot;desktop&quot;:&quot;0px&quot;,&quot;tablet&quot;:&quot;0px&quot;,&quot;mobile&quot;:&quot;0px&quot;},&quot;padding&quot;:{&quot;top&quot;:&quot;0px&quot;,&quot;right&quot;:&quot;0px&quot;,&quot;bottom&quot;:&quot;0px&quot;,&quot;left&quot;:&quot;0px&quot;},&quot;background&quot;:{&quot;color&quot;:&quot;#d3cfcf42&quot;},&quot;headerBg&quot;:{&quot;color&quot;:&quot;#2f446e&quot;},&quot;headerTextColor&quot;:{&quot;color&quot;:&quot;#ffff&quot;},&quot;headerThemeOpt&quot;:&quot;one&quot;,&quot;layout&quot;:{&quot;align&quot;:&quot;left&quot;},&quot;border&quot;:{&quot;color&quot;:&quot;#000&quot;,&quot;style&quot;:&quot;solid&quot;,&quot;width&quot;:&quot;0px&quot;},&quot;shadow&quot;:[{&quot;hOffset&quot;:&quot;0px&quot;,&quot;vOffset&quot;:&quot;0px&quot;,&quot;blur&quot;:&quot;0px&quot;,&quot;spread&quot;:&quot;0px&quot;,&quot;color&quot;:&quot;rgba(0, 0, 0, 0.16)&quot;,&quot;isInset&quot;:false}],&quot;alignment&quot;:&quot;center&quot;,&quot;copyTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:13,&quot;tablet&quot;:13,&quot;mobile&quot;:11},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;},&quot;clipBoardColors&quot;:{&quot;color&quot;:&quot;#fff&quot;,&quot;bg&quot;:&quot;#00000024&quot;},&quot;copyIconSize&quot;:{&quot;desktop&quot;:24,&quot;tablet&quot;:20,&quot;mobile&quot;:18},&quot;copyBtnPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;}},&quot;headerPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;14px&quot;,&quot;left&quot;:&quot;14px&quot;,&quot;bottom&quot;:&quot;14px&quot;,&quot;right&quot;:&quot;14px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;12px&quot;,&quot;left&quot;:&quot;12px&quot;,&quot;bottom&quot;:&quot;12px&quot;,&quot;right&quot;:&quot;12px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;10px&quot;,&quot;left&quot;:&quot;10px&quot;,&quot;bottom&quot;:&quot;10px&quot;,&quot;right&quot;:&quot;10px&quot;}},&quot;copyBtnPosition&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;}},&quot;codeBg&quot;:{&quot;color&quot;:&quot;&quot;},&quot;outputOption&quot;:false,&quot;outputText&quot;:&quot;Hello Word !&quot;,&quot;outputColors&quot;:{&quot;color&quot;:&quot;#fff&quot;,&quot;bg&quot;:&quot;#2F446E&quot;},&quot;outputTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:21,&quot;tablet&quot;:17,&quot;mobile&quot;:13},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;},&quot;outputPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;8px&quot;,&quot;left&quot;:&quot;8px&quot;,&quot;bottom&quot;:&quot;8px&quot;,&quot;right&quot;:&quot;8px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;7px&quot;,&quot;left&quot;:&quot;7px&quot;,&quot;bottom&quot;:&quot;7px&quot;,&quot;right&quot;:&quot;7px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;5px&quot;,&quot;right&quot;:&quot;5px&quot;}},&quot;outputBorder&quot;:{&quot;color&quot;:&quot;#000&quot;,&quot;style&quot;:&quot;solid&quot;,&quot;width&quot;:&quot;0px&quot;,&quot;radius&quot;:&quot;7px&quot;},&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true}}'\n>\n    <pre class=\"bchCodeData\" style=\"display:none;\">&quot;import { Component, signal } from \\&quot;@angular\\\/core\\&quot;;\\n\\n@Component({\\n  selector: \\&quot;hello-blog\\&quot;,\\n  standalone: true,\\n  imports: [],\\n  templateUrl: \\&quot;.\\\/hello-blog.component.html\\&quot;,\\n})\\nexport class HelloBlogComponent {\\n  public isSectionVisible = signal&lt;boolean&gt;(true);\\n\\n  public hideTipOfTheDay(): void {\\n    this.isSectionVisible.set(false);\\n  }\\n}&quot;<\/pre>\n<\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Die Tests<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Im Rahmen des Tests wollen wir sicherstellen, dass zun\u00e4chst der initiale Zustand unseren Erwartungen entspricht. In einem zus\u00e4tzlichen Test m\u00f6chten wir absichern, dass der Tipp des Tages korrekt ausgeblendet wird, sollte ein User auf den Button zum Ausblenden klicken.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Setup<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Wir beginnen zun\u00e4chst mit dem Setup, damit wir uns im Anschluss auf die eigentlichen Tests konzentrieren k\u00f6nnen. Innerhalb des Setups initialisieren wir <code>userEvent<\/code>, um Interaktionen durch einen potenziellen User innerhalb der Tests auszul\u00f6sen. Danach erfolgt das Rendern der Komponente \u00fcber die Render-Methode der Testing Library. An dieser Stelle k\u00f6nnen grunds\u00e4tzlich auch Inputs oder die Test-Umgebung selbst konfiguriert werden. Das Nutzen einer Setup-Methode gleicht dem empfohlenen Setup, wenn man Tests mit <code>userEvent<\/code> schreiben will (<a href=\"https:\/\/testing-library.com\/docs\/user-event\/intro\/#writing-tests-with-userevent\" target=\"_blank\" rel=\"noreferrer noopener\">Link<\/a>).<\/p>\n\n\n<div\n    class=\"align wp-block-bch-code-highlight\"    id=\"bhcCodeHighlight-3\"\n    data-attributes='{&quot;cId&quot;:&quot;d3b61965-2&quot;,&quot;headerPart&quot;:true,&quot;align&quot;:&quot;&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;lineNumbers&quot;:true,&quot;copyBtnOption&quot;:&quot;Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;headingTitleTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:18,&quot;tablet&quot;:13,&quot;mobile&quot;:11},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;,&quot;textTransform&quot;:&quot;uppercase&quot;},&quot;codeTypo&quot;:{&quot;desktop&quot;:18,&quot;tablet&quot;:15,&quot;mobile&quot;:14},&quot;clipBoard&quot;:true,&quot;wordWrap&quot;:true,&quot;width&quot;:{&quot;desktop&quot;:&quot;100%&quot;,&quot;tablet&quot;:&quot;100%&quot;,&quot;mobile&quot;:&quot;100%&quot;},&quot;height&quot;:{&quot;desktop&quot;:&quot;0px&quot;,&quot;tablet&quot;:&quot;0px&quot;,&quot;mobile&quot;:&quot;0px&quot;},&quot;padding&quot;:{&quot;top&quot;:&quot;0px&quot;,&quot;right&quot;:&quot;0px&quot;,&quot;bottom&quot;:&quot;0px&quot;,&quot;left&quot;:&quot;0px&quot;},&quot;background&quot;:{&quot;color&quot;:&quot;#d3cfcf42&quot;},&quot;headerBg&quot;:{&quot;color&quot;:&quot;#2f446e&quot;},&quot;headerTextColor&quot;:{&quot;color&quot;:&quot;#ffff&quot;},&quot;headerThemeOpt&quot;:&quot;one&quot;,&quot;layout&quot;:{&quot;align&quot;:&quot;left&quot;},&quot;border&quot;:{&quot;color&quot;:&quot;#000&quot;,&quot;style&quot;:&quot;solid&quot;,&quot;width&quot;:&quot;0px&quot;},&quot;shadow&quot;:[{&quot;hOffset&quot;:&quot;0px&quot;,&quot;vOffset&quot;:&quot;0px&quot;,&quot;blur&quot;:&quot;0px&quot;,&quot;spread&quot;:&quot;0px&quot;,&quot;color&quot;:&quot;rgba(0, 0, 0, 0.16)&quot;,&quot;isInset&quot;:false}],&quot;alignment&quot;:&quot;center&quot;,&quot;copyTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:13,&quot;tablet&quot;:13,&quot;mobile&quot;:11},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;},&quot;clipBoardColors&quot;:{&quot;color&quot;:&quot;#fff&quot;,&quot;bg&quot;:&quot;#00000024&quot;},&quot;copyIconSize&quot;:{&quot;desktop&quot;:24,&quot;tablet&quot;:20,&quot;mobile&quot;:18},&quot;copyBtnPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;}},&quot;headerPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;14px&quot;,&quot;left&quot;:&quot;14px&quot;,&quot;bottom&quot;:&quot;14px&quot;,&quot;right&quot;:&quot;14px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;12px&quot;,&quot;left&quot;:&quot;12px&quot;,&quot;bottom&quot;:&quot;12px&quot;,&quot;right&quot;:&quot;12px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;10px&quot;,&quot;left&quot;:&quot;10px&quot;,&quot;bottom&quot;:&quot;10px&quot;,&quot;right&quot;:&quot;10px&quot;}},&quot;copyBtnPosition&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;}},&quot;codeBg&quot;:{&quot;color&quot;:&quot;&quot;},&quot;outputOption&quot;:false,&quot;outputText&quot;:&quot;Hello Word !&quot;,&quot;outputColors&quot;:{&quot;color&quot;:&quot;#fff&quot;,&quot;bg&quot;:&quot;#2F446E&quot;},&quot;outputTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:21,&quot;tablet&quot;:17,&quot;mobile&quot;:13},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;},&quot;outputPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;8px&quot;,&quot;left&quot;:&quot;8px&quot;,&quot;bottom&quot;:&quot;8px&quot;,&quot;right&quot;:&quot;8px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;7px&quot;,&quot;left&quot;:&quot;7px&quot;,&quot;bottom&quot;:&quot;7px&quot;,&quot;right&quot;:&quot;7px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;5px&quot;,&quot;right&quot;:&quot;5px&quot;}},&quot;outputBorder&quot;:{&quot;color&quot;:&quot;#000&quot;,&quot;style&quot;:&quot;solid&quot;,&quot;width&quot;:&quot;0px&quot;,&quot;radius&quot;:&quot;7px&quot;},&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true}}'\n>\n    <pre class=\"bchCodeData\" style=\"display:none;\">&quot;import { HelloBlogComponent } from \\&quot;src\\\/hello-blog\\\/hello-blog.component\\&quot;;\\nimport { render, screen } from \\&quot;@testing-library\\\/angular\\&quot;;\\nimport { userEvent } from \\&quot;@testing-library\\\/user-event\\&quot;;\\n\\nconst setup = async () =&gt; {\\n  const user = userEvent.setup();\\n  const view = await render(HelloBlogComponent);\\n  return { user, view };\\n};\\n\\ndescribe(\\&quot;MyComponentComponent\\&quot;, () =&gt; {\\n  \\u2026\\n});&quot;<\/pre>\n<\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Test des initialen Zustands<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Mithilfe unserer Setup-Methode k\u00f6nnen wir nun unsere Tests schreiben. Wir beginnen mit dem Test, der den initialen Zustand sicherstellen soll. Durch das Setup sto\u00dfen wir ein Rendering an und warten ab, bis dieses durchgef\u00fchrt worden ist. Danach fragen wir auf dem Screen \u2013 einem globalen Objekt der Testing Library \u2013 und den dahinter liegenden Queries die einzelnen Elemente in unserer Testumgebung ab. Da wir \u00fcber die Definition im Template viele Rollen durch entsprechende HTML-Tags vergeben haben, k\u00f6nnen wir diese wie folgt nutzen.<\/p>\n\n\n<div\n    class=\"align wp-block-bch-code-highlight\"    id=\"bhcCodeHighlight-4\"\n    data-attributes='{&quot;cId&quot;:&quot;8ef6ca92-7&quot;,&quot;headerPart&quot;:true,&quot;align&quot;:&quot;&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;lineNumbers&quot;:true,&quot;copyBtnOption&quot;:&quot;Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;headingTitleTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:18,&quot;tablet&quot;:13,&quot;mobile&quot;:11},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;,&quot;textTransform&quot;:&quot;uppercase&quot;},&quot;codeTypo&quot;:{&quot;desktop&quot;:18,&quot;tablet&quot;:15,&quot;mobile&quot;:14},&quot;clipBoard&quot;:true,&quot;wordWrap&quot;:true,&quot;width&quot;:{&quot;desktop&quot;:&quot;100%&quot;,&quot;tablet&quot;:&quot;100%&quot;,&quot;mobile&quot;:&quot;100%&quot;},&quot;height&quot;:{&quot;desktop&quot;:&quot;0px&quot;,&quot;tablet&quot;:&quot;0px&quot;,&quot;mobile&quot;:&quot;0px&quot;},&quot;padding&quot;:{&quot;top&quot;:&quot;0px&quot;,&quot;right&quot;:&quot;0px&quot;,&quot;bottom&quot;:&quot;0px&quot;,&quot;left&quot;:&quot;0px&quot;},&quot;background&quot;:{&quot;color&quot;:&quot;#d3cfcf42&quot;},&quot;headerBg&quot;:{&quot;color&quot;:&quot;#2f446e&quot;},&quot;headerTextColor&quot;:{&quot;color&quot;:&quot;#ffff&quot;},&quot;headerThemeOpt&quot;:&quot;one&quot;,&quot;layout&quot;:{&quot;align&quot;:&quot;left&quot;},&quot;border&quot;:{&quot;color&quot;:&quot;#000&quot;,&quot;style&quot;:&quot;solid&quot;,&quot;width&quot;:&quot;0px&quot;},&quot;shadow&quot;:[{&quot;hOffset&quot;:&quot;0px&quot;,&quot;vOffset&quot;:&quot;0px&quot;,&quot;blur&quot;:&quot;0px&quot;,&quot;spread&quot;:&quot;0px&quot;,&quot;color&quot;:&quot;rgba(0, 0, 0, 0.16)&quot;,&quot;isInset&quot;:false}],&quot;alignment&quot;:&quot;center&quot;,&quot;copyTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:13,&quot;tablet&quot;:13,&quot;mobile&quot;:11},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;},&quot;clipBoardColors&quot;:{&quot;color&quot;:&quot;#fff&quot;,&quot;bg&quot;:&quot;#00000024&quot;},&quot;copyIconSize&quot;:{&quot;desktop&quot;:24,&quot;tablet&quot;:20,&quot;mobile&quot;:18},&quot;copyBtnPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;}},&quot;headerPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;14px&quot;,&quot;left&quot;:&quot;14px&quot;,&quot;bottom&quot;:&quot;14px&quot;,&quot;right&quot;:&quot;14px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;12px&quot;,&quot;left&quot;:&quot;12px&quot;,&quot;bottom&quot;:&quot;12px&quot;,&quot;right&quot;:&quot;12px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;10px&quot;,&quot;left&quot;:&quot;10px&quot;,&quot;bottom&quot;:&quot;10px&quot;,&quot;right&quot;:&quot;10px&quot;}},&quot;copyBtnPosition&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;}},&quot;codeBg&quot;:{&quot;color&quot;:&quot;&quot;},&quot;outputOption&quot;:false,&quot;outputText&quot;:&quot;Hello Word !&quot;,&quot;outputColors&quot;:{&quot;color&quot;:&quot;#fff&quot;,&quot;bg&quot;:&quot;#2F446E&quot;},&quot;outputTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:21,&quot;tablet&quot;:17,&quot;mobile&quot;:13},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;},&quot;outputPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;8px&quot;,&quot;left&quot;:&quot;8px&quot;,&quot;bottom&quot;:&quot;8px&quot;,&quot;right&quot;:&quot;8px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;7px&quot;,&quot;left&quot;:&quot;7px&quot;,&quot;bottom&quot;:&quot;7px&quot;,&quot;right&quot;:&quot;7px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;5px&quot;,&quot;right&quot;:&quot;5px&quot;}},&quot;outputBorder&quot;:{&quot;color&quot;:&quot;#000&quot;,&quot;style&quot;:&quot;solid&quot;,&quot;width&quot;:&quot;0px&quot;,&quot;radius&quot;:&quot;7px&quot;},&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true}}'\n>\n    <pre class=\"bchCodeData\" style=\"display:none;\">&quot;describe(\\&quot;MyComponentComponent\\&quot;, () =&gt; {\\n  it(\\&quot;should render initially with heading and tip of the day \\&quot;, async () =&gt; {\\n    \\\/\\\/ GIVEN\\n    await setup();\\n\\n    \\\/\\\/ THEN\\n    expect(screen.getByRole(\\&quot;heading\\&quot;, { level: 1, name: \\&quot;Hello Blog\\&quot; })).toBeVisible();\\n    expect(screen.getByRole(\\&quot;heading\\&quot;, { level: 2, name: \\&quot;Tipp des Tages\\&quot; })).toBeVisible();\\n    \\u2026\\n  });\\n});&quot;<\/pre>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">So k\u00f6nnen wir bspw. das <code>&lt;h1&gt;<\/code>-Element \u00fcber die Query <code>getByRole(\"heading\", { level: 1, name: \"Hello Blog\" })<\/code> erhalten. Hierbei l\u00e4sst sich erkennen, dass der Textinhalt der \u00dcberschrift \u00fcber die Option <code>name<\/code> im gleichen Zuge mit abgefragt werden kann und somit unsere Query noch genauer macht.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Zus\u00e4tzlich k\u00f6nnen wir Elemente direkt \u00fcber ihren Textinhalt abfragen. Im folgenden Testabschnitt zeigen wir, wie sich die Sichtbarkeit eines Elements pr\u00fcfen l\u00e4sst: Daf\u00fcr verwenden wir die <code>getBy<\/code>-Query zusammen mit <code>toBeVisible<\/code>, um sicherzustellen, dass ein Element sichtbar ist. M\u00f6chten wir hingegen testen, dass ein Element nicht sichtbar ist, nutzen wir die <code>queryBy<\/code>-Query in Kombination mit <code>not.toBeInTheDocument<\/code>.<\/p>\n\n\n<div\n    class=\"align wp-block-bch-code-highlight\"    id=\"bhcCodeHighlight-5\"\n    data-attributes='{&quot;cId&quot;:&quot;4637ce9b-e&quot;,&quot;headerPart&quot;:true,&quot;align&quot;:&quot;&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;lineNumbers&quot;:true,&quot;copyBtnOption&quot;:&quot;Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;headingTitleTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:18,&quot;tablet&quot;:13,&quot;mobile&quot;:11},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;,&quot;textTransform&quot;:&quot;uppercase&quot;},&quot;codeTypo&quot;:{&quot;desktop&quot;:18,&quot;tablet&quot;:15,&quot;mobile&quot;:14},&quot;clipBoard&quot;:true,&quot;wordWrap&quot;:true,&quot;width&quot;:{&quot;desktop&quot;:&quot;100%&quot;,&quot;tablet&quot;:&quot;100%&quot;,&quot;mobile&quot;:&quot;100%&quot;},&quot;height&quot;:{&quot;desktop&quot;:&quot;0px&quot;,&quot;tablet&quot;:&quot;0px&quot;,&quot;mobile&quot;:&quot;0px&quot;},&quot;padding&quot;:{&quot;top&quot;:&quot;0px&quot;,&quot;right&quot;:&quot;0px&quot;,&quot;bottom&quot;:&quot;0px&quot;,&quot;left&quot;:&quot;0px&quot;},&quot;background&quot;:{&quot;color&quot;:&quot;#d3cfcf42&quot;},&quot;headerBg&quot;:{&quot;color&quot;:&quot;#2f446e&quot;},&quot;headerTextColor&quot;:{&quot;color&quot;:&quot;#ffff&quot;},&quot;headerThemeOpt&quot;:&quot;one&quot;,&quot;layout&quot;:{&quot;align&quot;:&quot;left&quot;},&quot;border&quot;:{&quot;color&quot;:&quot;#000&quot;,&quot;style&quot;:&quot;solid&quot;,&quot;width&quot;:&quot;0px&quot;},&quot;shadow&quot;:[{&quot;hOffset&quot;:&quot;0px&quot;,&quot;vOffset&quot;:&quot;0px&quot;,&quot;blur&quot;:&quot;0px&quot;,&quot;spread&quot;:&quot;0px&quot;,&quot;color&quot;:&quot;rgba(0, 0, 0, 0.16)&quot;,&quot;isInset&quot;:false}],&quot;alignment&quot;:&quot;center&quot;,&quot;copyTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:13,&quot;tablet&quot;:13,&quot;mobile&quot;:11},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;},&quot;clipBoardColors&quot;:{&quot;color&quot;:&quot;#fff&quot;,&quot;bg&quot;:&quot;#00000024&quot;},&quot;copyIconSize&quot;:{&quot;desktop&quot;:24,&quot;tablet&quot;:20,&quot;mobile&quot;:18},&quot;copyBtnPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;}},&quot;headerPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;14px&quot;,&quot;left&quot;:&quot;14px&quot;,&quot;bottom&quot;:&quot;14px&quot;,&quot;right&quot;:&quot;14px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;12px&quot;,&quot;left&quot;:&quot;12px&quot;,&quot;bottom&quot;:&quot;12px&quot;,&quot;right&quot;:&quot;12px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;10px&quot;,&quot;left&quot;:&quot;10px&quot;,&quot;bottom&quot;:&quot;10px&quot;,&quot;right&quot;:&quot;10px&quot;}},&quot;copyBtnPosition&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;}},&quot;codeBg&quot;:{&quot;color&quot;:&quot;&quot;},&quot;outputOption&quot;:false,&quot;outputText&quot;:&quot;Hello Word !&quot;,&quot;outputColors&quot;:{&quot;color&quot;:&quot;#fff&quot;,&quot;bg&quot;:&quot;#2F446E&quot;},&quot;outputTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:21,&quot;tablet&quot;:17,&quot;mobile&quot;:13},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;},&quot;outputPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;8px&quot;,&quot;left&quot;:&quot;8px&quot;,&quot;bottom&quot;:&quot;8px&quot;,&quot;right&quot;:&quot;8px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;7px&quot;,&quot;left&quot;:&quot;7px&quot;,&quot;bottom&quot;:&quot;7px&quot;,&quot;right&quot;:&quot;7px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;5px&quot;,&quot;right&quot;:&quot;5px&quot;}},&quot;outputBorder&quot;:{&quot;color&quot;:&quot;#000&quot;,&quot;style&quot;:&quot;solid&quot;,&quot;width&quot;:&quot;0px&quot;,&quot;radius&quot;:&quot;7px&quot;},&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true}}'\n>\n    <pre class=\"bchCodeData\" style=\"display:none;\">&quot;describe(\\&quot;MyComponentComponent\\&quot;, () =&gt; {\\n  it(\\&quot;should render initially with heading and tip of the day\\&quot;, async () =&gt; {\\n    \\u2026\\n    expect(screen.getByText(\\&quot;Testing Library macht Refactorings sicherer.\\&quot;)).toBeVisible();\\n\\n    expect(\\n      screen.queryByRole(\\&quot;heading\\&quot;, { level: 2, name: \\&quot;Du hast den Tipp des Tages schon gesehen.\\&quot; })\\n    ).not.toBeInTheDocument();\\n    \\u2026\\n  });\\n});&quot;<\/pre>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Im letzten Abschnitt unseres ersten Tests nutzen wir den Jest-DOM-Matcher <code>toBeDisabled<\/code>, um sicherzustellen, dass der Button zum Ausblenden der Inhalte zu Beginn aktiv und anklickbar ist. Ein Vorteil dieser Matcher ist, dass sie uns erm\u00f6glichen, auch die richtigen ARIA-Attribute zu \u00fcberpr\u00fcfen \u2013 so stellen wir sicher, dass zumindest die Grundanforderungen an die Barrierefreiheit erf\u00fcllt sind und Nutzende, die auf Screenreader angewiesen sind, navigieren k\u00f6nnen.<\/p>\n\n\n<div\n    class=\"align wp-block-bch-code-highlight\"    id=\"bhcCodeHighlight-6\"\n    data-attributes='{&quot;cId&quot;:&quot;d1164cb4-c&quot;,&quot;headerPart&quot;:true,&quot;align&quot;:&quot;&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;lineNumbers&quot;:true,&quot;copyBtnOption&quot;:&quot;Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;headingTitleTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:18,&quot;tablet&quot;:13,&quot;mobile&quot;:11},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;,&quot;textTransform&quot;:&quot;uppercase&quot;},&quot;codeTypo&quot;:{&quot;desktop&quot;:18,&quot;tablet&quot;:15,&quot;mobile&quot;:14},&quot;clipBoard&quot;:true,&quot;wordWrap&quot;:true,&quot;width&quot;:{&quot;desktop&quot;:&quot;100%&quot;,&quot;tablet&quot;:&quot;100%&quot;,&quot;mobile&quot;:&quot;100%&quot;},&quot;height&quot;:{&quot;desktop&quot;:&quot;0px&quot;,&quot;tablet&quot;:&quot;0px&quot;,&quot;mobile&quot;:&quot;0px&quot;},&quot;padding&quot;:{&quot;top&quot;:&quot;0px&quot;,&quot;right&quot;:&quot;0px&quot;,&quot;bottom&quot;:&quot;0px&quot;,&quot;left&quot;:&quot;0px&quot;},&quot;background&quot;:{&quot;color&quot;:&quot;#d3cfcf42&quot;},&quot;headerBg&quot;:{&quot;color&quot;:&quot;#2f446e&quot;},&quot;headerTextColor&quot;:{&quot;color&quot;:&quot;#ffff&quot;},&quot;headerThemeOpt&quot;:&quot;one&quot;,&quot;layout&quot;:{&quot;align&quot;:&quot;left&quot;},&quot;border&quot;:{&quot;color&quot;:&quot;#000&quot;,&quot;style&quot;:&quot;solid&quot;,&quot;width&quot;:&quot;0px&quot;},&quot;shadow&quot;:[{&quot;hOffset&quot;:&quot;0px&quot;,&quot;vOffset&quot;:&quot;0px&quot;,&quot;blur&quot;:&quot;0px&quot;,&quot;spread&quot;:&quot;0px&quot;,&quot;color&quot;:&quot;rgba(0, 0, 0, 0.16)&quot;,&quot;isInset&quot;:false}],&quot;alignment&quot;:&quot;center&quot;,&quot;copyTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:13,&quot;tablet&quot;:13,&quot;mobile&quot;:11},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;},&quot;clipBoardColors&quot;:{&quot;color&quot;:&quot;#fff&quot;,&quot;bg&quot;:&quot;#00000024&quot;},&quot;copyIconSize&quot;:{&quot;desktop&quot;:24,&quot;tablet&quot;:20,&quot;mobile&quot;:18},&quot;copyBtnPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;}},&quot;headerPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;14px&quot;,&quot;left&quot;:&quot;14px&quot;,&quot;bottom&quot;:&quot;14px&quot;,&quot;right&quot;:&quot;14px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;12px&quot;,&quot;left&quot;:&quot;12px&quot;,&quot;bottom&quot;:&quot;12px&quot;,&quot;right&quot;:&quot;12px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;10px&quot;,&quot;left&quot;:&quot;10px&quot;,&quot;bottom&quot;:&quot;10px&quot;,&quot;right&quot;:&quot;10px&quot;}},&quot;copyBtnPosition&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;}},&quot;codeBg&quot;:{&quot;color&quot;:&quot;&quot;},&quot;outputOption&quot;:false,&quot;outputText&quot;:&quot;Hello Word !&quot;,&quot;outputColors&quot;:{&quot;color&quot;:&quot;#fff&quot;,&quot;bg&quot;:&quot;#2F446E&quot;},&quot;outputTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:21,&quot;tablet&quot;:17,&quot;mobile&quot;:13},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;},&quot;outputPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;8px&quot;,&quot;left&quot;:&quot;8px&quot;,&quot;bottom&quot;:&quot;8px&quot;,&quot;right&quot;:&quot;8px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;7px&quot;,&quot;left&quot;:&quot;7px&quot;,&quot;bottom&quot;:&quot;7px&quot;,&quot;right&quot;:&quot;7px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;5px&quot;,&quot;right&quot;:&quot;5px&quot;}},&quot;outputBorder&quot;:{&quot;color&quot;:&quot;#000&quot;,&quot;style&quot;:&quot;solid&quot;,&quot;width&quot;:&quot;0px&quot;,&quot;radius&quot;:&quot;7px&quot;},&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true}}'\n>\n    <pre class=\"bchCodeData\" style=\"display:none;\">&quot;describe(\\&quot;MyComponentComponent\\&quot;, () =&gt; {\\n  it(\\&quot;should render initially with heading and tip of the day\\&quot;, async () =&gt; {\\n    \\u2026\\n    const hideButton = screen.getByRole(\\&quot;button\\&quot;, { name: \\&quot;Ausblenden\\&quot; });\\n    expect(hideButton).toBeVisible();\\n    expect(hideButton).not.toBeDisabled();\\n  });\\n});&quot;<\/pre>\n<\/div>\n\n\n\n<h5 class=\"wp-block-heading\">Test mit Interaktionen<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Im zweiten Test pr\u00fcfen wir mit <code>userEvents<\/code> und unserem simulierten User, ob der Tipp des Tages bei einem Klick auf den Button auch verschwindet. Hierbei finden wir wie gewohnt erstmal den Aufruf unseres Setups vor. Danach pr\u00fcfen wir den Zustand vor der Interaktion mithilfe von <code>toBeVisible<\/code> und <code>not.toBeInTheDocument<\/code>.<\/p>\n\n\n<div\n    class=\"align wp-block-bch-code-highlight\"    id=\"bhcCodeHighlight-7\"\n    data-attributes='{&quot;cId&quot;:&quot;60f0e407-2&quot;,&quot;headerPart&quot;:true,&quot;align&quot;:&quot;&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;lineNumbers&quot;:true,&quot;copyBtnOption&quot;:&quot;Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;headingTitleTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:18,&quot;tablet&quot;:13,&quot;mobile&quot;:11},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;,&quot;textTransform&quot;:&quot;uppercase&quot;},&quot;codeTypo&quot;:{&quot;desktop&quot;:18,&quot;tablet&quot;:15,&quot;mobile&quot;:14},&quot;clipBoard&quot;:true,&quot;wordWrap&quot;:true,&quot;width&quot;:{&quot;desktop&quot;:&quot;100%&quot;,&quot;tablet&quot;:&quot;100%&quot;,&quot;mobile&quot;:&quot;100%&quot;},&quot;height&quot;:{&quot;desktop&quot;:&quot;0px&quot;,&quot;tablet&quot;:&quot;0px&quot;,&quot;mobile&quot;:&quot;0px&quot;},&quot;padding&quot;:{&quot;top&quot;:&quot;0px&quot;,&quot;right&quot;:&quot;0px&quot;,&quot;bottom&quot;:&quot;0px&quot;,&quot;left&quot;:&quot;0px&quot;},&quot;background&quot;:{&quot;color&quot;:&quot;#d3cfcf42&quot;},&quot;headerBg&quot;:{&quot;color&quot;:&quot;#2f446e&quot;},&quot;headerTextColor&quot;:{&quot;color&quot;:&quot;#ffff&quot;},&quot;headerThemeOpt&quot;:&quot;one&quot;,&quot;layout&quot;:{&quot;align&quot;:&quot;left&quot;},&quot;border&quot;:{&quot;color&quot;:&quot;#000&quot;,&quot;style&quot;:&quot;solid&quot;,&quot;width&quot;:&quot;0px&quot;},&quot;shadow&quot;:[{&quot;hOffset&quot;:&quot;0px&quot;,&quot;vOffset&quot;:&quot;0px&quot;,&quot;blur&quot;:&quot;0px&quot;,&quot;spread&quot;:&quot;0px&quot;,&quot;color&quot;:&quot;rgba(0, 0, 0, 0.16)&quot;,&quot;isInset&quot;:false}],&quot;alignment&quot;:&quot;center&quot;,&quot;copyTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:13,&quot;tablet&quot;:13,&quot;mobile&quot;:11},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;},&quot;clipBoardColors&quot;:{&quot;color&quot;:&quot;#fff&quot;,&quot;bg&quot;:&quot;#00000024&quot;},&quot;copyIconSize&quot;:{&quot;desktop&quot;:24,&quot;tablet&quot;:20,&quot;mobile&quot;:18},&quot;copyBtnPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;}},&quot;headerPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;14px&quot;,&quot;left&quot;:&quot;14px&quot;,&quot;bottom&quot;:&quot;14px&quot;,&quot;right&quot;:&quot;14px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;12px&quot;,&quot;left&quot;:&quot;12px&quot;,&quot;bottom&quot;:&quot;12px&quot;,&quot;right&quot;:&quot;12px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;10px&quot;,&quot;left&quot;:&quot;10px&quot;,&quot;bottom&quot;:&quot;10px&quot;,&quot;right&quot;:&quot;10px&quot;}},&quot;copyBtnPosition&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;}},&quot;codeBg&quot;:{&quot;color&quot;:&quot;&quot;},&quot;outputOption&quot;:false,&quot;outputText&quot;:&quot;Hello Word !&quot;,&quot;outputColors&quot;:{&quot;color&quot;:&quot;#fff&quot;,&quot;bg&quot;:&quot;#2F446E&quot;},&quot;outputTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:21,&quot;tablet&quot;:17,&quot;mobile&quot;:13},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;},&quot;outputPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;8px&quot;,&quot;left&quot;:&quot;8px&quot;,&quot;bottom&quot;:&quot;8px&quot;,&quot;right&quot;:&quot;8px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;7px&quot;,&quot;left&quot;:&quot;7px&quot;,&quot;bottom&quot;:&quot;7px&quot;,&quot;right&quot;:&quot;7px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;5px&quot;,&quot;right&quot;:&quot;5px&quot;}},&quot;outputBorder&quot;:{&quot;color&quot;:&quot;#000&quot;,&quot;style&quot;:&quot;solid&quot;,&quot;width&quot;:&quot;0px&quot;,&quot;radius&quot;:&quot;7px&quot;},&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true}}'\n>\n    <pre class=\"bchCodeData\" style=\"display:none;\">&quot;describe(\\&quot;MyComponentComponent\\&quot;, () =&gt; {\\n  it(\\&quot;should render with heading and personal section initially\\&quot;, async () =&gt; {\\n    \\u2026\\n  });\\n\\n  it(\\&quot;should hide tip of the day on button click\\&quot;, async () =&gt; {\\n    \\\/\\\/ GIVEN\\n    const { user } = await setup();\\n\\n    \\\/\\\/ THEN\\n    expect(screen.getByRole(\\&quot;heading\\&quot;, { level: 2, name: \\&quot;Tipp des Tages\\&quot; })).toBeVisible();\\n    expect(screen.getByText(\\&quot;Testing Library macht Refactorings sicherer.\\&quot;)).toBeVisible();\\n    expect(\\n      screen.queryByRole(\\&quot;heading\\&quot;, { level: 2, name: \\&quot;Du hast den Tipp des Tages schon gesehen.\\&quot; })\\n    ).not.toBeInTheDocument();\\n  });\\n});&quot;<\/pre>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Anschlie\u00dfend erfolgt der Klick auf den Button. Diesen warten wir \u00fcber das Schl\u00fcsselwort <code>await<\/code> ab. Dadurch erhalten wir die UI im aktualisierten Zustand direkt im Screen \u2013 ohne uns um die Reaktivit\u00e4t k\u00fcmmern zu m\u00fcssen. Zum Abschluss pr\u00fcfen wir, ob der \u201eTipp des Tages\u201c verschwunden ist und stattdessen der Hinweis auf den bereits gesehenen Tipp angezeigt wird. Auch der Button sollte nun deaktiviert sein und keine weiteren Interaktionen mehr zulassen.<\/p>\n\n\n<div\n    class=\"align wp-block-bch-code-highlight\"    id=\"bhcCodeHighlight-8\"\n    data-attributes='{&quot;cId&quot;:&quot;c48812d2-0&quot;,&quot;headerPart&quot;:true,&quot;align&quot;:&quot;&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;lineNumbers&quot;:true,&quot;copyBtnOption&quot;:&quot;Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;headingTitleTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:18,&quot;tablet&quot;:13,&quot;mobile&quot;:11},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;,&quot;textTransform&quot;:&quot;uppercase&quot;},&quot;codeTypo&quot;:{&quot;desktop&quot;:18,&quot;tablet&quot;:15,&quot;mobile&quot;:14},&quot;clipBoard&quot;:true,&quot;wordWrap&quot;:true,&quot;width&quot;:{&quot;desktop&quot;:&quot;100%&quot;,&quot;tablet&quot;:&quot;100%&quot;,&quot;mobile&quot;:&quot;100%&quot;},&quot;height&quot;:{&quot;desktop&quot;:&quot;0px&quot;,&quot;tablet&quot;:&quot;0px&quot;,&quot;mobile&quot;:&quot;0px&quot;},&quot;padding&quot;:{&quot;top&quot;:&quot;0px&quot;,&quot;right&quot;:&quot;0px&quot;,&quot;bottom&quot;:&quot;0px&quot;,&quot;left&quot;:&quot;0px&quot;},&quot;background&quot;:{&quot;color&quot;:&quot;#d3cfcf42&quot;},&quot;headerBg&quot;:{&quot;color&quot;:&quot;#2f446e&quot;},&quot;headerTextColor&quot;:{&quot;color&quot;:&quot;#ffff&quot;},&quot;headerThemeOpt&quot;:&quot;one&quot;,&quot;layout&quot;:{&quot;align&quot;:&quot;left&quot;},&quot;border&quot;:{&quot;color&quot;:&quot;#000&quot;,&quot;style&quot;:&quot;solid&quot;,&quot;width&quot;:&quot;0px&quot;},&quot;shadow&quot;:[{&quot;hOffset&quot;:&quot;0px&quot;,&quot;vOffset&quot;:&quot;0px&quot;,&quot;blur&quot;:&quot;0px&quot;,&quot;spread&quot;:&quot;0px&quot;,&quot;color&quot;:&quot;rgba(0, 0, 0, 0.16)&quot;,&quot;isInset&quot;:false}],&quot;alignment&quot;:&quot;center&quot;,&quot;copyTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:13,&quot;tablet&quot;:13,&quot;mobile&quot;:11},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;},&quot;clipBoardColors&quot;:{&quot;color&quot;:&quot;#fff&quot;,&quot;bg&quot;:&quot;#00000024&quot;},&quot;copyIconSize&quot;:{&quot;desktop&quot;:24,&quot;tablet&quot;:20,&quot;mobile&quot;:18},&quot;copyBtnPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;2px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;2px&quot;,&quot;right&quot;:&quot;5px&quot;}},&quot;headerPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;14px&quot;,&quot;left&quot;:&quot;14px&quot;,&quot;bottom&quot;:&quot;14px&quot;,&quot;right&quot;:&quot;14px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;12px&quot;,&quot;left&quot;:&quot;12px&quot;,&quot;bottom&quot;:&quot;12px&quot;,&quot;right&quot;:&quot;12px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;10px&quot;,&quot;left&quot;:&quot;10px&quot;,&quot;bottom&quot;:&quot;10px&quot;,&quot;right&quot;:&quot;10px&quot;}},&quot;copyBtnPosition&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;right&quot;:&quot;15px&quot;}},&quot;codeBg&quot;:{&quot;color&quot;:&quot;&quot;},&quot;outputOption&quot;:false,&quot;outputText&quot;:&quot;Hello Word !&quot;,&quot;outputColors&quot;:{&quot;color&quot;:&quot;#fff&quot;,&quot;bg&quot;:&quot;#2F446E&quot;},&quot;outputTypo&quot;:{&quot;fontWeight&quot;:400,&quot;fontSize&quot;:{&quot;desktop&quot;:21,&quot;tablet&quot;:17,&quot;mobile&quot;:13},&quot;lineHeight&quot;:1.5,&quot;fontFamily&quot;:&quot;Aleo&quot;},&quot;outputPadding&quot;:{&quot;desktop&quot;:{&quot;top&quot;:&quot;8px&quot;,&quot;left&quot;:&quot;8px&quot;,&quot;bottom&quot;:&quot;8px&quot;,&quot;right&quot;:&quot;8px&quot;},&quot;tablet&quot;:{&quot;top&quot;:&quot;7px&quot;,&quot;left&quot;:&quot;7px&quot;,&quot;bottom&quot;:&quot;7px&quot;,&quot;right&quot;:&quot;7px&quot;},&quot;mobile&quot;:{&quot;top&quot;:&quot;5px&quot;,&quot;left&quot;:&quot;5px&quot;,&quot;bottom&quot;:&quot;5px&quot;,&quot;right&quot;:&quot;5px&quot;}},&quot;outputBorder&quot;:{&quot;color&quot;:&quot;#000&quot;,&quot;style&quot;:&quot;solid&quot;,&quot;width&quot;:&quot;0px&quot;,&quot;radius&quot;:&quot;7px&quot;},&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true}}'\n>\n    <pre class=\"bchCodeData\" style=\"display:none;\">&quot;describe(\\&quot;MyComponentComponent\\&quot;, () =&gt; {\\n  it(\\&quot;should render with heading and personal section initially\\&quot;, async () =&gt; {\\n    \\u2026\\n  });\\n\\n  it(\\&quot;should hide tip of the day on button click\\&quot;, async () =&gt; {\\n    \\u2026\\n\\n    \\\/\\\/ WHEN\\n    const hideButton = screen.getByRole(\\&quot;button\\&quot;, { name: \\&quot;Ausblenden\\&quot; });\\n    await user.click(hideButton);\\n\\n    \\\/\\\/ THEN\\n    expect(screen.queryByRole(\\&quot;heading\\&quot;, { level: 2, name: \\&quot;Tipp des Tages\\&quot; })).not.toBeInTheDocument();\\n    expect(screen.queryByRole(\\&quot;Testing Library macht Refactorings sicherer.\\&quot;)).toBeVisible();\\n    expect(screen.getByRole(\\&quot;heading\\&quot;, { level: 2, name: \\&quot;Du hast den Tipp des Tages schon gesehen.\\&quot; })).toBeVisible();\\n\\n    expect(hideButton).toBeDisabled();\\n  });\\n});&quot;<\/pre>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Fazit<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Insgesamt l\u00e4sst sich sagen, dass die Testing Library immer st\u00e4rker ins Zentrum von modernen Softwareentwicklungsprojekten r\u00fcckt. Sie erm\u00f6glicht es, Tests zu schreiben, die realit\u00e4tsnah und aussagekr\u00e4ftig sind, was wiederum Vertrauen in die Qualit\u00e4t der Software schafft. Die Testing Library, hat dazu beigetragen, den Fokus auf User-zentriertes Testen und Barrierefreiheit vermehrt in den Vordergrund zu r\u00fccken und hilft so Entwicklungsteams, qualitativ hochwertige und benutzungsfreundliche Anwendungen zu schaffen. Manche Tests m\u00f6gen vielleicht langsamer als striktes Unit Testing sein, bieten daf\u00fcr jedoch eine h\u00f6here Aussagekraft.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wichtig ist hierbei, dass es kein \u201erichtig\u201c oder \u201efalsch\u201c gibt. Die Tests sollten immer auf die Anforderungen des Produkts und des Entwicklungsteams abgestimmt sein. Am Ende geht es darum, dass die Tests Vertrauen in die Funktionalit\u00e4t und Zuverl\u00e4ssigkeit der Software schaffen.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Quellen:<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/kentcdodds.com\/blog\/the-testing-trophy-and-testing-classifications\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/kentcdodds.com\/<\/a><br><a href=\"https:\/\/testing-library.com\/docs\/queries\/about\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/testing-library.com\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In der Softwareentwicklung sind automatisierte Tests unerl\u00e4sslich, um fortw\u00e4hrend sicherzustellen, dass Anwendungen zuverl\u00e4ssig und fehlerfrei funktionieren. Sie bieten sowohl den Endnutzenden als auch den Entwicklungsteams Sicherheit und Vertrauen in die Softwarequalit\u00e4t. Gerade die Testing Library von Kent C. Dodds hat sich in den letzten Jahren als ein m\u00e4chtiges Werkzeug etabliert, das weit \u00fcber klassische Unit-Tests [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":636,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-634","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-softwareentwicklung"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Testing Library \u2013 die Zukunft des Softwaretestens? - IT Sonix - Ihr Partner f\u00fcr individuelle Softwarel\u00f6sungen<\/title>\n<meta name=\"description\" content=\"it Sonix Blog: Testing Library \u2013 die Zukunft des Softwaretestens?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itsonix.eu\/de\/blog\/testing-library-die-zukunft-des-softwaretestens\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Testing Library \u2013 die Zukunft des Softwaretestens? - IT Sonix - Ihr Partner f\u00fcr individuelle Softwarel\u00f6sungen\" \/>\n<meta property=\"og:description\" content=\"it Sonix Blog: Testing Library \u2013 die Zukunft des Softwaretestens?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itsonix.eu\/de\/blog\/testing-library-die-zukunft-des-softwaretestens\/\" \/>\n<meta property=\"og:site_name\" content=\"IT Sonix - Ihr Partner f\u00fcr individuelle Softwarel\u00f6sungen\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-09T10:14:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-13T09:22:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itsonix.eu\/wp-content\/uploads\/2026\/05\/Group-627130.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1372\" \/>\n\t<meta property=\"og:image:height\" content=\"697\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Praktikant\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Praktikant\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"11\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/itsonix.eu\\\/blog\\\/testing-library-die-zukunft-des-softwaretestens\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/itsonix.eu\\\/blog\\\/testing-library-die-zukunft-des-softwaretestens\\\/\"},\"author\":{\"name\":\"Praktikant\",\"@id\":\"https:\\\/\\\/itsonix.eu\\\/de\\\/#\\\/schema\\\/person\\\/829813e3a66c2dfbb030cd6647f3caf3\"},\"headline\":\"Testing Library \u2013 die Zukunft des Softwaretestens?\",\"datePublished\":\"2025-01-09T10:14:00+00:00\",\"dateModified\":\"2026-05-13T09:22:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/itsonix.eu\\\/blog\\\/testing-library-die-zukunft-des-softwaretestens\\\/\"},\"wordCount\":1857,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/itsonix.eu\\\/de\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/itsonix.eu\\\/blog\\\/testing-library-die-zukunft-des-softwaretestens\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/itsonix.eu\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Group-627130.png\",\"articleSection\":[\"Softwareentwicklung\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/itsonix.eu\\\/blog\\\/testing-library-die-zukunft-des-softwaretestens\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/itsonix.eu\\\/blog\\\/testing-library-die-zukunft-des-softwaretestens\\\/\",\"url\":\"https:\\\/\\\/itsonix.eu\\\/blog\\\/testing-library-die-zukunft-des-softwaretestens\\\/\",\"name\":\"Testing Library \u2013 die Zukunft des Softwaretestens? - IT Sonix - Ihr Partner f\u00fcr individuelle Softwarel\u00f6sungen\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/itsonix.eu\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/itsonix.eu\\\/blog\\\/testing-library-die-zukunft-des-softwaretestens\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/itsonix.eu\\\/blog\\\/testing-library-die-zukunft-des-softwaretestens\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/itsonix.eu\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Group-627130.png\",\"datePublished\":\"2025-01-09T10:14:00+00:00\",\"dateModified\":\"2026-05-13T09:22:24+00:00\",\"description\":\"it Sonix Blog: Testing Library \u2013 die Zukunft des Softwaretestens?\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/itsonix.eu\\\/blog\\\/testing-library-die-zukunft-des-softwaretestens\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/itsonix.eu\\\/blog\\\/testing-library-die-zukunft-des-softwaretestens\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/itsonix.eu\\\/blog\\\/testing-library-die-zukunft-des-softwaretestens\\\/#primaryimage\",\"url\":\"https:\\\/\\\/itsonix.eu\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Group-627130.png\",\"contentUrl\":\"https:\\\/\\\/itsonix.eu\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Group-627130.png\",\"width\":1372,\"height\":697,\"caption\":\"Illustration einer Testpyramide f\u00fcr die Frontend-Entwicklung mit Angular, React und Vue. Die Stufen f\u00fchren von unten nach oben zu einer Troph\u00e4e: End-to-End (E2E) Tests, Service- und Integrationstests, Unit- und Komponententests sowie Statische Tests.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/itsonix.eu\\\/blog\\\/testing-library-die-zukunft-des-softwaretestens\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Start\",\"item\":\"https:\\\/\\\/itsonix.eu\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Testing Library \u2013 die Zukunft des Softwaretestens?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/itsonix.eu\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/itsonix.eu\\\/de\\\/\",\"name\":\"IT Sonix - Ihr Partner f\u00fcr individuelle Softwarel\u00f6sungen\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/itsonix.eu\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/itsonix.eu\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/itsonix.eu\\\/de\\\/#organization\",\"name\":\"IT Sonix - Ihr Partner f\u00fcr individuelle Softwarel\u00f6sungen\",\"url\":\"https:\\\/\\\/itsonix.eu\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/itsonix.eu\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/itsonix.eu\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/itsonix_rgb.png\",\"contentUrl\":\"https:\\\/\\\/itsonix.eu\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/itsonix_rgb.png\",\"width\":1755,\"height\":296,\"caption\":\"IT Sonix - Ihr Partner f\u00fcr individuelle Softwarel\u00f6sungen\"},\"image\":{\"@id\":\"https:\\\/\\\/itsonix.eu\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/itsonix.eu\\\/de\\\/#\\\/schema\\\/person\\\/829813e3a66c2dfbb030cd6647f3caf3\",\"name\":\"Praktikant\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dcf1b27e4ed416dc1ee2931ab8eac2c1ed8dc060bed9a0d6bb1f0501c05c25d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dcf1b27e4ed416dc1ee2931ab8eac2c1ed8dc060bed9a0d6bb1f0501c05c25d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dcf1b27e4ed416dc1ee2931ab8eac2c1ed8dc060bed9a0d6bb1f0501c05c25d?s=96&d=mm&r=g\",\"caption\":\"Praktikant\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Testing Library \u2013 die Zukunft des Softwaretestens? - IT Sonix - Ihr Partner f\u00fcr individuelle Softwarel\u00f6sungen","description":"it Sonix Blog: Testing Library \u2013 die Zukunft des Softwaretestens?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itsonix.eu\/de\/blog\/testing-library-die-zukunft-des-softwaretestens\/","og_locale":"de_DE","og_type":"article","og_title":"Testing Library \u2013 die Zukunft des Softwaretestens? - IT Sonix - Ihr Partner f\u00fcr individuelle Softwarel\u00f6sungen","og_description":"it Sonix Blog: Testing Library \u2013 die Zukunft des Softwaretestens?","og_url":"https:\/\/itsonix.eu\/de\/blog\/testing-library-die-zukunft-des-softwaretestens\/","og_site_name":"IT Sonix - Ihr Partner f\u00fcr individuelle Softwarel\u00f6sungen","article_published_time":"2025-01-09T10:14:00+00:00","article_modified_time":"2026-05-13T09:22:24+00:00","og_image":[{"width":1372,"height":697,"url":"https:\/\/itsonix.eu\/wp-content\/uploads\/2026\/05\/Group-627130.png","type":"image\/png"}],"author":"Praktikant","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"Praktikant","Gesch\u00e4tzte Lesezeit":"11\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itsonix.eu\/blog\/testing-library-die-zukunft-des-softwaretestens\/#article","isPartOf":{"@id":"https:\/\/itsonix.eu\/blog\/testing-library-die-zukunft-des-softwaretestens\/"},"author":{"name":"Praktikant","@id":"https:\/\/itsonix.eu\/de\/#\/schema\/person\/829813e3a66c2dfbb030cd6647f3caf3"},"headline":"Testing Library \u2013 die Zukunft des Softwaretestens?","datePublished":"2025-01-09T10:14:00+00:00","dateModified":"2026-05-13T09:22:24+00:00","mainEntityOfPage":{"@id":"https:\/\/itsonix.eu\/blog\/testing-library-die-zukunft-des-softwaretestens\/"},"wordCount":1857,"commentCount":0,"publisher":{"@id":"https:\/\/itsonix.eu\/de\/#organization"},"image":{"@id":"https:\/\/itsonix.eu\/blog\/testing-library-die-zukunft-des-softwaretestens\/#primaryimage"},"thumbnailUrl":"https:\/\/itsonix.eu\/wp-content\/uploads\/2026\/05\/Group-627130.png","articleSection":["Softwareentwicklung"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/itsonix.eu\/blog\/testing-library-die-zukunft-des-softwaretestens\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/itsonix.eu\/blog\/testing-library-die-zukunft-des-softwaretestens\/","url":"https:\/\/itsonix.eu\/blog\/testing-library-die-zukunft-des-softwaretestens\/","name":"Testing Library \u2013 die Zukunft des Softwaretestens? - IT Sonix - Ihr Partner f\u00fcr individuelle Softwarel\u00f6sungen","isPartOf":{"@id":"https:\/\/itsonix.eu\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itsonix.eu\/blog\/testing-library-die-zukunft-des-softwaretestens\/#primaryimage"},"image":{"@id":"https:\/\/itsonix.eu\/blog\/testing-library-die-zukunft-des-softwaretestens\/#primaryimage"},"thumbnailUrl":"https:\/\/itsonix.eu\/wp-content\/uploads\/2026\/05\/Group-627130.png","datePublished":"2025-01-09T10:14:00+00:00","dateModified":"2026-05-13T09:22:24+00:00","description":"it Sonix Blog: Testing Library \u2013 die Zukunft des Softwaretestens?","breadcrumb":{"@id":"https:\/\/itsonix.eu\/blog\/testing-library-die-zukunft-des-softwaretestens\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itsonix.eu\/blog\/testing-library-die-zukunft-des-softwaretestens\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/itsonix.eu\/blog\/testing-library-die-zukunft-des-softwaretestens\/#primaryimage","url":"https:\/\/itsonix.eu\/wp-content\/uploads\/2026\/05\/Group-627130.png","contentUrl":"https:\/\/itsonix.eu\/wp-content\/uploads\/2026\/05\/Group-627130.png","width":1372,"height":697,"caption":"Illustration einer Testpyramide f\u00fcr die Frontend-Entwicklung mit Angular, React und Vue. Die Stufen f\u00fchren von unten nach oben zu einer Troph\u00e4e: End-to-End (E2E) Tests, Service- und Integrationstests, Unit- und Komponententests sowie Statische Tests."},{"@type":"BreadcrumbList","@id":"https:\/\/itsonix.eu\/blog\/testing-library-die-zukunft-des-softwaretestens\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Start","item":"https:\/\/itsonix.eu\/de\/"},{"@type":"ListItem","position":2,"name":"Testing Library \u2013 die Zukunft des Softwaretestens?"}]},{"@type":"WebSite","@id":"https:\/\/itsonix.eu\/de\/#website","url":"https:\/\/itsonix.eu\/de\/","name":"IT Sonix - Ihr Partner f\u00fcr individuelle Softwarel\u00f6sungen","description":"","publisher":{"@id":"https:\/\/itsonix.eu\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itsonix.eu\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/itsonix.eu\/de\/#organization","name":"IT Sonix - Ihr Partner f\u00fcr individuelle Softwarel\u00f6sungen","url":"https:\/\/itsonix.eu\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/itsonix.eu\/de\/#\/schema\/logo\/image\/","url":"https:\/\/itsonix.eu\/wp-content\/uploads\/2026\/05\/itsonix_rgb.png","contentUrl":"https:\/\/itsonix.eu\/wp-content\/uploads\/2026\/05\/itsonix_rgb.png","width":1755,"height":296,"caption":"IT Sonix - Ihr Partner f\u00fcr individuelle Softwarel\u00f6sungen"},"image":{"@id":"https:\/\/itsonix.eu\/de\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/itsonix.eu\/de\/#\/schema\/person\/829813e3a66c2dfbb030cd6647f3caf3","name":"Praktikant","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/5dcf1b27e4ed416dc1ee2931ab8eac2c1ed8dc060bed9a0d6bb1f0501c05c25d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5dcf1b27e4ed416dc1ee2931ab8eac2c1ed8dc060bed9a0d6bb1f0501c05c25d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dcf1b27e4ed416dc1ee2931ab8eac2c1ed8dc060bed9a0d6bb1f0501c05c25d?s=96&d=mm&r=g","caption":"Praktikant"}}]}},"_links":{"self":[{"href":"https:\/\/itsonix.eu\/de\/wp-json\/wp\/v2\/posts\/634","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itsonix.eu\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itsonix.eu\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itsonix.eu\/de\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/itsonix.eu\/de\/wp-json\/wp\/v2\/comments?post=634"}],"version-history":[{"count":1,"href":"https:\/\/itsonix.eu\/de\/wp-json\/wp\/v2\/posts\/634\/revisions"}],"predecessor-version":[{"id":640,"href":"https:\/\/itsonix.eu\/de\/wp-json\/wp\/v2\/posts\/634\/revisions\/640"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itsonix.eu\/de\/wp-json\/wp\/v2\/media\/636"}],"wp:attachment":[{"href":"https:\/\/itsonix.eu\/de\/wp-json\/wp\/v2\/media?parent=634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itsonix.eu\/de\/wp-json\/wp\/v2\/categories?post=634"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itsonix.eu\/de\/wp-json\/wp\/v2\/tags?post=634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}