diff --git a/src/api/__mocks__/reports.js b/src/api/__mocks__/reports.js
index 2cdeca07..48c5beed 100644
--- a/src/api/__mocks__/reports.js
+++ b/src/api/__mocks__/reports.js
@@ -9,6 +9,12 @@ const reports = [
 ]
 
 export async function fetchReports(limit, max_id, authHost, token) {
-  const filteredReports = max_id.length > 0 ? reports.slice(5) : reports.slice(0, 5)
-  return Promise.resolve({ data: { reports: filteredReports }})
+  const paginatedReports = max_id.length > 0 ? reports.slice(5) : reports.slice(0, 5)
+  return Promise.resolve({ data: { reports: paginatedReports }})
+}
+
+export async function filterReports(filter, limit, max_id, authHost, token) {
+  const filteredReports = reports.filter(report => report.state === filter)
+  const paginatedReports = max_id.length > 0 ? filteredReports.slice(5) : filteredReports.slice(0, 5)
+  return Promise.resolve({ data: { reports: paginatedReports }})
 }
diff --git a/test/views/reports/reportsFilter.test.js b/test/views/reports/reportsFilter.test.js
new file mode 100644
index 00000000..d5c6e992
--- /dev/null
+++ b/test/views/reports/reportsFilter.test.js
@@ -0,0 +1,79 @@
+import Vuex from 'vuex'
+import { mount, createLocalVue, config } from '@vue/test-utils'
+import Element from 'element-ui'
+import storeConfig from './store.conf'
+import { cloneDeep } from 'lodash'
+import flushPromises from 'flush-promises'
+
+config.mocks["$t"] = () => {}
+config.stubs.transition = false
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+localVue.use(Element)
+
+jest.mock('@/api/reports')
+
+describe('Reports filter', () => {
+  let store
+
+  beforeEach(async() => {
+    store = new Vuex.Store(cloneDeep(storeConfig))
+    store.dispatch('FetchReports')
+    await flushPromises()
+  })
+
+  it('shows open reports when "Open" filter is applied', async (done) => {
+    expect(store.state.reports.fetchedReports.length).toEqual(5)
+
+    store.dispatch('SetFilter', 'open')
+    store.dispatch('ClearFetchedReports')
+    store.dispatch('FetchReports')
+    await flushPromises()
+    expect(store.state.reports.fetchedReports.length).toEqual(2)
+
+    done()
+  })
+
+  it('shows resolved reports when "Resolved" filter is applied', async (done) => {
+    expect(store.state.reports.fetchedReports.length).toEqual(5)
+
+    store.dispatch('SetFilter', 'resolved')
+    store.dispatch('ClearFetchedReports')
+    store.dispatch('FetchReports')
+    await flushPromises()
+    expect(store.state.reports.fetchedReports.length).toEqual(2)
+
+    done()
+  })
+
+  it('shows closed reports when "Closed" filter is applied', async (done) => {
+    expect(store.state.reports.fetchedReports.length).toEqual(5)
+
+    store.dispatch('SetFilter', 'closed')
+    store.dispatch('ClearFetchedReports')
+    store.dispatch('FetchReports')
+    await flushPromises()
+    expect(store.state.reports.fetchedReports.length).toEqual(3)
+
+    done()
+  })
+
+  it('shows all users after removing filters', async (done) => {
+    expect(store.state.reports.fetchedReports.length).toEqual(5)
+
+    store.dispatch('SetFilter', 'open')
+    store.dispatch('ClearFetchedReports')
+    store.dispatch('FetchReports')
+    await flushPromises()
+    expect(store.state.reports.fetchedReports.length).toEqual(2)
+
+    store.dispatch('SetFilter', '')
+    store.dispatch('ClearFetchedReports')
+    store.dispatch('FetchReports')
+    await flushPromises()
+    expect(store.state.reports.fetchedReports.length).toEqual(5)
+
+    done()
+  })
+})