Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for react-intl 3.x #28

Open
Arrvi opened this issue Aug 20, 2019 · 3 comments
Open

Support for react-intl 3.x #28

Arrvi opened this issue Aug 20, 2019 · 3 comments

Comments

@Arrvi
Copy link

Arrvi commented Aug 20, 2019

This package is not compatible with current react-intl. When trying to mount, the function crashes on old API:

TypeError: o.getChildContext is not a function

   6 | import { testid } from '__tests__/utils'
   7 | 
>  8 | const component = mountWithIntl(<Pager page={1} totalPages={5} location={{ search: {} }}/>,
     |                   ^
   9 |     new ReactRouterEnzymeContext().get())
  10 | 
  11 | test('does not render for single page', () => {

  at mountWithIntl (node_modules/enzyme-react-intl/lib/webpack:/enzyme-react-intl/src/index.js:58:12)
  at Object.<anonymous> (app/pagination/components/Pager/__tests__/Pager.test.js:8:19)
@Saebyuckbaan
Copy link

Saebyuckbaan commented Aug 22, 2019

On the top of Arrvi asked, react-intl has rewritten with Typescript in 3.x, could you also support Typescript natively?

@ksocha
Copy link

ksocha commented Aug 28, 2019

You can make it work by using Enzyme's getWrappingComponent and IntlProvider

e.g

const defaultMessages = new Proxy({}, { get: (target, property) => property });
let messages = defaultMessages;

export function loadTranslationObject(translations: object): object {
  if (typeof translations === 'undefined') {
    messages = defaultMessages;
    return defaultMessages;
  }

  messages = translations;
  return messages;
}

const WrappingComponent: React.FC = ({ children }) => (
  <IntlProvider locale="en" messages={messages}>
    {children}
  </IntlProvider>
);

export const mountWithIntl = (node: ReactElement) =>
  mount(node, { wrappingComponent: WrappingComponent });

@AndyOGo
Copy link

AndyOGo commented Oct 1, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants