Better react-i18n / Jest integration

[GoodForOneFare]

Overview

This is a mix between feature request / bug report 😄 Right now, adding a new translation file doesn't invalidate the Babel cache. So if we:

• Create ./foo/FooComponent.jsx + ./foo/translations/en.json
• Run Jest (adding FooComponent to the Jest cache)
• Add ./foo/translations/fr.json
• Add a test that depends on French translations
• Run Jest 💥

Type

• Changes to existing features

Motivation

Stale translations have blocked CI for at least one significant Shopify webapp. Can't share the details of that here, but the scenario was:

• Someone moved translation files into a parent directory
• Jest loaded the cached version of a component (that referenced the old translation files)
• Many tests went 💥because they were trying to read from non-existent translation files

[GoodForOneFare]

As discussed in Slack with @lemonmade and @michenly, I think we can tweak the Babel plugin to have slightly different behaviour in a Jest environment.

Instead of embedding translation files directly into the component, it can add a readdir('./translations') call, and use that as a source for available translations (or as a "look up the component tree" hint when no translations are found).

[lemonmade]

Just as a reminder for me, because I've forgotten a few times: it's not that the Babel transform would use readdir to get translations (it effectively already does), but that the code it adds as part of its transformation would do a readdir. With a runtime check like that, we can have the same logic in the 0 translation and >0 translation cases, which fixes the problem of those being different with the same cache key in the current approach.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.