diff --git a/src/components/DateNavigator/DateNavigator.spec.tsx b/src/components/DateNavigator/DateNavigator.spec.tsx
index 8cd2494ef27ec449db23f6afc6184dce346eb196..4f26b7be1a47c5e48378b25712069ade3571ef97 100644
--- a/src/components/DateNavigator/DateNavigator.spec.tsx
+++ b/src/components/DateNavigator/DateNavigator.spec.tsx
@@ -1,10 +1,8 @@
-import { IconButton } from '@material-ui/core'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import { TimeStep } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import { DateTime } from 'luxon'
 import React from 'react'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 import DateNavigator from './DateNavigator'
 
 jest.mock(
@@ -17,90 +15,56 @@ const mockedDate = DateTime.local(2021, 7, 1)
     keepLocalTime: true,
   })
   .startOf('day')
+
 describe('DateNavigator component', () => {
-  const mockHandleNextDate = jest.fn()
-  const mockHandlePrevDate = jest.fn()
-  beforeEach(() => {
-    jest.clearAllMocks()
-  })
   it('should be rendered correctly', async () => {
-    const wrapper = mount(
+    const { container } = render(
       <DateNavigator
         disableNext={false}
         disablePrev={false}
-        handleNextDate={mockHandleNextDate}
-        handlePrevDate={mockHandlePrevDate}
+        handleNextDate={jest.fn()}
+        handlePrevDate={jest.fn()}
         navigatorDate={mockedDate}
         timeStep={TimeStep.MONTH}
       />
     )
-    await waitForComponentToPaint(wrapper)
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(container).toMatchSnapshot()
   })
 
-  describe('should test navigation functions', () => {
-    describe('should test previous arrow', () => {
-      it('should call handlePrevDate', async () => {
-        const wrapper = mount(
-          <DateNavigator
-            disableNext={false}
-            disablePrev={false}
-            handleNextDate={mockHandleNextDate}
-            handlePrevDate={mockHandlePrevDate}
-            navigatorDate={mockedDate}
-            timeStep={TimeStep.MONTH}
-          />
-        )
-        wrapper.find(IconButton).first().simulate('click')
-        expect(mockHandlePrevDate).toHaveBeenCalledTimes(1)
-      })
-
-      it('should NOT call handlePrevDate if disablePrev is true', async () => {
-        const wrapper = mount(
-          <DateNavigator
-            disableNext={false}
-            disablePrev={true}
-            handleNextDate={mockHandleNextDate}
-            handlePrevDate={mockHandlePrevDate}
-            navigatorDate={mockedDate}
-            timeStep={TimeStep.MONTH}
-          />
-        )
-        wrapper.find(IconButton).first().simulate('click')
-        expect(mockHandlePrevDate).toHaveBeenCalledTimes(0)
-      })
-    })
+  it('should test navigation functions', async () => {
+    const mockHandleNextDate = jest.fn()
+    const mockHandlePrevDate = jest.fn()
+    render(
+      <DateNavigator
+        disableNext={false}
+        disablePrev={false}
+        handleNextDate={mockHandleNextDate}
+        handlePrevDate={mockHandlePrevDate}
+        navigatorDate={mockedDate}
+        timeStep={TimeStep.MONTH}
+      />
+    )
+    const [prevIcon, nextIcon] = screen.getAllByRole('button')
+    await userEvent.click(prevIcon)
+    expect(mockHandlePrevDate).toHaveBeenCalledTimes(1)
 
-    describe('should test next arrow', () => {
-      it('should call mockHandleNextDate', async () => {
-        const wrapper = mount(
-          <DateNavigator
-            disableNext={false}
-            disablePrev={false}
-            handleNextDate={mockHandleNextDate}
-            handlePrevDate={mockHandlePrevDate}
-            navigatorDate={mockedDate}
-            timeStep={TimeStep.MONTH}
-          />
-        )
-        wrapper.find(IconButton).at(1).simulate('click')
-        expect(mockHandleNextDate).toHaveBeenCalledTimes(1)
-      })
+    await userEvent.click(nextIcon)
+    expect(mockHandleNextDate).toHaveBeenCalledTimes(1)
+  })
 
-      it('should NOT call mockHandleNextDate if disableNext is true', async () => {
-        const wrapper = mount(
-          <DateNavigator
-            disableNext={true}
-            disablePrev={false}
-            handleNextDate={mockHandleNextDate}
-            handlePrevDate={mockHandlePrevDate}
-            navigatorDate={mockedDate}
-            timeStep={TimeStep.MONTH}
-          />
-        )
-        wrapper.find(IconButton).at(1).simulate('click')
-        expect(mockHandleNextDate).toHaveBeenCalledTimes(0)
-      })
-    })
+  it('should not be able to click nav buttons', async () => {
+    render(
+      <DateNavigator
+        disableNext={true}
+        disablePrev={true}
+        handleNextDate={jest.fn()}
+        handlePrevDate={jest.fn()}
+        navigatorDate={mockedDate}
+        timeStep={TimeStep.MONTH}
+      />
+    )
+    const [prevIcon, nextButton] = screen.getAllByRole('button')
+    expect(prevIcon).toBeDisabled()
+    expect(nextButton).toBeDisabled()
   })
 })
diff --git a/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap b/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
index 8daf2089343eeaee62c17f6c24f86038176a0d71..aef335f2e5a5c2279374f2c02a5e1c608975850e 100644
--- a/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
+++ b/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
@@ -1,276 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DateNavigator component should be rendered correctly 1`] = `
-<DateNavigator
-  disableNext={false}
-  disablePrev={false}
-  handleNextDate={[MockFunction]}
-  handlePrevDate={[MockFunction]}
-  navigatorDate={"2021-07-01T00:00:00.000Z"}
-  timeStep={40}
->
+<div>
   <div
-    className="date-navigator"
+    class="date-navigator"
   >
-    <WithStyles(ForwardRef(IconButton))
+    <button
       aria-label="consumption.accessibility.button_previous_value"
-      className="date-navigator-button"
-      disabled={false}
-      onClick={[MockFunction]}
+      class="MuiButtonBase-root MuiIconButton-root date-navigator-button"
+      tabindex="0"
+      type="button"
     >
-      <ForwardRef(IconButton)
-        aria-label="consumption.accessibility.button_previous_value"
-        className="date-navigator-button"
-        classes={
-          Object {
-            "colorInherit": "MuiIconButton-colorInherit",
-            "colorPrimary": "MuiIconButton-colorPrimary",
-            "colorSecondary": "MuiIconButton-colorSecondary",
-            "disabled": "Mui-disabled",
-            "edgeEnd": "MuiIconButton-edgeEnd",
-            "edgeStart": "MuiIconButton-edgeStart",
-            "label": "MuiIconButton-label",
-            "root": "MuiIconButton-root",
-            "sizeSmall": "MuiIconButton-sizeSmall",
-          }
-        }
-        disabled={false}
-        onClick={[MockFunction]}
+      <span
+        class="MuiIconButton-label"
       >
-        <WithStyles(ForwardRef(ButtonBase))
-          aria-label="consumption.accessibility.button_previous_value"
-          centerRipple={true}
-          className="MuiIconButton-root date-navigator-button"
-          disabled={false}
-          focusRipple={true}
-          onClick={[MockFunction]}
+        <svg
+          class="styles__icon___23x3R"
+          height="16"
+          width="16"
         >
-          <ForwardRef(ButtonBase)
-            aria-label="consumption.accessibility.button_previous_value"
-            centerRipple={true}
-            className="MuiIconButton-root date-navigator-button"
-            classes={
-              Object {
-                "disabled": "Mui-disabled",
-                "focusVisible": "Mui-focusVisible",
-                "root": "MuiButtonBase-root",
-              }
-            }
-            disabled={false}
-            focusRipple={true}
-            onClick={[MockFunction]}
-          >
-            <button
-              aria-label="consumption.accessibility.button_previous_value"
-              className="MuiButtonBase-root MuiIconButton-root date-navigator-button"
-              disabled={false}
-              onBlur={[Function]}
-              onClick={[MockFunction]}
-              onDragLeave={[Function]}
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onKeyUp={[Function]}
-              onMouseDown={[Function]}
-              onMouseLeave={[Function]}
-              onMouseUp={[Function]}
-              onTouchEnd={[Function]}
-              onTouchMove={[Function]}
-              onTouchStart={[Function]}
-              tabIndex={0}
-              type="button"
-            >
-              <span
-                className="MuiIconButton-label"
-              >
-                <Icon
-                  icon="test-file-stub"
-                  size={16}
-                  spin={false}
-                >
-                  <Component
-                    className="styles__icon___23x3R"
-                    height={16}
-                    style={Object {}}
-                    width={16}
-                  >
-                    <svg
-                      className="styles__icon___23x3R"
-                      height={16}
-                      style={Object {}}
-                      width={16}
-                    >
-                      <use
-                        xlinkHref="#test-file-stub"
-                      />
-                    </svg>
-                  </Component>
-                </Icon>
-              </span>
-              <WithStyles(memo)
-                center={true}
-              >
-                <ForwardRef(TouchRipple)
-                  center={true}
-                  classes={
-                    Object {
-                      "child": "MuiTouchRipple-child",
-                      "childLeaving": "MuiTouchRipple-childLeaving",
-                      "childPulsate": "MuiTouchRipple-childPulsate",
-                      "ripple": "MuiTouchRipple-ripple",
-                      "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                      "rippleVisible": "MuiTouchRipple-rippleVisible",
-                      "root": "MuiTouchRipple-root",
-                    }
-                  }
-                >
-                  <span
-                    className="MuiTouchRipple-root"
-                  >
-                    <TransitionGroup
-                      childFactory={[Function]}
-                      component={null}
-                      exit={true}
-                    />
-                  </span>
-                </ForwardRef(TouchRipple)>
-              </WithStyles(memo)>
-            </button>
-          </ForwardRef(ButtonBase)>
-        </WithStyles(ForwardRef(ButtonBase))>
-      </ForwardRef(IconButton)>
-    </WithStyles(ForwardRef(IconButton))>
+          <use
+            xlink:href="#test-file-stub"
+          />
+        </svg>
+      </span>
+      <span
+        class="MuiTouchRipple-root"
+      />
+    </button>
     <mock-date-navigator-format
-      date={"2021-07-01T00:00:00.000Z"}
-      inline={false}
-      timeStep={40}
+      date="1625097600000"
+      inline="false"
+      timestep="40"
     />
-    <WithStyles(ForwardRef(IconButton))
+    <button
       aria-label="consumption.accessibility.button_next_value"
-      className="date-navigator-button"
-      disabled={false}
-      onClick={[MockFunction]}
+      class="MuiButtonBase-root MuiIconButton-root date-navigator-button"
+      tabindex="0"
+      type="button"
     >
-      <ForwardRef(IconButton)
-        aria-label="consumption.accessibility.button_next_value"
-        className="date-navigator-button"
-        classes={
-          Object {
-            "colorInherit": "MuiIconButton-colorInherit",
-            "colorPrimary": "MuiIconButton-colorPrimary",
-            "colorSecondary": "MuiIconButton-colorSecondary",
-            "disabled": "Mui-disabled",
-            "edgeEnd": "MuiIconButton-edgeEnd",
-            "edgeStart": "MuiIconButton-edgeStart",
-            "label": "MuiIconButton-label",
-            "root": "MuiIconButton-root",
-            "sizeSmall": "MuiIconButton-sizeSmall",
-          }
-        }
-        disabled={false}
-        onClick={[MockFunction]}
+      <span
+        class="MuiIconButton-label"
       >
-        <WithStyles(ForwardRef(ButtonBase))
-          aria-label="consumption.accessibility.button_next_value"
-          centerRipple={true}
-          className="MuiIconButton-root date-navigator-button"
-          disabled={false}
-          focusRipple={true}
-          onClick={[MockFunction]}
+        <svg
+          class="styles__icon___23x3R"
+          height="16"
+          width="16"
         >
-          <ForwardRef(ButtonBase)
-            aria-label="consumption.accessibility.button_next_value"
-            centerRipple={true}
-            className="MuiIconButton-root date-navigator-button"
-            classes={
-              Object {
-                "disabled": "Mui-disabled",
-                "focusVisible": "Mui-focusVisible",
-                "root": "MuiButtonBase-root",
-              }
-            }
-            disabled={false}
-            focusRipple={true}
-            onClick={[MockFunction]}
-          >
-            <button
-              aria-label="consumption.accessibility.button_next_value"
-              className="MuiButtonBase-root MuiIconButton-root date-navigator-button"
-              disabled={false}
-              onBlur={[Function]}
-              onClick={[MockFunction]}
-              onDragLeave={[Function]}
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onKeyUp={[Function]}
-              onMouseDown={[Function]}
-              onMouseLeave={[Function]}
-              onMouseUp={[Function]}
-              onTouchEnd={[Function]}
-              onTouchMove={[Function]}
-              onTouchStart={[Function]}
-              tabIndex={0}
-              type="button"
-            >
-              <span
-                className="MuiIconButton-label"
-              >
-                <Icon
-                  icon="test-file-stub"
-                  size={16}
-                  spin={false}
-                >
-                  <Component
-                    className="styles__icon___23x3R"
-                    height={16}
-                    style={Object {}}
-                    width={16}
-                  >
-                    <svg
-                      className="styles__icon___23x3R"
-                      height={16}
-                      style={Object {}}
-                      width={16}
-                    >
-                      <use
-                        xlinkHref="#test-file-stub"
-                      />
-                    </svg>
-                  </Component>
-                </Icon>
-              </span>
-              <WithStyles(memo)
-                center={true}
-              >
-                <ForwardRef(TouchRipple)
-                  center={true}
-                  classes={
-                    Object {
-                      "child": "MuiTouchRipple-child",
-                      "childLeaving": "MuiTouchRipple-childLeaving",
-                      "childPulsate": "MuiTouchRipple-childPulsate",
-                      "ripple": "MuiTouchRipple-ripple",
-                      "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                      "rippleVisible": "MuiTouchRipple-rippleVisible",
-                      "root": "MuiTouchRipple-root",
-                    }
-                  }
-                >
-                  <span
-                    className="MuiTouchRipple-root"
-                  >
-                    <TransitionGroup
-                      childFactory={[Function]}
-                      component={null}
-                      exit={true}
-                    />
-                  </span>
-                </ForwardRef(TouchRipple)>
-              </WithStyles(memo)>
-            </button>
-          </ForwardRef(ButtonBase)>
-        </WithStyles(ForwardRef(ButtonBase))>
-      </ForwardRef(IconButton)>
-    </WithStyles(ForwardRef(IconButton))>
+          <use
+            xlink:href="#test-file-stub"
+          />
+        </svg>
+      </span>
+      <span
+        class="MuiTouchRipple-root"
+      />
+    </button>
   </div>
-</DateNavigator>
+</div>
 `;