diff --git a/app/javascript/components/import/ImportHistoryPage.tsx b/app/javascript/components/import/ImportHistoryPage.tsx
index e64512c0..fa552066 100644
--- a/app/javascript/components/import/ImportHistoryPage.tsx
+++ b/app/javascript/components/import/ImportHistoryPage.tsx
@@ -18,9 +18,11 @@ const ImportHistoryPage = () => {
     { skip: !currentAccount },
   )
 
+  const isLoading = !currentAccount || !bankStatements
+
   return (
     <div className="import-history">
-      <PageHeader title="import history" apiStatus={{}} />
+      <PageHeader title="import history" isLoading={isLoading} />
       <SearchCriteria filters={[{ name: ACCOUNT_FILTER }]} />
       {bankStatements && (
         <div className="container">
diff --git a/spec/javascript/components/import/ImportHIstoryPage.test.tsx b/spec/javascript/components/import/ImportHIstoryPage.test.tsx
new file mode 100644
index 00000000..88b93f00
--- /dev/null
+++ b/spec/javascript/components/import/ImportHIstoryPage.test.tsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import { http, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
+import { expect, test, beforeAll, afterEach, afterAll } from 'vitest'
+
+import store from 'stores/store'
+import { accountsMock, accountTypesMock } from 'mocks/accountMocks'
+import { bankStatementsMock } from 'mocks/bankStatementMocks'
+import ImportHistoryPage from 'components/import/ImportHistoryPage'
+
+const handlers = [
+  http.get('/api/account_types', async () => {
+    return HttpResponse.json(accountTypesMock)
+  }),
+  http.get('/api/accounts', async () => {
+    return HttpResponse.json(accountsMock)
+  }),
+  http.get('/api/accounts/1/bank_statements', async () => {
+    return HttpResponse.json(bankStatementsMock)
+  }),
+]
+const server = setupServer(...handlers)
+
+beforeAll(() => server.listen())
+afterEach(() => server.resetHandlers())
+afterAll(() => server.close())
+
+test('renders a list of accounts', async () => {
+  render(
+    <Provider store={store}>
+      <ImportHistoryPage />
+    </Provider>,
+  )
+
+  // page header
+  const pageTitle = screen.getByRole('heading', { level: 1 })
+  expect(pageTitle.textContent).toEqual('import history')
+
+  await waitFor(() => {
+    // delete button for each row
+    expect(screen.getAllByText('Delete').length).toEqual(2)
+
+    // bank statement 1
+    expect(screen.getByText('19-Oct-2001')).toBeDefined()
+    expect(screen.getByText('one.ofx')).toBeDefined()
+    expect(screen.getByText('6')).toBeDefined()
+
+    // bank statement 2
+    expect(screen.getByText('20-Oct-2001')).toBeDefined()
+    expect(screen.getByText('two.ofx')).toBeDefined()
+    expect(screen.getByText('8')).toBeDefined()
+  })
+})
diff --git a/spec/javascript/components/import/ImportHistoryPage.test.js b/spec/javascript/components/import/ImportHistoryPage.test.js
deleted file mode 100644
index 6263c45e..00000000
--- a/spec/javascript/components/import/ImportHistoryPage.test.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { ImportHistoryPageComponent as ImportHistoryPage } from '../import-history-page';
-import PageHeader from '../../common/page-header';
-import SearchCriteria, { ACCOUNT_FILTER } from '../../common/criteria/search-criteria';
-import BankStatementTable from '../bank-statement-table';
-import BankStatementDeleteModal from '../bank-statement-delete-modal';
-import * as BankStatementActions from '../../../actions/bank-statement-actions';
-
-describe('ImportHistoryPage', () => {
-  let importHistoryPage;
-  const bankStatements = [
-    { id: 123, accountId: 2, date: '2001-10-19', fileName: 'one.ofx', transactionCount: 6 },
-    { id: 456, accountId: 2, date: '2001-10-20', fileName: 'two.ofx', transactionCount: 8 },
-  ];
-
-  beforeEach(() => {
-    spyOn(BankStatementActions, 'getBankStatements');
-  });
-
-  describe('render', () => {
-    it('has a header, filter and modal', () => {
-      importHistoryPage = shallow(
-        <ImportHistoryPage
-          loaded={false}
-          apiStatus={{ status: 'DONE' }}
-          bankStatements={[]}
-          bankStatementForDelete={bankStatements[1]}
-        />
-      );
-
-      const [header, filter, table, modal] = importHistoryPage.children();
-
-      expect(header.type).toEqual(PageHeader);
-      expect(header.props.title).toEqual('import history');
-      expect(header.props.apiStatus).toEqual({ status: 'DONE' });
-
-      expect(filter.type).toEqual(SearchCriteria);
-      expect(filter.props.filters).toEqual([{ name: ACCOUNT_FILTER }]);
-
-      expect(table).toEqual(<div />);
-
-      expect(modal.type).toEqual(BankStatementDeleteModal);
-      expect(modal.props.bankStatement).toEqual(bankStatements[1]);
-    });
-
-    it('has a table if bank statements are loaded', () => {
-      importHistoryPage = shallow(
-        <ImportHistoryPage loaded apiStatus={{ status: 'DONE' }} bankStatements={bankStatements} />
-      );
-
-      const table = importHistoryPage.find(BankStatementTable);
-      expect(table.prop('bankStatements')).toEqual(bankStatements);
-    });
-  });
-});
diff --git a/spec/javascript/mocks/bankStatementMocks.ts b/spec/javascript/mocks/bankStatementMocks.ts
index f6a0f247..a2d05460 100644
--- a/spec/javascript/mocks/bankStatementMocks.ts
+++ b/spec/javascript/mocks/bankStatementMocks.ts
@@ -1,3 +1,6 @@
+import { BankStatementResponse } from 'types/api'
+import { BankStatement } from 'types/models'
+
 export const ofxTransactions = [
   {
     accountId: 1,
@@ -22,3 +25,24 @@ export const ofxTransactions = [
     subcategoryId: 46,
   },
 ]
+
+const bankStatements: BankStatementResponse[] = [
+  {
+    id: 123,
+    account_id: 1,
+    date: '2001-10-19',
+    file_name: 'one.ofx',
+    transaction_count: 6,
+  },
+  {
+    id: 456,
+    account_id: 1,
+    date: '2001-10-20',
+    file_name: 'two.ofx',
+    transaction_count: 8,
+  },
+]
+
+export const bankStatementsMock = {
+  bank_statements: bankStatements,
+}