diff --git a/packages/testing/src/index.js b/packages/testing/src/index.js index 301e5ced83a..dc5c976f8ac 100644 --- a/packages/testing/src/index.js +++ b/packages/testing/src/index.js @@ -6,4 +6,5 @@ */ export { default as mountWithTheme } from './utils/mountWithTheme.js'; +export { default as renderWithTheme } from './utils/renderWithTheme.js'; export { default as shallowWithTheme } from './utils/shallowWithTheme.js'; diff --git a/packages/testing/src/utils/renderWithTheme.example.md b/packages/testing/src/utils/renderWithTheme.example.md new file mode 100644 index 00000000000..4d769cc1f4c --- /dev/null +++ b/packages/testing/src/utils/renderWithTheme.example.md @@ -0,0 +1,21 @@ +Signature: + +- `renderWithTheme(reactNode, { rtl: boolean, theme: object, enzymeOptions: object })` + +```jsx static +import { Tabs, TabPanel } from '@zendeskgarden/react-tabs'; +import { renderWithTheme } from '@zendeskgarden/react-testing'; + +const TabsExample = ( + + + Tab 1 content + + + Tab 2 content + + +); + +const RtlTabs = renderWithTheme(TabsExample, { rtl: true }); +``` diff --git a/packages/testing/src/utils/renderWithTheme.js b/packages/testing/src/utils/renderWithTheme.js new file mode 100644 index 00000000000..9829d9ae523 --- /dev/null +++ b/packages/testing/src/utils/renderWithTheme.js @@ -0,0 +1,31 @@ +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +import React from 'react'; +import { mount, render } from 'enzyme'; +import { ThemeProvider as StyledThemeProvider } from 'styled-components'; +import { ThemeProvider } from '@zendeskgarden/react-theming'; + +/** + * Render a component with provided RTL and Theme + * @param {EnzymeWrapper} tree + * @param {Object} ThemeProperties { rtl: boolean, theme: object, enzymeOptions: object } + */ +const renderWithTheme = (tree, { rtl, theme, enzymeOptions } = {}) => { + const context = mount() + .childAt(0) + .instance() + .getChildContext(); + + return render( + tree, + { context, childContextTypes: StyledThemeProvider.childContextTypes }, + enzymeOptions + ); +}; + +export default renderWithTheme;