Bringing localization into your Widget testing

The more accurate you make your test, the higher the quality of the test itself.

Many apps these days are built to be more accessible, one thing we do to ensure this is we localize our applications, allowing people who do not speak the same language as we do, to also use the application.

In our application, we have been using easy_localization, I know there are quite a few choices, but for us, this was one of the easier ones to implement and for us, the JSON support was a big win with how we manage our localization.

To ensure we have the most accurate widget tests, we rather use “real” localizations than having to mock the helper classes.

To do this we keep a local copy of the locale JSON files to keep them safe from external updates and have created a helper function createLocalizedWidgetFortesting which looks like:

Widget createLocalizedWidgetForTesting({Widget child}) {
  return EasyLocalization(
    path: '$TEST_MOCK_STORAGE/locale',
    useOnlyLangCode: true,
    assetLoader: FileAssetLoader(),
    fallbackLocale: const Locale('en'),
    supportedLocales: globals.supportedLocale,
    saveLocale: false,
    child: MaterialApp(
      home: Scaffold(
        body: child,
      ),
    ),
  );
}

As you will see, EasyLocatlizationrequires a path, that is simply a constant that we have defined a little higher in the file, as it is used as part of other mocks.

const TEST_MOCK_STORAGE = './test/fixtures/core';

Beyond that, everything else is pretty much how it is set up in main.dart .

Here is a simplified example of how a test would look with this implementation.

void main() {
  testWidgets(
    'Should render localized widget',
    (
      WidgetTester tester,
    ) async {
      await tester.pumpWidget(
        createLocalizedWidgetForTesting(
          child: SampleWidget(),
        ),
      );

await tester.pumpAndSettle();

// expectations to follow
    }
  );
}

Through this would be able to run proper expectations like:

expect(find.text("Sample localized text", findsOneWidget);

More importantly, if you have a language switcher that a user can select you can test for text changes through a setup flow.

I hope you found this interesting, and if you have any questions, comments, or improvements, feel free to drop a comment. Enjoy your Flutter development journey :D

If you liked it, a like would be awesome, and if you really liked it, a cup of coffee would be great.

Thanks for reading.

If you wish to carry on with the subject of testing, why not take a look at:

Widget testing passed in function In this post, we going to go through how, at least in my opinion, one would go about testing that a function is called…

Widget testing when your app needs access to directories. Many times in an application you would have a need to store files, temporarily or even permanently. For this, you are…

Bringing localization into your Widget testing

Comments

Flutter Testing

Widget testing passed in function

More from this blog

The Most Useful AI Workflow I’ve Built Isn’t About Writing Code

Three AI Agents, One Spec

The Space Between Intention and Impact

The Weight of the First Word

When Not Having the Answer Is the Answer

Command Palette

Comments

Flutter Testing

Widget testing passed in function

More from this blog