Testing with Text and Internationalization

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.