Testing with Text and Internationalization 3 Minutes with Kent

Hey folks a common question that I get about testing and especially since
react testing library or testing library in general you query the DOM by
giving it the text that you're looking for so you say hey I want to get a
button and it's accessible name is submit. And so the comment question that
I get is well that must not work for internationalized websites that's
probably just for like little toy apps or internal apps or whatever where
you don't have any internationalization going on, no different languages
because the word submit in English is not the same as it is in French
orWhatever.
So yeah, this is a really common question and what my answer is. Well, just
use the default language. So if you're agency in Spain and so most of your
websites your default language is Spanish then write the tests using the
Spanish text and you when you run the test make sure that the all the
languages and stuff are accessible to the tests so that when the components
are rendered and the actual default language text is there and you can
query off of it.
And,So then the next question is well, okay, but I'm not managing the those
strings myself. We've got a an internationalization team or we've got
somebody responsible for managing that content and I just put in the IDs
and that's not my responsibility and so the problem there is okay, so now
my the localization team is it's possible for them to break my tests.
And so my response to that is well, okay, so let's say that you're testing
the login form and you're accepting the username and password and then,It
comes around and changes that content on you as you propose they can and
they change it to email and password instead. Well in that situation, I'd
actually be glad for my test to fail and catch that and and notify me that
this change was made because I don't want the content editors to make a
change like that without me giving that go ahead because I'm going to need
to change my implementation.
If we change from username to email well now I'm going to need to change
maybe even the back end on how we store this invalidate this and also on
the front.End as well So I I don't really worry too much about that Now
let's say that it's something innocuous like who we don't know it's it's
just two ways of saying the same thing they change it to the other way.
If that does happen, then it is going to break and and it's not going to
actually be a problem for the user. So that'll be annoying but those sorts
of things are super easy to go and fix. You know exactly what went wrong
with the error messages that you get and you can go back and fix it and and
then move forward.
So, I suggest just use the regular text and it's it use the default
text.And it's pretty straightforward to do that. Good luck.