test(component): refactor Chip component tests (#653)

packages/big-design/src/components/Chip/spec.tsx

@@ -1,44 +1,48 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import 'jest-styled-components';
 
-import { fireEvent, render } from '@test/utils';
+import { render } from '@test/utils';
 
 import { Chip } from './index';
 
 test('renders the label', () => {
   const label = 'Test';
-  const { queryByText } = render(<Chip label={label} />);
 
-  expect(queryByText(label)).toBeInTheDocument();
+  render(<Chip label={label} />);
+
+  expect(screen.getByText(label)).toBeInTheDocument();
 });
 
 test('renders without close button', () => {
-  const { container, queryByRole } = render(<Chip label="Test" />);
+  render(<Chip label="Test" />);
 
-  expect(queryByRole('button')).not.toBeInTheDocument();
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  expect(screen.getByText(/test/i).parentElement).toMatchSnapshot();
 });
 
 test('renders with close button if onRemove is present', () => {
-  const { container, queryByRole } = render(<Chip label="Test" onDelete={jest.fn()} />);
+  render(<Chip label="Test" onDelete={jest.fn()} />);
 
-  expect(queryByRole('button')).toBeInTheDocument();
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.getByRole('button')).toBeInTheDocument();
+  expect(screen.getByText(/test/i).parentElement).toMatchSnapshot();
 });
 
 test('onDelete is called when close button is clicked', () => {
   const onDelete = jest.fn();
 
-  const { getByRole } = render(<Chip label="Test" onDelete={onDelete} />);
+  render(<Chip label="Test" onDelete={onDelete} />);
 
-  fireEvent.click(getByRole('button'));
+  userEvent.click(screen.getByRole('button'));
 
   expect(onDelete).toHaveBeenCalled();
 });
 
 test('accepts custom margin props', () => {
-  const { container } = render(<Chip label="Test" margin="large" onDelete={jest.fn()} />);
-  const chip = container.firstChild;
+  render(<Chip label="Test" margin="large" onDelete={jest.fn()} />);
+
+  const chipParent = screen.getByText(/test/i).parentElement;
 
-  expect(chip).toHaveStyle('margin: 1.25rem');
+  expect(chipParent).toHaveStyle('margin: 1.25rem');
 });