Improves ButtonGroup tests (#13273)

superset-frontend/src/components/ButtonGroup/ButtonGroup.test.tsx

@@ -18,33 +18,38 @@
  */
 
 import React from 'react';
-import { ReactWrapper } from 'enzyme';
-import { styledMount as mount } from 'spec/helpers/theming';
+import { render, screen } from 'spec/helpers/testing-library';
 import Button from 'src/components/Button';
 import ButtonGroup from '.';
 
-describe('ButtonGroup', () => {
-  let wrapper: ReactWrapper;
-
-  it('renders 1 button', () => {
-    expect(
-      React.isValidElement(
-        <ButtonGroup>
-          <Button>Button</Button>
-        </ButtonGroup>,
-      ),
-    ).toBe(true);
-  });
-
-  it('renders 3 buttons', () => {
-    wrapper = mount(
-      <ButtonGroup>
-        <Button>Button</Button>
-        <Button>Button</Button>
-        <Button>Button</Button>
-      </ButtonGroup>,
-    );
-
-    expect(wrapper.find(Button).length).toEqual(3);
-  });
+test('renders 1 button', () => {
+  render(
+    <ButtonGroup>
+      <Button>Button</Button>
+    </ButtonGroup>,
+  );
+  expect(screen.getByRole('group')).toBeInTheDocument();
+});
+
+test('renders 3 buttons', () => {
+  render(
+    <ButtonGroup>
+      <Button>Button</Button>
+      <Button>Button</Button>
+      <Button>Button</Button>
+    </ButtonGroup>,
+  );
+
+  expect(screen.getByRole('group').children.length).toEqual(3);
+});
+
+test('renders with custom class', () => {
+  const customClass = 'custom-class';
+  render(
+    <ButtonGroup className={customClass}>
+      <Button>Button</Button>
+    </ButtonGroup>,
+  );
+
+  expect(screen.getByRole('group')).toHaveClass(customClass);
 });

superset-frontend/src/components/ButtonGroup/index.tsx

@@ -20,13 +20,14 @@ import React from 'react';
 
 export interface ButtonGroupProps {
   className?: string;
-  children?: React.ReactNode;
+  children: React.ReactNode;
 }
 
 export default function ButtonGroup(props: ButtonGroupProps) {
   const { className, children } = props;
   return (
     <div
+      role="group"
       className={className}
       css={{
         '& :nth-child(1):not(:nth-last-child(1))': {