DEV Community

Leejjon
Leejjon

Posted on

Did your end users ever noticed missing translations on the production version of your app? Here's how I prevent this.

Forgetting to add translations are stupid things that happen. If you test manually, it's easy to miss them because you probably won't test all functionality in every language you support.

It can result in embarrassing complaints from end users like below:
Missing translation in Dutch version of blindpool.com

Here's an example of how you can write a simple test in TypeScript to verify that every key that I added to the English message bundle has also been added to the Dutch one.

describe('Test', () => {
    const englishMessageBundle = {
        "KEY1": "VALUE1",
        "KEY2": "VALUE2",
        "KEY3": "VALUE3",
    };

    const dutchMessageBundle = {
        "KEY1": "WAARDE1",
        // We forgot to add KEY 2, the test should notice this and fail.
        "KEY3": "WAARDE3",
    };

    test('Verify if all keys in the english bundle also exist in the dutch bundle', () => {
        for (const [key] of Object.entries(englishMessageBundle)) {
            expect(Object.prototype.hasOwnProperty.call(dutchMessageBundle, key)).toBeTruthy();
        }
    });
});

Here's how it looks running from my IDE (IntelliJ):
Test that verifies that the dutch bundle has defined all keys that are in the English translation file

If you do CI/CD and have a build server that runs all tests after every commit, you should notice missing translations before deploying to production.

Top comments (0)