React-testing-library: How to test i18next

[josoroma]

I was wondering how to test the NEXT text here:

test('LayoutFooter text content', () => {
  const props = {
    handleOnClick: () => {},
  };

  const { container } = render(<LayoutFooter {...props} />);
  const fc = container.firstChild;
  expect(fc.textContent).toBe('NEXT');
});

[alexkrolick]

Approaches to testing translated components vary, but these are popular:

• Use default strings Most internationalization frameworks will fall back to the default string if the locale data is not provided. You can use the default text as if it was hardcoded into the page, with methods like getByText, getByLabelText, etc.
• Include locale providers In your tests, you can also include the full setup code necessary to actually do the translation with locale data. For example, you might set up a wrapper in a custom render method that includes a Context provider for the locale messages. Then you can query by the expected translated result.
• Mock components You can also mock translation components (e.g. <FormattedMessage /> in react-intl) to do something like add a data-i18n attribute to a span with the default message, so you can query by both message content and a fallback attribute. This can be a good approach if your translations change a lot or you have many instances of similar strings with different roles (kind of like adding a testid).

[Gpx]

Hey @josoroma, please join one of the support channels so we can better help. Issues should be used for bug reporting and feature requests.

❓ Support Forums

• React Spectrum https://spectrum.chat/testing-library
• Reactiflux on Discord https://www.reactiflux.com
• Stack Overflow
  https://stackoverflow.com/questions/tagged/react-testing-library
• Documentation: https://testing-library.com/

[kentcdodds]

We should probably have an article about this on the website.

[Gpx]

I can take a stab at it next week. It should probably go in the examples section

[Gpx]

I actually realized we already have an example for Rect Intl. https://testing-library.com/docs/example-react-intl

Do you think it's enough?

[alexkrolick]

I've never actually had to do what is described in that example, not sure what environment it is referring to. It doesn't describe any of the the three methods above. EDIT: it's like the second bullet but we should include the other approaches

[kentcdodds]

Yeah, I vaguely remember someone contributing that. I've never had to do that either though.

[viniciusavieira]

I've pushed this example, because I had to test the use of it in a production project.
I can provide an example with LinguiJS also, since I have another production project that uses it, but the logic is pretty much the same, you need to provide a wrapper around your component passing the i18n you use.

[alexkrolick]

@viniciusavieira go ahead and get started with a PR if you have an idea. I think we should have pretty comprehensive docs for all these ideas since how to test localized content is one of the most-asked questions.

[viniciusavieira]

This codesandbox has a functional example of i18next test, not sure if it follow all convetions of this lib, since this was my first contact, I've checked they're docs and adapted as necessary:
https://react.i18next.com/misc/testing

https://codesandbox.io/s/testing-library-i18next-vot1o