--- title: "Code Coverage & Frontend Testing - Muhammad Rehan Saeed" description: "What is the correct level of code coverage for your project and what tools are best for quickly writing unit and integration tests for a frontend application." canonical_url: "https://rehansaeed.com/code-coverage-and-frontend-testing/" last_updated: "2021-05-10T11:23:00+00:00" meta: author: "Muhammad Rehan Saeed" keywords: "Unit Testing,Integration Testing,Code Coverage,Jest,Cypress" "og:description": "What is the correct level of code coverage for your project and what tools are best for quickly writing unit and integration tests for a frontend application." "og:image": "https://rehansaeed.com/_og/s/o_81e16e9617ec67f2.png" "og:image:alt": "Code Coverage & Frontend Testing - Muhammad Rehan Saeed" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "Code Coverage & Frontend Testing" "twitter:image": "https://rehansaeed.com/_og/s/o_81e16e9617ec67f2.png" "twitter:image:alt": "Code Coverage & Frontend Testing - Muhammad Rehan Saeed" --- > Index of every page on this site: [llms.txt](https://rehansaeed.com/llms.txt) # [Code Coverage & Frontend Testing](https://rehansaeed.com/code-coverage-and-frontend-testing/) Posted 10 May 2021 - **2 min read** ![Jest Cypress](https://rehansaeed.com/_ipx/f_png&s_2560x1440/images/hero/Jest-Cypress-1600x900.png) I was recently asked an interesting question about unit test code coverage and frontend testing by a colleague: > Policies describe 80% plus unit test coverage and our React devs are pushing back a lot, arguing there is little logic in React and it would be a wast of time. Rehan any advice/pointer for us on this? Code coverage in tests is always a controversial topic with developers in which I don't think there is a 'correct' answer. The answer you're going to get from most people is 'it depends' 🤷🏼. If you're developing a mars rover where one bad line of code could mean mission over or flight navigation software, go ahead and go for 100% code coverage, let alone 80%. The question is, how tolerant are you to the risk of a bug in the front end React code? If something doesn't work, how long will it take you to fix it and how much will that cost you versus the cost of writing extra tests? # Jest Specifically regarding frontend unit testing, my team has been using [Jest](https://jestjs.io/) which is an excellent unit testing framework built by Facebook which I highly recommend. Jest is special because it's a single NPM package with everything you need rolled into it, including an assertion library, mocking framework and code coverage tools. To reduce the burden of writing tests you can leverage snapshot testing. A snapshot test takes very few lines of code to write and generates a file containing the rendered HTML for a Vue/React/Angular/Web/Other component. My team writes at least one snapshot test for every component we write and it hasn't been too onerous for us. I just ran the code coverage tool built into Jest on one of our projects and it came to 78.7% coverage. It's worth mentioning that our projects are mostly very simple and don't contain much complex branching logic. Jest also allows you to set a code coverage limit which will fail a build if code coverage drops below a certain level set by you. Here is an example of configuring Jest that in your `package.json` file to do just that: ```json "jest": { "coverageThreshold": { "global": { "branches": 70, "functions": 70, "lines": 70, "statements": -10 } } } ``` # Cypress In addition, if you want a robust system, it's also worth setting up some integration or functional tests. I recommend a tool called [Cypress](https://www.cypress.io/) for this job. According to the testing pyramid you need fewer of these tests as compared to unit tests as they can be more brittle. ![Testing Pyramid showing UI, Service and Unit Tests in that order](https://rehansaeed.com/_ipx/f_png&s_2560x1280/content-images/posts/2021/code-coverage-and-frontend-testing/images/Test-Pyramid-800x400.png) I've found them very useful for making sure that you don't release something completely broken (happens more often in the wild than any dev would like you to think). In fact, I use Cypress for this very blog to verify every commit to make sure I don't accidentally break it. ## Web Mentions [What's this?](https://en.wikipedia.org/wiki/Webmention) ### 0 Linked ### 0 Replies ## GitHub Comments ### 2 Comments [Comment on GitHub](https://github.com/RehanSaeed/rehansaeed.github.io/issues/330) [![codeandcats](https://avatars.githubusercontent.com/u/6035934?v=4)](https://github.com/codeandcats "codeandcats") ### [codeandcats](https://github.com/codeandcats) 11 May 2021 (edited 11 May 2021) Good article. I just wanted to point out something for anyone reading who might have added coverage reporting to their jest tests and been surprised by a relatively high coverage amount: By default jest only checks the coverage of files that are imported (directly or indirectly) by the files under test. To check coverage of *all* your source files you must tell jest which paths to collect coverage from using [`collectCoverageFrom`](https://jestjs.io/docs/configuration#collectcoveragefrom-array). [![RehanSaeed](https://avatars.githubusercontent.com/u/2270364?v=4)](https://github.com/RehanSaeed "RehanSaeed") ### [RehanSaeed](https://github.com/RehanSaeed) Owner 12 May 2021 [@codeandcats](https://github.com/codeandcats) Good top tip! ```json {"@context":"https://schema.org","@graph":[{"@id":"https://rehansaeed.com/#website","@type":"WebSite","description":"Software Developer at Microsoft, YouTuber, Open Source Contributor and Blogger","inLanguage":"en-GB","name":"Muhammad Rehan Saeed","url":"https://rehansaeed.com/","author":{"@id":"https://rehansaeed.com/#identity"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://rehansaeed.com/?search={search_term_string}"},"query-input":"required name=search_term_string"}],"publisher":{"@id":"https://rehansaeed.com/#publisher"}},{"@id":"https://rehansaeed.com/code-coverage-and-frontend-testing/#webpage","@type":"WebPage","dateModified":"2021-05-10T11:23:00+00:00","datePublished":"2021-05-10T11:23:00+00:00","description":"What is the correct level of code coverage for your project and what tools are best for quickly writing unit and integration tests for a frontend application.","name":"Code Coverage & Frontend Testing","url":"https://rehansaeed.com/code-coverage-and-frontend-testing/","breadcrumb":{"@id":"https://rehansaeed.com/code-coverage-and-frontend-testing/#breadcrumb"},"isPartOf":{"@id":"https://rehansaeed.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://rehansaeed.com/code-coverage-and-frontend-testing/"]}]},{"@id":"https://rehansaeed.com/#identity","@type":"Person","name":"Muhammad Rehan Saeed","url":"https://rehansaeed.com/about/","image":{"@id":"https://rehansaeed.com/#/schema/image/1"},"sameAs":["https://github.com/RehanSaeed","https://www.linkedin.com/in/muhammad-rehan-saeed","https://stackoverflow.com/users/1212017/muhammad-rehan-saeed","https://www.youtube.com/c/MuhammadRehanSaeed","https://www.twitch.tv/rehansaeeduk"]},{"@id":"https://rehansaeed.com/#publisher","@type":"Organization","logo":"https://rehansaeed.com/images/schema/Publisher-600x60.png","name":"Muhammad Rehan Saeed","url":"https://rehansaeed.com"},{"@id":"https://rehansaeed.com/code-coverage-and-frontend-testing/#article","@type":"Article","dateModified":"2021-05-10T11:23:00+00:00","datePublished":"2021-05-10T11:23:00+00:00","description":"What is the correct level of code coverage for your project and what tools are best for quickly writing unit and integration tests for a frontend application.","headline":"Code Coverage & Frontend Testing","inLanguage":"en-GB","url":"https://rehansaeed.com/code-coverage-and-frontend-testing/","author":{"@id":"https://rehansaeed.com/#identity"},"image":[{"@type":"ImageObject","url":"https://rehansaeed.com/images/hero/Jest-Cypress-1600x900.png","caption":"Jest Cypress","width":"1600","height":"900"}],"isPartOf":{"@id":"https://rehansaeed.com/code-coverage-and-frontend-testing/#webpage"},"keywords":["Unit Testing","Integration Testing","Code Coverage","Jest","Cypress"],"mainEntityOfPage":{"@id":"https://rehansaeed.com/code-coverage-and-frontend-testing/#webpage"},"publisher":{"@id":"https://rehansaeed.com/#publisher"}},{"@id":"https://rehansaeed.com/code-coverage-and-frontend-testing/#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Blog","item":"https://rehansaeed.com/","position":1},{"@type":"ListItem","name":"Code Coverage & Frontend Testing","item":"https://rehansaeed.com/code-coverage-and-frontend-testing/","position":2}]},{"@id":"https://rehansaeed.com/#/schema/image/1","@type":"ImageObject","contentUrl":"https://rehansaeed.com/images/author/Muhammad-Rehan-Saeed/Logo-512x512.png","inLanguage":"en-GB","url":"https://rehansaeed.com/images/author/Muhammad-Rehan-Saeed/Logo-512x512.png"}]} ``` ## Sitemap See the full [sitemap](https://rehansaeed.com/sitemap.md) for all pages.