Remove ButtonGroup snapshot testing

src/ButtonGroup/ButtonGroup.test.js

 import React from 'react';
-import renderer from 'react-test-renderer';
-import { SheetsRegistry } from 'react-jss';
+import { render } from '@testing-library/react';
 
+import { createTheme } from '../styles';
 import wrapToTest from '../utils/wrapToTest';
 
+import Button from '../Button';
 import ButtonGroup from './ButtonGroup';
-import Button from './../Button';
+import IconButton from '../IconButton';
 
 describe('<ButtonGroup />', () => {
-  let componentToTest;
-  let sheets;
-  let theme;
-
-  beforeEach(() => {
-    componentToTest = null;
-    sheets = null;
-    theme = null;
-  });
-
-  afterEach(() => {
-    if (componentToTest !== null) {
-      const options = {
-        ...(sheets !== null ? { sheets } : {}),
-        ...(theme !== null ? { theme } : {})
+  describe('color prop', () => {
+    it('must set the background color of buttons if they do not override', () => {
+      const palette = {
+        success: 'green',
+        danger: 'red'
       };
 
-      const component = renderer.create(wrapToTest(options)(componentToTest));
-
-      expect(component.toJSON()).toMatchSnapshot();
-      if (sheets !== null) {
-        expect(sheets.toString()).toMatchSnapshot();
-      }
-    }
-  });
-
-  test('Render with children', () => {
-    componentToTest = (
-      <ButtonGroup>
-        <Button>Hello</Button>
-        <Button>
-          <strong>you</strong>
-        </Button>
-      </ButtonGroup>
-    );
-    sheets = new SheetsRegistry();
+      const { getAllByText } = render(
+        wrapToTest({
+          theme: createTheme({ colors: { palette } })
+        })(
+          <ButtonGroup color='success'>
+            <Button>success</Button>
+            <Button>success</Button>
+            <Button color='danger'>danger</Button>
+            <Button>success</Button>
+          </ButtonGroup>
+        )
+      );
+
+      getAllByText(/success/).forEach(element => {
+        expect(element).toHaveStyle(`background-color: ${palette.success};`);
+      });
+      getAllByText(/danger/).forEach(element => {
+        expect(element).toHaveStyle(`background-color: ${palette.danger};`);
+      });
+    });
   });
 
-  test('Should include className and other props', () => {
-    componentToTest = (
-      <ButtonGroup className={'my-custom-classname'} customProp={'fez'}>
-        <Button>Hello</Button>
-        <Button>
-          <strong>you</strong>
-        </Button>
-      </ButtonGroup>
-    );
+  describe('pill prop', () => {
+    it('must round buttons and icon buttons', () => {
+      const Icon = () => 'icon';
+
+      const { getByText } = render(
+        wrapToTest()(
+          <ButtonGroup pill>
+            <Button>button</Button>
+            <IconButton>
+              <Icon />
+            </IconButton>
+          </ButtonGroup>
+        )
+      );
+
+      expect(getByText(/button/)).toHaveStyle(`border-radius: 100rem`);
+      expect(getByText(/icon/)).toHaveStyle(`border-radius: 100rem`);
+    });
   });
 });