1

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?

Enrique Moreno Tent
  • 24,127
  • 34
  • 104
  • 189
  • Looks like this is a known issue (note, there is a workaround using jest in the comments) https://github.com/enzymejs/enzyme/issues/2176 – Will Jenkins Oct 06 '21 at 12:06
  • Are you sure it is the same issue? In that link they talk about the value in the context being empty. In my case, the system complains that the Provider doesnt even exist. – Enrique Moreno Tent Oct 06 '21 at 12:39

0 Answers0