✨It's 2025, But Jest🔧 is Still Rocking the Testing World 🚀

[MyrinNew]

Testing your React components might sound intimidating, but with Jest, it’s actually fun! 🚀


In the era of AI, many people believe that Unit Testing is dead or no longer necessary. 🚫🤖 But let me tell you—it's one of the most underrated skills in software development! 💡✨


While most developers tend to skip it, thinking it's not essential, Unit Testing is actually a secret weapon 🛡️ that can elevate your code quality and save countless hours of debugging. 🐛⏱️


In fact, I believe that learning Unit Testing is far more important than jumping on the bandwagon of the next shiny framework. 🚀📚


Mastering this skill will not only make your codebase more reliable but also make you a better developer. 💻✅


In this blog, I'll dive into Jest for unit testing React components.Let’s get our hands dirty! 💪





🔹 Why Jest?

Before we jump in, why should you even care about Jest?


Jest is a delightful JavaScript testing framework created by Facebook. It’s fast, easy to set up, and works seamlessly with React.

Plus, it comes with built-in support for mocking, assertions, and code coverage. 🛠️


Alright, enough chit-chat. Let’s code! 💪



📦 Setting Up Jest

1. Create React App (already comes with Jest):

npx create-react-app my-app
cd my-app
npm test






Boom! Jest is running. 🚀 But this method is deprecated so we can use other module bundler like Vite, Webpack etc. and setup jest manually.

1. Manual Setup:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom







🔧 Writing Your First Test

Let’s create a simple component and test it!


Counter.js






import React, { useState } from 'react';

const Counter = () => {
const [count, setCount] = useState(0);
return (
div>
h1 data-testid="count">{count}h1>
button onClick={() => setCount(count + 1)}>Incrementbutton>
div>
);
};

export default Counter;





📖 Counter.test.js




import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import Counter from './Counter';

test('renders initial count', () => {
render(Counter />);
const countElement = screen.getByTestId('count');
expect(countElement).toHaveTextContent('0');
});

test('increments count on button click', () => {
render(Counter />);
const buttonElement = screen.getByText('Increment');
fireEvent.click(buttonElement);
const countElement = screen.getByTestId('count');
expect(countElement).toHaveTextContent('1');
});





🚀 Run Tests




npm run test






You should see green checkmarks! 😃🔹






📊 Snapshot Testing

Want to make sure your UI doesn’t change unexpectedly? Use snapshots! 📸





import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import Counter from './Counter';


test('matches snapshot', () => {
const { asFragment } = render(Counter />);
expect(asFragment()).toMatchSnapshot();
});










Run the test, and Jest will create a snapshot file. Next time you run tests, it will compare the current UI to the saved snapshot.



🔐 Mocking Functions

Sometimes, you need to mock functions to isolate your component's behavior.


Greeting.js





import React, { useEffect, useState } from 'react';

const Greeting = ({ fetchGreeting }) => {
const [greeting, setGreeting] = useState('');

useEffect(() => {
fetchGreeting().then(setGreeting);
}, [fetchGreeting]);

return h1>{greeting}h1>;
};

export default Greeting;






Greeting.test.js





import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import Greeting from './Greeting';

test('renders greeting from API', async () => {
const mockFetchGreeting = jest.fn().mockResolvedValue('Hello, Jest!');
render(Greeting fetchGreeting={mockFetchGreeting} />);

const greetingElement = await screen.findByText('Hello, Jest!');
expect(greetingElement).toBeInTheDocument();
});










🚀 Tips for Better Testing

• Test Behavior, Not Implementation: Focus on what the component does, not how it does it.
• Keep Tests Isolated: Don’t let tests depend on each other.
• Use beforeEach for Repeated Setup: Clean and DRY code! 💡

🎓 Your Challenge!

Now it’s your turn! 🚀 Create a TodoList component with the following features:

1. Display a list of tasks.
2. Add new tasks.
3. Mark tasks as completed.

For code you can take reference from this blog of mine:












Reactjs Todo List App (Using Vite & Zustand)

Jagroop Singh ・ Sep 16 '24

#react
#zustand
#javascript
#webdev










Challenge: Write unit tests for each feature! Share your code in the comments 🚀✨





Happy Testing! 💡🌟 Let me know how your testing journey goes! 🚀




More...