Advice for testing with @fluent/react

Fluent
#1

Hi,

Can anyone provide some guidance on how to write tests for react components that use Localized from @fluent/react? At the minute, I’m constructing a ReactLocalization instance with no bundles or markup parser for use in tests but this, quite reasonably, leads to warnings from my jest tests that include the following text:

A <Localized /> component was rendered when no localization bundles are present.

I can’t use the instance of ReactLocalization that I use in production code either because the code I have for building this (copied from another open source project) uses require.context to load the translations and this is not available in the test environment.

Any advice will be gratefully received!

Thanks,

Nick

#2

I’m basing this answer on the assumption that your tests need to be able to find elements by text content (e.g. findByLabelText if you’re using testing-library).

Option 1: Maintain an FTL file for default messages
I have a versioned en.ftl in my project that contains English defaults. For tests, I read that resource from the file system to populate a single bundle for the ReactLocalization instance passed to the provider.

Option 2: Allow the Localized components to fall back to default content and ignore the warnings
You could override console.warn in your test environment to suppress this specific warning, assuming that your Localized and getString usage always includes fallback text.

Someone else may be able to provide some alternative approaches…

1 Like
#3

Thank you so much for taking the time to reply. I will give the first option a go. :+1:

1 Like
#4

Have just implemented and it works like a charm. This is the first time in this (admittedly young) project’s life that I have had all my tests passing without emitting warnings!