# Advice for testing with @fluent/react

**URL:** <https://discourse.mozilla.org/t/advice-for-testing-with-fluent-react/108151>\
**Category:** Fluent\
**Tags:** learning\
**Created:** [November 26, 2022, 9:12pm UTC](https://discourse.mozilla.org/t/advice-for-testing-with-fluent-react/108151 "2022-11-26T21:12:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nickform](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/nickform/32/60284_2.png) [@nickform](https://discourse.mozilla.org/u/nickform)\
**Post date:** [November 26, 2022, 9:12pm UTC](https://discourse.mozilla.org/t/advice-for-testing-with-fluent-react/108151/1 "2022-11-26T21:12:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Adam\_Detrick](https://avatars.discourse-cdn.com/v4/letter/a/7ab992/32.png) [@Adam\_Detrick](https://discourse.mozilla.org/u/Adam_Detrick)\
**Post date:** [November 28, 2022, 5:56pm UTC](https://discourse.mozilla.org/t/advice-for-testing-with-fluent-react/108151/2 "2022-11-28T17:56:01Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![nickform](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/nickform/32/60284_2.png) [@nickform](https://discourse.mozilla.org/u/nickform)\
**Post date:** [November 28, 2022, 6:48pm UTC](https://discourse.mozilla.org/t/advice-for-testing-with-fluent-react/108151/3 "2022-11-28T18:48:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nickform](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/nickform/32/60284_2.png) [@nickform](https://discourse.mozilla.org/u/nickform)\
**Post date:** [December 3, 2022, 8:14pm UTC](https://discourse.mozilla.org/t/advice-for-testing-with-fluent-react/108151/4 "2022-12-03T20:14:24Z")

</div>

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!