diff --git a/webpack/assets/javascripts/react_app/components/ConfigReports/DiffModal/DiffModal.js b/webpack/assets/javascripts/react_app/components/ConfigReports/DiffModal/DiffModal.js
index 5784d00990a..e1e04743fea 100644
--- a/webpack/assets/javascripts/react_app/components/ConfigReports/DiffModal/DiffModal.js
+++ b/webpack/assets/javascripts/react_app/components/ConfigReports/DiffModal/DiffModal.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Modal, Button } from 'patternfly-react';
-import { Icon } from '@patternfly/react-core';
+import { Modal } from 'patternfly-react';
+import { Icon, Button } from '@patternfly/react-core';
 import { TimesIcon } from '@patternfly/react-icons';
 import PropTypes from 'prop-types';
 
@@ -24,9 +24,10 @@ const DiffModal = ({
     <Modal.Header>
       <h4 id="diff-modal-h4">{title}</h4>
       <Button
+        ouiaId="diff-modal-close-button"
         className="close diff-modal-close"
         onClick={toggleModal}
-        bsStyle="link"
+        variant="link"
       >
         <Icon>
           <TimesIcon />
diff --git a/webpack/assets/javascripts/react_app/components/ConfigReports/DiffModal/__tests__/DiffModal.test.js b/webpack/assets/javascripts/react_app/components/ConfigReports/DiffModal/__tests__/DiffModal.test.js
index 56e809898fe..1aae849a671 100644
--- a/webpack/assets/javascripts/react_app/components/ConfigReports/DiffModal/__tests__/DiffModal.test.js
+++ b/webpack/assets/javascripts/react_app/components/ConfigReports/DiffModal/__tests__/DiffModal.test.js
@@ -1,33 +1,41 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { screen, fireEvent, render, act } from '@testing-library/react';
+import { configure } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
 import DiffModal from '../DiffModal';
 import { diffModalMock } from '../DiffModal.fixtures';
 
+const toggleModal = jest.fn();
+const changeState = jest.fn();
 const fixtures = {
-  'renders diffModal': diffModalMock,
+  renders: {
+    ...diffModalMock,
+    toggleModal: toggleModal,
+    changeViewType: changeState,
+  },
 };
+configure({ testIdAttribute: 'data-ouia-component-id'})
 
 describe('DiffModal', () => {
-  describe('rendering...', () =>
-    testComponentSnapshotsWithFixtures(DiffModal, fixtures));
+  describe('rendering', () => {
+      it('should render modal with title and close button', () => {
+        render(<DiffModal {...fixtures.renders} />);
+
+        expect(screen.getByText('log1')).toBeInTheDocument();
+        const closeButton = document.querySelector('.diff-modal-close');
+        expect(closeButton).toBeInTheDocument();
+        expect(closeButton).toHaveClass('close', 'diff-modal-close');
+      });
+  });
 
   describe('triggering..', () => {
-    it('should trigger onHide', () => {
-      const toggleModal = jest.fn();
-      const changeState = jest.fn();
-      const component = mount(
-        <DiffModal
-          {...diffModalMock}
-          toggleModal={toggleModal}
-          changeViewType={changeState}
-        />
-      );
-      component
-        .find('.close')
-        .at(0)
-        .simulate('click');
+    it('should trigger onHide', async () => {
+      render(<DiffModal {...fixtures.renders} />);
+      const closeButton = screen.getByTestId('diff-modal-close-button');
+
+      await act(async () => await fireEvent.click(closeButton));
+
       expect(toggleModal).toHaveBeenCalled();
     });
   });
diff --git a/webpack/assets/javascripts/react_app/components/ConfigReports/DiffModal/__tests__/__snapshots__/DiffModal.test.js.snap b/webpack/assets/javascripts/react_app/components/ConfigReports/DiffModal/__tests__/__snapshots__/DiffModal.test.js.snap
deleted file mode 100644
index bf860dfcc43..00000000000
--- a/webpack/assets/javascripts/react_app/components/ConfigReports/DiffModal/__tests__/__snapshots__/DiffModal.test.js.snap
+++ /dev/null
@@ -1,85 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DiffModal rendering... renders diffModal 1`] = `
-<Modal
-  animation={true}
-  autoFocus={true}
-  backdrop={true}
-  bsClass="modal"
-  className="diff-modal"
-  dialogComponentClass={[Function]}
-  enforceFocus={true}
-  keyboard={true}
-  manager={
-    ModalManager {
-      "add": [Function],
-      "containers": Array [],
-      "data": Array [],
-      "handleContainerOverflow": true,
-      "hideSiblingNodes": true,
-      "isTopModal": [Function],
-      "modals": Array [],
-      "remove": [Function],
-    }
-  }
-  onHide={[Function]}
-  renderBackdrop={[Function]}
-  restoreFocus={true}
-  show={true}
->
-  <ModalHeader
-    bsClass="modal-header"
-    closeButton={false}
-    closeLabel="Close"
-  >
-    <h4
-      id="diff-modal-h4"
-    >
-      log1
-    </h4>
-    <Button
-      active={false}
-      block={false}
-      bsClass="btn"
-      bsStyle="link"
-      className="close diff-modal-close"
-      disabled={false}
-      onClick={[Function]}
-    >
-      <Icon>
-        <TimesIcon />
-      </Icon>
-    </Button>
-    <DiffToggle
-      changeState={[Function]}
-      stateView="split"
-    />
-  </ModalHeader>
-  <ModalBody
-    bsClass="modal-body"
-    className="diff-modal-body"
-    componentClass="div"
-  >
-    <div
-      id="diff-table"
-    >
-      <DiffView
-        newText=""
-        oldText=""
-        patch="
---- /etc/issue  2020-04-07 18:01:12.000000000 -0400
-+++ /tmp/puppet-file20210218-2326-z6teom  2021-02-18 09:13:48.965177455 -0500
-@@ -1,3 +1 @@
--S
--Kernel 
- on an m
--
-+fooo
- No newline at end of file
-"
-        viewType="split"
-      />
-    </div>
-  </ModalBody>
-</Modal>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/ForemanModalFooter.js b/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/ForemanModalFooter.js
index 9a7eea25018..e8e05a3ee3a 100644
--- a/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/ForemanModalFooter.js
+++ b/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/ForemanModalFooter.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, Button } from 'patternfly-react';
+import { Modal } from 'patternfly-react';
+import { Button } from '@patternfly/react-core';
 import { useModalContext } from '../ForemanModalHooks';
 import { translate as __ } from '../../../common/I18n';
 
@@ -12,7 +13,7 @@ const ForemanModalFooter = props => {
 
   // Render the provided children, or default markup if none given
   const closeButton = childCount === 0 && (
-    <Button bsStyle="default" onClick={onClose}>
+    <Button ouiaId="close-modal-button" variant="secondary" onClick={onClose}>
       {__('Close')}
     </Button>
   );
diff --git a/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/SubmitOrCancel/CancelBtn.js b/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/SubmitOrCancel/CancelBtn.js
index 36ccd0dfece..c7029605a51 100644
--- a/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/SubmitOrCancel/CancelBtn.js
+++ b/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/SubmitOrCancel/CancelBtn.js
@@ -1,11 +1,17 @@
 import React from 'react';
-import { Button } from 'patternfly-react';
+import { Button } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
 
 import { translate as __ } from '../../../../common/I18n';
 
-const CancelBtn = ({ onCancel, disabled, bsStyle, btnText }) => (
-  <Button bsStyle={bsStyle} onClick={onCancel} disabled={disabled}>
+const CancelBtn = ({ onCancel, disabled, variant, btnText }) => (
+  <Button
+    ouiaId="cancel-button"
+    variant={variant}
+    onClick={onCancel}
+    isDisabled={disabled}
+    isDanger
+  >
     {btnText}
   </Button>
 );
@@ -13,13 +19,13 @@ const CancelBtn = ({ onCancel, disabled, bsStyle, btnText }) => (
 CancelBtn.propTypes = {
   onCancel: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
-  bsStyle: PropTypes.string,
+  variant: PropTypes.oneOf(['secondary', 'danger']),
   btnText: PropTypes.string,
 };
 
 CancelBtn.defaultProps = {
   disabled: false,
-  bsStyle: 'default',
+  variant: 'secondary',
   btnText: __('Cancel'),
 };
 
diff --git a/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/SubmitOrCancel/SubmitBtn.js b/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/SubmitOrCancel/SubmitBtn.js
index 7a906dd43ce..b7092ed2854 100644
--- a/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/SubmitOrCancel/SubmitBtn.js
+++ b/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/SubmitOrCancel/SubmitBtn.js
@@ -1,11 +1,16 @@
 import React from 'react';
-import { Button } from 'patternfly-react';
+import { Button } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
 import { translate as __ } from '../../../../common/I18n';
 import { simpleLoader } from '../../../common/Loader';
 
-const SubmitBtn = ({ isSubmitting, onSubmit, bsStyle, btnText }) => (
-  <Button bsStyle={bsStyle} disabled={isSubmitting} onClick={onSubmit}>
+const SubmitBtn = ({ isSubmitting, onSubmit, variant, btnText }) => (
+  <Button
+    ouiaId="submit-button"
+    variant={variant}
+    isDisabled={isSubmitting}
+    onClick={onSubmit}
+  >
     &nbsp;
     {btnText}
     &nbsp;
@@ -16,12 +21,12 @@ const SubmitBtn = ({ isSubmitting, onSubmit, bsStyle, btnText }) => (
 SubmitBtn.propTypes = {
   isSubmitting: PropTypes.bool.isRequired,
   onSubmit: PropTypes.func.isRequired,
-  bsStyle: PropTypes.string,
+  variant: PropTypes.oneOf(['primary']),
   btnText: PropTypes.string,
 };
 
 SubmitBtn.defaultProps = {
-  bsStyle: 'primary',
+  variant: 'primary',
   btnText: __('Submit'),
 };
 
diff --git a/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/SubmitOrCancel/SubmitOrCancel.test.js b/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/SubmitOrCancel/SubmitOrCancel.test.js
index e32de925747..d7e9f91282d 100644
--- a/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/SubmitOrCancel/SubmitOrCancel.test.js
+++ b/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/SubmitOrCancel/SubmitOrCancel.test.js
@@ -1,34 +1,75 @@
-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 SubmitOrCancel from './SubmitOrCancel';
+import SubmitBtn from './SubmitBtn';
+import CancelBtn from './CancelBtn';
 
-const handlers = {
+// Helper functions for creating props
+const createHandlers = () => ({
   submitProps: {
     submitBtnProps: {
-      bsStyle: 'default',
+      variant: 'primary',
       btnText: 'Confirm',
     },
     cancelBtnProps: {
-      bsStyle: 'danger',
+      variant: 'danger',
       btnText: 'Deny',
     },
   },
   onCancel: jest.fn(),
   onSubmit: jest.fn(),
   id: 'test-modal',
-};
+});
+
+const createBaseProps = (isSubmitting = false) => ({
+  isSubmitting,
+  ...createHandlers(),
+});
 
 const fixtures = {
-  'should render': {
-    isSubmitting: false,
-    ...handlers,
-  },
-  'should render when isSubmitting': {
-    isSubmitting: true,
-    ...handlers,
-  },
+  render: createBaseProps(false),
+  whenSubmitting: createBaseProps(true),
 };
 
+const createSubmitBtnProps = (isSubmitting = false) => ({
+  ...fixtures.render.submitProps.submitBtnProps,
+  ...createHandlers(),
+  isSubmitting,
+});
+
+const createCancelBtnProps = (isSubmitting = false) => ({
+  ...fixtures.render.submitProps.cancelBtnProps,
+  ...createHandlers(),
+  isSubmitting,
+});
+
 describe('SubmitOrCancel', () => {
-  testComponentSnapshotsWithFixtures(SubmitOrCancel, fixtures);
+  it('renders', () => {
+    render(<SubmitOrCancel {...fixtures.render} />);
+    expect(screen.getByRole('button', { name: /submit/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+  });
+
+  it('renders when submitting', () => {
+    render(<SubmitOrCancel {...fixtures.whenSubmitting} />);
+
+    expect(screen.getByRole('button', { name: /submit/i })).toBeDisabled();
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeDisabled();
+  });
+
+  describe('SubmitBtn', () => {
+    it('renders', () => {
+      render(<SubmitBtn {...createSubmitBtnProps()} />);
+      expect(screen.getByRole('button', { name: /Confirm/i })).toBeInTheDocument();
+    });
+  });
+
+  describe('CancelBtn', () => {
+    it('renders', () => {
+      render(<CancelBtn {...createCancelBtnProps()} />);
+      expect(screen.getByRole('button', { name: /Deny/i })).toBeInTheDocument();
+    });
+  });
 });
diff --git a/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/SubmitOrCancel/__snapshots__/SubmitOrCancel.test.js.snap b/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/SubmitOrCancel/__snapshots__/SubmitOrCancel.test.js.snap
deleted file mode 100644
index feee13db522..00000000000
--- a/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/SubmitOrCancel/__snapshots__/SubmitOrCancel.test.js.snap
+++ /dev/null
@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SubmitOrCancel should render 1`] = `
-<Fragment>
-  <SubmitBtn
-    bsStyle="primary"
-    btnText="Submit"
-    isSubmitting={false}
-    onSubmit={[MockFunction]}
-  />
-  <CancelBtn
-    bsStyle="default"
-    btnText="Cancel"
-    disabled={false}
-    onCancel={[MockFunction]}
-  />
-</Fragment>
-`;
-
-exports[`SubmitOrCancel should render when isSubmitting 1`] = `
-<Fragment>
-  <SubmitBtn
-    bsStyle="primary"
-    btnText="Submit"
-    isSubmitting={true}
-    onSubmit={[MockFunction]}
-  />
-  <CancelBtn
-    bsStyle="default"
-    btnText="Cancel"
-    disabled={true}
-    onCancel={[MockFunction]}
-  />
-</Fragment>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/__tests__/ForemanModalFooter.test.js b/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/__tests__/ForemanModalFooter.test.js
index 05c5699d75a..29ef1fb9f31 100644
--- a/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/__tests__/ForemanModalFooter.test.js
+++ b/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/__tests__/ForemanModalFooter.test.js
@@ -1,18 +1,18 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import { Button, Modal } from 'patternfly-react';
+import { screen, fireEvent, render, act } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
 import ForemanModalFooter from '../ForemanModalFooter';
 import * as ModalContext from '../../ForemanModalHooks'; // so enzyme test works
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
 
 const fixtures = {
-  'should render with default markup': {
+  renders: {
     title: 'foo',
   },
-  'should render with supplied children': {
+  withCustomChildren: {
     title: 'ignored',
     children: <h4>Modal Footer</h4>,
-  },
+  }
 };
 
 const contextValues = {
@@ -25,18 +25,28 @@ jest
 
 describe('ForemanModal.Footer', () => {
   describe('rendering', () => {
-    testComponentSnapshotsWithFixtures(ForemanModalFooter, fixtures);
+    it('should show Close when onClose is provided', () => {
+      render(<ForemanModalFooter {...fixtures.renders} />);
+      expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument();
+    });
+
+    it('should render custom children when provided', () => {
+      render(<ForemanModalFooter {...fixtures.withCustomChildren} />);
+      expect(screen.getByText('Modal Footer')).toBeInTheDocument();
+    });
   });
+
   describe('data flow', () => {
-    it('should make onClose available thru context', () => {
-      const wrapper = shallow(<ForemanModalFooter />);
-      expect(wrapper.find(Button).prop('onClick')).toEqual(
-        contextValues.onClose
-      );
+    it('should call onClose available through context', async () => {
+      render(<ForemanModalFooter {...fixtures.renders} />);
+      await act( async () => await fireEvent.click(screen.getByRole('button', { name: /close/i })));
+      expect(contextValues.onClose).toHaveBeenCalled();
     });
+
     it('passes props to PF component using spread', () => {
-      const wrapper = shallow(<ForemanModalFooter myCustomProp="hi" />);
-      expect(wrapper.find(Modal.Footer).prop('myCustomProp')).toEqual('hi');
+      const { container } = render(<ForemanModalFooter className="custom-class" />);
+      const modalFooter = container.querySelector('.modal-footer');
+      expect(modalFooter).toHaveClass('custom-class');
     });
   });
 });
diff --git a/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/__tests__/__snapshots__/ForemanModalFooter.test.js.snap b/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/__tests__/__snapshots__/ForemanModalFooter.test.js.snap
deleted file mode 100644
index 4488a95126e..00000000000
--- a/webpack/assets/javascripts/react_app/components/ForemanModal/subcomponents/__tests__/__snapshots__/ForemanModalFooter.test.js.snap
+++ /dev/null
@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ForemanModal.Footer rendering should render with default markup 1`] = `
-<ModalFooter
-  bsClass="modal-footer"
-  componentClass="div"
-  title="foo"
->
-  <Button
-    active={false}
-    block={false}
-    bsClass="btn"
-    bsStyle="default"
-    disabled={false}
-    onClick={[MockFunction]}
-  >
-    Close
-  </Button>
-</ModalFooter>
-`;
-
-exports[`ForemanModal.Footer rendering should render with supplied children 1`] = `
-<ModalFooter
-  bsClass="modal-footer"
-  componentClass="div"
-  title="ignored"
->
-  <h4>
-    Modal Footer
-  </h4>
-</ModalFooter>
-`;