diff --git a/.github/workflows/pipeline.yml b/.github/workflows/pipeline.yml
index ae07799b..2b33a84f 100644
--- a/.github/workflows/pipeline.yml
+++ b/.github/workflows/pipeline.yml
@@ -82,6 +82,11 @@ jobs:
           cd ui
           npm run check-formatting
 
+      - name: npm test
+        run: |
+          cd ui
+          npm test
+
       - name: npm build
         run: |
           cd ui
diff --git a/ui/src/common/RangeField.js b/ui/src/common/RangeField.js
index b88e155e..7e9bbc93 100644
--- a/ui/src/common/RangeField.js
+++ b/ui/src/common/RangeField.js
@@ -1,6 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { formatRange } from '../utils'
+
+export const formatRange = (record, source) => {
+  const nameCapitalized = source.charAt(0).toUpperCase() + source.slice(1)
+  const min = record[`min${nameCapitalized}`]
+  const max = record[`max${nameCapitalized}`]
+  let range = []
+  if (min) {
+    range.push(min)
+  }
+  if (max && max !== min) {
+    range.push(max)
+  }
+  return range.join('-')
+}
 
 export const RangeField = ({ className, record = {}, source }) => {
   return <span className={className}>{formatRange(record, source)}</span>
diff --git a/ui/src/utils/formatters.js b/ui/src/utils/formatters.js
index 537fafc6..3702c5d7 100644
--- a/ui/src/utils/formatters.js
+++ b/ui/src/utils/formatters.js
@@ -10,20 +10,6 @@ export const formatBytes = (bytes, decimals = 2) => {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
 }
 
-export const formatRange = (record, source) => {
-  const nameCapitalized = source.charAt(0).toUpperCase() + source.slice(1)
-  const min = record[`min${nameCapitalized}`]
-  const max = record[`max${nameCapitalized}`]
-  let range = []
-  if (min) {
-    range.push(min)
-  }
-  if (max && max !== min) {
-    range.push(max)
-  }
-  return range.join('-')
-}
-
 export const formatDuration = (d) => {
   const hours = Math.floor(d / 3600)
   const minutes = Math.floor(d / 60) % 60
diff --git a/ui/src/utils/formatters.test.js b/ui/src/utils/formatters.test.js
new file mode 100644
index 00000000..0cb8c94a
--- /dev/null
+++ b/ui/src/utils/formatters.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { formatBytes, formatDuration } from './formatters'
+
+describe('formatBytes', () => {
+  it('format bytes', () => {
+    expect(formatBytes(0)).toEqual('0 Bytes')
+    expect(formatBytes(1000)).toEqual('1000 Bytes')
+    expect(formatBytes(1024)).toEqual('1 KB')
+    expect(formatBytes(1024 * 1024)).toEqual('1 MB')
+    expect(formatBytes(1024 * 1024 * 1024)).toEqual('1 GB')
+    expect(formatBytes(1024 * 1024 * 1024 * 1024)).toEqual('1 TB')
+  })
+})
+
+const day = 86400
+const hour = 3600
+const minute = 60
+
+describe('formatDuration', () => {
+  it('format seconds', () => {
+    expect(formatDuration(0)).toEqual('00:00')
+    expect(formatDuration(59)).toEqual('00:59')
+    expect(formatDuration(hour + minute + 1)).toEqual('01:01:01')
+    expect(formatDuration(2 * day + 3 * hour + 7 * minute)).toEqual('51:07:00')
+  })
+})