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.

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