diff --git a/packages/big-design/src/components/Alert/spec.tsx b/packages/big-design/src/components/Alert/spec.tsx
index 69039bd7b..d00d6268e 100644
--- 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';
@@ -6,92 +7,105 @@ import { fireEvent, render } from '@test/utils';
import { Alert } from './Alert';
-test('render default (success) Alert', () => {
- const { container } = render();
+test('render default (success) Alert', async () => {
+ render();
- expect(container.firstChild).toMatchSnapshot();
- expect(container.firstChild).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.success}`);
+ const alert = await screen.findByRole('alert');
+
+ expect(alert).toMatchSnapshot();
+ expect(alert).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.success}`);
});
-test('render error Alert', () => {
- const { container } = render();
+test('render error Alert', async () => {
+ render();
+
+ const alert = await screen.findByRole('alert');
- expect(container.firstChild).toMatchSnapshot();
- expect(container.firstChild).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.danger}`);
+ expect(alert).toMatchSnapshot();
+ expect(alert).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.danger}`);
});
-test('render warning Alert', () => {
- const { container } = render();
+test('render warning Alert', async () => {
+ render();
+
+ const alert = await screen.findByRole('alert');
- expect(container.firstChild).toMatchSnapshot();
- expect(container.firstChild).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.warning50}`);
+ expect(alert).toMatchSnapshot();
+ expect(alert).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.warning50}`);
});
-test('render info Alert', () => {
- const { container } = render();
+test('render info Alert', async () => {
+ render();
- expect(container.firstChild).toMatchSnapshot();
- expect(container.firstChild).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.primary60}`);
-});
+ const alert = await screen.findByRole('alert');
-test('renders with link', () => {
- const { queryByRole, container } = render(
- ,
- );
+ expect(alert).toMatchSnapshot();
+ expect(alert).toHaveStyle(`border-left: ${theme.spacing.xxSmall} solid ${theme.colors.primary60}`);
+});
- expect(container.firstChild).toMatchSnapshot();
+test('renders with link', async () => {
+ render();
- const link = queryByRole('link') as HTMLAnchorElement;
+ const alert = await screen.findByRole('alert');
+ const link = await screen.findByRole('link');
+ expect(alert).toMatchSnapshot();
expect(link).toBeInTheDocument();
expect(link.href).toBe('http://localhost/#');
});
-test('renders with external link', () => {
- const { queryByRole, container } = render(
+test('renders with external link', async () => {
+ render(
,
);
- expect(container.firstChild).toMatchSnapshot();
-
- const link = queryByRole('link') as HTMLAnchorElement;
+ const alert = await screen.findByRole('alert');
+ const link = screen.getByRole('link') as HTMLAnchorElement;
+ expect(alert).toMatchSnapshot();
expect(link).toBeInTheDocument();
expect(link.href).toBe('http://localhost/#');
expect(link.target).toBe('_blank');
expect(link.querySelector('svg')).not.toBeUndefined();
});
-test('renders header', () => {
- const { queryByText, container } = render();
+test('renders header', async () => {
+ render();
- expect(container.firstChild).toMatchSnapshot();
- expect(queryByText('Header')).not.toBeUndefined();
+ const alert = await screen.findByRole('alert');
+ const heading = screen.getByRole('heading', { name: /header/i });
+
+ expect(alert).toMatchSnapshot();
+ expect(heading).not.toBeUndefined();
});
-test('renders close button', () => {
- const { queryByRole, container } = render( null} messages={[{ text: 'Success' }]} />);
+test('renders close button', async () => {
+ render( null} messages={[{ text: 'Success' }]} />);
+
+ const alert = await screen.findByRole('alert');
+ const button = screen.getByRole('button');
- expect(container.firstChild).toMatchSnapshot();
- expect(queryByRole('button')).not.toBeUndefined();
+ expect(alert).toMatchSnapshot();
+ expect(button).not.toBeUndefined();
});
-test('trigger onClose', () => {
+test('trigger onClose', async () => {
const fn = jest.fn();
- const { queryByRole } = render();
+ render();
- const button = queryByRole('button') as HTMLButtonElement;
+ const button = screen.getByRole('button') as HTMLButtonElement;
fireEvent.click(button);
expect(fn).toHaveBeenCalled();
});
-test('does not forward styles', () => {
+test('does not forward styles', async () => {
const { container } = render(
,
);
+ const alert = await screen.findByRole('alert');
- expect(container.getElementsByClassName('test').length).toBe(0);
- expect(container.firstChild).not.toHaveStyle('background: red');
+ expect(container.getElementsByClassName('test')).toHaveLength(0);
+ expect(alert).not.toHaveStyle('background: red');
});