diff --git a/src/components/common/NavButton.tsx b/src/components/common/NavButton.tsx
index 1bf715c..d1e5489 100644
--- a/src/components/common/NavButton.tsx
+++ b/src/components/common/NavButton.tsx
@@ -15,10 +15,10 @@ import React, { MouseEventHandler } from "react";
 export interface NavButtonProps {
   name: string;
   icon: string;
-  onClick?: MouseEventHandler;
+  onClick: MouseEventHandler;
 }
 
-export default ({ name, icon, onClick = () => {} }: NavButtonProps) => (
+const NavButton = ({ name, icon, onClick }: NavButtonProps) => (
   <li className="nav-item">
     <a
       href="#"
@@ -33,3 +33,9 @@ export default ({ name, icon, onClick = () => {} }: NavButtonProps) => (
     </a>
   </li>
 );
+
+NavButton.defaultProps = {
+  onClick: () => {}
+};
+
+export default NavButton;
diff --git a/src/components/common/__tests__/EnableDisable.test.tsx b/src/components/common/__tests__/EnableDisable.test.tsx
index c091a17..73ace49 100644
--- a/src/components/common/__tests__/EnableDisable.test.tsx
+++ b/src/components/common/__tests__/EnableDisable.test.tsx
@@ -84,7 +84,8 @@ describe("EnableDisable", () => {
       wrapper
         .find(NavButton)
         .at(buttonIndex)
-        .props().onClick!({} as MouseEvent);
+        .props()
+        .onClick({} as MouseEvent);
 
       // Wait for the setStatus promise to resolve
       await tick();
@@ -128,7 +129,10 @@ describe("EnableDisable", () => {
 
       wrapper.setState({ processing: true });
 
-      wrapper.find(NavButton).props().onClick!({} as MouseEvent);
+      wrapper
+        .find(NavButton)
+        .props()
+        .onClick({} as MouseEvent);
 
       expect(setStatus).not.toHaveBeenCalled();
     });
@@ -147,7 +151,10 @@ describe("EnableDisable", () => {
         />
       );
 
-      wrapper.find(NavButton).props().onClick!({} as MouseEvent);
+      wrapper
+        .find(NavButton)
+        .props()
+        .onClick({} as MouseEvent);
 
       wrapper.unmount();
 
@@ -168,7 +175,10 @@ describe("EnableDisable", () => {
         />
       );
 
-      wrapper.find(NavButton).props().onClick!({} as MouseEvent);
+      wrapper
+        .find(NavButton)
+        .props()
+        .onClick({} as MouseEvent);
 
       expect(wrapper.state().processing).toBeTruthy();
 
@@ -216,7 +226,8 @@ describe("EnableDisable", () => {
       wrapper
         .find(NavButton)
         .last()
-        .props().onClick!({} as MouseEvent);
+        .props()
+        .onClick({} as MouseEvent);
 
       expect(wrapper.find(Modal).props().isOpen).toBeTruthy();
     });
diff --git a/src/components/common/__tests__/Sidebar.test.tsx b/src/components/common/__tests__/Sidebar.test.tsx
index fe44bf0..0dff7b5 100644
--- a/src/components/common/__tests__/Sidebar.test.tsx
+++ b/src/components/common/__tests__/Sidebar.test.tsx
@@ -8,7 +8,7 @@
  * This file is copyright under the latest version of the EUPL.
  * Please see LICENSE file for your rights under this license. */
 
-import React from "react";
+import React, { MouseEvent } from "react";
 import { shallow } from "enzyme";
 import Sidebar, { NavList, PiholeNavDropdown, PiholeNavItem } from "../Sidebar";
 import api from "../../../util/api";
@@ -207,11 +207,7 @@ it("should hide the sidebar on mobile when an item is clicked", () => {
   document.body.classList.add("sidebar-show");
   expect(document.body.classList).toContain("sidebar-show");
 
-  // @ts-ignore
-  wrapper
-    .find(NavLink)
-    .props()
-    .onClick();
+  wrapper.find(NavLink).props().onClick!({} as MouseEvent<HTMLAnchorElement>);
 
   expect(document.body.classList).not.toContain("sidebar-show");
 });