From e3039502a21b4a82272b71e5e37bc459c9de9634 Mon Sep 17 00:00:00 2001
From: "alex.saiannyi" <alexander.saiannyi@bigcommerce.com>
Date: Mon, 22 Nov 2021 19:25:43 +0200
Subject: [PATCH] test(component): refactor Chip component tests

---
 .../big-design/src/components/Chip/spec.tsx   | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/big-design/src/components/Chip/spec.tsx b/packages/big-design/src/components/Chip/spec.tsx
index 10f44266f..ec44c7bc5 100644
--- a/packages/big-design/src/components/Chip/spec.tsx
+++ b/packages/big-design/src/components/Chip/spec.tsx
@@ -1,3 +1,4 @@
+import { screen } from '@testing-library/react';
 import React from 'react';
 import 'jest-styled-components';
 
@@ -7,38 +8,40 @@ 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.queryByText(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.queryByText(/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.queryByRole('button')).toBeInTheDocument();
+  expect(screen.queryByText(/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'));
+  fireEvent.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.queryByText(/test/i)?.parentElement;
 
-  expect(chip).toHaveStyle('margin: 1.25rem');
+  expect(chipParent).toHaveStyle('margin: 1.25rem');
 });