He wanted to provide a solution to writing tests without testing implementation details. With the mindset that you would rather want to test your application in a way how your users are using the application, by encouraging good testing and software practices. With a result of making your tests less prone to break due to implementation changes in order to keep moving forward and not slowing down development, because your tests are “suddenly” failing. You can find more details in hes blog post, Introducing the react-testing-library 🐐.
The library is focused on writing your tests on actual DOM nodes, because of this it makes a real good base to use across different frameworks.
As a nice man as he, Kent C. Dodds is, he refactored out the generic, not react specific code, and created dom-testing-library. This library provides a couple of lightweight but very useful utility functions for testing DOM nodes.
The dom-testing-library mainly consists of query functions to find DOM elements. For this it uses the
Like I said earlier in this post, these lightweight functions provide a good base to use across different framework. That’s why dom-testing-library is currently not only used by react-testing-library but also vue-testing-library and cypress-testing-library.
As you may have noticed I’m a bit excited about this approach of testing your UI components, so I I created ngx-testing-library, an Angular adapter around dom-testing-library.
The ngx-testing-library provides one method
createComponent, to create your component, setting up the Angular
TestBed, and it applies the dom-testing-library query functions to your component container. It also exposes the
fireEvent function directly.
Let’s take a look how this looks like if we were testing a simple counter component.
Note that this library can be used with every test runner, whether it is Jasmine, Jest, or your favorite test runner.
And if we were testing a login form, it would look like as follows:
To get a bit more in depth, I’m referring you to the GitHub repository at ngx-testing-library. While it is still a work in progress, I’m confident that it provides the basic utilities to make your tests resilient to change. I would say come take a look and as always, feedback is more than welcome!
Please consider supporting me if have you enjoyed this post and found it useful: