My Second Hacktoberfest Adventure: Testing with Jest (For the First Time!) 🎉

It’s Hacktoberfest time again! 🎃🎉 For my second pull request, I jumped into the exciting world of unit testing for the ChatBotButton component in the react-chatbotify repo. Little did I know, this was going to be a bigger learning curve than expected—because guess what? It was my first time writing tests with Jest! 😅

The Challenge 🧠💻

The goal was clear: write tests for the ChatBotButton component as part of issue #145. But here’s where things got interesting. I had to:

1. Make sure the button renders correctly.
2. Ensure that it applies the right CSS classes like rcb-button-show and rcb-button-hide to toggle visibility.
3. Verify that clicking the button actually toggles its visibility.

But for someone who’s new to testing with Jest, things weren’t as straightforward as they seemed. I’d never worked with testing libraries like this before, so I had to learn the ropes on the fly!

The Learning Curve 🚧

When I started, my initial thought was, how hard could testing be? Just simulate a click and check if things work, right? Well... not quite. Here’s what I ran into:

1. Writing Basic Tests: It took me some time to figure out how to write even basic tests in Jest. Things like screen.getByRole() and fireEvent were totally new to me!
2. CSS Class Verification: One tricky part was verifying if the right CSS classes were being applied when the button was clicked. I wasn’t sure if the component handled visibility internally or via props.
3. Handling State: Figuring out how to simulate state changes in a test environment threw me off a bit. It took me a while to understand how to properly test toggling logic.

What I Managed to Do 🛠️

Despite all the hurdles, I wrote tests that handled basic rendering, CSS class application, and visibility toggling. I ensured the button behaves like a well-mannered chatbot button should—appearing and disappearing on command.

The Struggles 🛠️🔧

Here are a few struggles I faced:

• Understanding Jest Syntax: Jest's syntax took some getting used to. I had to read a lot of documentation just to figure out how to simulate a click and check the resulting state.
• CSS Class Logic: Debugging whether the button was toggling the right CSS class was harder than I expected! Sometimes the test would fail, and I'd have to dig into why the class wasn’t changing.
• Pre-Commit Hooks: Once I was done writing tests, my code wouldn’t commit because the pre-commit hooks were set up to check for linting errors. Fixing those took a while but it was worth it to get the code right!

What’s Next? 🚀

Right now, I’m waiting for my pull request to be reviewed. You can check out the PR here. Fingers crossed for that hacktoberfest-accepted label!

---

Final Thoughts 💭

Writing tests was a bigger challenge than I initially thought, especially as someone new to Jest. But now that I’ve got the hang of it, I feel more confident tackling similar issues. Hacktoberfest has been an incredible opportunity to not only contribute to open source but also to learn something new—testing! 🎉

Stay tuned for my next pull request, and if you’re new to open source, don’t hesitate. Jump in—it’s an awesome learning experience.

---