diff --git a/app/javascript/legacy_react/src/components/common/LabeledFieldComponent.spec.tsx b/app/javascript/legacy_react/src/components/common/LabeledFieldComponent.spec.tsx
index 390eda678..4f9141532 100644
--- a/app/javascript/legacy_react/src/components/common/LabeledFieldComponent.spec.tsx
+++ b/app/javascript/legacy_react/src/components/common/LabeledFieldComponent.spec.tsx
@@ -1,37 +1,36 @@
 // License: LGPL-3.0-or-later
 import * as React from 'react';
-import {shallow} from 'enzyme'
-import toJson from 'enzyme-to-json'
+import {render} from '@testing-library/react'
 import LabeledFieldComponent from './LabeledFieldComponent'
 
 describe('LabeledFieldComponent', () => {
   test('In Error with Children', () => {
-    let result = shallow(<LabeledFieldComponent inputId={"ID"} labelText={"Our Label"} inError={true}
+    let result = render(<LabeledFieldComponent inputId={"ID"} labelText={"Our Label"} inError={true}
                                                 error={"errorMessage"}>
       <hr/>
     </LabeledFieldComponent>)
-    expect(toJson(result)).toMatchSnapshot()
+    expect(result.baseElement).toMatchSnapshot()
   })
 
   test('has error checked but no message so not really in error', () => {
-    let result = shallow(<LabeledFieldComponent inputId={"ID"} labelText={"Our Label"} inError={true} error={undefined}>
+    let result = render(<LabeledFieldComponent inputId={"ID"} labelText={"Our Label"} inError={true} error={undefined}>
       <hr/>
     </LabeledFieldComponent>)
-    expect(toJson(result)).toMatchSnapshot()
+    expect(result.baseElement).toMatchSnapshot()
   })
 
   test('no error', () => {
-    let result = shallow(<LabeledFieldComponent inputId={"ID"} labelText={"Our Label"} inError={false}>
+    let result = render(<LabeledFieldComponent inputId={"ID"} labelText={"Our Label"} inError={false}>
       <hr/>
     </LabeledFieldComponent>)
-    expect(toJson(result)).toMatchSnapshot()
+    expect(result.baseElement).toMatchSnapshot()
   })
 
   test('add extra classNames', () => {
-    let result = shallow(<LabeledFieldComponent inputId={"ID"} labelText={"Our Label"} inError={false}
+    let result = render(<LabeledFieldComponent inputId={"ID"} labelText={"Our Label"} inError={false}
                                                 className={"a_class another_class"}>
       <hr/>
     </LabeledFieldComponent>)
-    expect(toJson(result)).toMatchSnapshot()
+    expect(result.baseElement).toMatchSnapshot()
   })
 })
\ No newline at end of file
diff --git a/app/javascript/legacy_react/src/components/common/Modal.spec.tsx b/app/javascript/legacy_react/src/components/common/Modal.spec.tsx
index 6616b81ab..b09ddef00 100644
--- a/app/javascript/legacy_react/src/components/common/Modal.spec.tsx
+++ b/app/javascript/legacy_react/src/components/common/Modal.spec.tsx
@@ -3,13 +3,14 @@ import * as React from 'react';
 import Modal, {ModalProps} from './Modal'
 import {shallow, mount, ReactWrapper} from "enzyme";
 import toJson from "enzyme-to-json";
+import {render, screen} from '@testing-library/react'
 import { DefaultCloseButton } from './DefaultCloseButton';
 
 describe('Modal', () => {
   test('nothing displayed if inactive', () => {
-    let modal = shallow(<Modal childGenerator={() => <div/>}/>)
+    let modal = render(<Modal childGenerator={() => <div/>}/>)
 
-    expect(toJson(modal)).toMatchSnapshot()
+    expect(modal.baseElement.outerHTML).toMatchSnapshot()
   })
 
   describe('active modal displays', () => {
diff --git a/app/javascript/legacy_react/src/components/common/ProgressableButton.spec.tsx b/app/javascript/legacy_react/src/components/common/ProgressableButton.spec.tsx
index dee1911ab..2ce2c1bf5 100644
--- a/app/javascript/legacy_react/src/components/common/ProgressableButton.spec.tsx
+++ b/app/javascript/legacy_react/src/components/common/ProgressableButton.spec.tsx
@@ -1,19 +1,27 @@
 // License: LGPL-3.0-or-later
 import * as React from 'react';
 import ProgressableButton from './ProgressableButton'
-import toJson from 'enzyme-to-json';
-import {mount, shallow} from 'enzyme';
+import {render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 
 describe('ProgressableButton', () => {
-  test('Basic title button works', () => {
-    let output = shallow(
-      <ProgressableButton onClick={() => console.log('alert!')} buttonText={"nothing"} data-label="button"/>)
-    expect(toJson(output)).toMatchSnapshot()
+  test('Basic title button works', async () => {
+    const clicked = jest.fn()
+    let output = render(
+      <ProgressableButton onClick={clicked} buttonText={"nothing"} data-label="button"/>)
+
+    userEvent.click(screen.getByText("nothing"))
+    expect(clicked).toBeCalled();
+
+    expect(output.baseElement).toMatchSnapshot()
+
+
   })
 
   test('Progress means we change the title, dont disable and do turn on spinner', () => {
-    let output = mount(
-      <ProgressableButton onClick={() => console.log('alert!')}
+    const clicked = jest.fn()
+    let output = render(
+      <ProgressableButton onClick={clicked}
                           buttonText={"nothing"}
                           data-label="button"
                           buttonTextOnProgress={"onProgress"}
@@ -21,22 +29,22 @@ describe('ProgressableButton', () => {
                           disableOnProgress={false}
 
                           />)
-    expect(toJson(output)).toMatchSnapshot()
+    expect(output.baseElement).toMatchSnapshot()
   })
 
   test('Title is kept on progress if no titleOnProgress is set', () => {
-    let output = mount(
-      <ProgressableButton onClick={() => console.log('alert!')}
+    let output = render(
+      <ProgressableButton onClick={() => {}}
                           buttonText={"nothing"}
                           data-label="button"
                           inProgress={true}
 
       />)
-    expect(toJson(output)).toMatchSnapshot()
+    expect(output.baseElement).toMatchSnapshot()
   })
 
   test('Progress means we change the title, disable and do turn on spinner', () => {
-    let output = mount(
+    let output = render(
       <ProgressableButton onClick={() => console.log('alert!')}
                           buttonText={"nothing"}
                           data-label="button"
@@ -45,12 +53,12 @@ describe('ProgressableButton', () => {
                           disableOnProgress={true}
 
       />)
-    expect(toJson(output)).toMatchSnapshot()
+      expect(output.baseElement).toMatchSnapshot()
   })
 
 
   test('Disabled manually set overrides whether we disable on progress when in progress', () => {
-    let output = mount(
+    let output = render(
       <ProgressableButton onClick={() => console.log('alert!')}
                           buttonText={"nothing"}
                           data-label="button"
@@ -60,12 +68,12 @@ describe('ProgressableButton', () => {
                           disabled={true}
 
       />)
-    expect(toJson(output)).toMatchSnapshot()
+      expect(output.baseElement).toMatchSnapshot()
   })
 
 
   test('Disabled manually set overrides whether we disable on progress when NOT in progress', () => {
-    let output = mount(
+    let output = render(
       <ProgressableButton onClick={() => console.log('alert!')}
                           buttonText={"nothing"}
                           data-label="button"
@@ -75,7 +83,7 @@ describe('ProgressableButton', () => {
                           disabled={true}
 
       />)
-    expect(toJson(output)).toMatchSnapshot()
+      expect(output.baseElement).toMatchSnapshot()
   })
 
 
diff --git a/app/javascript/legacy_react/src/components/common/ScreenReaderOnlyText.spec.tsx b/app/javascript/legacy_react/src/components/common/ScreenReaderOnlyText.spec.tsx
index c3c3f886d..37d9a887e 100644
--- a/app/javascript/legacy_react/src/components/common/ScreenReaderOnlyText.spec.tsx
+++ b/app/javascript/legacy_react/src/components/common/ScreenReaderOnlyText.spec.tsx
@@ -1,14 +1,13 @@
 // License: LGPL-3.0-or-later
 import * as React from 'react';
 import ScreenReaderOnlyText from './ScreenReaderOnlyText';
-import toJson from 'enzyme-to-json';
-import { shallow } from 'enzyme';
+import {render} from '@testing-library/react';
 
 describe('ScreenReaderOnlyText', () => {
 	it('renders properly', () => {
 		expect.hasAssertions();
-		const text = shallow(<ScreenReaderOnlyText>Test</ScreenReaderOnlyText>);
+		const text = render(<ScreenReaderOnlyText>Test</ScreenReaderOnlyText>);
 		// eslint-disable-next-line jest/prefer-inline-snapshots
-		expect(toJson(text)).toMatchSnapshot();
+		expect(text.baseElement).toMatchSnapshot();
 	});
 });
\ No newline at end of file
diff --git a/app/javascript/legacy_react/src/components/common/StandardFieldComponent.spec.tsx b/app/javascript/legacy_react/src/components/common/StandardFieldComponent.spec.tsx
index ffcd6cb92..530ca6db5 100644
--- a/app/javascript/legacy_react/src/components/common/StandardFieldComponent.spec.tsx
+++ b/app/javascript/legacy_react/src/components/common/StandardFieldComponent.spec.tsx
@@ -1,25 +1,24 @@
 // License: LGPL-3.0-or-later
 import * as React from 'react';
-import {shallow} from 'enzyme'
+import {render} from '@testing-library/react'
 import StandardFieldComponent from './StandardFieldComponent'
-import toJson from 'enzyme-to-json';
 
 describe('StandardFieldComponent', () => {
     test('works with no children', () => {
-        var field = shallow(<StandardFieldComponent inError={false} />)
+        var field = render(<StandardFieldComponent inError={false} />)
 
 
-        expect(toJson(field)).toMatchSnapshot()
+        expect(field.baseElement).toMatchSnapshot()
     })
     test('works with a child', () => {
-        var field = shallow(<StandardFieldComponent inError={false}><input/></StandardFieldComponent>);
+        var field = render(<StandardFieldComponent inError={false}><input/></StandardFieldComponent>);
 
-      expect(toJson(field)).toMatchSnapshot()
+      expect(field.baseElement).toMatchSnapshot()
     })
 
     test('sets error message properly', () => {
-        var field = shallow(<StandardFieldComponent inError={true} error={"Something more"}><input/></StandardFieldComponent>);
+        var field = render(<StandardFieldComponent inError={true} error={"Something more"}><input/></StandardFieldComponent>);
 
-      expect(toJson(field)).toMatchSnapshot()
+      expect(field.baseElement).toMatchSnapshot()
     })
 })
\ No newline at end of file
diff --git a/app/javascript/legacy_react/src/components/common/__snapshots__/LabeledFieldComponent.spec.tsx.snap b/app/javascript/legacy_react/src/components/common/__snapshots__/LabeledFieldComponent.spec.tsx.snap
index c035d5215..5a3e1de49 100644
--- a/app/javascript/legacy_react/src/components/common/__snapshots__/LabeledFieldComponent.spec.tsx.snap
+++ b/app/javascript/legacy_react/src/components/common/__snapshots__/LabeledFieldComponent.spec.tsx.snap
@@ -1,74 +1,94 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LabeledFieldComponent In Error with Children 1`] = `
-<fieldset
-  className="form-group has-error"
->
-  <label
-    className="control-label"
-    htmlFor="ID"
-  >
-    Our Label
-  </label>
-  <StandardFieldComponent
-    error="errorMessage"
-    inError={true}
-  >
-    <hr />
-  </StandardFieldComponent>
-</fieldset>
+<body>
+  <div>
+    <fieldset
+      class="form-group has-error"
+    >
+      <label
+        class="control-label"
+        for="ID"
+      >
+        Our Label
+      </label>
+      <div>
+        <hr />
+        <div
+          class="help-block"
+          role="alert"
+        >
+          errorMessage
+        </div>
+        
+      </div>
+    </fieldset>
+  </div>
+</body>
 `;
 
 exports[`LabeledFieldComponent add extra classNames 1`] = `
-<fieldset
-  className="a_class another_class form-group"
->
-  <label
-    className="control-label"
-    htmlFor="ID"
-  >
-    Our Label
-  </label>
-  <StandardFieldComponent
-    inError={false}
-  >
-    <hr />
-  </StandardFieldComponent>
-</fieldset>
+<body>
+  <div>
+    <fieldset
+      class="a_class another_class form-group"
+    >
+      <label
+        class="control-label"
+        for="ID"
+      >
+        Our Label
+      </label>
+      <div>
+        <hr />
+        
+        
+      </div>
+    </fieldset>
+  </div>
+</body>
 `;
 
 exports[`LabeledFieldComponent has error checked but no message so not really in error 1`] = `
-<fieldset
-  className="form-group"
->
-  <label
-    className="control-label"
-    htmlFor="ID"
-  >
-    Our Label
-  </label>
-  <StandardFieldComponent
-    inError={false}
-  >
-    <hr />
-  </StandardFieldComponent>
-</fieldset>
+<body>
+  <div>
+    <fieldset
+      class="form-group"
+    >
+      <label
+        class="control-label"
+        for="ID"
+      >
+        Our Label
+      </label>
+      <div>
+        <hr />
+        
+        
+      </div>
+    </fieldset>
+  </div>
+</body>
 `;
 
 exports[`LabeledFieldComponent no error 1`] = `
-<fieldset
-  className="form-group"
->
-  <label
-    className="control-label"
-    htmlFor="ID"
-  >
-    Our Label
-  </label>
-  <StandardFieldComponent
-    inError={false}
-  >
-    <hr />
-  </StandardFieldComponent>
-</fieldset>
+<body>
+  <div>
+    <fieldset
+      class="form-group"
+    >
+      <label
+        class="control-label"
+        for="ID"
+      >
+        Our Label
+      </label>
+      <div>
+        <hr />
+        
+        
+      </div>
+    </fieldset>
+  </div>
+</body>
 `;
diff --git a/app/javascript/legacy_react/src/components/common/__snapshots__/Modal.spec.tsx.snap b/app/javascript/legacy_react/src/components/common/__snapshots__/Modal.spec.tsx.snap
index 05ed686a9..2f0a9d4dd 100644
--- a/app/javascript/legacy_react/src/components/common/__snapshots__/Modal.spec.tsx.snap
+++ b/app/javascript/legacy_react/src/components/common/__snapshots__/Modal.spec.tsx.snap
@@ -367,4 +367,4 @@ exports[`Modal active modal displays matches snapshot 1`] = `
 </Modal>
 `;
 
-exports[`Modal nothing displayed if inactive 1`] = `""`;
+exports[`Modal nothing displayed if inactive 1`] = `"<body><div></div></body>"`;
diff --git a/app/javascript/legacy_react/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap b/app/javascript/legacy_react/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap
index ed4045a73..0829d8b54 100644
--- a/app/javascript/legacy_react/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap
+++ b/app/javascript/legacy_react/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap
@@ -1,148 +1,118 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ProgressableButton Basic title button works 1`] = `
-<button
-  className="button"
-  data-label="button"
-  disabled={false}
-  onClick={[Function]}
->
-  <span>
-    nothing
-  </span>
-</button>
+<body>
+  <div>
+    <button
+      class="button"
+      data-label="button"
+    >
+      <span>
+        nothing
+      </span>
+    </button>
+  </div>
+</body>
 `;
 
 exports[`ProgressableButton Disabled manually set overrides whether we disable on progress when NOT in progress 1`] = `
-<ProgressableButton
-  buttonText="nothing"
-  buttonTextOnProgress="onProgress"
-  data-label="button"
-  disableOnProgress={true}
-  disabled={true}
-  inProgress={false}
-  onClick={[Function]}
->
-  <button
-    className="button"
-    data-label="button"
-    disabled={true}
-    onClick={[Function]}
-  >
-    <span>
-      nothing
-    </span>
-  </button>
-</ProgressableButton>
+<body>
+  <div>
+    <button
+      class="button"
+      data-label="button"
+      disabled=""
+    >
+      <span>
+        nothing
+      </span>
+    </button>
+  </div>
+</body>
 `;
 
 exports[`ProgressableButton Disabled manually set overrides whether we disable on progress when in progress 1`] = `
-<ProgressableButton
-  buttonText="nothing"
-  buttonTextOnProgress="onProgress"
-  data-label="button"
-  disableOnProgress={false}
-  disabled={true}
-  inProgress={true}
-  onClick={[Function]}
->
-  <button
-    className="button"
-    data-label="button"
-    disabled={true}
-    onClick={[Function]}
-  >
-    <span>
+<body>
+  <div>
+    <button
+      class="button"
+      data-label="button"
+      disabled=""
+    >
       <span>
-        <i
-          className="fa fa-spin fa-spinner"
-        />
-         
+        <span>
+          <i
+            class="fa fa-spin fa-spinner"
+          />
+           
+        </span>
+        onProgress
       </span>
-      onProgress
-    </span>
-  </button>
-</ProgressableButton>
+    </button>
+  </div>
+</body>
 `;
 
 exports[`ProgressableButton Progress means we change the title, disable and do turn on spinner 1`] = `
-<ProgressableButton
-  buttonText="nothing"
-  buttonTextOnProgress="onProgress"
-  data-label="button"
-  disableOnProgress={true}
-  inProgress={true}
-  onClick={[Function]}
->
-  <button
-    className="button"
-    data-label="button"
-    disabled={true}
-    onClick={[Function]}
-  >
-    <span>
+<body>
+  <div>
+    <button
+      class="button"
+      data-label="button"
+      disabled=""
+    >
       <span>
-        <i
-          className="fa fa-spin fa-spinner"
-        />
-         
+        <span>
+          <i
+            class="fa fa-spin fa-spinner"
+          />
+           
+        </span>
+        onProgress
       </span>
-      onProgress
-    </span>
-  </button>
-</ProgressableButton>
+    </button>
+  </div>
+</body>
 `;
 
 exports[`ProgressableButton Progress means we change the title, dont disable and do turn on spinner 1`] = `
-<ProgressableButton
-  buttonText="nothing"
-  buttonTextOnProgress="onProgress"
-  data-label="button"
-  disableOnProgress={false}
-  inProgress={true}
-  onClick={[Function]}
->
-  <button
-    className="button"
-    data-label="button"
-    disabled={false}
-    onClick={[Function]}
-  >
-    <span>
+<body>
+  <div>
+    <button
+      class="button"
+      data-label="button"
+    >
       <span>
-        <i
-          className="fa fa-spin fa-spinner"
-        />
-         
+        <span>
+          <i
+            class="fa fa-spin fa-spinner"
+          />
+           
+        </span>
+        onProgress
       </span>
-      onProgress
-    </span>
-  </button>
-</ProgressableButton>
+    </button>
+  </div>
+</body>
 `;
 
 exports[`ProgressableButton Title is kept on progress if no titleOnProgress is set 1`] = `
-<ProgressableButton
-  buttonText="nothing"
-  data-label="button"
-  inProgress={true}
-  onClick={[Function]}
->
-  <button
-    className="button"
-    data-label="button"
-    disabled={false}
-    onClick={[Function]}
-  >
-    <span>
+<body>
+  <div>
+    <button
+      class="button"
+      data-label="button"
+    >
       <span>
-        <i
-          className="fa fa-spin fa-spinner"
-        />
-         
+        <span>
+          <i
+            class="fa fa-spin fa-spinner"
+          />
+           
+        </span>
+        nothing
       </span>
-      nothing
-    </span>
-  </button>
-</ProgressableButton>
+    </button>
+  </div>
+</body>
 `;
diff --git a/app/javascript/legacy_react/src/components/common/__snapshots__/ScreenReaderOnlyText.spec.tsx.snap b/app/javascript/legacy_react/src/components/common/__snapshots__/ScreenReaderOnlyText.spec.tsx.snap
index 450848011..5ca2f8196 100644
--- a/app/javascript/legacy_react/src/components/common/__snapshots__/ScreenReaderOnlyText.spec.tsx.snap
+++ b/app/javascript/legacy_react/src/components/common/__snapshots__/ScreenReaderOnlyText.spec.tsx.snap
@@ -1,20 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ScreenReaderOnlyText renders properly 1`] = `
-<span
-  style={
-    Object {
-      "border": 0,
-      "clip": "rect(0,0,0,0)",
-      "height": "1px",
-      "margin": "-1px",
-      "overflow": "hidden",
-      "padding": 0,
-      "position": "absolute",
-      "width": "1px",
-    }
-  }
->
-  Test
-</span>
+<body>
+  <div>
+    <span
+      style="position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); border: 0px;"
+    >
+      Test
+    </span>
+  </div>
+</body>
 `;
diff --git a/app/javascript/legacy_react/src/components/common/__snapshots__/StandardFieldComponent.spec.tsx.snap b/app/javascript/legacy_react/src/components/common/__snapshots__/StandardFieldComponent.spec.tsx.snap
index acfd395c4..6769ffd1e 100644
--- a/app/javascript/legacy_react/src/components/common/__snapshots__/StandardFieldComponent.spec.tsx.snap
+++ b/app/javascript/legacy_react/src/components/common/__snapshots__/StandardFieldComponent.spec.tsx.snap
@@ -1,21 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`StandardFieldComponent sets error message properly 1`] = `
-<div>
-  <input />
-  <div
-    className="help-block"
-    role="alert"
-  >
-    Something more
+<body>
+  <div>
+    <div>
+      <input />
+      <div
+        class="help-block"
+        role="alert"
+      >
+        Something more
+      </div>
+      
+    </div>
   </div>
-</div>
+</body>
 `;
 
 exports[`StandardFieldComponent works with a child 1`] = `
-<div>
-  <input />
-</div>
+<body>
+  <div>
+    <div>
+      <input />
+      
+      
+    </div>
+  </div>
+</body>
 `;
 
-exports[`StandardFieldComponent works with no children 1`] = `<div />`;
+exports[`StandardFieldComponent works with no children 1`] = `
+<body>
+  <div>
+    <div>
+      
+      
+    </div>
+  </div>
+</body>
+`;