The problem that
testing-library aims to solve is that when we write tests for our components, we rely upon the implementation details of said component, which in turn make our tests fragile, and not refactor proof. This goal is an admirable one and something which could help every developer to ship reliable and maintainable code.
The problem with this is not a conceptual one, but an execution one.
I was testing a custom input component because I found a bug. In a specific situation, the user could not type in it. Yes, it was a bug I introduced but thought before fixing it, I'll write tests to cover this. TDD, right? It turns out you cannot cover this scenario with
jest, because how it only partially implements a DOM.
What I needed was to test if, in the given situation, the user focuses the input and starts typing, the value of the input changes accordingly. The test has failed as it should have. So I began fixing the issue. It was quick and easy and could confirm the fix in my browser. When I went back to check up on my tests, they still failed.
My test consisted of using
keyDown events to emulate typing. Because this is the user does, right? Well, it turns out that according to
testing-library, the user is not pressing buttons, but fires
change events! AS we all do when we do a Google search. We hit it up, and fire
change event left and right and boom, here comes the search result.
My issue with this concept is that there are cases when firing a change event works, but pressing keys does not. And I could not find a solution for this since.
This issue is similar to not being able to query
innerText because you'd need a layout engine for that. As if the user would be using your components without one. But worry not, there is
data-test-id. Which is a way of saying, do not test implementation details, but implement details to test the thing.
I think while the concept is excellent, the tools are not in place to deliver yet. You still need
selenium to get into the shoes of your end-user. If you know of any ways to run my existing
testing-library specs in a browser a way that allows for querying elements by input text, like an
xPath selector or something, and has a complete chain of events, please let me know.
Thank you, rent over
All coders welcome
Level up every day