diff --git a/app/soapbox/features/ui/components/modals/report-modal/__tests__/report-modal.test.tsx b/app/soapbox/features/ui/components/modals/report-modal/__tests__/report-modal.test.tsx
new file mode 100644
index 000000000..f50732146
--- /dev/null
+++ b/app/soapbox/features/ui/components/modals/report-modal/__tests__/report-modal.test.tsx
@@ -0,0 +1,68 @@
+import userEvent from '@testing-library/user-event';
+import { Map as ImmutableMap, Set as ImmutableSet } from 'immutable';
+import React from 'react';
+
+import { __stub } from 'soapbox/api';
+
+import { render, screen } from '../../../../../../jest/test-helpers';
+import { normalizeAccount, normalizeStatus } from '../../../../../../normalizers';
+import ReportModal from '../report-modal';
+
+describe('<ReportModal />', () => {
+  let store;
+
+  beforeEach(() => {
+    const rules = require('soapbox/__fixtures__/rules.json');
+    const status = require('soapbox/__fixtures__/status-unordered-mentions.json');
+
+    store = {
+      accounts: ImmutableMap({
+        '1': normalizeAccount({
+          id: '1',
+          acct: 'username',
+          display_name: 'My name',
+          avatar: 'test.jpg',
+        }),
+      }),
+      reports: ImmutableMap({
+        new: {
+          account_id: '1',
+          status_ids: ImmutableSet(['1']),
+        },
+      }),
+      statuses: ImmutableMap({
+        '1': normalizeStatus(status),
+      }),
+      rules: {
+        items: rules,
+      },
+    };
+
+    __stub(mock => {
+      mock.onGet('/api/v1/instance/rules').reply(200, rules);
+      mock.onPost('/api/v1/reports').reply(200, {});
+    });
+  });
+
+  it('successfully renders the first step', () => {
+    render(<ReportModal onClose={jest.fn} />, {}, store);
+    expect(screen.getByText('Reason for reporting')).toBeInTheDocument();
+  });
+
+  it('successfully moves to the second step', async() => {
+    const user = userEvent.setup();
+    render(<ReportModal onClose={jest.fn} />, {}, store);
+    await user.click(screen.getByTestId('rule-1'));
+    await user.click(screen.getByText('Next'));
+    expect(screen.getByText(/Further actions:/)).toBeInTheDocument();
+  });
+
+  it('successfully moves to the third step', async() => {
+    const user = userEvent.setup();
+    render(<ReportModal onClose={jest.fn} />, {}, store);
+    await user.click(screen.getByTestId('rule-1'));
+    await user.click(screen.getByText(/Next/));
+    await user.click(screen.getByText(/Submit/));
+    expect(screen.getByText(/Thanks for submitting your report/)).toBeInTheDocument();
+  });
+});
diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
index e8a6d07ef..8bd5a4860 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
@@ -127,6 +127,7 @@ const ReasonStep = (_props: IReasonStep) => {
               return (
                 <button
                   key={idx}
+                  data-testid={`rule-${rule.id}`}
                   onClick={() => dispatch(changeReportRule(rule.id))}
                   className={classNames({
                     'relative border border-solid border-gray-200 hover:bg-gray-50 text-left w-full p-4 flex justify-between items-center cursor-pointer': true,