'Cannot shallow render a component using IntlProvider

I have the following component, using Flow:

//@flow

import React, { type Node } from 'react';
import { useIntl } from 'react-intl';

type Props = { balance: Object };

const AvailableDiscount = ({ balance }: Props): Node => {
  const { formatMessage, locale } = useIntl();

  return (
    <div>
      {formatMessage({ id: 'XAM_DISCOUNT_DETAILS' })}: {balance.value}
    </>
  );
};

And while testing it, I seem to have a problem when trying it so mount it with shallow, using Enzyme:

// @flow

import { mount, shallow } from 'enzyme';
import React from 'react';
import { IntlProvider } from 'react-intl';

import balance from '../../../utils/testHelpers/testData/customerBalance';
import AvailableDiscount from './AvailableDiscount';

describe('AvailableDiscount', () => {
  it('renders correctly', () => {
    const component = <AvailableDiscount balance={balance} />;
    const wrappingOptions = {
      wrappingComponent: IntlProvider,
      wrappingComponentProps: {
        locale: 'en',
        defaultLocale: 'en',
        messages: {},
      },
    };
    const mountedComponent = mount(component, wrappingOptions); // <-- This works
    const shallowComponent = shallow(component, wrappingOptions); // <-- This does NOT work
  });
});

It tells me that the component does not seem to be wrapped in the provider.

enter image description here

While this seems to work for mount, shallow keeps giving me this error. Why could this be?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source