Testing Library: nothing was returned from render

Describe the bug Hi, I just started using lingui with React Native (via Expo), Typescript, everything works great, except that I am not able to run tests with @testing-library/react-native when a component contains a <Trans> tag (from @lingui/macro).

To Reproduce Component

const AvailabilityWarning: FC<Props> = ({ isAvailable, stock }) => {
    if (!isAvailable || !stock || stock <= 0 || stock > 3) {
        return null;
    }

    return (
        <Text style={styles.text} variant="bolder" testID="avail-warn">
            <Trans>Only {stock} left</Trans>
        </Text>
    );
};

test

describe('AvailabilityWarning', () => {
    it('should render the remaining stock otherwise', () => {
        const Component = () => (
           <I18nProvider language="en" catalogs={{ en: {} }}>
             <AvailabilityWarning isAvailable stock={2} />
          </I18nProvider>
        );
        const { queryByTestId } = render(<Component />);
        expect(queryByTestId('avail-warn')).toHaveTextContent('Only 2 left');
    });
});

Triggered error:

Invariant Violation: Trans(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

    at invariant (/Users/pbo/Work/Staycation/foundation/mobile/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:55:15)
    at reconcileChildFibers (/Users/pbo/Work/Staycation/foundation/mobile/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4734:13)
    at reconcileChildren (/Users/pbo/Work/Staycation/foundation/mobile/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6500:28)
    at mountIndeterminateComponent (/Users/pbo/Work/Staycation/foundation/mobile/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7162:5)
    at beginWork (/Users/pbo/Work/Staycation/foundation/mobile/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7723:16)
    at performUnitOfWork (/Users/pbo/Work/Staycation/foundation/mobile/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11413:12)
    at workLoop (/Users/pbo/Work/Staycation/foundation/mobile/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11445:24)
    at renderRoot (/Users/pbo/Work/Staycation/foundation/mobile/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11528:7)
    at performWorkOnRoot (/Users/pbo/Work/Staycation/foundation/mobile/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12416:7)
    at performWork (/Users/pbo/Work/Staycation/foundation/mobile/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12328:7)

I tried a lot of different configurations:

• Importing my compiled catalogs
• Using setupI18n() or importing the one from my app
• Trying to adapt the testing doc, but it seems that the line intlProvider.getChildContext() doesn’t work, this method doesn’t seem to exist in my I18nProvider 😕

Expected behavior I just want the <Trans> tag to render their children 😉 Is there a way to “mock” components? Thank you!

Additional context Add any other context about the problem here.

• jsLingui version 2.8.3
• Babel version 7.0
• Your Babel config (e.g. .babelrc) or framework you use (Create React App, Meteor, etc.)

{
    "presets": ["babel-preset-expo", "@lingui/babel-preset-react"],
    "plugins": [
        "macros",
        ["module-resolver", {
            "root": ["."],
            "alias": {
                "src": "./src",
                "conf": "./conf",
                "test": "./test"
            }
        }]
    ]
}

• Frameworks used: Expo 35.0.0, Testing-Library for React Native 4.1.0

[pybuche]

Thanks! Actually I changed job so I’m not using lingui anymore 😦 We may need an i18n lib in the future though, I’ll keep you posted!

[sleepycat]

I had a similar problem with the next branch and using setupI18n and if memory serves, I needed to call load and activate separately for it to render:

import { i18n } from '@lingui/core'
import en from '../locales/en.json'

i18n.load('en', { en })
i18n.activate('en')

Then I was able to pass it to the provider like this: <I18nProvider i18n={i18n}>.

Not sure if that applies to 2.8, but maybe it’s a thread to tug on.