diff --git a/src/components/Address/AddressInput.tsx b/src/components/Address/AddressInput.tsx
index b434d7682..a3d117dfa 100644
--- a/src/components/Address/AddressInput.tsx
+++ b/src/components/Address/AddressInput.tsx
@@ -140,6 +140,7 @@ const AddressInput = ({
       >
         <Input
           autoComplete="address-line1"
+          data-testid="react-gears-addressinput-input-line1"
           id={address1Id}
           name={inputName.address1}
           type="text"
@@ -161,6 +162,7 @@ const AddressInput = ({
       >
         <Input
           autoComplete="address-line2"
+          data-testid="react-gears-addressinput-input-line2"
           id={address2Id}
           name={inputName.address2}
           type="text"
@@ -185,6 +187,7 @@ const AddressInput = ({
           >
             <Input
               autoComplete="address-level2"
+              data-testid="react-gears-addressinput-input-level2"
               id={cityId}
               type="text"
               name={inputName.city}
@@ -209,6 +212,7 @@ const AddressInput = ({
           >
             <StateInput
               autoComplete="address-level1"
+              data-testid="react-gears-addressinput-input-state"
               className="w-100"
               countries={countries}
               id={stateId}
@@ -236,6 +240,7 @@ const AddressInput = ({
           >
             <Input
               autoComplete="postal-code"
+              data-testid="react-gears-addressinput-input-postal-code"
               id={postalId}
               type="text"
               name={inputName.postal}
@@ -262,6 +267,7 @@ const AddressInput = ({
           <CountryInput
             autoComplete="country"
             className="w-100"
+            data-testid="react-gears-addressinput-input-country"
             id={countryCodeId}
             name={inputName.countryCode}
             placeholder={labels.countryCode}
diff --git a/src/components/Checkbox/CheckboxGroup.tsx b/src/components/Checkbox/CheckboxGroup.tsx
index d704b41e2..e6f730f64 100644
--- a/src/components/Checkbox/CheckboxGroup.tsx
+++ b/src/components/Checkbox/CheckboxGroup.tsx
@@ -34,11 +34,13 @@ const CheckboxGroup = ({ options, selected, onChange }: CheckboxGroupProps) => {
 
   return (
     <FormGroup>
-      {options.map((option) => {
+      {options.map((option, index) => {
         const id = `option-${option.label}-${groupId}`;
+        const dataTestId = `react-gears-checkboxgroup-${groupId}-${index}`;
         return (
           <FormGroup check key={option.value}>
             <Input
+              data-testid={dataTestId}
               type="checkbox"
               checked={selected.includes(option.value)}
               onChange={(ev) => handleCheckboxChange(ev.target.checked, option.value)}
diff --git a/src/components/Combobox/Combobox.spec.js b/src/components/Combobox/Combobox.spec.js
index 5ba14cdf4..1a8887d23 100644
--- a/src/components/Combobox/Combobox.spec.js
+++ b/src/components/Combobox/Combobox.spec.js
@@ -22,43 +22,49 @@ describe('<Combobox />', () => {
 
   it('should render with empty options array', () => {
     const combobox = render(<Combobox options={[]} />);
-    combobox.getByTestId('combobox-input');
+    combobox.getByTestId('react-gears-combobox-input');
   });
 
   it('should show options when focused', () => {
     const combobox = render(<Combobox options={OPTIONS} />);
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+    assert.equal(
+      combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
+      'true'
+    );
 
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.focus(input);
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+    assert.equal(
+      combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
+      'false'
+    );
   });
 
   it('should pass inputClassName to Input', () => {
     const innerClassName = 'js-no-autofocus';
     const combobox = render(<Combobox options={OPTIONS} inputClassName={innerClassName} />);
 
-    assert(combobox.getByTestId('combobox-input').classList.contains(innerClassName));
+    assert(combobox.getByTestId('react-gears-combobox-input').classList.contains(innerClassName));
   });
 
   it('should have "search" as default Input type', () => {
     const combobox = render(<Combobox options={[]} />);
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
 
     assert.strictEqual(input.type, 'search');
   });
 
   it('should pass type to Input', () => {
     const combobox = render(<Combobox options={[]} type="text" />);
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
 
     assert.strictEqual(input.type, 'text');
   });
 
   it('should show all options when there is a selected option', () => {
     const combobox = render(<Combobox options={OPTIONS} value={OPTIONS[0]} />);
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.focus(input);
 
     OPTIONS.forEach((o) => {
@@ -70,7 +76,7 @@ describe('<Combobox />', () => {
     const mockOnChange = sinon.spy();
     const combobox = render(<Combobox options={OPTIONS} onChange={mockOnChange} />);
 
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.focus(input);
 
     const option = combobox.getByText('D-O');
@@ -83,43 +89,57 @@ describe('<Combobox />', () => {
   it('should close menu on blur', () => {
     const combobox = render(<Combobox options={OPTIONS} />);
 
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.focus(input);
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+    assert.equal(
+      combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
+      'false'
+    );
 
     fireEvent.blur(input);
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+    assert.equal(
+      combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
+      'true'
+    );
   });
 
   it('should not close menu when menu container is focused', () => {
     const combobox = render(<Combobox options={OPTIONS} />);
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.focus(input);
-    const dropdown = combobox.getByTestId('combobox-dropdown');
-    const menu = combobox.getByTestId('combobox-menu');
+    const dropdown = combobox.getByTestId('react-gears-combobox-dropdown');
+    const menu = combobox.getByTestId('react-gears-combobox-dropdownmenu');
     fireEvent.blur(dropdown, { relatedTarget: menu });
 
-    expect(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden')).toEqual('false');
+    expect(
+      combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden')
+    ).toEqual('false');
   });
 
   it('should close menu on blur of caret button', () => {
     const combobox = render(<Combobox options={OPTIONS} />);
 
-    const caret = combobox.getByTestId('combobox-caret');
+    const caret = combobox.getByTestId('react-gears-combobox-button');
     fireEvent.mouseDown(caret);
 
-    assert.strictEqual(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+    assert.strictEqual(
+      combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
+      'false'
+    );
 
     fireEvent.blur(caret);
 
-    assert.strictEqual(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+    assert.strictEqual(
+      combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
+      'true'
+    );
   });
 
   it('should blur input on close', () => {
     const combobox = render(<Combobox options={OPTIONS} />);
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     input.focus();
 
     let option = combobox.getByText('D-O');
@@ -141,7 +161,7 @@ describe('<Combobox />', () => {
   it('should navigate options by up/down keys', () => {
     const combobox = render(<Combobox options={OPTIONS} />);
 
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.focus(input);
 
     assert(combobox.getByText('R2-D2').classList.contains('active'));
@@ -168,7 +188,7 @@ describe('<Combobox />', () => {
       />
     );
 
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.click(input);
 
     assert.strictEqual(input.value, 'bar');
@@ -178,7 +198,7 @@ describe('<Combobox />', () => {
     const mockOnChange = sinon.spy();
     const combobox = render(<Combobox options={OPTIONS} onChange={mockOnChange} />);
 
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.focus(input);
     fireEvent.keyDown(input, { key: 'ArrowDown', code: 40 });
 
@@ -186,7 +206,10 @@ describe('<Combobox />', () => {
 
     fireEvent.keyDown(input, { key: 'Enter', code: 13 });
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+    assert.equal(
+      combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
+      'true'
+    );
     sinon.assert.called(mockOnChange);
     sinon.assert.calledWith(mockOnChange, OPTIONS[1].value);
   });
@@ -197,7 +220,7 @@ describe('<Combobox />', () => {
       value = v;
     };
     let combobox = render(<Combobox options={OPTIONS} onChange={mockOnChange} value={value} />);
-    let input = combobox.getByTestId('combobox-input');
+    let input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.focus(input);
 
     const option = combobox.getByText('D-O');
@@ -207,7 +230,7 @@ describe('<Combobox />', () => {
 
     cleanup();
     combobox = render(<Combobox options={OPTIONS} onChange={mockOnChange} value={value} />);
-    input = combobox.getByTestId('combobox-input');
+    input = combobox.getByTestId('react-gears-combobox-input');
 
     fireEvent.mouseDown(input);
     fireEvent.keyDown(input, { key: 'Backspace', code: 8 });
@@ -218,55 +241,79 @@ describe('<Combobox />', () => {
   it('should open options with down key', () => {
     const combobox = render(<Combobox options={OPTIONS} />);
 
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.focus(input);
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+    assert.equal(
+      combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
+      'false'
+    );
 
-    const caret = combobox.getByTestId('combobox-caret');
+    const caret = combobox.getByTestId('react-gears-combobox-button');
     fireEvent.mouseDown(caret);
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+    assert.equal(
+      combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
+      'true'
+    );
 
     fireEvent.keyDown(input, { key: 'ArrowDown', code: 40 });
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+    assert.equal(
+      combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
+      'false'
+    );
   });
 
   it('should open options if input is clicked', async () => {
     const combobox = render(<Combobox options={OPTIONS} value={3} />);
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+    assert.equal(
+      combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
+      'true'
+    );
 
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.mouseDown(input);
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+    assert.equal(
+      combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
+      'false'
+    );
   });
 
   it('should open/close options with dropdown toggle', () => {
     const combobox = render(<Combobox options={OPTIONS} />);
 
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.focus(input);
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+    assert.equal(
+      combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
+      'false'
+    );
 
-    const caret = combobox.getByTestId('combobox-caret');
+    const caret = combobox.getByTestId('react-gears-combobox-button');
     fireEvent.mouseDown(caret);
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+    assert.equal(
+      combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
+      'true'
+    );
 
     fireEvent.mouseDown(caret);
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+    assert.equal(
+      combobox.getByTestId('react-gears-combobox-dropdownmenu').getAttribute('aria-hidden'),
+      'false'
+    );
   });
 
   describe('default filterOptions ', () => {
     it('should filter by input (case insensitive)', () => {
       const combobox = render(<Combobox options={OPTIONS} />);
 
-      const input = combobox.getByTestId('combobox-input');
+      const input = combobox.getByTestId('react-gears-combobox-input');
       fireEvent.focus(input);
 
       fireEvent.change(input, { target: { value: 'bb8' } });
@@ -278,7 +325,7 @@ describe('<Combobox />', () => {
     it('should update filtered options when input is updated', () => {
       const combobox = render(<Combobox options={OPTIONS} />);
 
-      const input = combobox.getByTestId('combobox-input');
+      const input = combobox.getByTestId('react-gears-combobox-input');
       fireEvent.focus(input);
       fireEvent.change(input, { target: { value: 'd2' } });
 
@@ -306,7 +353,7 @@ describe('<Combobox />', () => {
 
     const combobox = render(<Combobox options={groupedOptions} />);
 
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.focus(input);
 
     const droidLabel = combobox.getByText('Droids');
@@ -335,7 +382,7 @@ describe('<Combobox />', () => {
         <Combobox options={OPTIONS} onChange={mockOnChange} onCreate={mockOnCreate} />
       );
 
-      const input = combobox.getByTestId('combobox-input');
+      const input = combobox.getByTestId('react-gears-combobox-input');
       fireEvent.focus(input);
 
       userEvent.type(input, 'new option');
@@ -360,18 +407,20 @@ describe('<Combobox />', () => {
         />
       );
 
-      const input = combobox.getByTestId('combobox-input');
+      const input = combobox.getByTestId('react-gears-combobox-input');
 
       userEvent.type(input, 'new option');
 
-      let newOptionButton = combobox.getByTestId('create-new-option');
+      let newOptionButton = combobox.getByTestId(
+        'react-gears-combobox-dropdownitem-create-new-option'
+      );
 
       assert(newOptionButton.hasAttribute('disabled'));
 
       input.setSelectionRange(0, 'new option'.length);
       userEvent.type(input, 'foobar');
 
-      newOptionButton = combobox.getByTestId('create-new-option');
+      newOptionButton = combobox.getByTestId('react-gears-combobox-dropdownitem-create-new-option');
 
       assert(!newOptionButton.hasAttribute('disabled'));
     });
@@ -393,7 +442,7 @@ describe('<Combobox />', () => {
       let combobox = render(
         <Combobox options={OPTIONS} onChange={mockOnChange} value={value} multi />
       );
-      let input = combobox.getByTestId('combobox-input');
+      let input = combobox.getByTestId('react-gears-combobox-input');
       fireEvent.focus(input);
 
       const option1 = combobox.getByText('D-O');
@@ -409,7 +458,7 @@ describe('<Combobox />', () => {
 
       cleanup();
       combobox = render(<Combobox options={OPTIONS} onChange={mockOnChange} value={value} multi />);
-      input = combobox.getByTestId('combobox-input');
+      input = combobox.getByTestId('react-gears-combobox-input');
 
       fireEvent.keyDown(input, { key: 'Backspace', code: 8 });
 
diff --git a/src/components/Combobox/Combobox.tsx b/src/components/Combobox/Combobox.tsx
index a0521df80..6284537a0 100644
--- a/src/components/Combobox/Combobox.tsx
+++ b/src/components/Combobox/Combobox.tsx
@@ -269,6 +269,7 @@ function Combobox<T>({
         <DropdownItem
           disabled={option.disabled}
           className={`${isOptionVisible(option) ? '' : 'visually-hidden'}`}
+          data-testid="react-gears-combobox-dropdownitem-options"
           key={key}
           id={`option-${key}`}
           active={focusedOptionIndex === visibleIndex}
@@ -294,7 +295,9 @@ function Combobox<T>({
   const renderGroupedOptions = (groups: OptionGroup<T>[]) =>
     groups.map((group, i) => (
       <>
-        <DropdownItem header>{group.label}</DropdownItem>
+        <DropdownItem header data-testid="react-gears-combobox-dropdownitem-grouped-options">
+          {group.label}
+        </DropdownItem>
         {renderOptions(group.options)}
         {i !== groups.length - 1 && <DropdownItem divider />}
       </>
@@ -305,7 +308,7 @@ function Combobox<T>({
       return (
         <DropdownItem
           active={noMatches}
-          data-testid="create-new-option"
+          data-testid="react-gears-combobox-dropdownitem-create-new-option"
           disabled={!isValidNewOption(inputValue)}
           onMouseDown={(ev) => {
             ev.preventDefault();
@@ -353,7 +356,7 @@ function Combobox<T>({
         </div>
       )}
       <Dropdown
-        data-testid="combobox-dropdown"
+        data-testid="react-gears-combobox-dropdown"
         direction={direction}
         isOpen={!disabled && open}
         toggle={() => {}}
@@ -368,7 +371,7 @@ function Combobox<T>({
           <InputGroup className={className}>
             <Input
               innerRef={inputElement}
-              data-testid="combobox-input"
+              data-testid="react-gears-combobox-input"
               disabled={disabled}
               className={inputClassName}
               placeholder={selected ? undefined : placeholder}
@@ -408,7 +411,7 @@ function Combobox<T>({
             />
             <Button
               className="px-2"
-              data-testid="combobox-caret"
+              data-testid="react-gears-combobox-button"
               disabled={disabled}
               active={open}
               onMouseDown={(ev: React.MouseEvent<HTMLButtonElement>) => {
@@ -423,7 +426,7 @@ function Combobox<T>({
           </InputGroup>
         </DropdownToggle>
         <DropdownMenu
-          data-testid="combobox-menu"
+          data-testid="react-gears-combobox-dropdownmenu"
           className="p-0 w-100"
           style={{ maxHeight: menuMaxHeight || '12rem', overflowY: 'auto' }}
           {...dropdownProps}
diff --git a/src/components/Input/CreditCardNumber.tsx b/src/components/Input/CreditCardNumber.tsx
index c4aaff65c..fcaba401c 100644
--- a/src/components/Input/CreditCardNumber.tsx
+++ b/src/components/Input/CreditCardNumber.tsx
@@ -87,8 +87,16 @@ const CreditCardNumber: FC<CreditCardNumberProps> = ({
 
   return (
     <InputGroup className={className}>
-      <Input value={value || ''} onChange={onChangeHandler} {...inputProps} />
-      <InputGroupText className="p-0 px-2">
+      <Input
+        data-testid="react-gears-creditcardnumber-input"
+        value={value || ''}
+        onChange={onChangeHandler}
+        {...inputProps}
+      />
+      <InputGroupText
+        className="p-0 px-2"
+        data-testid="react-gears-creditcardnumber-inputgrouptext"
+      >
         <Icon
           name={ccIconName}
           iconStyle={ccIconName === 'credit-card' ? 'regular' : 'brands'}
diff --git a/src/components/Input/CurrencyInput.tsx b/src/components/Input/CurrencyInput.tsx
index d6893a8ec..0d3cd2236 100644
--- a/src/components/Input/CurrencyInput.tsx
+++ b/src/components/Input/CurrencyInput.tsx
@@ -81,8 +81,12 @@ const CurrencyInput: FC<Props> = ({
   }
 
   return (
-    <InputGroup size={size} className={className}>
-      <InputGroupText>$</InputGroupText>
+    <InputGroup
+      data-testid="react-gears-currencyinput-inputgroup"
+      size={size}
+      className={className}
+    >
+      <InputGroupText data-testid="react-gears-currencyinput-inputgrouptext">$</InputGroupText>
       <IMaskInput {...maskedProps} />
     </InputGroup>
   );
diff --git a/src/components/Input/DateInput.js b/src/components/Input/DateInput.js
index 46693280f..43a3e3732 100644
--- a/src/components/Input/DateInput.js
+++ b/src/components/Input/DateInput.js
@@ -326,6 +326,7 @@ export default class DateInput extends React.Component {
               <input
                 id={id}
                 className="form-control"
+                data-testid="react-gears-dateinput-inputgroup-input"
                 ref={(el) => {
                   this.inputEl = el;
                 }}
@@ -340,6 +341,7 @@ export default class DateInput extends React.Component {
               />
               <Button
                 className="px-2"
+                data-testid="react-gears-dateinput-inputgroup-button"
                 disabled={disabled}
                 active={open}
                 type="button"
@@ -355,11 +357,21 @@ export default class DateInput extends React.Component {
             {renderHeader(this.prevMonth, this.nextMonth, this.prevYear, this.nextYear) || header || (
               <header className="d-flex py-2">
                 <ButtonGroup size="sm">
-                  <Button className="js-prev-year" color="link" onClick={() => this.prevYear()}>
+                  <Button
+                    className="js-prev-year"
+                    color="link"
+                    data-testid="react-gears-dateinput-dropdownmenu-button-prev-year"
+                    onClick={() => this.prevYear()}
+                  >
                     <Icon name="angle-double-left" fixedWidth />
                     <span className="visually-hidden">Previous Year</span>
                   </Button>
-                  <Button className="js-prev-month" color="link" onClick={() => this.prevMonth()}>
+                  <Button
+                    className="js-prev-month"
+                    color="link"
+                    data-testid="react-gears-dateinput-dropdownmenu-button-prev-month"
+                    onClick={() => this.prevMonth()}
+                  >
                     <Icon name="angle-left" fixedWidth />
                     <span className="visually-hidden">Previous Month</span>
                   </Button>
@@ -370,11 +382,21 @@ export default class DateInput extends React.Component {
                 </span>
 
                 <ButtonGroup size="sm">
-                  <Button className="js-next-month" color="link" onClick={() => this.nextMonth()}>
+                  <Button
+                    className="js-next-month"
+                    color="link"
+                    data-testid="react-gears-dateinput-dropdownmenu-button-next-month"
+                    onClick={() => this.nextMonth()}
+                  >
                     <Icon name="angle-right" fixedWidth />
                     <span className="visually-hidden">Next Month</span>
                   </Button>
-                  <Button className="js-next-year" color="link" onClick={() => this.nextYear()}>
+                  <Button
+                    className="js-next-year"
+                    color="link"
+                    data-testid="react-gears-dateinput-dropdownmenu-button-next-year"
+                    onClick={() => this.nextYear()}
+                  >
                     <Icon name="angle-double-right" fixedWidth />
                     <span className="visually-hidden">Next Year</span>
                   </Button>
@@ -384,6 +406,7 @@ export default class DateInput extends React.Component {
 
             <Calendar
               date={date}
+              data-testid="react-gears-dateinput-dropdownmenu-calendar"
               dateEnabled={dateEnabled}
               dateVisible={dateVisible}
               locale={locale}
@@ -395,10 +418,18 @@ export default class DateInput extends React.Component {
             {renderFooter(this.today, this.clear) || footer || (
               <footer className="text-center pb-2 pt-1">
                 <div>
-                  <Button onClick={this.today} className="me-2">
+                  <Button
+                    onClick={this.today}
+                    className="me-2"
+                    data-testid="react-gears-dateinput-footer-button-today"
+                  >
                     Today
                   </Button>
-                  <Button onClick={this.clear} className="me-2">
+                  <Button
+                    onClick={this.clear}
+                    className="me-2"
+                    data-testid="react-gears-dateinput-footer-button-clear"
+                  >
                     Clear
                   </Button>
                 </div>
diff --git a/src/components/Input/MonthInput.js b/src/components/Input/MonthInput.js
index a7a533de9..a8fd17f8f 100644
--- a/src/components/Input/MonthInput.js
+++ b/src/components/Input/MonthInput.js
@@ -272,6 +272,7 @@ export default class MonthInput extends React.Component {
               <input
                 className="form-control"
                 id={id}
+                data-testid="react-gears-monthinput-dropdowntoggle-input"
                 ref={(el) => {
                   this.inputEl = el;
                 }}
@@ -284,6 +285,7 @@ export default class MonthInput extends React.Component {
                 disabled={disabled}
               />
               <Button
+                data-testid="react-gears-monthinput-dropdowntoggle-button"
                 onClick={this.toggle}
                 className="px-2"
                 disabled={disabled}
@@ -306,13 +308,19 @@ export default class MonthInput extends React.Component {
             {header || (
               <header className="d-flex py-2">
                 <ButtonGroup size="sm">
-                  <Button className="p-2 js-prev-year" color="link" onClick={() => this.prevYear()}>
+                  <Button
+                    className="p-2 js-prev-year"
+                    color="link"
+                    data-testid="react-gears-monthinput-dropdownmenu-button-prev-year"
+                    onClick={() => this.prevYear()}
+                  >
                     <Icon name="angle-double-left" fixedWidth />
                     <span className="visually-hidden">Previous Year</span>
                   </Button>
                   <Button
                     className="p-2 js-prev-month"
                     color="link"
+                    data-testid="react-gears-monthinput-dropdownmenu-button-prev-month"
                     onClick={() => this.prevMonth()}
                   >
                     <Icon name="angle-left" fixedWidth />
@@ -323,11 +331,21 @@ export default class MonthInput extends React.Component {
                 <span className="m-auto">{format(date, 'MMMM YYYY')}</span>
 
                 <ButtonGroup size="sm">
-                  <Button className="js-next-month" color="link" onClick={() => this.nextMonth()}>
+                  <Button
+                    className="js-next-month"
+                    color="link"
+                    data-testid="react-gears-monthinput-dropdownmenu-button-next-month"
+                    onClick={() => this.nextMonth()}
+                  >
                     <Icon name="angle-right" fixedWidth />
                     <span className="visually-hidden">Next Month</span>
                   </Button>
-                  <Button className="js-next-year" color="link" onClick={() => this.nextYear()}>
+                  <Button
+                    className="js-next-year"
+                    color="link"
+                    data-testid="react-gears-monthinput-dropdownmenu-button-next-year"
+                    onClick={() => this.nextYear()}
+                  >
                     <Icon name="angle-double-right" fixedWidth />
                     <span className="visually-hidden">Next Year</span>
                   </Button>
@@ -336,6 +354,7 @@ export default class MonthInput extends React.Component {
             )}
 
             <Calendar
+              data-testid="react-gears-monthinput-dropdownmenu-calendar"
               date={date}
               dateVisible={dateVisible}
               centerYearSelection={centerYearSelection}
@@ -348,7 +367,11 @@ export default class MonthInput extends React.Component {
             {footer || (
               <footer className="text-center pb-2 pt-1">
                 <div>
-                  <Button onClick={this.today} className="me-2">
+                  <Button
+                    data-testid="react-gears-monthinput-dropdownmenu-footer-button"
+                    onClick={this.today}
+                    className="me-2"
+                  >
                     Today
                   </Button>
                 </div>
diff --git a/src/components/Input/PatternInput.js b/src/components/Input/PatternInput.js
index d14ca867e..76bea74a5 100644
--- a/src/components/Input/PatternInput.js
+++ b/src/components/Input/PatternInput.js
@@ -33,6 +33,11 @@ export default class PatternInput extends React.Component {
   render() {
     /* eslint-disable-next-line  @typescript-eslint/no-unused-vars -- This should go away when converting to function component  */
     const { pattern, restrictInput, ...inputProps } = this.props;
+
+    if (inputProps && !inputProps['data-testid']) {
+      inputProps['data-testid'] = 'react-gears-patterninput-input';
+    }
+
     return (
       <Input
         {...inputProps}
diff --git a/src/components/MultiSelectCombobox/ComboboxItem.tsx b/src/components/MultiSelectCombobox/ComboboxItem.tsx
index 2b72fed8f..364f3d4d6 100644
--- a/src/components/MultiSelectCombobox/ComboboxItem.tsx
+++ b/src/components/MultiSelectCombobox/ComboboxItem.tsx
@@ -8,7 +8,12 @@ export interface ComboboxItemProps {
 }
 
 const ComboboxItem = ({ children, onClick }: ComboboxItemProps) => (
-  <DropdownItem onClick={onClick} className="overflow-hidden text-truncate" title={children}>
+  <DropdownItem
+    onClick={onClick}
+    className="overflow-hidden text-truncate"
+    data-testid="react-gears-comboboxitem-dropdownitem"
+    title={children}
+  >
     {children}
   </DropdownItem>
 );
diff --git a/src/components/MultiSelectCombobox/ComboboxItems.tsx b/src/components/MultiSelectCombobox/ComboboxItems.tsx
index ef454d07b..6c51e9afe 100644
--- a/src/components/MultiSelectCombobox/ComboboxItems.tsx
+++ b/src/components/MultiSelectCombobox/ComboboxItems.tsx
@@ -13,6 +13,7 @@ const defaultProps = { maxHeight: '12rem' };
 const ComboboxItems = ({ children, maxHeight = defaultProps.maxHeight }: ComboboxItemsProps) => (
   <DropdownMenu
     className="w-100"
+    data-testid="react-gears-comboboxitems-dropdownmenu"
     style={{ maxHeight, overflowY: 'auto' }}
     title="Menu Items"
     updateOnSelect
diff --git a/src/components/MultiSelectCombobox/ComboboxSelection.tsx b/src/components/MultiSelectCombobox/ComboboxSelection.tsx
index b05c77b9f..226754fbd 100644
--- a/src/components/MultiSelectCombobox/ComboboxSelection.tsx
+++ b/src/components/MultiSelectCombobox/ComboboxSelection.tsx
@@ -23,6 +23,7 @@ const ComboboxSelection = ({ children, onRemove }: ComboboxSelectionProps) => {
   return (
     <div role="listitem" className="mw-100">
       <Badge
+        data-testid="react-gears-comboboxselection-badge"
         tabIndex={0}
         onClick={handleRemoveClick}
         onKeyDown={handleKeyDown}
diff --git a/src/components/MultiSelectCombobox/ComboboxSelections.tsx b/src/components/MultiSelectCombobox/ComboboxSelections.tsx
index 924744f9e..1f1db1fb8 100644
--- a/src/components/MultiSelectCombobox/ComboboxSelections.tsx
+++ b/src/components/MultiSelectCombobox/ComboboxSelections.tsx
@@ -46,6 +46,7 @@ const ComboboxSelections = ({
             </div>
             <Button
               aria-label="Remove all selections"
+              data-testid="react-gears-comboboxselections-button"
               onClick={handleRemoveAll}
               onKeyDown={handleRemoveAllKeyDown}
               type="button"
diff --git a/src/components/MultiSelectCombobox/FilteredComboboxItems.tsx b/src/components/MultiSelectCombobox/FilteredComboboxItems.tsx
index bece5e15c..b57b08ff0 100644
--- a/src/components/MultiSelectCombobox/FilteredComboboxItems.tsx
+++ b/src/components/MultiSelectCombobox/FilteredComboboxItems.tsx
@@ -38,6 +38,7 @@ const FilteredComboboxItems = ({
       <div className="p-3">
         <Input
           aria-label="Filter available items"
+          data-testid="react-gears-filteredcomboboxitems-dropdown-menu"
           innerRef={filterInputRef}
           onChange={(e) => onFilterChange?.(e.target.value)}
           tabIndex={0}
diff --git a/src/components/Radio/RadioGroup.tsx b/src/components/Radio/RadioGroup.tsx
index b75d10892..946b88bc1 100644
--- a/src/components/Radio/RadioGroup.tsx
+++ b/src/components/Radio/RadioGroup.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
 import FormGroup from '../Form/FormGroup';
 import Input from '../Input/Input';
 import Label from '../Label/Label';
@@ -15,23 +16,28 @@ export interface RadioGroupProps {
   name?: string;
 }
 
-const RadioGroup = ({ options, onChange, selected, name }: RadioGroupProps) => (
-  <FormGroup>
-    {options.map((option) => (
-      <FormGroup check key={option.value}>
-        <Label check>
-          <Input
-            type="radio"
-            checked={selected === option.value}
-            onChange={(e) => e.target.checked && onChange(option.value)}
-            name={name}
-          />{' '}
-          {option.label}
-        </Label>
-      </FormGroup>
-    ))}
-  </FormGroup>
-);
+const RadioGroup = ({ options, onChange, selected, name }: RadioGroupProps) => {
+  const [groupId] = useState(uuidv4());
+
+  return (
+    <FormGroup>
+      {options.map((option, index) => (
+        <FormGroup check key={option.value}>
+          <Label check>
+            <Input
+              data-testid={`react-gears-radiogroup-${groupId}-${index}`}
+              type="radio"
+              checked={selected === option.value}
+              onChange={(e) => e.target.checked && onChange(option.value)}
+              name={name}
+            />{' '}
+            {option.label}
+          </Label>
+        </FormGroup>
+      ))}
+    </FormGroup>
+  );
+};
 
 RadioGroup.displayName = 'RadioGroup';
 
diff --git a/src/components/Tree/Tree.spec.js b/src/components/Tree/Tree.spec.js
index bd6e69c7b..cc253f93e 100644
--- a/src/components/Tree/Tree.spec.js
+++ b/src/components/Tree/Tree.spec.js
@@ -82,7 +82,7 @@ describe('<Tree />', () => {
     expect(screen.queryAllByTestId('js-item-label').length).toEqual(10);
     expect(screen.queryByText('Regular is selected')).toBeInTheDocument();
     expect(screen.queryByText('Chicken is not selected')).toBeInTheDocument();
-    fireEvent.click(screen.queryAllByTestId('tree-item-checkbox-input')[1]);
+    fireEvent.click(screen.queryAllByTestId('react-gears-treeitem-input-checkbox')[1]);
     expect(updateOption).toHaveBeenCalled();
   });
 });
diff --git a/src/components/Tree/TreeItem.tsx b/src/components/Tree/TreeItem.tsx
index da675a120..78345e562 100644
--- a/src/components/Tree/TreeItem.tsx
+++ b/src/components/Tree/TreeItem.tsx
@@ -67,6 +67,7 @@ function TreeItem<T>({
         <Button
           color="link"
           className="rg-treeitem-expand py-0 px-0"
+          data-testid="react-gears-treeitem-button"
           onClick={() => updateOption(option, { expanded: !option.expanded })}
         >
           <Icon name="angle-down" rotate={option.expanded ? 180 : undefined} size="lg" />
@@ -84,7 +85,7 @@ function TreeItem<T>({
             updateOption(option, { children, selected: newSelection });
           }}
           type="checkbox"
-          data-testid="tree-item-checkbox-input"
+          data-testid="react-gears-treeitem-input-checkbox"
         />
       )}
       <div className="js-tree-item-label w-100">{label(option.item, option)}</div>