test(component): refactor Box component tests

bigcommerce · Nov 22, 2021 · ef09976 · ef09976
1 parent 3c9ac79
commit ef09976
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 34 deletions.
diff --git a/packages/big-design/src/components/Box/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Box/__snapshots__/spec.tsx.snap
@@ -8,6 +8,7 @@ exports[`has border props 1`] = `
 
 <div
   class="c0"
+  data-testid="box"
 />
 `;
 
@@ -24,6 +25,7 @@ exports[`has clearfix prop 1`] = `
 
 <div
   class="c0"
+  data-testid="box"
 />
 `;
 
@@ -36,6 +38,7 @@ exports[`has individual border props 1`] = `
 
 <div
   class="c0"
+  data-testid="box"
 />
 `;
 
@@ -48,5 +51,6 @@ exports[`has shadow props 1`] = `
 
 <div
   class="c0"
+  data-testid="box"
 />
 `;
diff --git a/packages/big-design/src/components/Box/spec.tsx b/packages/big-design/src/components/Box/spec.tsx
@@ -1,4 +1,5 @@
 import { theme } from '@bigcommerce/big-design-theme';
+import { screen } from '@testing-library/react';
 import React, { createRef } from 'react';
 import 'jest-styled-components';
 
@@ -7,91 +8,89 @@ import { render } from '@test/utils';
 import { Box } from './index';
 
 test('has margin props', () => {
-  const { container, rerender } = render(<Box />);
+  const { rerender } = render(<Box data-testid="box" />);
 
-  expect(container.firstChild).not.toHaveStyle('margin: 1rem');
+  expect(screen.getByTestId('box')).not.toHaveStyle('margin: 1rem');
 
-  rerender(<Box margin="medium" />);
+  rerender(<Box data-testid="box" margin="medium" />);
 
-  expect(container.firstChild).toHaveStyle('margin: 1rem');
+  expect(screen.getByTestId('box')).toHaveStyle('margin: 1rem');
 });
 
 test('has padding props', () => {
-  const { container, rerender } = render(<Box />);
+  const { rerender } = render(<Box data-testid="box" />);
 
-  expect(container.firstChild).not.toHaveStyle('padding: 1rem');
+  expect(screen.getByTestId('box')).not.toHaveStyle('padding: 1rem');
 
-  rerender(<Box padding="medium" />);
+  rerender(<Box data-testid="box" padding="medium" />);
 
-  expect(container.firstChild).toHaveStyle('padding: 1rem');
+  expect(screen.getByTestId('box')).toHaveStyle('padding: 1rem');
 });
 
 test('has backgroundColor props', () => {
-  const { container, rerender } = render(<Box />);
+  const { rerender } = render(<Box data-testid="box" />);
 
-  expect(container.firstChild).not.toHaveStyle('background-color: #fff');
+  expect(screen.getByTestId('box')).not.toHaveStyle('background-color: #fff');
 
-  rerender(<Box backgroundColor="white" />);
+  rerender(<Box data-testid="box" backgroundColor="white" />);
 
-  expect(container.firstChild).toHaveStyle('background-color: #fff');
+  expect(screen.getByTestId('box')).toHaveStyle('background-color: #fff');
 });
 
 test('has borderRadius props', () => {
-  const { container, rerender } = render(<Box />);
+  const { rerender } = render(<Box data-testid="box" />);
 
-  expect(container.firstChild).not.toHaveStyle('border-radius: 50%');
+  expect(screen.getByTestId('box')).not.toHaveStyle('border-radius: 50%');
 
-  rerender(<Box borderRadius="circle" />);
+  rerender(<Box data-testid="box" borderRadius="circle" />);
 
-  expect(container.firstChild).toHaveStyle('border-radius: 50%');
+  expect(screen.getByTestId('box')).toHaveStyle('border-radius: 50%');
 });
 
 test('has border props', () => {
-  const { container } = render(<Box border="box" />);
+  render(<Box data-testid="box" border="box" />);
 
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.getByTestId('box')).toMatchSnapshot();
 });
 
 test('has individual border props', () => {
-  const { container } = render(<Box borderBottom="box" borderRight="box" />);
+  render(<Box data-testid="box" borderBottom="box" borderRight="box" />);
 
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.getByTestId('box')).toMatchSnapshot();
 });
 
 test('has shadow props', () => {
-  const { container } = render(<Box shadow="floating" />);
+  render(<Box data-testid="box" shadow="floating" />);
 
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.getByTestId('box')).toMatchSnapshot();
 });
 
 test('has clearfix prop', () => {
-  const { container } = render(<Box clearfix />);
+  render(<Box data-testid="box" clearfix />);
 
-  expect(container.firstChild).toMatchSnapshot();
+  expect(screen.getByTestId('box')).toMatchSnapshot();
 });
 
 test('has zIndex props', () => {
-  const { container, rerender } = render(<Box zIndex="sticky" />);
+  const { rerender } = render(<Box data-testid="box" zIndex="sticky" />);
 
-  expect(container.firstChild).toHaveStyle(`z-index: ${theme.zIndex.sticky}`);
+  expect(screen.getByTestId('box')).toHaveStyle(`z-index: ${theme.zIndex.sticky}`);
 
-  rerender(<Box zIndex="popover" />);
+  rerender(<Box data-testid="box" zIndex="popover" />);
 
-  expect(container.firstChild).toHaveStyle(`z-index: ${theme.zIndex.popover}`);
+  expect(screen.getByTestId('box')).toHaveStyle(`z-index: ${theme.zIndex.popover}`);
 });
 
 test('renders as a different tag', () => {
-  const { getByTestId } = render(<Box data-testid="box" as="section" />);
-  const tag = getByTestId('box').tagName;
+  render(<Box data-testid="box" as="section" />);
 
-  expect(tag).toBe('SECTION');
+  expect(screen.getByTestId('box').tagName).toBe('SECTION');
 });
 
 test('box forwards ref', () => {
   const ref = createRef<HTMLDivElement>();
 
-  const { container } = render(<Box ref={ref}>Hello</Box>);
-  const div = container.querySelector('div');
+  render(<Box ref={ref}>Hello</Box>);
 
-  expect(div).toBe(ref.current);
+  expect(screen.getByText(/hello/i)).toBe(ref.current);
 });