diff --git a/ui/components/ui/button-group/__snapshots__/button-group-component.test.js.snap b/ui/components/ui/button-group/__snapshots__/button-group-component.test.js.snap
new file mode 100644
index 000000000..7e8116227
--- /dev/null
+++ b/ui/components/ui/button-group/__snapshots__/button-group-component.test.js.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonGroup Component should match snapshot 1`] = `
+<div>
+  <div
+    class="someClassName"
+    style="color: red;"
+  >
+    <button
+      aria-checked="false"
+      class="button-group__button"
+      data-testid="button-group__button0"
+    >
+      <div
+        class="mockClass"
+      />
+    </button>
+    <button
+      aria-checked="true"
+      class="button-group__button button-group__button--active"
+      data-testid="button-group__button1"
+    />
+    <button
+      aria-checked="false"
+      class="button-group__button"
+      data-testid="button-group__button2"
+    />
+  </div>
+</div>
+`;
diff --git a/ui/components/ui/button-group/button-group-component.test.js b/ui/components/ui/button-group/button-group-component.test.js
index 64aef67b4..2aaccad78 100644
--- a/ui/components/ui/button-group/button-group-component.test.js
+++ b/ui/components/ui/button-group/button-group-component.test.js
@@ -1,130 +1,30 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import sinon from 'sinon';
-import ButtonGroup from './button-group.component';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import ButtonGroup from '.';
 
 describe('ButtonGroup Component', () => {
-  let wrapper;
-
-  const childButtonSpies = {
-    onClick: sinon.spy(),
+  const props = {
+    defaultActiveButtonIndex: 1,
+    disabled: false,
+    className: 'someClassName',
+    style: {
+      color: 'red',
+    },
   };
 
   const mockButtons = [
-    <button onClick={childButtonSpies.onClick} key="a">
+    <button key="a">
       <div className="mockClass" />
     </button>,
-    <button onClick={childButtonSpies.onClick} key="b"></button>,
-    <button onClick={childButtonSpies.onClick} key="c"></button>,
+    <button key="b"></button>,
+    <button key="c"></button>,
   ];
 
-  beforeAll(() => {
-    sinon.spy(ButtonGroup.prototype, 'handleButtonClick');
-    sinon.spy(ButtonGroup.prototype, 'renderButtons');
-  });
-
-  beforeEach(() => {
-    wrapper = shallow(
-      <ButtonGroup
-        defaultActiveButtonIndex={1}
-        disabled={false}
-        className="someClassName"
-        style={{ color: 'red' }}
-      >
-        {mockButtons}
-      </ButtonGroup>,
+  it('should match snapshot', () => {
+    const { container } = renderWithProvider(
+      <ButtonGroup {...props}>{mockButtons}</ButtonGroup>,
     );
-  });
 
-  afterEach(() => {
-    childButtonSpies.onClick.resetHistory();
-    ButtonGroup.prototype.handleButtonClick.resetHistory();
-    ButtonGroup.prototype.renderButtons.resetHistory();
-  });
-
-  afterAll(() => {
-    sinon.restore();
-  });
-
-  describe('componentDidUpdate', () => {
-    it('should set the activeButtonIndex to the updated newActiveButtonIndex', () => {
-      expect(wrapper.state('activeButtonIndex')).toStrictEqual(1);
-      wrapper.setProps({ newActiveButtonIndex: 2 });
-      expect(wrapper.state('activeButtonIndex')).toStrictEqual(2);
-    });
-
-    it('should not set the activeButtonIndex to an updated newActiveButtonIndex that is not a number', () => {
-      expect(wrapper.state('activeButtonIndex')).toStrictEqual(1);
-      wrapper.setProps({ newActiveButtonIndex: null });
-      expect(wrapper.state('activeButtonIndex')).toStrictEqual(1);
-    });
-  });
-
-  describe('handleButtonClick', () => {
-    it('should set the activeButtonIndex', () => {
-      expect(wrapper.state('activeButtonIndex')).toStrictEqual(1);
-      wrapper.instance().handleButtonClick(2);
-      expect(wrapper.state('activeButtonIndex')).toStrictEqual(2);
-    });
-  });
-
-  describe('renderButtons', () => {
-    it('should render a button for each child', () => {
-      const childButtons = wrapper.find('.button-group__button');
-      expect(childButtons).toHaveLength(3);
-    });
-
-    it('should render the correct button with an active state', () => {
-      const childButtons = wrapper.find('.button-group__button');
-      const activeChildButton = wrapper.find('.button-group__button--active');
-      expect(childButtons.get(1)).toStrictEqual(activeChildButton.get(0));
-    });
-
-    it("should call handleButtonClick and the respective button's onClick method when a button is clicked", () => {
-      expect(ButtonGroup.prototype.handleButtonClick.callCount).toStrictEqual(
-        0,
-      );
-      expect(childButtonSpies.onClick.callCount).toStrictEqual(0);
-      const childButtons = wrapper.find('.button-group__button');
-      childButtons.at(0).props().onClick();
-      childButtons.at(1).props().onClick();
-      childButtons.at(2).props().onClick();
-      expect(ButtonGroup.prototype.handleButtonClick.callCount).toStrictEqual(
-        3,
-      );
-      expect(childButtonSpies.onClick.callCount).toStrictEqual(3);
-    });
-
-    it('should render all child buttons as disabled if props.disabled is true', () => {
-      const childButtons = wrapper.find('.button-group__button');
-      childButtons.forEach((button) => {
-        expect(button.props().disabled).toBeUndefined();
-      });
-      wrapper.setProps({ disabled: true });
-      const disabledChildButtons = wrapper.find('[disabled=true]');
-      expect(disabledChildButtons).toHaveLength(3);
-    });
-
-    it('should render the children of the button', () => {
-      const mockClass = wrapper.find('.mockClass');
-      expect(mockClass).toHaveLength(1);
-    });
-  });
-
-  describe('render', () => {
-    it('should render a div with the expected class and style', () => {
-      expect(wrapper.find('div').at(0).props().className).toStrictEqual(
-        'someClassName',
-      );
-      expect(wrapper.find('div').at(0).props().style).toStrictEqual({
-        color: 'red',
-      });
-    });
-
-    it('should call renderButtons when rendering', () => {
-      expect(ButtonGroup.prototype.renderButtons.callCount).toStrictEqual(1);
-      wrapper.instance().render();
-      expect(ButtonGroup.prototype.renderButtons.callCount).toStrictEqual(2);
-    });
+    expect(container).toMatchSnapshot();
   });
 });
diff --git a/ui/components/ui/page-container/page-container-footer/__snapshots__/page-container-footer.component.test.js.snap b/ui/components/ui/page-container/page-container-footer/__snapshots__/page-container-footer.component.test.js.snap
new file mode 100644
index 000000000..d738bd4b1
--- /dev/null
+++ b/ui/components/ui/page-container/page-container-footer/__snapshots__/page-container-footer.component.test.js.snap
@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Page Footer should match snapshot 1`] = `
+<div>
+  <div
+    class="page-container__footer"
+  >
+    <footer>
+      <button
+        class="button btn--rounded btn-secondary page-container__footer-button"
+        data-testid="page-container-footer-cancel"
+        role="button"
+        tabindex="0"
+      >
+        Cancel
+      </button>
+      <button
+        class="button btn--rounded btn-default page-container__footer-button"
+        data-testid="page-container-footer-next"
+        role="button"
+        tabindex="0"
+      >
+        Submit
+      </button>
+    </footer>
+  </div>
+</div>
+`;
+
+exports[`Page Footer should render a secondary footer inside page-container__footer when given children 1`] = `
+<div>
+  <div
+    class="page-container__footer"
+  >
+    <footer>
+      <button
+        class="button btn--rounded btn-secondary page-container__footer-button"
+        data-testid="page-container-footer-cancel"
+        role="button"
+        tabindex="0"
+      >
+        [cancel]
+      </button>
+      <button
+        class="button btn--rounded btn-primary page-container__footer-button"
+        data-testid="page-container-footer-next"
+        role="button"
+        tabindex="0"
+      >
+        [next]
+      </button>
+    </footer>
+    <div
+      class="page-container__footer-secondary"
+    >
+      <div>
+        Works
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/ui/components/ui/page-container/page-container-footer/page-container-footer.component.test.js b/ui/components/ui/page-container/page-container-footer/page-container-footer.component.test.js
index 0cf5d6f93..7c9bc6758 100644
--- a/ui/components/ui/page-container/page-container-footer/page-container-footer.component.test.js
+++ b/ui/components/ui/page-container/page-container-footer/page-container-footer.component.test.js
@@ -1,87 +1,55 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import sinon from 'sinon';
-import Button from '../../button';
-import PageFooter from './page-container-footer.component';
+import { fireEvent } from '@testing-library/react';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import PageFooter from '.';
 
 describe('Page Footer', () => {
-  let wrapper;
-  const onCancel = sinon.spy();
-  const onSubmit = sinon.spy();
+  const props = {
+    onCancel: jest.fn(),
+    onSubmit: jest.fn(),
+    cancelText: 'Cancel',
+    submitText: 'Submit',
+    disabled: false,
+    submitButtonType: 'Test Type',
+  };
 
-  beforeEach(() => {
-    wrapper = shallow(
-      <PageFooter
-        onCancel={onCancel}
-        onSubmit={onSubmit}
-        cancelText="Cancel"
-        submitText="Submit"
-        disabled={false}
-        submitButtonType="Test Type"
-      />,
-    );
-  });
+  it('should match snapshot', () => {
+    const { container } = renderWithProvider(<PageFooter {...props} />);
 
-  it('renders page container footer', () => {
-    expect(wrapper.find('.page-container__footer')).toHaveLength(1);
+    expect(container).toMatchSnapshot();
   });
 
   it('should render a secondary footer inside page-container__footer when given children', () => {
-    wrapper = shallow(
+    const { container } = renderWithProvider(
       <PageFooter>
         <div>Works</div>
       </PageFooter>,
-      { context: { t: sinon.spy((k) => `[${k}]`) } },
     );
 
-    expect(wrapper.find('.page-container__footer-secondary')).toHaveLength(1);
-  });
-
-  it('renders two button components', () => {
-    expect(wrapper.find(Button)).toHaveLength(2);
+    expect(container).toMatchSnapshot();
   });
 
   describe('Cancel Button', () => {
-    it('has button type of default', () => {
-      expect(
-        wrapper.find('.page-container__footer-button').first().prop('type'),
-      ).toStrictEqual('secondary');
-    });
-
-    it('has children text of Cancel', () => {
-      expect(
-        wrapper.find('.page-container__footer-button').first().prop('children'),
-      ).toStrictEqual('Cancel');
-    });
-
     it('should call cancel when click is simulated', () => {
-      wrapper.find('.page-container__footer-button').first().prop('onClick')();
-      expect(onCancel.callCount).toStrictEqual(1);
+      const { queryByTestId } = renderWithProvider(<PageFooter {...props} />);
+
+      const cancelButton = queryByTestId('page-container-footer-cancel');
+
+      fireEvent.click(cancelButton);
+
+      expect(props.onCancel).toHaveBeenCalled();
     });
   });
 
   describe('Submit Button', () => {
-    it('assigns button type based on props', () => {
-      expect(
-        wrapper.find('.page-container__footer-button').last().prop('type'),
-      ).toStrictEqual('Test Type');
-    });
-
-    it('has disabled prop', () => {
-      expect(
-        wrapper.find('.page-container__footer-button').last().prop('disabled'),
-      ).toStrictEqual(false);
-    });
-
-    it('has children text when submitText prop exists', () => {
-      expect(
-        wrapper.find('.page-container__footer-button').last().prop('children'),
-      ).toStrictEqual('Submit');
-    });
-
     it('should call submit when click is simulated', () => {
-      wrapper.find('.page-container__footer-button').last().prop('onClick')();
-      expect(onSubmit.callCount).toStrictEqual(1);
+      const { queryByTestId } = renderWithProvider(<PageFooter {...props} />);
+
+      const submitButton = queryByTestId('page-container-footer-next');
+
+      fireEvent.click(submitButton);
+
+      expect(props.onSubmit).toHaveBeenCalled();
     });
   });
 });
diff --git a/ui/components/ui/site-origin/__snapshots__/site-origin.test.js.snap b/ui/components/ui/site-origin/__snapshots__/site-origin.test.js.snap
new file mode 100644
index 000000000..c1acfdd1f
--- /dev/null
+++ b/ui/components/ui/site-origin/__snapshots__/site-origin.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SiteOrigin renders number and hyphen prefixed domains correctly 1`] = `
+<div>
+  <div
+    class="site-origin"
+  >
+    <bdi
+      dir="ltr"
+    >
+      0-example.com
+    </bdi>
+  </div>
+</div>
+`;
diff --git a/ui/components/ui/site-origin/site-origin.test.js b/ui/components/ui/site-origin/site-origin.test.js
index d27f1ce73..6c2b42674 100644
--- a/ui/components/ui/site-origin/site-origin.test.js
+++ b/ui/components/ui/site-origin/site-origin.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import SiteOrigin from './site-origin';
 
 describe('SiteOrigin', () => {
@@ -14,11 +14,10 @@ describe('SiteOrigin', () => {
 
   it('renders number and hyphen prefixed domains correctly', () => {
     const numberHyphenPrefixOrigin = '0-example.com';
-    const wrapper = shallow(
+    const { container } = renderWithProvider(
       <SiteOrigin {...defaultProps} siteOrigin={numberHyphenPrefixOrigin} />,
     );
-    const bdiElement = wrapper.find('bdi');
 
-    expect(bdiElement.text()).toBe('0-example.com');
+    expect(container).toMatchSnapshot();
   });
 });
diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.js b/ui/pages/settings/advanced-tab/advanced-tab.component.js
index 54b49309f..330c8b871 100644
--- a/ui/pages/settings/advanced-tab/advanced-tab.component.js
+++ b/ui/pages/settings/advanced-tab/advanced-tab.component.js
@@ -205,6 +205,7 @@ export default class AdvancedTab extends PureComponent {
             </label>
             <input
               id="restore-file"
+              data-testid="restore-file"
               style={{ visibility: 'hidden' }}
               type="file"
               accept=".json"
@@ -260,6 +261,7 @@ export default class AdvancedTab extends PureComponent {
         <div className="settings-page__content-item">
           <div className="settings-page__content-item-col">
             <Button
+              data-testid="backup-button"
               type="secondary"
               large
               onClick={() => this.backupUserData()}
@@ -544,6 +546,7 @@ export default class AdvancedTab extends PureComponent {
             <TextField
               type="number"
               id="autoTimeout"
+              data-testid="auto-lockout-time"
               placeholder="5"
               value={this.state.autoLockTimeLimit}
               onChange={(e) => this.handleLockChange(e.target.value)}
@@ -554,6 +557,7 @@ export default class AdvancedTab extends PureComponent {
             />
             <Button
               type="primary"
+              data-testid="auto-lockout-button"
               className="settings-tab__rpc-save-button"
               disabled={lockTimeError !== ''}
               onClick={() => {
diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.test.js b/ui/pages/settings/advanced-tab/advanced-tab.component.test.js
index bcd56a90b..fa8d5742d 100644
--- a/ui/pages/settings/advanced-tab/advanced-tab.component.test.js
+++ b/ui/pages/settings/advanced-tab/advanced-tab.component.test.js
@@ -1,180 +1,69 @@
 import React from 'react';
-import sinon from 'sinon';
-import { shallow } from 'enzyme';
-import TextField from '../../../components/ui/text-field';
-import { LEDGER_TRANSPORT_TYPES } from '../../../../shared/constants/hardware-wallets';
-import ToggleButton from '../../../components/ui/toggle-button';
-import AdvancedTab from './advanced-tab.component';
+import { fireEvent } from '@testing-library/react';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import mockState from '../../../../test/data/mock-state.json';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import AdvancedTab from '.';
+
+const mockSetAutoLockTimeLimit = jest.fn();
+const mockSetShowTestNetworks = jest.fn();
+const mockSetUseTokenDetection = jest.fn();
+
+jest.mock('../../../store/actions.js', () => {
+  return {
+    setAutoLockTimeLimit: () => mockSetAutoLockTimeLimit,
+    setShowTestNetworks: () => mockSetShowTestNetworks,
+    setUseTokenDetection: () => mockSetUseTokenDetection,
+  };
+});
 
 describe('AdvancedTab Component', () => {
-  let component;
-  let setAutoLockTimeLimitSpy = sinon.spy();
-  const toggleTestnet = sinon.spy();
-  const toggleTokenDetection = sinon.spy();
-
-  beforeAll(() => {
-    component = shallow(
-      <AdvancedTab
-        ipfsGateway=""
-        setAutoLockTimeLimit={setAutoLockTimeLimitSpy}
-        setIpfsGateway={() => undefined}
-        setShowFiatConversionOnTestnetsPreference={() => undefined}
-        setShowTestNetworks={toggleTestnet}
-        showTestNetworks={false}
-        ledgerTransportType={LEDGER_TRANSPORT_TYPES.U2F}
-        setLedgerTransportPreference={() => undefined}
-        setDismissSeedBackUpReminder={() => undefined}
-        dismissSeedBackUpReminder={false}
-        useTokenDetection
-        setUseTokenDetection={toggleTokenDetection}
-        userHasALedgerAccount
-        backupUserData={() => undefined}
-        restoreUserData={() => undefined}
-      />,
-      {
-        context: {
-          t: (s) => `_${s}`,
-        },
-      },
-    );
-  });
+  const mockStore = configureMockStore([thunk])(mockState);
 
   it('should render backup button', () => {
-    expect(component.find('.settings-page__content-row')).toHaveLength(15);
-
-    expect(
-      component
-        .find('.settings-page__content-row')
-        .at(10)
-        .find('.settings-page__content-item'),
-    ).toHaveLength(2);
-
-    expect(
-      component
-        .find('.settings-page__content-row')
-        .at(10)
-        .find('.settings-page__content-item')
-        .at(0)
-        .find('.settings-page__content-description')
-        .props().children,
-    ).toStrictEqual('_backupUserDataDescription');
-
-    expect(
-      component
-        .find('.settings-page__content-row')
-        .at(10)
-        .find('.settings-page__content-item')
-        .at(1)
-        .find('Button')
-        .props().children,
-    ).toStrictEqual('_backup');
+    const { queryByTestId } = renderWithProvider(<AdvancedTab />, mockStore);
+    const backupButton = queryByTestId('backup-button');
+    expect(backupButton).toBeInTheDocument();
   });
 
   it('should render restore button', () => {
-    expect(component.find('.settings-page__content-row')).toHaveLength(15);
-
-    expect(
-      component
-        .find('.settings-page__content-row')
-        .at(11)
-        .find('.settings-page__content-item'),
-    ).toHaveLength(2);
-
-    expect(
-      component
-        .find('.settings-page__content-row')
-        .at(11)
-        .find('.settings-page__content-item')
-        .at(0)
-        .find('.settings-page__content-description')
-        .props().children,
-    ).toStrictEqual('_restoreUserDataDescription');
-
-    expect(
-      component
-        .find('.settings-page__content-row')
-        .at(11)
-        .find('.settings-page__content-item')
-        .at(1)
-        .find('label')
-        .props().children,
-    ).toStrictEqual('_restore');
+    const { queryByTestId } = renderWithProvider(<AdvancedTab />, mockStore);
+    const restoreFile = queryByTestId('restore-file');
+    expect(restoreFile).toBeInTheDocument();
   });
 
   it('should update autoLockTimeLimit', () => {
-    setAutoLockTimeLimitSpy = sinon.spy();
-    component = shallow(
-      <AdvancedTab
-        ipfsGateway=""
-        setAutoLockTimeLimit={setAutoLockTimeLimitSpy}
-        setIpfsGateway={() => undefined}
-        setShowFiatConversionOnTestnetsPreference={() => undefined}
-        ledgerTransportType={LEDGER_TRANSPORT_TYPES.U2F}
-        setLedgerTransportPreference={() => undefined}
-        setDismissSeedBackUpReminder={() => undefined}
-        dismissSeedBackUpReminder={false}
-        setShowTestNetworks={toggleTestnet}
-        useTokenDetection
-        setUseTokenDetection={toggleTokenDetection}
-        userHasALedgerAccount
-        backupUserData={() => undefined}
-        restoreUserData={() => undefined}
-      />,
-      {
-        context: {
-          t: (s) => `_${s}`,
-        },
-      },
-    );
+    const { queryByTestId } = renderWithProvider(<AdvancedTab />, mockStore);
+    const autoLockoutTime = queryByTestId('auto-lockout-time');
+    const autoLockoutButton = queryByTestId('auto-lockout-button');
 
-    const autoTimeout = component.find('.settings-page__content-row').at(9);
-    const textField = autoTimeout.find(TextField);
+    fireEvent.change(autoLockoutTime, { target: { value: 1440 } });
 
-    textField.props().onChange({ target: { value: 1440 } });
-    expect(component.state().autoLockTimeLimit).toStrictEqual(1440);
+    expect(autoLockoutTime).toHaveValue(1440);
 
-    autoTimeout.find('.settings-tab__rpc-save-button').simulate('click');
-    expect(setAutoLockTimeLimitSpy.args[0][0]).toStrictEqual(1440);
+    fireEvent.click(autoLockoutButton);
+
+    expect(mockSetAutoLockTimeLimit).toHaveBeenCalled();
   });
 
   it('should toggle show test networks', () => {
-    const testNetworks = component.find('.settings-page__content-row').at(7);
-    const toggleButton = testNetworks.find(ToggleButton);
-    toggleButton.first().simulate('toggle');
-    expect(toggleTestnet.calledOnce).toStrictEqual(true);
+    const { queryAllByRole } = renderWithProvider(<AdvancedTab />, mockStore);
+
+    const testNetworkToggle = queryAllByRole('checkbox')[4];
+
+    fireEvent.click(testNetworkToggle);
+
+    expect(mockSetShowTestNetworks).toHaveBeenCalled();
   });
 
   it('should toggle token detection', () => {
-    component = shallow(
-      <AdvancedTab
-        ipfsGateway=""
-        setAutoLockTimeLimit={setAutoLockTimeLimitSpy}
-        setIpfsGateway={() => undefined}
-        setShowFiatConversionOnTestnetsPreference={() => undefined}
-        setShowTestNetworks={toggleTestnet}
-        showTestNetworks={false}
-        ledgerTransportType={LEDGER_TRANSPORT_TYPES.U2F}
-        setLedgerTransportPreference={() => undefined}
-        setDismissSeedBackUpReminder={() => undefined}
-        dismissSeedBackUpReminder={false}
-        useTokenDetection
-        setUseTokenDetection={toggleTokenDetection}
-        userHasALedgerAccount
-        backupUserData={() => undefined}
-        restoreUserData={() => undefined}
-      />,
-      {
-        context: {
-          trackEvent: () => undefined,
-          t: (s) => `_${s}`,
-        },
-      },
-    );
-    const useTokenDetection = component
-      .find('.settings-page__content-row')
-      .at(4);
-    const toggleButton = useTokenDetection.find(ToggleButton);
-    toggleButton.first().simulate('toggle');
-    expect(toggleTokenDetection.calledOnce).toStrictEqual(true);
+    const { queryAllByRole } = renderWithProvider(<AdvancedTab />, mockStore);
+
+    const tokenDetectionToggle = queryAllByRole('checkbox')[1];
+
+    fireEvent.click(tokenDetectionToggle);
+
+    expect(mockSetUseTokenDetection).toHaveBeenCalled();
   });
 });
diff --git a/ui/pages/swaps/view-quote/__snapshots__/view-quote-price-difference.test.js.snap b/ui/pages/swaps/view-quote/__snapshots__/view-quote-price-difference.test.js.snap
new file mode 100644
index 000000000..41cf8a7fa
--- /dev/null
+++ b/ui/pages/swaps/view-quote/__snapshots__/view-quote-price-difference.test.js.snap
@@ -0,0 +1,229 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`View Price Quote Difference displays a fiat error when calculationError is present 1`] = `
+<div>
+  <div
+    class="view-quote__price-difference-warning-wrapper high"
+  >
+    <div
+      class="actionable-message"
+    >
+      
+      <div
+        class="actionable-message__message"
+      >
+        <div
+          class="view-quote__price-difference-warning-contents"
+        >
+          <div
+            class="view-quote__price-difference-warning-contents-text"
+          >
+            <div
+              class="box box--padding-bottom-2 box--display-flex box--flex-direction-row box--justify-content-space-between"
+            >
+              <div
+                class="view-quote__price-difference-warning-contents-title"
+              >
+                Check your rate before proceeding
+              </div>
+              <div>
+                <div
+                  aria-describedby="tippy-tooltip-4"
+                  class=""
+                  data-original-title="Price impact is the difference between the current market price and the amount received during transaction execution. Price impact is a function of the size of your trade relative to the size of the liquidity pool."
+                  data-tooltipped=""
+                  style="display: inline;"
+                  tabindex="0"
+                >
+                  <i
+                    class="fa fa-info-circle"
+                  />
+                </div>
+              </div>
+            </div>
+            Price impact could not be determined due to lack of market price data. Please confirm that you are comfortable with the amount of tokens you are about to receive before swapping.
+            <div
+              class="view-quote__price-difference-warning-contents-actions"
+            >
+              <button>
+                I understand
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`View Price Quote Difference displays an error when in high bucket 1`] = `
+<div>
+  <div
+    class="view-quote__price-difference-warning-wrapper high"
+  >
+    <div
+      class="actionable-message"
+    >
+      
+      <div
+        class="actionable-message__message"
+      >
+        <div
+          class="view-quote__price-difference-warning-contents"
+        >
+          <div
+            class="view-quote__price-difference-warning-contents-text"
+          >
+            <div
+              class="box box--padding-bottom-2 box--display-flex box--flex-direction-row box--justify-content-space-between"
+            >
+              <div
+                class="view-quote__price-difference-warning-contents-title"
+              >
+                Price difference of ~%
+              </div>
+              <div>
+                <div
+                  aria-describedby="tippy-tooltip-3"
+                  class=""
+                  data-original-title="Price impact is the difference between the current market price and the amount received during transaction execution. Price impact is a function of the size of your trade relative to the size of the liquidity pool."
+                  data-tooltipped=""
+                  style="display: inline;"
+                  tabindex="0"
+                >
+                  <i
+                    class="fa fa-info-circle"
+                  />
+                </div>
+              </div>
+            </div>
+            You are about to swap 1 ETH (~) for 42.947749 LINK (~).
+            <div
+              class="view-quote__price-difference-warning-contents-actions"
+            >
+              <button>
+                I understand
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`View Price Quote Difference displays an error when in medium bucket 1`] = `
+<div>
+  <div
+    class="view-quote__price-difference-warning-wrapper medium"
+  >
+    <div
+      class="actionable-message"
+    >
+      
+      <div
+        class="actionable-message__message"
+      >
+        <div
+          class="view-quote__price-difference-warning-contents"
+        >
+          <div
+            class="view-quote__price-difference-warning-contents-text"
+          >
+            <div
+              class="box box--padding-bottom-2 box--display-flex box--flex-direction-row box--justify-content-space-between"
+            >
+              <div
+                class="view-quote__price-difference-warning-contents-title"
+              >
+                Price difference of ~%
+              </div>
+              <div>
+                <div
+                  aria-describedby="tippy-tooltip-2"
+                  class=""
+                  data-original-title="Price impact is the difference between the current market price and the amount received during transaction execution. Price impact is a function of the size of your trade relative to the size of the liquidity pool."
+                  data-tooltipped=""
+                  style="display: inline;"
+                  tabindex="0"
+                >
+                  <i
+                    class="fa fa-info-circle"
+                  />
+                </div>
+              </div>
+            </div>
+            You are about to swap 1 ETH (~) for 42.947749 LINK (~).
+            <div
+              class="view-quote__price-difference-warning-contents-actions"
+            >
+              <button>
+                I understand
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`View Price Quote Difference should match snapshot 1`] = `
+<div>
+  <div
+    class="view-quote__price-difference-warning-wrapper low"
+  >
+    <div
+      class="actionable-message"
+    >
+      
+      <div
+        class="actionable-message__message"
+      >
+        <div
+          class="view-quote__price-difference-warning-contents"
+        >
+          <div
+            class="view-quote__price-difference-warning-contents-text"
+          >
+            <div
+              class="box box--padding-bottom-2 box--display-flex box--flex-direction-row box--justify-content-space-between"
+            >
+              <div
+                class="view-quote__price-difference-warning-contents-title"
+              >
+                Price difference of ~%
+              </div>
+              <div>
+                <div
+                  aria-describedby="tippy-tooltip-1"
+                  class=""
+                  data-original-title="Price impact is the difference between the current market price and the amount received during transaction execution. Price impact is a function of the size of your trade relative to the size of the liquidity pool."
+                  data-tooltipped=""
+                  style="display: inline;"
+                  tabindex="0"
+                >
+                  <i
+                    class="fa fa-info-circle"
+                  />
+                </div>
+              </div>
+            </div>
+            You are about to swap 1 ETH (~) for 42.947749 LINK (~).
+            <div
+              class="view-quote__price-difference-warning-contents-actions"
+            >
+              <button>
+                I understand
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/ui/pages/swaps/view-quote/view-quote-price-difference.test.js b/ui/pages/swaps/view-quote/view-quote-price-difference.test.js
index 08aef036b..806d4b9c0 100644
--- a/ui/pages/swaps/view-quote/view-quote-price-difference.test.js
+++ b/ui/pages/swaps/view-quote/view-quote-price-difference.test.js
@@ -1,15 +1,12 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import { NETWORK_TYPES } from '../../../../shared/constants/network';
 import { GAS_RECOMMENDATIONS } from '../../../../shared/constants/gas';
 import ViewQuotePriceDifference from './view-quote-price-difference';
 
 describe('View Price Quote Difference', () => {
-  const t = (key) => `translate ${key}`;
-
-  const state = {
+  const mockState = {
     metamask: {
       tokens: [],
       provider: { type: NETWORK_TYPES.RPC, nickname: '', rpcUrl: '' },
@@ -19,7 +16,7 @@ describe('View Price Quote Difference', () => {
     },
   };
 
-  const store = configureMockStore()(state);
+  const mockStore = configureMockStore()(mockState);
 
   // Sample transaction is 1 $ETH to ~42.880915 $LINK
   const DEFAULT_PROPS = {
@@ -85,57 +82,37 @@ describe('View Price Quote Difference', () => {
     destinationTokenValue: '42.947749',
   };
 
-  let component;
-  function renderComponent(props) {
-    component = shallow(
-      <Provider store={store}>
-        <ViewQuotePriceDifference {...props} />
-      </Provider>,
-      {
-        context: { t },
-      },
+  it('should match snapshot', () => {
+    const { container } = renderWithProvider(
+      <ViewQuotePriceDifference {...DEFAULT_PROPS} />,
+      mockStore,
     );
-  }
 
-  afterEach(() => {
-    component.unmount();
-  });
-
-  it('does not render when there is no quote', () => {
-    const props = { ...DEFAULT_PROPS, usedQuote: null };
-    renderComponent(props);
-
-    const wrappingDiv = component.find(
-      '.view-quote__price-difference-warning-wrapper',
-    );
-    expect(wrappingDiv).toHaveLength(0);
-  });
-
-  it('does not render when the item is in the low bucket', () => {
-    const props = { ...DEFAULT_PROPS };
-    props.usedQuote.priceSlippage.bucket = GAS_RECOMMENDATIONS.LOW;
-
-    renderComponent(props);
-    const wrappingDiv = component.find(
-      '.view-quote__price-difference-warning-wrapper',
-    );
-    expect(wrappingDiv).toHaveLength(0);
+    expect(container).toMatchSnapshot();
   });
 
   it('displays an error when in medium bucket', () => {
     const props = { ...DEFAULT_PROPS };
     props.usedQuote.priceSlippage.bucket = GAS_RECOMMENDATIONS.MEDIUM;
 
-    renderComponent(props);
-    expect(component.html()).toContain(GAS_RECOMMENDATIONS.MEDIUM);
+    const { container } = renderWithProvider(
+      <ViewQuotePriceDifference {...props} />,
+      mockStore,
+    );
+
+    expect(container).toMatchSnapshot();
   });
 
   it('displays an error when in high bucket', () => {
     const props = { ...DEFAULT_PROPS };
     props.usedQuote.priceSlippage.bucket = GAS_RECOMMENDATIONS.HIGH;
 
-    renderComponent(props);
-    expect(component.html()).toContain(GAS_RECOMMENDATIONS.HIGH);
+    const { container } = renderWithProvider(
+      <ViewQuotePriceDifference {...props} />,
+      mockStore,
+    );
+
+    expect(container).toMatchSnapshot();
   });
 
   it('displays a fiat error when calculationError is present', () => {
@@ -143,7 +120,11 @@ describe('View Price Quote Difference', () => {
     props.usedQuote.priceSlippage.calculationError =
       'Could not determine price.';
 
-    renderComponent(props);
-    expect(component.html()).toContain(GAS_RECOMMENDATIONS.HIGH);
+    const { container } = renderWithProvider(
+      <ViewQuotePriceDifference {...props} />,
+      mockStore,
+    );
+
+    expect(container).toMatchSnapshot();
   });
 });