React Testing Library + Mock Service Worker = !!!

One of my goals for 2022 has been to push myself outside of my comfort zone, and one area in particular I am targeting is to improve my public speaking. This is something that I have been actively working on in my current position at Hireology by presenting my work during Demos and also being an active participant during bigger meetings. However, I knew that if I really wanted to push myself I would need to do a bigger presentation.

At Hireology, we have a monthly event called Engineering Talks where anyone can present on any given topic, tech-related or otherwise, to the entire engineering team. One thing we have been doing as a team is starting the process of migrating to a more modern tech stack, and from a frontend perspective I have really zeroed in on how we are going to handle writing tests in the future. I have been a strong advocate for React Testing Library (RTL), so I decided to do a presentation showing off different scenarios and how we can test them using RTL and another neat library called Mock Service Worker (MSW).

I was definitely nervous going into it, but I did rehearse it a few times beforehand (including once to my dear wife who had no idea what I was talking about 😂) so I felt more confident. Overall, I think it went very well! Most of my colleagues had not had experience with RTL (we currently use Enzyme) so it was cool to be able to teach them something new.

For the presentation, I opted to use mdx-deck, a library that lets you write presentations in Markdown with the ability to also import and use React components. I also used a tool called Code Surfer that added some awesome visual effects for zooming in on code snippets. I then deployed the app using Vercel, which was crazy easy and something I will continue to use for future projects.

If you're interested in checking out my slides and/or the app I built to demonstrate, here are the relevant links: