refactor(react): update table primitive tests

packages/react/src/components/DataTable/__tests__/TableBody-test.js

@@ -5,17 +5,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import { Table, TableBody } from '../';
 
-describe('DataTable.TableBody', () => {
-  it('should render', () => {
-    const wrapper = mount(
-      <Table>
+describe('TableBody', () => {
+  it('should support a custom className on the outermost element', () => {
+    render(
+      <Table data-testid="table">
         <TableBody className="custom-class" />
       </Table>
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByTestId('table').firstChild).toHaveClass('custom-class');
+  });
+
+  it('should spread props onto the outermost element', () => {
+    render(
+      <Table data-testid="table">
+        <TableBody data-testid="test" />
+      </Table>
+    );
+    expect(screen.getByTestId('table').firstChild).toHaveAttribute(
+      'data-testid',
+      'test'
+    );
   });
 });

packages/react/src/components/DataTable/__tests__/TableCell-test.js

@@ -5,21 +5,37 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import { Table, TableBody, TableRow, TableCell } from '../';
 
-describe('DataTable.TableCell', () => {
-  it('should render', () => {
-    const wrapper = mount(
+describe('TableCell', () => {
+  it('should support a custom className on the outermost element', () => {
+    render(
       <Table>
         <TableBody>
-          <TableRow>
+          <TableRow data-testid="tr">
             <TableCell className="custom-class" />
           </TableRow>
         </TableBody>
       </Table>
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByTestId('tr').firstChild).toHaveClass('custom-class');
+  });
+
+  it('should spread props onto the outermost element', () => {
+    render(
+      <Table>
+        <TableBody>
+          <TableRow data-testid="tr">
+            <TableCell data-testid="test" />
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+    expect(screen.getByTestId('tr').firstChild).toHaveAttribute(
+      'data-testid',
+      'test'
+    );
   });
 });

packages/react/src/components/DataTable/__tests__/TableHead-test.js

@@ -5,17 +5,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import { Table, TableHead } from '../';
 
-describe('DataTable.TableHead', () => {
-  it('should render', () => {
-    const wrapper = mount(
-      <Table>
+describe('TableHead', () => {
+  it('should support a custom className on the outermost element', () => {
+    render(
+      <Table data-testid="table">
         <TableHead className="custom-class" />
       </Table>
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByTestId('table').firstChild).toHaveClass('custom-class');
+  });
+
+  it('should spread props onto the outermost element', () => {
+    render(
+      <Table data-testid="table">
+        <TableHead data-testid="test" />
+      </Table>
+    );
+    expect(screen.getByTestId('table').firstChild).toHaveAttribute(
+      'data-testid',
+      'test'
+    );
   });
 });

packages/react/src/components/DataTable/__tests__/TableRow-test.js

@@ -5,19 +5,33 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import { Table, TableBody, TableRow } from '../';
 
-describe('DataTable.TableRow', () => {
-  it('should render', () => {
-    const wrapper = mount(
+describe('TableRow', () => {
+  it('should support a custom className on the outermost element', () => {
+    render(
       <Table>
-        <TableBody>
+        <TableBody data-testid="tbody">
           <TableRow className="custom-class" />
         </TableBody>
       </Table>
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByTestId('tbody').firstChild).toHaveClass('custom-class');
+  });
+
+  it('should spread props onto the outermost element', () => {
+    render(
+      <Table>
+        <TableBody data-testid="tbody">
+          <TableRow data-testid="test" />
+        </TableBody>
+      </Table>
+    );
+    expect(screen.getByTestId('tbody').firstChild).toHaveAttribute(
+      'data-testid',
+      'test'
+    );
   });
 });