Testing, specifically writing unit tests, is often a large part of our process as web developers. We develop a new feature or fix a bug, and usually our next step is to write unit tests for that code we just created. Or we do this vice versa if we are practicing Test Driven Development (TDD).
Of all of the types of tests we might have in a project, such as Integrated or End-to-End, unit tests will be the largest in quantity. Since a project will have so many unit tests and since we create them so often in our daily practice, I believe it is also important to have quality unit tests. If you are working on frontend development, one way to create quality unit tests is to have your tests reflect how your components will behave in the browser, especially if they require user input.
Over the last two years, I have been working on a React-based project, which has gone through many cycles as far as the types of tests we should have and the tools we should use. About a year ago, we switched over to using React Testing Library for our unit tests. The docs state, “The more your tests resemble the way your software is used, the more confidence they can give you.” After working with this library in a large codebase for so long, I definitely believe that is true. It has made writing tests for our components easier. The tests are very maintainable, and the team has a lot of confidence in these tests.
Because I saw such success in our use of the React Testing Library, I wanted to implement those same types of tests for a project that does not use a JS framework. I chose the DOM Testing Library, which the React Testing Library is built off of.
While it took me some time to figure out all the little things needed in order to get this test environment working, I definitely think it was worth it. I now feel so much more confident in my tests and know I can maintain them easily.
Below is a link to a repo with that test environment working. You can pull it down and, after installing the dependencies and running npm test, the test environment will work. There are step-by-step instructions on how to set it up yourself. Or feel free to fork it and use this frontend test environment for your own project.
