diff --git a/CHANGELOG.md b/CHANGELOG.md
index 683a1e5d..455a6b11 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@
 * Fix inconsistency in RTL/Jest tests. Refs UIREQ-979.
 * Remove redundant ariaLabel prop. Refs UIREQ-972.
 * TLRs check circulation rules before request is placed. Refs UIREQ-960.
+* Create Jest/RTL test for CancelRequestDialog.js. Refs UIREQ-876.
 
 ## [8.0.2](https://github.com/folio-org/ui-requests/tree/v8.0.2) (2023-03-29)
 [Full Changelog](https://github.com/folio-org/ui-requests/compare/v8.0.1...v8.0.2)
diff --git a/src/CancelRequestDialog.js b/src/CancelRequestDialog.js
index 5ea8f100..2dc12702 100644
--- a/src/CancelRequestDialog.js
+++ b/src/CancelRequestDialog.js
@@ -150,6 +150,7 @@ class CancelRequestDialog extends React.Component {
     const footer = (
       <ModalFooter>
         <Button
+          data-testid="cancelRequestDialogCancel"
           data-test-confirm-cancel-request
           buttonStyle="primary"
           onClick={this.onCancelRequestHandler}
@@ -158,6 +159,7 @@ class CancelRequestDialog extends React.Component {
           <FormattedMessage id="stripes-core.button.confirm" />
         </Button>
         <Button
+          data-testid="cancelRequestDialogClose"
           data-test-cancel-cancel-request
           onClick={onClose}
         >
@@ -168,6 +170,7 @@ class CancelRequestDialog extends React.Component {
 
     return (
       <Modal
+        data-testid="cancelRequestDialog"
         data-test-cancel-request-modal
         label={<FormattedMessage id="ui-requests.cancel.modalLabel" />}
         open={open}
@@ -181,6 +184,7 @@ class CancelRequestDialog extends React.Component {
           />
         </p>
         <Select
+          data-testid="selectCancelationReason"
           data-test-select-cancelation-reason
           label={<FormattedMessage id="ui-requests.cancel.reasonLabel" />}
           dataOptions={reasons}
@@ -190,6 +194,7 @@ class CancelRequestDialog extends React.Component {
         <FormattedMessage id={additionalInfoPlaceholder}>
           {placeholder => (
             <TextArea
+              data-testid="additionalInfo"
               label={
                 <FormattedMessage
                   id="ui-requests.cancel.additionalInfoLabel"
diff --git a/src/CancelRequestDialog.test.js b/src/CancelRequestDialog.test.js
new file mode 100644
index 00000000..fb1628b8
--- /dev/null
+++ b/src/CancelRequestDialog.test.js
@@ -0,0 +1,130 @@
+import {
+  fireEvent,
+  render,
+  screen,
+} from '@testing-library/react';
+
+import '../test/jest/__mock__';
+
+import CancelRequestDialog from './CancelRequestDialog';
+
+const labelIds = {
+  modalLabel: 'ui-requests.cancel.modalLabel',
+  modalText: 'ui-requests.cancel.requestWillBeCancelled',
+  cancelRequestDialogCancel: 'stripes-core.button.confirm',
+  cancelRequestDialogClose: 'stripes-core.button.back',
+};
+const testIds = {
+  cancelRequestDialog: 'cancelRequestDialog',
+  selectCancelationReason: 'selectCancelationReason',
+  additionalInfo: 'additionalInfo',
+  cancelRequestDialogCancel: 'cancelRequestDialogCancel',
+  cancelRequestDialogClose: 'cancelRequestDialogClose',
+};
+
+describe('CancelRequestDialog', () => {
+  const onCancelRequest = jest.fn();
+  const onClose = jest.fn();
+  const cancellationReasons = {
+    records: [{
+      id: '1',
+      name: 'cancellation reasons',
+      requiresAdditionalInformation: false,
+    }, {
+      id: '2',
+      name: 'other cancellation reasons',
+      requiresAdditionalInformation: true,
+    }],
+  };
+  const request = {
+    id: 'ad038163-7368-44e8-9057-c21bd2b9cd4c',
+    instance: {
+      title: 'request instance title',
+    },
+  };
+  const defaultProps = {
+    request,
+    onCancelRequest,
+    onClose,
+    open: true,
+    resources: {
+      cancellationReasons,
+    },
+    stripes: {
+      user: {
+        user: {
+          id: 'bd038163-7368-44e8-9057-c21bd2b9cd4c',
+        },
+      },
+    },
+  };
+
+  describe('CancelRequestDialog with request', () => {
+    beforeEach(() => {
+      render(
+        <CancelRequestDialog {...defaultProps} />
+      );
+    });
+
+    it('should render cancelRequestDialog', () => {
+      expect(screen.getByTestId(testIds.cancelRequestDialog)).toBeInTheDocument();
+    });
+
+    it('should render modal label', () => {
+      expect(screen.getByText(labelIds.modalLabel)).toBeInTheDocument();
+    });
+
+    it('should render modal text', () => {
+      expect(screen.getByText(labelIds.modalText)).toBeInTheDocument();
+    });
+
+    it('should render modal text value', () => {
+      expect(screen.getByText(request.instance.title)).toBeInTheDocument();
+    });
+
+    it('should render select cancelation reason', () => {
+      expect(screen.getByTestId(testIds.selectCancelationReason)).toBeInTheDocument();
+    });
+
+    it('should render additional info', () => {
+      expect(screen.getByTestId(testIds.additionalInfo)).toBeInTheDocument();
+    });
+
+    it('should render close button text', () => {
+      expect(screen.getByText(labelIds.cancelRequestDialogClose)).toBeInTheDocument();
+    });
+
+    it('should be called onClose after clicking on close button', () => {
+      fireEvent.click(screen.getByTestId(testIds.cancelRequestDialogClose));
+
+      expect(onClose).toBeCalled();
+    });
+
+    it('should render cancel button text', () => {
+      expect(screen.getByText(labelIds.cancelRequestDialogCancel)).toBeInTheDocument();
+    });
+
+    it('should be called onCancelRequest after clicking on cancel button', () => {
+      fireEvent.click(screen.getByTestId(testIds.cancelRequestDialogCancel));
+
+      expect(onCancelRequest).toBeCalled();
+    });
+  });
+
+  describe('CancelRequestDialog without request', () => {
+    const propsWithoutRequest = {
+      ...defaultProps,
+      request: null,
+    };
+
+    beforeEach(() => {
+      render(
+        <CancelRequestDialog {...propsWithoutRequest} />
+      );
+    });
+
+    it('should not render cancelRequestDialog', () => {
+      expect(screen.queryByTestId(testIds.cancelRequestDialog)).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/test/bigtest/tests/view-request-test.js b/test/bigtest/tests/view-request-test.js
index 04815cb5..82564a8a 100644
--- a/test/bigtest/tests/view-request-test.js
+++ b/test/bigtest/tests/view-request-test.js
@@ -54,7 +54,7 @@ describe('View request page', () => {
       expect(viewRequest.patronComments.label.text).to.equal(translations.patronComments);
     });
 
-    describe('Request cancelation', function () {
+    describe('Request cancellation', function () {
       describe('clicking the Actions menu on the Requests pane', function () {
         beforeEach(async () => {
           await requests.headerDropdown.click();
diff --git a/test/jest/__mock__/intl.mock.js b/test/jest/__mock__/intl.mock.js
index b42572d2..5c3223d5 100644
--- a/test/jest/__mock__/intl.mock.js
+++ b/test/jest/__mock__/intl.mock.js
@@ -7,12 +7,25 @@ jest.mock('react-intl', () => {
 
   return {
     ...jest.requireActual('react-intl'),
-    FormattedMessage: jest.fn(({ id, children }) => {
+    FormattedMessage: jest.fn(({ id, values, children }) => {
+      let valuesString = '';
+
       if (children) {
         return children([id]);
       }
 
-      return id;
+      if (values) {
+        Object.keys(values).forEach((key) => {
+          valuesString += values[key];
+        });
+      }
+
+      return (
+        <>
+          {id}
+          {values && <span>{valuesString}</span>}
+        </>
+      );
     }),
     FormattedTime: jest.fn(({ value, children }) => {
       if (children) {
diff --git a/test/jest/__mock__/stripesComponents.mock.js b/test/jest/__mock__/stripesComponents.mock.js
index b25def2b..1a012861 100644
--- a/test/jest/__mock__/stripesComponents.mock.js
+++ b/test/jest/__mock__/stripesComponents.mock.js
@@ -60,9 +60,10 @@ jest.mock('@folio/stripes-components', () => ({
   Modal: jest.fn(({
     children,
     footer,
-    label
+    label,
+    'data-testid': testId,
   }) => (
-    <div>
+    <div data-testid={testId}>
       {label && label}
       {children}
       {footer}
@@ -128,8 +129,12 @@ jest.mock('@folio/stripes-components', () => ({
       {children}
     </div>
   )),
-  Select: jest.fn(() => <div>Select</div>),
-  TextArea: jest.fn(() => <div>TextArea</div>),
+  Select: jest.fn(({
+    'data-testid': testId,
+  }) => <div data-testid={testId}>Select</div>),
+  TextArea: jest.fn(({
+    'data-testid': testId,
+  }) => <div data-testid={testId}>TextArea</div>),
   TextField: jest.fn(({
     label,
     onChange,