{"id":13592,"date":"2022-11-30T19:23:41","date_gmt":"2022-11-30T13:53:41","guid":{"rendered":"https:\/\/blogrevamp.cashfree.com\/?p=13592"},"modified":"2023-01-27T12:05:02","modified_gmt":"2023-01-27T06:35:02","slug":"how-we-unit-test-our-front-end-code-to-improve-code-quality","status":"publish","type":"post","link":"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/","title":{"rendered":"How we Unit Test our Front End Code to Improve the Code Quality"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a8f5d2e43a2c\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #364250;color:#364250\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #364250;color:#364250\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a8f5d2e43a2c\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#Introduction\" >Introduction<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#React_Testing_Library\" >React Testing Library<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#JEST\" >JEST<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#The_importance_of_Unit_Testing_for_Front_End_Developers\" >The importance of Unit Testing for Front End Developers<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#The_Three_As_of_Unit_Testing\" >The Three A&#8217;s of Unit Testing<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#Testing_Approaches\" >Testing Approaches<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#Testing_Utility_Functions\" >Testing Utility Functions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#Testing_Components\" >Testing Components<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#Shallow_Renderer\" >Shallow Renderer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#Snapshot_Testing\" >Snapshot Testing<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#DOM_Testing\" >DOM Testing<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#Mocking_with_Jest\" >Mocking with Jest<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#Ways_to_Mock\" >Ways to Mock<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#How_Unit_Testing_helps_us_to_improve_Code_Quality\" >How Unit Testing helps us to improve Code Quality.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n\n<h2 class=\"wp-block-heading\" id=\"h-introduction\"><span class=\"ez-toc-section\" id=\"Introduction\"><\/span><strong>Introduction<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The frontend team at Cashfree Payments works on some incredible projects while balancing the evolving needs of our users. We use React for frontend development and various tools for Unit Tests. Unit Testing ensures that there are no complications or issues when releasing new code to production. This blog post describes the tools and methods that we put to use.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In Javascript, a unit is a function; a function can be any small chunk of utility code or a component. The main objective of unit testing is to isolate written code to test and determine if it works as intended. Also, unit testing fixes bugs in the very early stages of development, ensuring that very few bugs occur in subsequent stages of testing.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-react-testing-library\"><span class=\"ez-toc-section\" id=\"React_Testing_Library\"><\/span>React Testing Library<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">React Testing Library (RTL) is a library used to test the DOM tree which React renders on the web. The main motive of this library is to write refactorable code (test cases) without relying on implementation details. Jest and other testing tools eventually tested the component&#8217;s internal behavior. RTL is a DOM testing library mostly used to test DOM elements and how they behave on the web. It is used to test from an end-user point of view.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-jest\"><span class=\"ez-toc-section\" id=\"JEST\"><\/span>JEST<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Jest is a Javascript testing framework that developers use to test the JS code which is written in React. It is used to build isolated test cases, snapshots, mock functionalities, etc.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_importance_of_Unit_Testing_for_Front_End_Developers\"><\/span><strong>The importance of Unit Testing for Front End Developers<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Unit testing is essential for any front end application, testing your components and features against how you expect them to behave in production, resulting in a stable codebase and a reliable app for your customers. Also, there are added advantages like &#8211;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Unit Tests act as documentation and give a better understanding of the code.<\/li>\n\n\n\n<li>Improves code quality.<\/li>\n\n\n\n<li>It gives you confidence in the code you have written and to do major refactors.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_Three_As_of_Unit_Testing\"><\/span><strong>The Three A&#8217;s of Unit Testing<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Unit test cases are typically written using the standard three-step format of Arrange, Act, and Assert.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Arrange:<\/strong> Defining the variables, objects, and mock functions, as appropriate.<br><strong>Act: <\/strong>The functionality you wish to test.<br><strong>Assert: <\/strong>Verify your code works the way you want it to<strong>.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Note: The order of Arrange, Act, and Assert statements should be followed strictly in writing Unit Tests.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"770\" height=\"481\" data-attachment-id=\"13595\" data-permalink=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/cashfree-payments-unit-tests-1\/\" data-orig-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-1.png?fit=1727%2C1080&amp;ssl=1\" data-orig-size=\"1727,1080\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Cashfree-Payments-Unit-Tests-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-1.png?fit=770%2C481&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-1.png?resize=770%2C481&#038;ssl=1\" alt=\"\" class=\"wp-image-13595\" srcset=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-1.png?resize=1024%2C640&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-1.png?resize=300%2C188&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-1.png?resize=768%2C480&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-1.png?resize=1536%2C961&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-1.png?w=1727&amp;ssl=1 1727w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Testing_Approaches\"><\/span><strong>Testing Approaches<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Testing Utility Functions<\/li>\n\n\n\n<li>Testing Components<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Testing_Utility_Functions\"><\/span>Testing Utility Functions<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">It will test the behavior of a utility or helper function. Let\u2019s understand it with the help of an example.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"770\" height=\"481\" data-attachment-id=\"13598\" data-permalink=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/cashfree-payments-unit-tests-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-2.png?fit=1727%2C1080&amp;ssl=1\" data-orig-size=\"1727,1080\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Cashfree-Payments-Unit-Tests-2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-2.png?fit=770%2C481&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-2.png?resize=770%2C481&#038;ssl=1\" alt=\"\" class=\"wp-image-13598\" srcset=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-2.png?resize=1024%2C640&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-2.png?resize=300%2C188&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-2.png?resize=768%2C480&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-2.png?resize=1536%2C961&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-2.png?w=1727&amp;ssl=1 1727w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The above helper function will convert an object into an array.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So we will test its functionality accordingly.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"770\" height=\"481\" data-attachment-id=\"13601\" data-permalink=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/cashfree-payments-unit-tests-3\/\" data-orig-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-3.png?fit=1727%2C1080&amp;ssl=1\" data-orig-size=\"1727,1080\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Cashfree-Payments-Unit-Tests-3\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-3.png?fit=770%2C481&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-3.png?resize=770%2C481&#038;ssl=1\" alt=\"\" class=\"wp-image-13601\" srcset=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-3.png?resize=1024%2C640&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-3.png?resize=300%2C188&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-3.png?resize=768%2C480&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-3.png?resize=1536%2C961&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-3.png?w=1727&amp;ssl=1 1727w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><em>To improve the quality of our unit tests, our team follows these best practices when writing them:<\/em><\/strong>&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>When you are writing test cases, you should make sure that you are taking into consideration all of the different possible scenarios. Don&#8217;t just try taking the easy way out<\/li>\n\n\n\n<li>Be sure to give the test case an accurate name and description<\/li>\n\n\n\n<li>When writing the unit tests, make sure to check for false positives and negative cases as well<\/li>\n\n\n\n<li>Each test should concentrate on a single use case and confirm that the output is as expected for the corresponding piece of code<\/li>\n\n\n\n<li>Mock the dependencies<\/li>\n\n\n\n<li>Strive for the maximum possible test coverage<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Testing_Components\"><\/span>Testing Components<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In this example, we will see how to test a React Component, its behavior, and so on. There are various ways to test React Components some are listed with examples here:-<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Shallow Renderer Testing<\/li>\n\n\n\n<li>Snapshot Testing<\/li>\n\n\n\n<li>DOM Testing<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Shallow_Renderer\"><\/span>Shallow Renderer<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Shallow rendering simplifies React unit testing. Shallow rendering lets you render a component &#8220;one level deep&#8221; and assert facts about its render method return without worrying about child components, which are not instantiated or rendered.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"481\" data-attachment-id=\"13605\" data-permalink=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/cashfree-payments-unit-tests-4\/\" data-orig-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-4.png?fit=1727%2C1080&amp;ssl=1\" data-orig-size=\"1727,1080\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Cashfree-Payments-Unit-Tests-4\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-4.png?fit=770%2C481&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-4.png?resize=770%2C481&#038;ssl=1\" alt=\"\" class=\"wp-image-13605\" srcset=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-4.png?resize=1024%2C640&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-4.png?resize=300%2C188&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-4.png?resize=768%2C480&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-4.png?resize=1536%2C961&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-4.png?w=1727&amp;ssl=1 1727w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If your component accepts props (for example, functions), you can pass the Mock Function jest.fn() provided by Jest.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"481\" data-attachment-id=\"13608\" data-permalink=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/cashfree-payments-unit-tests-5\/\" data-orig-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-5.png?fit=1727%2C1080&amp;ssl=1\" data-orig-size=\"1727,1080\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Cashfree-Payments-Unit-Tests-5\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-5.png?fit=770%2C481&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-5.png?resize=770%2C481&#038;ssl=1\" alt=\"\" class=\"wp-image-13608\" srcset=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-5.png?resize=1024%2C640&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-5.png?resize=300%2C188&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-5.png?resize=768%2C480&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-5.png?resize=1536%2C961&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-5.png?w=1727&amp;ssl=1 1727w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Snapshot_Testing\"><\/span>Snapshot Testing<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Snapshot tests can help you avoid unexpected UI changes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Snapshot test cases render a UI component, take a snapshot, and compare it to a reference snapshot file stored with the test. If the snapshots do not match, either the change was unexpected or the reference snapshot needs to be updated to the new UI component.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>_snapshots_<\/em> folder will be created along with snapshot files while writing snapshot tests.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"481\" data-attachment-id=\"13611\" data-permalink=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/cashfree-payments-unit-tests-6\/\" data-orig-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-6.png?fit=1727%2C1080&amp;ssl=1\" data-orig-size=\"1727,1080\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Cashfree-Payments-Unit-Tests-6\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-6.png?fit=770%2C481&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-6.png?resize=770%2C481&#038;ssl=1\" alt=\"\" class=\"wp-image-13611\" srcset=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-6.png?resize=1024%2C640&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-6.png?resize=300%2C188&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-6.png?resize=768%2C480&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-6.png?resize=1536%2C961&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-6.png?w=1727&amp;ssl=1 1727w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>When to use Snapshot testing?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Snapshot testing is acceptable when your component has only one function or you want to ensure that your component is rendering, but it is not a replacement for a utility or component testing, which verifies that an application\/portion of code is working properly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"DOM_Testing\"><\/span>DOM Testing<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You&#8217;ll need to use DOM testing when you want to assert or manipulate the rendered component. For example, fire a click event and match text from a specific HTML tag or CSS style.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Example:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s see how we have added DOM test cases for an Accordion component. In the Accordion component, we have three accordion items, and they are all closed by default. When we click on one of the closed accordions, it will open and show us more information.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, let&#8217;s look at how we can use DOM testing in this example.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"481\" data-attachment-id=\"13615\" data-permalink=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/7_a_ut\/\" data-orig-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/7_A_UT.png?fit=1727%2C1080&amp;ssl=1\" data-orig-size=\"1727,1080\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"7_A_UT\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/7_A_UT.png?fit=770%2C481&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/7_A_UT.png?resize=770%2C481&#038;ssl=1\" alt=\"\" class=\"wp-image-13615\" srcset=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/7_A_UT.png?resize=1024%2C640&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/7_A_UT.png?resize=300%2C188&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/7_A_UT.png?resize=768%2C480&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/7_A_UT.png?resize=1536%2C961&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/7_A_UT.png?w=1727&amp;ssl=1 1727w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><figcaption class=\"wp-element-caption\"><strong><em>Closed Accordion<\/em><\/strong><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"481\" data-attachment-id=\"13618\" data-permalink=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/7_b_ut\/\" data-orig-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/7_B_UT.png?fit=1727%2C1080&amp;ssl=1\" data-orig-size=\"1727,1080\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"7_B_UT\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/7_B_UT.png?fit=770%2C481&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/7_B_UT.png?resize=770%2C481&#038;ssl=1\" alt=\"\" class=\"wp-image-13618\" srcset=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/7_B_UT.png?resize=1024%2C640&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/7_B_UT.png?resize=300%2C188&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/7_B_UT.png?resize=768%2C480&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/7_B_UT.png?resize=1536%2C961&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/7_B_UT.png?w=1727&amp;ssl=1 1727w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><figcaption class=\"wp-element-caption\"><strong><em>Opened Accordion<\/em><\/strong><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"481\" data-attachment-id=\"13620\" data-permalink=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/cashfree-payments-unit-tests-8\/\" data-orig-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-8.png?fit=1727%2C1080&amp;ssl=1\" data-orig-size=\"1727,1080\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Cashfree-Payments-Unit-Tests-8\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-8.png?fit=770%2C481&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-8.png?resize=770%2C481&#038;ssl=1\" alt=\"\" class=\"wp-image-13620\" srcset=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-8.png?resize=1024%2C640&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-8.png?resize=300%2C188&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-8.png?resize=768%2C480&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-8.png?resize=1536%2C961&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-8.png?w=1727&amp;ssl=1 1727w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In the above example, we have used Styled Component and Theme, so we will wrap our component with ThemeProvider.<\/li>\n\n\n\n<li>After that, we will click on the element by accessing its text using screen.getByText which is used to query inside the document.body <em>(ref\u200a\u2014\u200a<\/em><strong><em>Closed Accordion<\/em><\/strong><em> Image)<\/em><\/li>\n\n\n\n<li>In Assert, we will verify whether it is a match or not. (<em>ref- <\/em><strong><em>Opened Accordion <\/em><\/strong><em>Image)<\/em><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Similarly, we can test for CSS styles using \u201c<\/strong><strong><em>toHaveStyle()\u201d<\/em><\/strong><strong>&nbsp;<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>We are testing for background color, as we have alternate #FFFFFF and #FAFAFA colors.&nbsp;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"481\" data-attachment-id=\"13624\" data-permalink=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/cashfree-payments-unit-tests-9\/\" data-orig-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-9.png?fit=1727%2C1080&amp;ssl=1\" data-orig-size=\"1727,1080\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Cashfree-Payments-Unit-Tests-9\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-9.png?fit=770%2C481&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-9.png?resize=770%2C481&#038;ssl=1\" alt=\"\" class=\"wp-image-13624\" srcset=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-9.png?resize=1024%2C640&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-9.png?resize=300%2C188&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-9.png?resize=768%2C480&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-9.png?resize=1536%2C961&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-9.png?w=1727&amp;ssl=1 1727w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"481\" data-attachment-id=\"13626\" data-permalink=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/cashfree-payments-unit-tests-10\/\" data-orig-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-10.png?fit=1727%2C1080&amp;ssl=1\" data-orig-size=\"1727,1080\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Cashfree-Payments-Unit-Tests-10\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-10.png?fit=770%2C481&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-10.png?resize=770%2C481&#038;ssl=1\" alt=\"\" class=\"wp-image-13626\" srcset=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-10.png?resize=1024%2C640&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-10.png?resize=300%2C188&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-10.png?resize=768%2C480&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-10.png?resize=1536%2C961&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-10.png?w=1727&amp;ssl=1 1727w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Mocking_with_Jest\"><\/span><strong>Mocking with Jest<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Mocking is a technique that replaces the dependencies with an object you can control.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Ways_to_Mock\"><\/span>Ways to Mock<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>jest.fn()<\/strong>\u200a\u2014\u200amock a single function.<\/li>\n\n\n\n<li><strong>jest.mock()<\/strong>\u200a\u2014\u200amock a module.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>jest.spyOn()<\/strong>\u200a\u2014\u200acaptures information about function calls.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"481\" data-attachment-id=\"13631\" data-permalink=\"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/cashfree-payments-unit-tests-11\/\" data-orig-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-11.png?fit=1727%2C1080&amp;ssl=1\" data-orig-size=\"1727,1080\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Cashfree-Payments-Unit-Tests-11\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-11.png?fit=770%2C481&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-11.png?resize=770%2C481&#038;ssl=1\" alt=\"\" class=\"wp-image-13631\" srcset=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-11.png?resize=1024%2C640&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-11.png?resize=300%2C188&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-11.png?resize=768%2C480&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-11.png?resize=1536%2C961&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Tests-11.png?w=1727&amp;ssl=1 1727w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>We are importing all the services which we have defined in the authentication.<\/li>\n\n\n\n<li>Using \u2018<em>jest.spyOn()\u2019<\/em> we are mocking our <em>\u2018sendDetails\u2019 <\/em>API<strong> <\/strong>and overwriting<strong> <\/strong>our response.<\/li>\n\n\n\n<li>In the describe block, we are expecting our modified \u2018<em>sendDetails\u2019 <\/em>and passing params.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_Unit_Testing_helps_us_to_improve_Code_Quality\"><\/span><strong>How Unit Testing helps us to improve Code Quality.<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">At Cashfree Payments, one of the places where unit testing comes to the rescue is to keep the functionality intact in an internal library project where multiple teams would contribute and consume. Each PR would have unit tests added to ensure the newly added functionalities work as expected and existing ones are not failing.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><strong>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Frontend Team at Cashfree Payments adheres to the best practices and methods for unit testing React\/JavaScript code outlined above. It helped us gain confidence in the code and ensure that the releases went smoothly. When multiple developers are working on the same codebase, unit testing is essential to ensure that both new and old code works as expected.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Did this post intrigue you? If so, get in touch with us! We have some exciting opportunities in store for excellent engineers just like you!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.cashfree.com\/careers?utm_source=blog&amp;utm_medium=organic&amp;utm_campaign=improve-code-quality-blog\/\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"172\" data-attachment-id=\"13055\" data-permalink=\"https:\/\/blogrevamp.cashfree.com\/reporting-systems-to-ensure-enhanced-customer-satisfaction\/tech-blog\/\" data-orig-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/10\/Tech-Blog.png?fit=1600%2C358&amp;ssl=1\" data-orig-size=\"1600,358\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Tech Jobs at Cashfree Payments\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/10\/Tech-Blog.png?fit=770%2C172&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/10\/Tech-Blog.png?resize=770%2C172&#038;ssl=1\" alt=\"Jobs at Cashfree Payments\" class=\"wp-image-13055\" srcset=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/10\/Tech-Blog.png?resize=1024%2C229&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/10\/Tech-Blog.png?resize=300%2C67&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/10\/Tech-Blog.png?resize=768%2C172&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/10\/Tech-Blog.png?resize=1536%2C344&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/10\/Tech-Blog.png?w=1600&amp;ssl=1 1600w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Introduction The frontend team at Cashfree Payments works on some incredible projects while balancing the evolving needs of our users. We use React for frontend development and various tools for Unit Tests. Unit Testing ensures that there are no complications or issues when releasing new code to production. This blog post describes the tools and<\/p>\n","protected":false},"author":66,"featured_media":13637,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"_themeisle_gutenberg_block_has_review":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_wpcom_ai_launchpad_first_post":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1,1497],"tags":[],"class_list":["post-13592","post","type-post","status-publish","format-standard","has-post-thumbnail","category-all","category-engineering"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How we Unit Test our Front End Code to Improve the Code Quality<\/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:\/\/www.cashfree.com\/blog\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How we Unit Test our Front End Code to Improve the Code Quality\" \/>\n<meta property=\"og:description\" content=\"Introduction The frontend team at Cashfree Payments works on some incredible projects while balancing the evolving needs of our users. We use React for frontend development and various tools for Unit Tests. Unit Testing ensures that there are no complications or issues when releasing new code to production. This blog post describes the tools and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cashfree.com\/blog\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/\" \/>\n<meta property=\"og:site_name\" content=\"Cashfree Payments Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-30T13:53:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-27T06:35:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Test-Frondend.png?fit=1203%2C800&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1203\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Rohan Gore\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rohan Gore\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How we Unit Test our Front End Code to Improve the Code Quality","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:\/\/www.cashfree.com\/blog\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/","og_locale":"en_US","og_type":"article","og_title":"How we Unit Test our Front End Code to Improve the Code Quality","og_description":"Introduction The frontend team at Cashfree Payments works on some incredible projects while balancing the evolving needs of our users. We use React for frontend development and various tools for Unit Tests. Unit Testing ensures that there are no complications or issues when releasing new code to production. This blog post describes the tools and","og_url":"https:\/\/www.cashfree.com\/blog\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/","og_site_name":"Cashfree Payments Blog","article_published_time":"2022-11-30T13:53:41+00:00","article_modified_time":"2023-01-27T06:35:02+00:00","og_image":[{"width":1203,"height":800,"url":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Test-Frondend.png?fit=1203%2C800&ssl=1","type":"image\/png"}],"author":"Rohan Gore","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Rohan Gore","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cashfree.com\/blog\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#article","isPartOf":{"@id":"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/"},"author":{"name":"Rohan Gore","@id":"https:\/\/blogrevamp.cashfree.com\/#\/schema\/person\/c7fa0af6abe44744777b973ddbeb7c70"},"headline":"How we Unit Test our Front End Code to Improve the Code Quality","datePublished":"2022-11-30T13:53:41+00:00","dateModified":"2023-01-27T06:35:02+00:00","mainEntityOfPage":{"@id":"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/"},"wordCount":1193,"commentCount":0,"image":{"@id":"https:\/\/www.cashfree.com\/blog\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Test-Frondend.png?fit=1203%2C800&ssl=1","articleSection":["All","Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.cashfree.com\/blog\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/blogrevamp.cashfree.com\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/","url":"https:\/\/www.cashfree.com\/blog\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/","name":"How we Unit Test our Front End Code to Improve the Code Quality","isPartOf":{"@id":"https:\/\/blogrevamp.cashfree.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cashfree.com\/blog\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#primaryimage"},"image":{"@id":"https:\/\/www.cashfree.com\/blog\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Test-Frondend.png?fit=1203%2C800&ssl=1","datePublished":"2022-11-30T13:53:41+00:00","dateModified":"2023-01-27T06:35:02+00:00","author":{"@id":"https:\/\/blogrevamp.cashfree.com\/#\/schema\/person\/c7fa0af6abe44744777b973ddbeb7c70"},"breadcrumb":{"@id":"https:\/\/www.cashfree.com\/blog\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cashfree.com\/blog\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.cashfree.com\/blog\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#primaryimage","url":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Test-Frondend.png?fit=1203%2C800&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Test-Frondend.png?fit=1203%2C800&ssl=1","width":1203,"height":800,"caption":"Cashfree Payments Unit Test Front End"},{"@type":"BreadcrumbList","@id":"https:\/\/www.cashfree.com\/blog\/how-we-unit-test-our-front-end-code-to-improve-code-quality\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogrevamp.cashfree.com\/"},{"@type":"ListItem","position":2,"name":"Engineering","item":"https:\/\/blogrevamp.cashfree.com\/category\/engineering\/"},{"@type":"ListItem","position":3,"name":"How we Unit Test our Front End Code to Improve the Code Quality"}]},{"@type":"WebSite","@id":"https:\/\/blogrevamp.cashfree.com\/#website","url":"https:\/\/blogrevamp.cashfree.com\/","name":"Cashfree Payments Blog","description":"Cashfree Payments- Payment Gateway for India","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogrevamp.cashfree.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blogrevamp.cashfree.com\/#\/schema\/person\/c7fa0af6abe44744777b973ddbeb7c70","name":"Rohan Gore","url":"https:\/\/blogrevamp.cashfree.com\/author\/rohan-gore\/"}]}},"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9MjXo-3xe","jetpack_likes_enabled":false,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/11\/Cashfree-Payments-Unit-Test-Frondend.png?fit=1203%2C800&ssl=1","_links":{"self":[{"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/posts\/13592","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/users\/66"}],"replies":[{"embeddable":true,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/comments?post=13592"}],"version-history":[{"count":22,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/posts\/13592\/revisions"}],"predecessor-version":[{"id":13647,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/posts\/13592\/revisions\/13647"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/media\/13637"}],"wp:attachment":[{"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/media?parent=13592"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/categories?post=13592"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/tags?post=13592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}