Testing with Text and Internationalization

02/09/2021 , 2m, 58s

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.