{"id":11560,"date":"2025-05-12T09:00:00","date_gmt":"2025-05-12T07:00:00","guid":{"rendered":"https:\/\/wata.es\/?p=11560"},"modified":"2025-05-16T12:02:06","modified_gmt":"2025-05-16T10:02:06","slug":"component-testing-in-cypress","status":"publish","type":"post","link":"https:\/\/wata.es\/component-testing-in-cypress\/","title":{"rendered":"Component Testing in Cypress"},"content":{"rendered":"\n<p>Component testing in Cypress allows individual components of an application to be tested in isolation to ensure they function correctly before being integrated into the entire system. This is particularly useful for applications developed with frameworks like React, Angular, or Vue.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is Component Testing in Cypress?<\/strong><\/h2>\n\n\n\n<p>By testing components, the functionality of small units of code can be verified without being dependent on the overall structure of the system.<\/p>\n\n\n\n<p>This testing approach is especially practical for frontend development, as it enables testing both the visual representation of a component and the underlying logic simultaneously\u2014without having to worry about integration with the backend, REST APIs, or storage systems.<\/p>\n\n\n\n<p>In the typical testing pyramid, which is used to illustrate different testing methods and their scope, component testing is positioned in the middle\u2014between End-to-End (E2E) tests and unit tests.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"945\" height=\"710\" src=\"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Component-Testing-in-Cypress_1.png\" alt=\"\" class=\"wp-image-11561\" srcset=\"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Component-Testing-in-Cypress_1.png 945w, https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Component-Testing-in-Cypress_1-300x225.png 300w, https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Component-Testing-in-Cypress_1-768x577.png 768w\" sizes=\"auto, (max-width: 945px) 100vw, 945px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Example of Component Testing in Cypress<\/strong><\/h2>\n\n\n\n<p>A component test in Cypress &#8220;mounts&#8221; the component by making it independent of any parent page or component to which it originally belonged in the program hierarchy. It isolates the component at runtime, allowing us to perform the necessary assertions.<\/p>\n\n\n\n<p>For example, let&#8217;s consider a simple button encapsulated as a component in Angular:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Angular Component (button.component.ts)<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Component, Input } from '@angular\/core';\n\n@Component({\n  selector: 'app-button',\n  template: '&lt;button (click)=\"handleClick()\"&gt;{{label}}&lt;\/button&gt;',\n  styleUrls: &#91;'.\/button.component.css']\n})\nexport class ButtonComponent {\n  @Input() label: string = 'Click me';\n\n  handleClick() {\n    console.log('Button clicked');\n  }\n}<\/code><\/pre>\n\n\n\n<p>The following file demonstrates a component test in Cypress for the same button, where we verify:<br>a) The button&#8217;s label<br>b) Its action (in this case, a simple console message)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Component Test in Cypress (button.component.cy.ts)<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>describe('ButtonComponent', () =&gt; {\n  it('renders correctly and handles click events', () =&gt; {\n    cy.mount('&lt;app-button label=\"Test Button\"&gt;&lt;\/app-button&gt;');\n    cy.get('button').should('contain', 'Test Button'); \/\/&lt;-- comprobamos el nombre\n    cy.get('button').click();\n    cy.window().then(win =&gt; {.  \/\/ &lt;-- Comprobamos la acci\u00f3n\n      cy.spy(win.console, 'log');\n      cy.get('button').click();\n      cy.wrap(win.console.log).should('be.calledWith', 'Button clicked');\n    });\n  });\n});<\/code><\/pre>\n\n\n\n<p>Additionally, we could add tests to verify that the component correctly handles different labels and states.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>describe('ButtonComponent - Additional Tests', () =&gt; {\n  it('should render with a different label', () =&gt; {\n    cy.mount('&lt;app-button label=\"New Label\"&gt;&lt;\/app-button&gt;');\n    cy.get('button').should('contain', 'New Label');\n  });\n\n  it('should apply different styles based on properties', () =&gt; {\n    cy.mount('&lt;app-button label=\"Styled Button\" class=\"primary\"&gt;&lt;\/app-button&gt;');\n    cy.get('button').should('have.class', 'primary');\n  });\n});<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Component Testing at WATA Factory<\/strong><\/h2>\n\n\n\n<p>At WATA Factory, we have been using component testing in our projects for quite some time, especially in GesA. It has allowed us to accelerate and optimize frontend development.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>Component testing with Cypress allows you to test multiple aspects of the frontend simultaneously\u2014including the UI, Ngrx stores, events, and more\u2014without the complexity of setting up, maintaining, and preparing an environment for a full End-to-End (E2E) test.<\/p>\n\n\n\n<p>You can think of it as a small-scale E2E test\u2014less complex but more focused. So don&#8217;t hesitate\u2014just as we have done at WATA Factory: Give component testing in Cypress a chance!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Component testing in Cypress allows individual components of an application to be tested in isolation to ensure they function correctly before being integrated into the entire system. This is particularly useful for applications developed with frameworks like React, Angular, or Vue.<\/p>\n","protected":false},"author":44,"featured_media":11564,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[2,180],"tags":[],"class_list":["post-11560","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","category-technology"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Component Testing in Cypress - WATA Factory<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wata.es\/component-testing-in-cypress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Component Testing in Cypress - WATA Factory\" \/>\n<meta property=\"og:description\" content=\"Component testing in Cypress allows individual components of an application to be tested in isolation to ensure they function correctly before being integrated into the entire system. This is particularly useful for applications developed with frameworks like React, Angular, or Vue.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wata.es\/component-testing-in-cypress\/\" \/>\n<meta property=\"og:site_name\" content=\"WATA Factory\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/watafactory\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-12T07:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-16T10:02:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Component-Testing-in-Cypress-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Paco Perez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@watafactory\" \/>\n<meta name=\"twitter:site\" content=\"@watafactory\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Paco Perez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/wata.es\/component-testing-in-cypress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/wata.es\/component-testing-in-cypress\/\"},\"author\":{\"name\":\"Paco Perez\",\"@id\":\"https:\/\/wata.es\/#\/schema\/person\/b7bb8d12a72d7338a364f734d3fbe534\"},\"headline\":\"Component Testing in Cypress\",\"datePublished\":\"2025-05-12T07:00:00+00:00\",\"dateModified\":\"2025-05-16T10:02:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/wata.es\/component-testing-in-cypress\/\"},\"wordCount\":373,\"publisher\":{\"@id\":\"https:\/\/wata.es\/#organization\"},\"image\":{\"@id\":\"https:\/\/wata.es\/component-testing-in-cypress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Component-Testing-in-Cypress-scaled.jpg\",\"articleSection\":[\"News\",\"Technology\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wata.es\/component-testing-in-cypress\/\",\"url\":\"https:\/\/wata.es\/component-testing-in-cypress\/\",\"name\":\"Component Testing in Cypress - WATA Factory\",\"isPartOf\":{\"@id\":\"https:\/\/wata.es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wata.es\/component-testing-in-cypress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wata.es\/component-testing-in-cypress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Component-Testing-in-Cypress-scaled.jpg\",\"datePublished\":\"2025-05-12T07:00:00+00:00\",\"dateModified\":\"2025-05-16T10:02:06+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/wata.es\/component-testing-in-cypress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wata.es\/component-testing-in-cypress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wata.es\/component-testing-in-cypress\/#primaryimage\",\"url\":\"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Component-Testing-in-Cypress-scaled.jpg\",\"contentUrl\":\"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Component-Testing-in-Cypress-scaled.jpg\",\"width\":2560,\"height\":1440},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wata.es\/component-testing-in-cypress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wata.es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Component Testing in Cypress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wata.es\/#website\",\"url\":\"https:\/\/wata.es\/\",\"name\":\"WATA Factory\",\"description\":\"IT Consulting &amp; Outsourcing for your company\",\"publisher\":{\"@id\":\"https:\/\/wata.es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wata.es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/wata.es\/#organization\",\"name\":\"WATA Factory\",\"url\":\"https:\/\/wata.es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wata.es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/wata.es\/wp-content\/uploads\/2019\/12\/logowata.png\",\"contentUrl\":\"https:\/\/wata.es\/wp-content\/uploads\/2019\/12\/logowata.png\",\"width\":688,\"height\":176,\"caption\":\"WATA Factory\"},\"image\":{\"@id\":\"https:\/\/wata.es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/watafactory\/\",\"https:\/\/x.com\/watafactory\",\"https:\/\/www.linkedin.com\/company\/wata\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/wata.es\/#\/schema\/person\/b7bb8d12a72d7338a364f734d3fbe534\",\"name\":\"Paco Perez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wata.es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0b3e8a343c34c136c4bb32dc83a4e8546d171e356d53628a20221c5925fed8b1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0b3e8a343c34c136c4bb32dc83a4e8546d171e356d53628a20221c5925fed8b1?s=96&d=mm&r=g\",\"caption\":\"Paco Perez\"},\"url\":\"https:\/\/wata.es\/author\/p-perezwata-es\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Component Testing in Cypress - WATA Factory","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:\/\/wata.es\/component-testing-in-cypress\/","og_locale":"en_US","og_type":"article","og_title":"Component Testing in Cypress - WATA Factory","og_description":"Component testing in Cypress allows individual components of an application to be tested in isolation to ensure they function correctly before being integrated into the entire system. This is particularly useful for applications developed with frameworks like React, Angular, or Vue.","og_url":"https:\/\/wata.es\/component-testing-in-cypress\/","og_site_name":"WATA Factory","article_publisher":"https:\/\/www.facebook.com\/watafactory\/","article_published_time":"2025-05-12T07:00:00+00:00","article_modified_time":"2025-05-16T10:02:06+00:00","og_image":[{"width":2560,"height":1440,"url":"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Component-Testing-in-Cypress-scaled.jpg","type":"image\/jpeg"}],"author":"Paco Perez","twitter_card":"summary_large_image","twitter_creator":"@watafactory","twitter_site":"@watafactory","twitter_misc":{"Written by":"Paco Perez","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wata.es\/component-testing-in-cypress\/#article","isPartOf":{"@id":"https:\/\/wata.es\/component-testing-in-cypress\/"},"author":{"name":"Paco Perez","@id":"https:\/\/wata.es\/#\/schema\/person\/b7bb8d12a72d7338a364f734d3fbe534"},"headline":"Component Testing in Cypress","datePublished":"2025-05-12T07:00:00+00:00","dateModified":"2025-05-16T10:02:06+00:00","mainEntityOfPage":{"@id":"https:\/\/wata.es\/component-testing-in-cypress\/"},"wordCount":373,"publisher":{"@id":"https:\/\/wata.es\/#organization"},"image":{"@id":"https:\/\/wata.es\/component-testing-in-cypress\/#primaryimage"},"thumbnailUrl":"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Component-Testing-in-Cypress-scaled.jpg","articleSection":["News","Technology"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/wata.es\/component-testing-in-cypress\/","url":"https:\/\/wata.es\/component-testing-in-cypress\/","name":"Component Testing in Cypress - WATA Factory","isPartOf":{"@id":"https:\/\/wata.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wata.es\/component-testing-in-cypress\/#primaryimage"},"image":{"@id":"https:\/\/wata.es\/component-testing-in-cypress\/#primaryimage"},"thumbnailUrl":"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Component-Testing-in-Cypress-scaled.jpg","datePublished":"2025-05-12T07:00:00+00:00","dateModified":"2025-05-16T10:02:06+00:00","breadcrumb":{"@id":"https:\/\/wata.es\/component-testing-in-cypress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wata.es\/component-testing-in-cypress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wata.es\/component-testing-in-cypress\/#primaryimage","url":"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Component-Testing-in-Cypress-scaled.jpg","contentUrl":"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Component-Testing-in-Cypress-scaled.jpg","width":2560,"height":1440},{"@type":"BreadcrumbList","@id":"https:\/\/wata.es\/component-testing-in-cypress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wata.es\/"},{"@type":"ListItem","position":2,"name":"Component Testing in Cypress"}]},{"@type":"WebSite","@id":"https:\/\/wata.es\/#website","url":"https:\/\/wata.es\/","name":"WATA Factory","description":"IT Consulting &amp; Outsourcing for your company","publisher":{"@id":"https:\/\/wata.es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wata.es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wata.es\/#organization","name":"WATA Factory","url":"https:\/\/wata.es\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wata.es\/#\/schema\/logo\/image\/","url":"https:\/\/wata.es\/wp-content\/uploads\/2019\/12\/logowata.png","contentUrl":"https:\/\/wata.es\/wp-content\/uploads\/2019\/12\/logowata.png","width":688,"height":176,"caption":"WATA Factory"},"image":{"@id":"https:\/\/wata.es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/watafactory\/","https:\/\/x.com\/watafactory","https:\/\/www.linkedin.com\/company\/wata\/"]},{"@type":"Person","@id":"https:\/\/wata.es\/#\/schema\/person\/b7bb8d12a72d7338a364f734d3fbe534","name":"Paco Perez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wata.es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0b3e8a343c34c136c4bb32dc83a4e8546d171e356d53628a20221c5925fed8b1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0b3e8a343c34c136c4bb32dc83a4e8546d171e356d53628a20221c5925fed8b1?s=96&d=mm&r=g","caption":"Paco Perez"},"url":"https:\/\/wata.es\/author\/p-perezwata-es\/"}]}},"_links":{"self":[{"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/posts\/11560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/users\/44"}],"replies":[{"embeddable":true,"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/comments?post=11560"}],"version-history":[{"count":4,"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/posts\/11560\/revisions"}],"predecessor-version":[{"id":12275,"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/posts\/11560\/revisions\/12275"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/media\/11564"}],"wp:attachment":[{"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/media?parent=11560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/categories?post=11560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/tags?post=11560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}