@lumx/react 3.3.1-alpha.0 → 3.3.1

package/src/components/side-navigation/SideNavigationItem.test.tsx

@@ -1,175 +1,108 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import without from 'lodash/without';
-
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils/className';
-
-import { mdiAccount } from '@lumx/icons';
+import { getAllByClassName, queryAllByClassName } from '@lumx/react/testing/utils/queries';
+import { render, screen } from '@testing-library/react';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 
 import { SideNavigationItem, SideNavigationItemProps } from './SideNavigationItem';
 
-const DEFAULT_PROPS = SideNavigationItem.defaultProps as any;
 const CLASSNAME = SideNavigationItem.className as string;
 
-type SetupProps = Partial<SideNavigationItemProps>;
+const toggleButtonProps = { label: 'Toggle' };
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
-    const props: any = {
-        toggleButtonProps: { label: 'Toggle' },
-        ...propsOverride,
-    };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<SideNavigationItem {...props} />);
-
+const setup = (propsOverride: Partial<SideNavigationItemProps> = {}) => {
+    const props = { label: 'Label', toggleButtonProps, ...propsOverride };
+    render(<SideNavigationItem {...props} />);
+    const sideNavigation = getAllByClassName(document.body, CLASSNAME)[0];
     return {
-        chevron: wrapper.find(`.${CLASSNAME}__chevron`),
-        children: wrapper.find(`.${CLASSNAME}__children`),
-        icon: wrapper.find(`.${CLASSNAME}__icon`),
-        label: wrapper.find(`.${CLASSNAME}__link span`),
-        link: wrapper.find(`.${CLASSNAME}__link`),
+        chevron: queryAllByClassName(sideNavigation, `${CLASSNAME}__chevron`)[0] || null,
+        toggle: queryAllByClassName(sideNavigation, `${CLASSNAME}__toggle`)[0] || null,
+        children: queryAllByClassName(sideNavigation, `${CLASSNAME}__children`)[0] || null,
+        icon: queryAllByClassName(sideNavigation, `${CLASSNAME}__icon`)[0],
+        label: queryAllByClassName(sideNavigation, `${CLASSNAME}__link span`)[0],
+        link: queryAllByClassName(sideNavigation, `${CLASSNAME}__link`)[0],
         props,
-        root: wrapper.find(`.${CLASSNAME}`),
-        wrapper,
+        sideNavigation,
     };
 };
 
 describe(`<${SideNavigationItem.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        // Here is an example of a basic rendering check, with snapshot.
-
-        it('should render correctly', () => {
-            const { root, wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
+    it('should render default', () => {
+        const label = 'Side navigation item';
+        const { sideNavigation, link } = setup({ label });
+        expect(sideNavigation).toBeInTheDocument();
+        expect(sideNavigation).toBe(screen.queryByRole('listitem'));
 
-            expect(root).toExist();
-            expect(root).toHaveClassName(CLASSNAME);
-        });
-
-        it('should render correctly with split actions', () => {
-            const { root, wrapper } = setup({ linkProps: { href: 'http://toto.com' }, onClick: () => null });
-            expect(wrapper).toMatchSnapshot();
-
-            expect(root).toExist();
-            expect(root).toHaveClassName(CLASSNAME);
-        });
-
-        it('should unmount children by default when closed', () => {
-            const { children } = setup({
-                children: <SideNavigationItem label="Child 1" toggleButtonProps={{ label: 'Toggle' }} />,
-            });
-            expect(children).not.toExist();
-        });
-
-        it('should keep children in DOM when closed and with closeMode="hide"', () => {
-            const { children } = setup({
-                closeMode: 'hide',
-                children: <SideNavigationItem key="1" label="Child 1" toggleButtonProps={{ label: 'Toggle' }} />,
-            });
-            expect(children).toExist();
-        });
+        expect(link).toBeInTheDocument();
     });
 
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        // Here are some examples of basic props check.
-
-        it('should use default props', () => {
-            const { root } = setup();
-
-            const propNames = without(Object.keys(DEFAULT_PROPS), 'closeMode');
-            for (const prop of propNames) {
-                const className = getBasicClass({ prefix: CLASSNAME, type: prop, value: DEFAULT_PROPS[prop] });
-                if (className) {
-                    expect(root).toHaveClassName(className);
-                }
-            }
-        });
+    it('should render a link', () => {
+        const label = 'Side navigation item';
+        const { props, link } = setup({ linkProps: { href: 'https://example.com' }, label });
+        expect(link).toBe(screen.queryByRole('link', { name: label }));
+        expect(link).toHaveAttribute('href', props.linkProps?.href);
     });
 
-    // 3. Test events.
-    describe('Events', () => {
-        const onClick: jest.Mock = jest.fn();
-
-        beforeEach(onClick.mockClear);
-
-        it('should trigger `onClick`', () => {
-            const { link } = setup({ onClick }, false);
-            link.simulate('click');
-            expect(onClick).toHaveBeenCalled();
-        });
-    });
-
-    // 4. Test conditions (i.e. things that display or not in the UI based on props).
-    describe('Conditions', () => {
-        // Here is an example of children types check.
-
-        const items = [
-            <SideNavigationItem key="a" label="a" toggleButtonProps={{ label: 'Toggle' }} />,
-            <SideNavigationItem key="b" label="b" toggleButtonProps={{ label: 'Toggle' }} />,
-        ];
-
-        it('should hide chevron when no children are passed', () => {
-            const { chevron } = setup({
-                children: [],
-            });
-
-            expect(chevron).not.toExist();
-        });
-
-        it('should show chevron when children are passed', () => {
-            const { chevron } = setup({
-                children: items,
-            });
-
-            expect(chevron).toExist();
-        });
-
-        it('should hide children when children are passed and isOpen is false', () => {
-            const { children } = setup({
-                children: items,
-                isOpen: false,
+    describe('children', () => {
+        it('should render with children closed', () => {
+            const label = 'Side navigation item';
+            const { chevron, link, children } = setup({
+                label,
+                children: [
+                    <SideNavigationItem key="1" label="Child 1" toggleButtonProps={toggleButtonProps} />,
+                    <SideNavigationItem key="3" label="Child 2" toggleButtonProps={toggleButtonProps} />,
+                ],
             });
-
-            expect(children).not.toExist();
+            expect(link).toHaveTextContent(label);
+            expect(chevron).toBeInTheDocument();
+            expect(children).not.toBeInTheDocument();
         });
 
-        it('should show children when children are passed and isOpen is true', () => {
-            const { children } = setup({
-                children: items,
+        it('should render with children opened', () => {
+            const label = 'Side navigation item';
+            const { chevron, link, children } = setup({
+                label,
                 isOpen: true,
+                children: [
+                    <SideNavigationItem key="1" label="Child 1" toggleButtonProps={toggleButtonProps} />,
+                    <SideNavigationItem key="3" label="Child 2" toggleButtonProps={toggleButtonProps} />,
+                ],
             });
-
-            expect(children).toExist();
+            expect(link).toHaveTextContent(label);
+            expect(chevron).toBeInTheDocument();
+            expect(children).toBeInTheDocument();
         });
+    });
 
-        it('should show icon when provided', () => {
-            const { icon } = setup({
-                icon: mdiAccount,
+    describe('children and link', () => {
+        it('should render with children and link', () => {
+            const label = 'Side navigation item';
+            const { props, toggle, link } = setup({
+                label,
+                linkProps: { href: 'https://example.com' },
+                children: [
+                    <SideNavigationItem key="1" label="Child 1" toggleButtonProps={toggleButtonProps} />,
+                    <SideNavigationItem key="3" label="Child 2" toggleButtonProps={toggleButtonProps} />,
+                ],
             });
 
-            expect(icon).toExist();
-        });
-
-        it('should add props to link when provided', () => {
-            const { link } = setup({
-                linkProps: {
-                    href: '/',
-                },
-            });
+            // Link
+            expect(link).toBe(screen.queryByRole('link', { name: label }));
+            expect(link).toHaveAttribute('href', props.linkProps?.href);
 
-            expect(link.prop('href')).toEqual('/');
+            // Toggle button
+            expect(toggle).toBe(screen.queryByRole('button', { name: toggleButtonProps.label }));
         });
     });
 
-    // 5. Test state => no state
-
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'root', prop: 'root' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'sideNavigation',
+        forwardAttributes: 'sideNavigation',
+        forwardRef: 'sideNavigation',
+    });
 });

package/src/components/switch/Switch.test.tsx

@@ -1,18 +1,12 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { build, oneOf } from 'test-data-bot';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render } from '@testing-library/react';
+import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import userEvent from '@testing-library/user-event/';
 
-import without from 'lodash/without';
-
-import { Wrapper, commonTestsSuite } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils/className';
-
-import { Theme, Alignment } from '@lumx/react';
 import { Switch, SwitchProps } from './Switch';
 
-const DEFAULT_PROPS = Switch.defaultProps as any;
 const CLASSNAME = Switch.className as string;
 
 type SetupProps = Partial<SwitchProps>;
@@ -20,170 +14,97 @@ type SetupProps = Partial<SwitchProps>;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
-    const props: SwitchProps = {
-        ...propsOverride,
-    };
-
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-
-    const wrapper: Wrapper = renderer(<Switch {...props} />);
-
-    return {
-        root: wrapper.find('div').first(),
-
-        input: wrapper.find('input'),
-        inputWrapper: wrapper.find(`.${CLASSNAME}__input-wrapper`),
-
-        content: wrapper.find(`.${CLASSNAME}__content`),
-        helper: wrapper.find(`.${CLASSNAME}__helper`),
-        label: wrapper.find(`.${CLASSNAME}__label`),
-
-        props,
-        wrapper,
-    };
+const setup = (propsOverride: SetupProps = {}) => {
+    const props = { ...propsOverride };
+    render(<Switch {...props} />);
+    const switchWrapper = getByClassName(document.body, CLASSNAME);
+    const input = getByTagName(switchWrapper, 'input');
+    const helper = queryByClassName(switchWrapper, `${CLASSNAME}__helper`);
+    const label = queryByClassName(switchWrapper, `${CLASSNAME}__label`);
+    return { switchWrapper, input, helper, label, props };
 };
 
 jest.mock('uid', () => ({ uid: () => 'uid' }));
 
 describe(`<${Switch.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render correctly without any label', () => {
-            const { root, inputWrapper, input, content, wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-
-            expect(root).toExist();
-            expect(root).toHaveClassName(CLASSNAME);
-
-            expect(inputWrapper).toExist();
-            expect(input).toExist();
-
-            expect(content).not.toExist();
-        });
-
-        it('should render correctly with only a `label`', () => {
-            const props: SetupProps = { children: 'Label' };
-            const { root, inputWrapper, input, content, helper, label, wrapper } = setup(props);
-            expect(wrapper).toMatchSnapshot();
-
-            expect(root).toExist();
-            expect(root).toHaveClassName(CLASSNAME);
-
-            expect(inputWrapper).toExist();
-            expect(input).toExist();
-
-            expect(content).toExist();
-            expect(label).toExist();
-            expect(helper).not.toExist();
-        });
-
-        it('should render correctly with a `label` and a `helper`', () => {
-            const props: SetupProps = { children: 'Label', helper: 'Helper' };
-            const { root, inputWrapper, input, content, helper, label, wrapper } = setup(props);
-            expect(wrapper).toMatchSnapshot();
-
-            expect(root).toExist();
-            expect(root).toHaveClassName(CLASSNAME);
-
-            expect(inputWrapper).toExist();
-            expect(input).toExist();
-
-            expect(content).toExist();
-            expect(label).toExist();
-            expect(helper).toExist();
-        });
-    });
-
-    // 2. Test defaultProps value and important props custom values.
     describe('Props', () => {
-        it('should use default props', () => {
-            const { root } = setup();
-
-            Object.keys(DEFAULT_PROPS).forEach((prop: string) => {
-                let defaultProp: any = DEFAULT_PROPS[prop];
-
-                if (prop === 'checked') {
-                    // eslint-disable-next-line no-param-reassign
-                    prop = 'unchecked';
-                    defaultProp = true;
-                }
-
-                expect(root).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: prop, value: defaultProp }));
-            });
+        it('should render correctly', () => {
+            const { switchWrapper, input, label, helper } = setup();
+            expect(switchWrapper).toBeInTheDocument();
+            expect(switchWrapper).toHaveClass(CLASSNAME);
+            expect(switchWrapper).not.toHaveClass('lumx-switch--is-disabled');
+            expect(switchWrapper).toHaveClass('lumx-switch--is-unchecked');
+
+            expect(label).not.toBeInTheDocument();
+            expect(helper).not.toBeInTheDocument();
+
+            expect(input).toBeInTheDocument();
+            expect(input).toHaveAttribute('role', 'switch');
+            expect(input).not.toBeChecked();
+            expect(input).not.toBeDisabled();
         });
 
-        it('should use the given props', () => {
-            const modifiedPropsBuilder: () => SetupProps = build('props').fields({
+        it('should render disabled and checked', () => {
+            const { switchWrapper, input } = setup({
+                isDisabled: true,
                 isChecked: true,
-                position: oneOf(...without(Object.values(Alignment), DEFAULT_PROPS.position)),
-                theme: oneOf(...without(Object.values(Theme), DEFAULT_PROPS.theme)),
             });
+            expect(switchWrapper).toHaveClass('lumx-switch--is-disabled');
+            expect(switchWrapper).toHaveClass('lumx-switch--is-checked');
 
-            const modifiedProps: SetupProps = modifiedPropsBuilder();
-
-            const { root } = setup({ ...modifiedProps });
-
-            Object.keys(modifiedProps).forEach((prop: string) => {
-                if (prop === 'checked') {
-                    if (modifiedProps[prop]) {
-                        expect(root).toHaveClassName(
-                            getBasicClass({ prefix: CLASSNAME, type: prop, value: modifiedProps[prop] }),
-                        );
-                    } else {
-                        expect(root).toHaveClassName(
-                            getBasicClass({ prefix: CLASSNAME, type: 'unchecked', value: true }),
-                        );
-                    }
-                } else {
-                    expect(root).toHaveClassName(
-                        getBasicClass({ prefix: CLASSNAME, type: prop, value: modifiedProps[prop] }),
-                    );
-                }
-            });
+            expect(input).toBeChecked();
+            expect(input).toBeDisabled();
         });
 
-        it('should use the given props while passing custom props to input', () => {
-            const { wrapper } = setup({
-                inputProps: {
-                    'aria-labelledby': 'labelledby-id',
-                },
+        it('should render helper and label', () => {
+            const id = 'switchWrapper1';
+            const { props, helper, label, input } = setup({
+                id,
+                helper: 'Test helper',
+                children: 'Test label',
             });
 
-            expect(wrapper).toMatchSnapshot();
-        });
-    });
+            expect(helper).toBeInTheDocument();
+            expect(helper).toHaveTextContent(props.helper as string);
+            expect(helper).toHaveAttribute('id');
 
-    // 3. Test events.
-    describe('Events', () => {
-        const onChange: jest.Mock = jest.fn();
+            expect(label).toBeInTheDocument();
+            expect(label).toHaveTextContent(props.children);
+            expect(label).toHaveAttribute('for', id);
 
-        beforeEach(() => {
-            onChange.mockClear();
+            expect(input).toHaveAttribute('id', id);
+            expect(input).toHaveAttribute('aria-describedby', helper?.id);
         });
 
-        it('should trigger `onChange` when toggled', () => {
-            const { input } = setup({ onChange }, false);
+        it('should forward input props', () => {
+            const { props, input } = setup({
+                inputProps: { 'aria-labelledby': 'labelledby-id' },
+            });
 
-            input.simulate('change');
-            expect(onChange).toHaveBeenCalled();
+            expect(input).toHaveAttribute('aria-labelledby', props.inputProps?.['aria-labelledby']);
         });
     });
 
-    // 4. Test conditions (i.e. things that display or not in the UI based on props).
-    describe('Conditions', () => {
-        it('should not display the `helper` if no `label` is given', () => {
-            const props: SetupProps = { helper: 'Helper' };
-            const { content, wrapper } = setup(props);
-            expect(wrapper).toMatchSnapshot();
+    describe('Events', () => {
+        const onChange = jest.fn();
 
-            expect(content).not.toExist();
+        it('should trigger `onChange` when switchWrapper is clicked', async () => {
+            const value = 'value';
+            const name = 'name';
+            const { input } = setup({ checked: false, onChange, value, name });
+            expect(input).not.toBeChecked();
+
+            await userEvent.click(input);
+
+            expect(onChange).toHaveBeenCalledWith(true, value, name, expect.any(Object));
         });
     });
 
-    // 5. Test state.
-    // N/A
-
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'root', prop: 'root' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'switchWrapper',
+        forwardAttributes: 'switchWrapper',
+        forwardRef: 'switchWrapper',
+    });
 });

package/src/components/table/Table.test.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
+
 import { Table, TableProps } from './Table';
 
 const CLASSNAME = Table.className as string;
@@ -19,5 +20,6 @@ describe(`<${Table.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'table',
         forwardAttributes: 'table',
+        forwardRef: 'table',
     });
 });

package/src/components/table/TableBody.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite } from '@lumx/react/testing/utils';
+
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render } from '@testing-library/react';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
 
 import { TableBody, TableBodyProps } from './TableBody';
 
@@ -10,13 +11,22 @@ const CLASSNAME = TableBody.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (props: Partial<TableBodyProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<TableBody {...(props as any)} />);
-    return { props, wrapper };
+const setup = (props: Partial<TableBodyProps> = {}) => {
+    render(
+        <table>
+            <TableBody {...(props as any)} />
+        </table>,
+    );
+    const tableBody = queryByClassName(document.body, CLASSNAME);
+    return { props, tableBody };
 };
 
 describe(`<${TableBody.displayName}>`, () => {
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'tableBody',
+        forwardAttributes: 'tableBody',
+        forwardRef: 'tableBody',
+    });
 });

package/src/components/table/TableCell.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite } from '@lumx/react/testing/utils';
+
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
+import { render, screen } from '@testing-library/react';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 
 import { TableCell, TableCellProps } from './TableCell';
 
@@ -10,14 +11,38 @@ const CLASSNAME = TableCell.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (props: Partial<TableCellProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<TableCell {...(props as any)} />);
-    const cell = wrapper.find(`.${CLASSNAME}`);
-    return { props, wrapper, cell };
+const setup = (props: Partial<TableCellProps> = {}) => {
+    const Parent = props?.variant === 'head' ? 'thead' : 'tbody';
+    render(
+        <table>
+            <Parent>
+                <tr>
+                    <TableCell {...(props as any)} />
+                </tr>
+            </Parent>
+        </table>,
+    );
+    const tableCell = queryByClassName(document.body, CLASSNAME);
+    return { props, tableCell };
 };
 
 describe(`<${TableCell.displayName}>`, () => {
+    it('should render default', () => {
+        const content = 'Content';
+        const { tableCell } = setup({ children: content });
+        expect(tableCell).toBe(screen.queryByRole('cell', { name: content }));
+    });
+
+    it('should render header variant', () => {
+        const content = 'Content';
+        const { tableCell } = setup({ children: content, variant: 'head' });
+        expect(tableCell).toBe(screen.queryByRole('columnheader', { name: content }));
+    });
+
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'cell', prop: 'cell' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'tableCell',
+        forwardAttributes: 'tableCell',
+    });
 });

package/src/components/table/TableHeader.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite } from '@lumx/react/testing/utils';
+
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render } from '@testing-library/react';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
 
 import { TableHeader, TableHeaderProps } from './TableHeader';
 
@@ -10,13 +11,22 @@ const CLASSNAME = TableHeader.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (props: Partial<TableHeaderProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<TableHeader {...(props as any)} />);
-    return { props, wrapper };
+const setup = (props: TableHeaderProps = {}) => {
+    render(
+        <table>
+            <TableHeader {...props} />
+        </table>,
+    );
+    const tableHeader = queryByClassName(document.body, CLASSNAME);
+    return { props, tableHeader };
 };
 
 describe(`<${TableHeader.displayName}>`, () => {
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'tableHeader',
+        forwardAttributes: 'tableHeader',
+        forwardRef: 'tableHeader',
+    });
 });