React+TS+i18n, How to test a component wrapped with react-intl

Question

The component looks like

const Title = (props: TitleProps) => {
    return (
        <div>
            <span>{props.title}</span>
            <span>
                <FormattedMessage {...messages.date}></FormattedMessage>: {props.date}
            </span>
        </div>
    );
};

export default Title;

and it's a very basic app, uses react-intl for the i18n feature. partial of App.tsx

<IntlProvider>
            <div>
                 <Title data={titleItem}></Title>
            </div>
</IntlProvider>

As such a basic component, for now, I only want to test the initialization

const titleItem: TitleItem = {
    title: 'test',
    date: '2021-01-01'
};

test('should be initialized', () => {
    render(<Title data={titleItem} />);
    expect(screen.getByText("test")).toBeInTheDocument();
});

If I run the test, it will throw

[React Intl] Could not find required intl object. needs to exist in the component ancestry.

How do I solve it?

Answer 1

You need to wrap the component you're testing in a <IntlProvider /> component.

See https://formatjs.io/docs/guides/testing#react-testing-library