diff --git a/sources/js/src/components/search-control.tsx b/sources/js/src/components/search-control.tsx
index 6a6e53c..c4ecd5a 100644
--- a/sources/js/src/components/search-control.tsx
+++ b/sources/js/src/components/search-control.tsx
@@ -1,6 +1,8 @@
import EntitiesSearch from '@types';
import React, { JSX, PropsWithChildren, useCallback } from 'react';
+import { __ } from '@wordpress/i18n';
+
export function SearchControl(
props: EntitiesSearch.SearchControl
): JSX.Element {
@@ -28,6 +30,7 @@ export function SearchControl(
return (
diff --git a/tests/js/unit/components/__snapshots__/search-control.test.tsx.snap b/tests/js/unit/components/__snapshots__/search-control.test.tsx.snap
new file mode 100644
index 0000000..6b3d24c
--- /dev/null
+++ b/tests/js/unit/components/__snapshots__/search-control.test.tsx.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SearchControl renders the input outside the label if the id prop is not passed 1`] = `
+
+`;
+
+exports[`SearchControl renders the input within the label if the id prop is passed 1`] = `
+
+`;
diff --git a/tests/js/unit/components/search-control.test.tsx b/tests/js/unit/components/search-control.test.tsx
new file mode 100644
index 0000000..bd050e3
--- /dev/null
+++ b/tests/js/unit/components/search-control.test.tsx
@@ -0,0 +1,45 @@
+// Create tests for SearchControl with the following criteria:
+// - The component renders without errors
+// - The component renders the input within the label if the id prop is passed
+// - The component renders the input outside the label if the id prop is not passed
+// - The component calls the onChange prop when the input value changes
+import React from 'react';
+
+import { describe, it, expect, jest } from '@jest/globals';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { SearchControl } from '../../../../sources/js/src/components/search-control';
+
+jest.mock('@wordpress/i18n', () => ({
+ __: (text: string) => text,
+}));
+
+describe('SearchControl', () => {
+ it('renders the input within the label if the id prop is passed', () => {
+ render( {}} />);
+ expect(screen.getByLabelText('Search')).toMatchSnapshot();
+ });
+
+ it('renders the input outside the label if the id prop is not passed', () => {
+ const { container } = render(
+ {}} />
+ );
+ expect(container.querySelector('[type="search"]')).toMatchSnapshot();
+ });
+
+ it('calls the onChange prop when the input value changes', async () => {
+ const onChange = jest.fn();
+
+ const { container } = render();
+
+ const input = container.querySelector(
+ '[type="search"]'
+ ) as HTMLInputElement;
+
+ await userEvent.type(input, 'test');
+
+ expect(input).toHaveValue('test');
+ });
+});