/* * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ /** * Components using the react-intl module require access to the intl context. * This is not available when mounting single components in Enzyme. * These helper functions aim to address that and wrap a valid, * intl context around them. */ import { I18nProvider, InjectedIntl, intlShape } from '@kbn/i18n/react'; import { mount, ReactWrapper, render, shallow } from 'enzyme'; import React, { ReactElement, ValidationMap } from 'react'; // Use fake component to extract `intl` property to use in tests. const { intl } = (mount(
).find('IntlProvider') as ReactWrapper<{}, {}, import('react-intl').IntlProvider>) .instance() .getChildContext(); function getOptions(context = {}, childContextTypes = {}, props = {}) { return { context: { ...context, intl, }, childContextTypes: { ...childContextTypes, intl: intlShape, }, ...props, }; } /** * When using React-Intl `injectIntl` on components, props.intl is required. */ function nodeWithIntlProp(node: ReactElement): ReactElement { return React.cloneElement(node, { intl }); } /** * Creates the wrapper instance using shallow with provided intl object into context * * @param node The React element or cheerio wrapper * @param options properties to pass into shallow wrapper * @return The wrapper instance around the rendered output with intl object in context */ export function shallowWithIntl( node: ReactElement, { context, childContextTypes, ...props }: { context?: any; childContextTypes?: ValidationMap; } = {} ) { const options = getOptions(context, childContextTypes, props); return shallow(nodeWithIntlProp(node), options); } /** * Creates the wrapper instance using mount with provided intl object into context * * @param node The React element or cheerio wrapper * @param options properties to pass into mount wrapper * @return The wrapper instance around the rendered output with intl object in context */ export function mountWithIntl( node: ReactElement, { context, childContextTypes, ...props }: { context?: any; childContextTypes?: ValidationMap; } = {} ) { const options = getOptions(context, childContextTypes, props); return mount(nodeWithIntlProp(node), options); } /** * Creates the wrapper instance using render with provided intl object into context * * @param node The React element or cheerio wrapper * @param options properties to pass into render wrapper * @return The wrapper instance around the rendered output with intl object in context */ export function renderWithIntl( node: ReactElement, { context, childContextTypes, ...props }: { context?: any; childContextTypes?: ValidationMap; } = {} ) { const options = getOptions(context, childContextTypes, props); return render(nodeWithIntlProp(node), options); }