[Tutorial] Part 2 — How to integrate CircleCI & Codecov into your project

[Card Banner][Card Banner][Card Banner]

Codecov is a tool that allows us to check the code coverage. Code coverage is a measurement used to express which a test suite executed lines of code. The code coverage is calculated using three conditionals:

Hit 🎯 — indicates that the test suite executed the source code.
Partial 🌦 — indicates that the test suite did not fully execute the source code.
Miss 🤷 — indicates that the test suite did not execute the source code.

To calculate, we have to apply this formula: Coverage ratio = Hits / (Hit + Partial + Miss)

For example, a codebase that has 5 lines executed by tests out of 12 total lines will receive a coverage ratio of 41% (rounding down).

What does Codecov bring to the table?

Codecov has a focus on integration and promoting healthy pull requests. It delivers coverage metrics directly into the modern workflow to promote more code coverage.

How can we connect CircleCI with Codecov?

Before connecting to CircleCI we have to configure Codecov in our GitHub project. The first step is to visit the CodeCov website and sign up with GitHub. Then connect to the desired repository and save the given token:

After that we need to install Codecov in the project with:

npm install -g codecov

And add this to the package.json file:

"jest": { &nbsp; "coverageDirectory": "./coverage/", &nbsp;"collectCoverage": true }‍The last step is running “npm test && codecov” which will create the coverage folder. Now we are ready to connect Codecov with CircleCI, and what do we need?<ul><li>Create a .codecov.yml ⚙️</li><li>Use the codecov orb on the CircleCI config 🔮</li></ul>So now, we create a .codecov.yml file on the root folder and add these lines:-- CODE language-yml line-numbers -- codecov:   &nbsp;require_ci_to_pass: yes coverage:   &nbsp;precision: 2   &nbsp;round: down   &nbsp;range: "70...100" status:     &nbsp;project: yes     &nbsp;patch: yes    &nbsp; changes: no parsers:  &nbsp; gcov:    &nbsp; &nbsp; branch_detection:      &nbsp; &nbsp; &nbsp; conditional: yes       &nbsp; &nbsp; &nbsp;loop: yes      &nbsp; &nbsp; &nbsp; method: no      &nbsp; &nbsp; &nbsp; macro: no comment:   &nbsp;layout: "reach,diff,flags,tree"   &nbsp;behavior: default &nbsp;  require_changes: no ‍With the file created there is only a step until all is configured and that is to use the Codecov orb on the CircleCI config. But what is an orb?<h3 id="">CircleCI Orbs</h3>CircleCI orbs are shareable packages of configuration which will make everything easy to use and configure. Now that we’ve learned what orbs are, let’s add it to the project!The first step is to update the CircleCI config file version to 2.1 and add the orbs we want bellow:-- CODE language-yml line-numbers -- version: 2.1 orbs: &nbsp; codecov: codecov/codecov@1.0.2 ‍Then, we need to insert the command “upload” from the orb and provide the file of the report and the token that Codecov generated our test job.-- CODE language-yml line-numbers -- Run-With-Node:   &nbsp; docker:    &nbsp;&nbsp;  - image: circleci/node:10-browsers   &nbsp; steps:    &nbsp;&nbsp;  - checkout     &nbsp;&nbsp; - run:      &nbsp;&nbsp;&nbsp;    name: install and run tests      &nbsp;&nbsp;&nbsp;    command: |      &nbsp;&nbsp;&nbsp;&nbsp;      yarn install && yarn test     &nbsp;&nbsp;&nbsp; - codecov/upload:      &nbsp;&nbsp;&nbsp;&nbsp;    file: './coverage/clover.xml'       &nbsp;&nbsp;&nbsp;&nbsp;   token: a7a5df63-codcov-token-4278vh38 ‍I know I said that this was the final step, but actually, there is one more 🙄<h3 id="">Certified vs. 3rd-Party Orb</h3>CircleCI has available some individual orbs that have been tested and certified to work with the platform while all other orbs are considered 3rd-party orbs.These 3rd-party orbs need an extra step and as you have already guessed Codecov orb is a 3rd-Party Orb.What should we do?‍The solution is simple: we just need to go to the security projects of our account or team and “Allow uncertified orbs”.<figure id="" class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center"><div id=""><img src="https://cdn.prod.website-files.com/5f3fdb4ac2968afe2a89c98b/66d85dd22c3af740137072f2_5f4d21a1b084bb8670adeba9_1_X4Dc4nqp4Nz1GaUBM_BsLw.png" loading="lazy" width="auto" height="auto" alt="" id=""></div></figure>Codecov orb is set! 🥳Now it is time to a new status check on the branch protection and add a friendly report bot. We add the status check by accessing again to the projects settings as we did before and add the new tick.<figure id="" class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center"><div id=""><img src="https://cdn.prod.website-files.com/5f3fdb4ac2968afe2a89c98b/66d85dd22c3af74013707303_5f4d21b75cf2fb31cd7a604e_1_gLMQ5i9M4A7IDNvRD5eNNw.png" loading="lazy" width="auto" height="auto" alt="" id=""></div></figure>To add the friendly report bot, we need to access the <a href="https://github.com/apps/codecov" target="_blank" id="">Codecov app page</a> and press the configure button.<figure id="" class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center"><div id=""><img src="https://cdn.prod.website-files.com/5f3fdb4ac2968afe2a89c98b/66d85dd22c3af740137072fa_5f4d21cc363f1e4c8ac915b4_1_kMaKKFIhDQsE02mweod9Hg.png" loading="lazy" width="auto" height="auto" alt="" id=""></div></figure>Then select the account and install the Codecov bot.<figure id="" class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center"><div id=""><img src="https://cdn.prod.website-files.com/5f3fdb4ac2968afe2a89c98b/66d85dd12c3af740137072e7_5f4d21dca076982c4cd606d3_1__HKBoNcp4U8XppSMhYH7ww.png" loading="lazy" width="auto" height="auto" alt="" id=""></div></figure><figure id="" class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center"><div id=""><img src="https://cdn.prod.website-files.com/5f3fdb4ac2968afe2a89c98b/5f4d201d363f1e2849c911ed_1*SWpLYbT081xw8iFZvKnobg.png" loading="lazy" width="auto" height="auto" alt="" id=""></div></figure>The robot is activated! 🚀 These are some reports that the robot will make:<figure id="" class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center"><div id=""><img src="https://cdn.prod.website-files.com/5f3fdb4ac2968afe2a89c98b/66d85dd22c3af740137072fd_5f4d221697521e000ee199bf_1_LSTVEUku1PpSyN5b0qc4Sg.png" loading="lazy" width="auto" height="auto" alt="" id=""></div></figure><figure id="" class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center"><div id=""><img src="https://cdn.prod.website-files.com/5f3fdb4ac2968afe2a89c98b/66d85dd22c3af74013707309_5f4d2226f87cc462e29b5e83_1_pvyAaoSRbjYoX6AqxTXumw.png" loading="lazy" width="auto" height="auto" alt="" id=""></div></figure><figure id="" class="w-richtext-figure-type-image w-richtext-align-center" data-rt-type="image" data-rt-align="center"><div id=""><img src="https://cdn.prod.website-files.com/5f3fdb4ac2968afe2a89c98b/66d85dd22c3af740137072f7_5f4d223ab9c0042755846d76_1_kQeST256aAF0KBWK-MNuPg.png" loading="lazy" width="auto" height="auto" alt="" id=""></div></figure>All is done! Now you have CircleCI and CodeCov in your project. 🎉 🥳The final version of the code can be accessed <a href="https://github.com/PedroFonseca17/cirecleci-codecov-blogpost" target="_blank" id="">here</a>. Feel free to clone it and use it in your projects, just don’t forget to replace the codecov upload token with yours!

What does Codecov bring to the table?

How can we connect CircleCI with Codecov?

Related Insights

Building secure, high-performing, and user-friendly API Endpoints

[Tutorial] Part 1 — How to integrate CircleCI & Codecov into your project

What are the real benefits and risks of vibe coding?