diff --git a/ui/src/app/notifications/component/NotificationItem.test.js b/ui/src/app/notifications/component/NotificationItem.test.js
index 93733a660..b06b32984 100644
--- a/ui/src/app/notifications/component/NotificationItem.test.js
+++ b/ui/src/app/notifications/component/NotificationItem.test.js
@@ -30,21 +30,4 @@ describe('Notifcation Item', () => {
 
         expect(mockOnRemove).toHaveBeenCalled();
     });
-
-    it('should be removed when clicked', () => {
-
-        const mockOnRemove = jest.fn();
-
-        render(<NotificationItem type="danger" body="foo" timeout={5000} onRemove={mockOnRemove} />);
-
-        const el = screen.getByText('Close alert');
-
-        fireEvent(el,
-            new MouseEvent('click', {
-                bubbles: true,
-                cancelable: true,
-            }));
-
-        expect(mockOnRemove).toHaveBeenCalled();
-    });
 })
diff --git a/ui/src/app/notifications/component/NotificationList.test.js b/ui/src/app/notifications/component/NotificationList.test.js
new file mode 100644
index 000000000..c65b7a007
--- /dev/null
+++ b/ui/src/app/notifications/component/NotificationList.test.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { NotificationList } from './NotificationList';
+import { NotificationContext } from '../hoc/Notifications';
+
+jest.mock('../../i18n/hooks', () => ({
+    useTranslation: (value) => value
+}));
+
+describe('Notification List', () => {
+    it('should render notifications', () => {
+        const dispatch = jest.fn();
+        const state = { notifications: [{id: 'foo', body: 'foo', type: 'danger'}] };
+        render(
+        <NotificationContext.Provider value={{ state, dispatch }}>
+            <NotificationList />
+        </NotificationContext.Provider>
+        );
+
+        expect(screen.getByText('foo')).toBeInTheDocument();
+    });
+})
diff --git a/ui/src/app/notifications/hoc/Notifications.js b/ui/src/app/notifications/hoc/Notifications.js
index 874a3fb28..8b6383211 100644
--- a/ui/src/app/notifications/hoc/Notifications.js
+++ b/ui/src/app/notifications/hoc/Notifications.js
@@ -41,7 +41,7 @@ export const removeNotificationAction = (id) => {
     }
 }
 
-function reducer(state, action) {
+export function reducer(state, action) {
     switch (action.type) {
         case NotificationActions.ADD_NOTIFICATION:
             return {
diff --git a/ui/src/app/notifications/hoc/Notifications.test.js b/ui/src/app/notifications/hoc/Notifications.test.js
new file mode 100644
index 000000000..728378d7e
--- /dev/null
+++ b/ui/src/app/notifications/hoc/Notifications.test.js
@@ -0,0 +1,24 @@
+import { createNotificationAction, reducer, removeNotificationAction } from './Notifications';
+
+describe('Notifications HOC', () => {
+    describe('reducer', () => {
+        it('should add a notification to its state list', () => {
+            const state = reducer({
+                notifications: []
+            }, createNotificationAction('foo'));
+            expect(state.notifications.length).toBe(1);
+        })
+
+        it('should remove a notification to its state list', () => {
+            const state = reducer({
+                notifications: [
+                    {
+                        id: 'foo'
+                    }
+                ]
+            }, removeNotificationAction('foo'));
+            
+            expect(state.notifications.length).toBe(0);
+        })
+    });
+});
\ No newline at end of file