diff --git a/webpack/assets/javascripts/react_app/components/common/table/components/DeleteButton.js b/webpack/assets/javascripts/react_app/components/common/table/components/DeleteButton.js
index 7e2623e3dff..45f51a65fa6 100644
--- a/webpack/assets/javascripts/react_app/components/common/table/components/DeleteButton.js
+++ b/webpack/assets/javascripts/react_app/components/common/table/components/DeleteButton.js
@@ -1,11 +1,12 @@
+import uuidV1 from 'uuid/v1';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'patternfly-react';
+import { Button } from '@patternfly/react-core';
 import { translate as __ } from '../../../../common/I18n';
 
 const DeleteButton = ({ active, onClick }) =>
   active ? (
-    <Button bsStyle="default" onClick={onClick}>
+    <Button ouiaId={`table-delete-button-${uuidV1()}`} variant="secondary" onClick={onClick}>
       {__('Delete')}
     </Button>
   ) : null;
diff --git a/webpack/assets/javascripts/react_app/components/common/table/components/__tests__/DeleteButton.test.js b/webpack/assets/javascripts/react_app/components/common/table/components/__tests__/DeleteButton.test.js
index 74f77175333..3bbce228cd4 100644
--- a/webpack/assets/javascripts/react_app/components/common/table/components/__tests__/DeleteButton.test.js
+++ b/webpack/assets/javascripts/react_app/components/common/table/components/__tests__/DeleteButton.test.js
@@ -1,4 +1,7 @@
-import { testComponentSnapshotsWithFixtures } from 'foremanReact/common/testHelpers';
+import React from 'react';
+import { screen, fireEvent, render, act } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
 import DeleteButton from '../DeleteButton';
 
 const baseProps = {
@@ -9,13 +12,49 @@ const baseProps = {
 };
 
 const fixtures = {
-  'should render delete button on active': {
+  active: {
     active: true,
     ...baseProps,
   },
-  'should render nothing on inactive': baseProps,
+  inactive: baseProps,
 };
 
 describe('DeleteButton', () => {
-  testComponentSnapshotsWithFixtures(DeleteButton, fixtures);
+  describe('when active', () => {
+    const props = { ...fixtures.active };
+
+    it('should render delete button', () => {
+      render(<DeleteButton {...props} />);
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i });
+      expect(deleteButton).toBeInTheDocument();
+    });
+
+    it('should have correct button text', () => {
+      render(<DeleteButton {...props} />);
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i });
+      expect(deleteButton).toHaveTextContent('Delete');
+    });
+
+    it('should have secondary variant style', () => {
+      render(<DeleteButton {...props} />);
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i });
+      expect(deleteButton).toHaveClass('pf-m-secondary');
+    });
+  });
+
+  describe('when inactive', () => {
+    const props = { ...fixtures.inactive };
+
+    it('should not render anything', () => {
+      const { container } = render(<DeleteButton {...props} />);
+
+      const button = screen.queryByRole('button', { name: /delete/i });
+      expect(button).not.toBeInTheDocument();
+
+      expect(container.firstChild).toBeNull();
+    });
+  });
 });
diff --git a/webpack/assets/javascripts/react_app/components/common/table/components/__tests__/__snapshots__/DeleteButton.test.js.snap b/webpack/assets/javascripts/react_app/components/common/table/components/__tests__/__snapshots__/DeleteButton.test.js.snap
deleted file mode 100644
index be9457381a3..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/table/components/__tests__/__snapshots__/DeleteButton.test.js.snap
+++ /dev/null
@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DeleteButton should render delete button on active 1`] = `
-<Button
-  active={false}
-  block={false}
-  bsClass="btn"
-  bsStyle="default"
-  disabled={false}
-  onClick={[Function]}
->
-  Delete
-</Button>
-`;
-
-exports[`DeleteButton should render nothing on inactive 1`] = `""`;