testing-library can't find i18next Trans texts

[ghost]

Describe the bug

I'm using a <Trans/> component from react-i18next module to translate complex react elements (without mocking it)

It works well in React Native runtime:

• But when I tried to find elements by text it doesn't work
• When I used debug() text that I'm trying to find exists

Expected behavior

//...
const screen = render(<Text><Trans t={t}>My test</Trans></Text>)

screen.getByText('My test') // will work

Steps to Reproduce

git clone https://github.com/retyui/testing-library-and-i18next-issue
cd testing-library-and-i18next-issue
yarn
yarn test

Screenshots

Full code you find here https://github.com/retyui/testing-library-and-i18next-issue

      <Text>
        <Trans t={t}>My test</Trans>
      </Text>

      <Text>
        <Trans t={t}>
          Open <Text style={styles.link}>link</Text>
        </Trans>
      </Text>

      <Text>
        <Trans t={t} values={{name: 'callstack'}}>
          Hello <Text style={styles.bold}>{'{{name}}'}</Text>!
        </Trans>
      </Text>

Versions

  npmPackages:
    @testing-library/react-native: ^9.1.0 => 9.1.0 
    react: 17.0.2 => 17.0.2 
    react-native: 0.68.0 => 0.68.0 
    react-test-renderer: 17.0.2 => 17.0.2 

[pierrezimmermannbam]

Hi @davydspotnana , this issue is currently being adressed (see #937 for more information). You can refer to this comment #937 (comment) for a workaround by mocking the trans component. Hope this helps !

[AugustinLF]

Thanks the help @pierrezimmermannbam, will mark as duplicate.

[retyui]

@pierrezimmermannbam I am an author of two these issue ) I don think that this is duplicate (@AugustinLF please reopen it)

I don't want to mock a Trans component because it affect testing

With a mock I can't:

1. testing pluralization

<Trans values={{cars: 2}}>{`{{cars}} car`}`</Trans> 
// getByText('2 cars') 
// getByText('1 car')

2. Verify values

<Trans values={{ NON__CAR_NAME: 2 }}>{`{{cars}} car`}`</Trans> 
// getByText('2 cars') // not found

[AugustinLF]

@retyui The root cause is the same in both issues. RNTL can only detect text directly inside <Text> components. If you have any intermediate component (even if it doesn't appear in the renderer) RNTL will be confused and won't be able to match it.

We agree that mocking is not a long term solution, we're still trying to find a real fix, there's some progress in #967 but it's a non trivial issue.