test(component): refactor Alert component tests

bigcommerce · Nov 15, 2021 · 265d337 · 265d337
1 parent 3c9ac79
commit 265d337
Showing 1 changed file with 13 additions and 13 deletions.
diff --git a/packages/big-design/src/components/Alert/spec.tsx b/packages/big-design/src/components/Alert/spec.tsx
@@ -1,4 +1,5 @@
 import { theme } from '@bigcommerce/big-design-theme';
+import { screen } from '@testing-library/react';
 import React from 'react';
 import 'jest-styled-components';
 
@@ -35,26 +36,24 @@ test('render info Alert', () => {
 });
 
 test('renders with link', () => {
-  const { queryByRole, container } = render(
-    <Alert messages={[{ text: 'Success', link: { text: 'Link', href: '#' } }]} />,
-  );
+  const { container } = render(<Alert messages={[{ text: 'Success', link: { text: 'Link', href: '#' } }]} />);
 
   expect(container.firstChild).toMatchSnapshot();
 
-  const link = queryByRole('link') as HTMLAnchorElement;
+  const link = screen.getByRole('link') as HTMLAnchorElement;
 
   expect(link).toBeInTheDocument();
   expect(link.href).toBe('http://localhost/#');
 });
 
 test('renders with external link', () => {
-  const { queryByRole, container } = render(
+  const { container } = render(
     <Alert messages={[{ text: 'Success', link: { text: 'Link', href: '#', external: true, target: '_blank' } }]} />,
   );
 
   expect(container.firstChild).toMatchSnapshot();
 
-  const link = queryByRole('link') as HTMLAnchorElement;
+  const link = screen.getByRole('link') as HTMLAnchorElement;
 
   expect(link).toBeInTheDocument();
   expect(link.href).toBe('http://localhost/#');
@@ -63,24 +62,24 @@ test('renders with external link', () => {
 });
 
 test('renders header', () => {
-  const { queryByText, container } = render(<Alert header="Header" messages={[{ text: 'Success' }]} />);
+  const { container } = render(<Alert header="Header" messages={[{ text: 'Success' }]} />);
 
   expect(container.firstChild).toMatchSnapshot();
-  expect(queryByText('Header')).not.toBeUndefined();
+  expect(screen.getByRole('heading', { name: /header/i })).not.toBeUndefined();
 });
 
 test('renders close button', () => {
-  const { queryByRole, container } = render(<Alert onClose={() => null} messages={[{ text: 'Success' }]} />);
+  const { container } = render(<Alert onClose={() => null} messages={[{ text: 'Success' }]} />);
 
   expect(container.firstChild).toMatchSnapshot();
-  expect(queryByRole('button')).not.toBeUndefined();
+  expect(screen.getByRole('button')).not.toBeUndefined();
 });
 
 test('trigger onClose', () => {
   const fn = jest.fn();
-  const { queryByRole } = render(<Alert onClose={fn} messages={[{ text: 'Success' }]} />);
+  render(<Alert onClose={fn} messages={[{ text: 'Success' }]} />);
 
-  const button = queryByRole('button') as HTMLButtonElement;
+  const button = screen.getByRole('button') as HTMLButtonElement;
 
   fireEvent.click(button);
 
@@ -91,7 +90,8 @@ test('does not forward styles', () => {
   const { container } = render(
     <Alert messages={[{ text: 'Success' }]} className="test" style={{ background: 'red' }} />,
   );
+  const elem = screen.queryByText('Success');
 
-  expect(container.getElementsByClassName('test').length).toBe(0);
+  expect(elem).not.toHaveClass('test');
   expect(container.firstChild).not.toHaveStyle('background: red');
 });