How to debug jest unit test errors without pulling your hairs out!

We built CitySpire as a labspt-17 cohort at Lambda School, an interactive platform that is a one-stop resource for users to receive the most accurate city information.

I was part of a 4-person Data Science, 2-person Frontend, 1-person Backend, 1-person iOS, and 1-person Design Lead teams that was tasked with building the backend architecture and updating our UI more welcoming to our users.

As my teammates (Frontend Devs) were building new features from a brown-field project, they were getting a lot of test errors on Github's PR before merging their feature branches to the main branch so I jumped in to help. Oh, boy, was I on a journey!

The previous Labs team decided to use React as the best choice for the UI and they decided to use @craco/craco. I'm guessing because historically Webpack is hard to use and the documentation is long, there are endless possibilities and you have to deal with a lot of community packages to end up with the optimal configuration for your project. Add React to the mix and the complexity increases 10x.

Debugging test errors are not my forte, so I had a lot of anxiety going into the experience. But I persevered with the encouragements from my TPLs, CTO, and awesome teammates at Lambda School.

What is wrong with Webpack?

When you are the only one building the configuration for your new web app, you will use Webpack. You might think that it's not that bad after all. But when you need to update your Webpack config 5 months later, you will have to start over and read all the documentation again.

React's Solution:

You can use CRA to abstract all this complexity. In a few minutes, you will have a working, almost blank, React project with development, production and test scripts.

But there are limitations!

React enforces a zero customization policy. Here's a list of major pieces that you can't customize:

• Babel
• Webpack aliases and plugins
• Webpack dev server
• PostCSS
• ESLint

This is not good for a real life project with a large team since you can't tell a team member they can't update a library.

There was another solution called react-app-rewired but the author decided not to update the package so Patrick Lafrance decided to build CRACO.

What's so cool about Craco?

CRACO stands for Create React App Configuration Override. It's a "hacky" layer on top of Create React App (CRA) to customize its configuration.

This is achieved by overriding the cache of the require calls made by CRA to replace the exported content with the customized configuration.

create-react-app + @craco/craco = awesome

How to make your users feel welcome to your website

I wanted our logo and color to match the PM's specifications. I was able to easily upload the PM's landing page image to Canva and get the RGB code.

1. Login to Canva.
2. Upload PM's image.
3. Right click on the UI to inspect.
4. Copy and paste: background-color: rgb(171, 132, 165)
5. Add it to the SearchForm.js file and import styles from Ant Design library.

Debugging memory leak in Github Jest suite

While updating the styles of component on the landing page and other lines of code (see below), I encountered the below test error.

Debugging Process:

I explained the problem and current debugging approaches to the team and CTO and showed how I've been investigating memory issues:

1) I created a merge request to update styles of our landing page for the users to feel welcome.

2) Github's message on my PR: "All checks have failed"

3) Clicked on "Details" button

4) "Test and publish test coverage" said I was having a memory leakage and indicated which file was having the issue.

5) I thought maybe increasing the size of the node might help but it didn't. When I ran it locally, it also ran out of memory. It didn't seem any CI specific issue.

6) I had started the Jest test locally, and they had memory leak issue also.

7) Following an article, I attached Chrome Memory tool (Debugging Utils) to jest. I took 1 memory snapshot and compared against my local machine (VS Code). The issue didn't seem related to the merge request that I made.

8) I ran all of the tests in sequence, which helps with detecting the memory leaks. It said that Jest is taking more memory over time.

9) I decided to delete the test file that was causing the memory leakage. Since we are using a source control (Github), it would be easy to revert back if that was not causing the problem.

10) I started on the fix and the problem was solved. I merged my feature branch's PR to the main branch and my teammates were able to do git pull and fix their memory leakage issue also.

Sample code

Updated RenderPinnedCity.js file from 'item' to 'data' to make the code more relevant to our project. 'item' belongs to another project called "Merchant Marketplace".

const RenderPinnedCities = ({ savedCities, handleRemoveCity }) => {
return (
<>
{savedCities.map(data => (
<div key={${data.city.city}-${data.city.state}}>
<div>
<Row
style={{
padding: '.25rem 5vw',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: 'ghostwhite',
}}
>
<Col>
<PageHeader style={{ marginLeft: '-1.5rem' }}>
<h1 style={{ fontSize: '1.5rem' }}>
<EnvironmentFilled
style={{
marginRight: '.5rem',
color: 'rgb(24, 144, 255)',
}}
/>

Shipped features:

1. Right now you can enter specifically city, state initials ex. New York, New York or NY (any rendition lowercase, capitalize or uppercase) in the search bar.

2. Current temperature, livability, bikeability, buseabililty, average rental price, crime, air quality index, diversity, population, and walkability scores are pulling in to the search city page.

What future features might look like:

1. Users will be able to see a pinned city.

2. States will have a more modern design.

What technical challenges I foresee

There might be some difficulties with pulling in data from job opportunities API endpoint from DS team since its JSON object is longer than other endpoints. Pull in a static data from a position (i.e. developer) first and then try to pull in the dynamic data step by step.

Some of the feedback I received from peers and how you improved

Don't freak out in the beginning to fix the test errors. Keep calm, google, read stack overflow and keep fixing the bugs one by one.

How this project furthers my career goals

It helped me understand how to work with a brown-field project and not being able to ask questions to the developers who programmed it could be difficult sometimes.

I am good at working with cross-functional teams and the experience prepared me to do it even better in a real-life job.

CitySpire demo: https://drive.google.com/file/d/1yoe41SacSFnplIQzTApxw8W-EUbM7f5n/view