How to configure a React application to use InversifyJS to inject services in components

Image for post
Image for post
Photo by Erik Eastman on Unsplash

I think if you are here, you know what the dependency injection is. In some situations, I was confused about it in frontend development. Why using the dependency injection if I don’t need it, technically? I can import the “service” in a component, and voilà, it can call the API or write on the storage. The client is “trivial” and it just displays data, lights, and colors :)

This one could be a valuable approach for small applications, but when your app needs to grow for years, the problems come when you try to test your code. At a certain…


Image for post
Image for post
Photo by Florian Klauer on Unsplash

Unit testing is one of the most valuable and tedious measures of your codebase at the same time. Writing tests is time-consuming, and it could be another sort of “sub-application” near to your main code. If correctly handled, unit tests may save your life and your mind when debugging code. We all know it!

This approach will help you to set up an opinionated unit testing environment with TypeScript that also works for JavaScript projects. You can create your next project following this approach, or you can adapt your existing app with a “quite-zero” effort.

Matteo Tafani Alunno

Senior Software Engineer, Software Architect

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store