diff --git a/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.test.js b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.test.js
new file mode 100644
index 000000000..11060513f
--- /dev/null
+++ b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.test.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import {
+ toBeInTheDocument,
+ toHaveClass,
+ toBeNull,
+} from '@testing-library/jest-dom';
+
+import HighlightSearchTerm from './HighlightSearchTerm';
+
+describe('HighlightSearchTerm Component', () => {
+ it('renders content when searchTerm is not provided', () => {
+ const { getByText } = render();
+ expect(getByText('Lorem ipsum')).toBeInTheDocument();
+ });
+
+ it('renders without highlighting when searchTerm in content do not match', () => {
+ const { getByText } = render(
+
+ );
+ expect(getByText('Lorem ipsum dolor sit amet')).toBeInTheDocument();
+ expect(document.querySelector('.highlight')).toBeNull();
+ });
+
+ it('renders content when searchTerm is not provided', () => {
+ const { getByText } = render();
+ expect(getByText('Lorem ipsum')).toBeInTheDocument();
+ });
+
+ it('renders content with searchTerm highlighted', () => {
+ const { getByText } = render(
+
+ );
+ const highlightedText = getByText('ipsum');
+ expect(highlightedText).toHaveClass('highlight');
+ });
+
+ it('renders content with multiple searchTerm occurrences highlighted', () => {
+ const { getAllByText } = render(
+
+ );
+ const highlightedText = getAllByText('ipsum');
+ expect(highlightedText.length).toBe(5);
+ highlightedText.forEach((element) => {
+ expect(element).toHaveClass('highlight');
+ });
+ });
+});