[tests] Migrate TraceIDSearchInput.test from Enzyme to RTL (#1691)

## Which problem is this PR solving?
- This PR migrates the `TraceIDSearchInput.test.js` from Enzyme to RTL
- Snapshot testing is replaced with specific expect statement
- Part of: #1668

## How was this change tested?
- Using yarn lint && yarn test-ci TraceIDSearchInput --coverage

## Checklist
- [x] I have read
https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
- [x] I have signed all commits
- [x] I have added unit tests for the new functionality
- [x] I have run lint and test steps successfully
  - for `jaeger`: `make lint test`
  - for `jaeger-ui`: `yarn lint` and `yarn test`

---------

Signed-off-by: Ansh Goyal <[email protected]>

packages/jaeger-ui/.babelrc

@@ -0,0 +1,16 @@
+{
+  "env": {
+    "production": {
+      "plugins": [
+        [
+          "babel-plugin-react-remove-properties",
+          {
+            "properties": [
+              "data-testid"
+            ]
+          }
+        ]
+      ]
+    }
+  }
+}

packages/jaeger-ui/package.json

@@ -27,6 +27,7 @@
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "babel-jest": "^29.5.0",
     "babel-plugin-inline-react-svg": "^2.0.2",
+    "babel-plugin-react-remove-properties": "^0.3.0",
     "enzyme": "^3.8.0",
     "enzyme-to-json": "^3.6.2",
     "jest": "^28.1.3",

packages/jaeger-ui/src/components/App/TraceIDSearchInput.test.js

@@ -15,42 +15,40 @@
  */
 
 import React from 'react';
-import { mount } from 'enzyme';
-
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import TraceIDSearchInput from './TraceIDSearchInput';
 
 describe('<TraceIDSearchInput />', () => {
-  let wrapper;
   let history;
 
   beforeEach(() => {
     history = createMemoryHistory();
-    wrapper = mount(
+    render(
       <Router history={history}>
         <TraceIDSearchInput />
       </Router>
-    ).find('form');
+    );
   });
 
   it('renders as expected', () => {
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByTestId('idInput')).toBeInTheDocument();
   });
 
   it('pushes input id to history', () => {
-    const idInput = wrapper.find('input');
     const traceId = 'MOCK-TRACE-ID';
-    idInput.instance().value = traceId;
-
-    wrapper.simulate('submit');
+    const idInput = screen.getByPlaceholderText('Lookup by Trace ID...');
+    fireEvent.change(idInput, { target: { value: traceId } });
+    fireEvent.submit(screen.getByTestId('TraceIDSearchInput--form'));
 
     expect(history.length).toEqual(2);
     expect(history.location.pathname).toEqual(`/trace/${traceId}`);
   });
 
   it('does not push to history on falsy input value', () => {
-    wrapper.simulate('submit');
+    fireEvent.submit(screen.getByTestId('TraceIDSearchInput--form'));
 
     expect(history.length).toEqual(1);
   });

packages/jaeger-ui/src/components/App/TraceIDSearchInput.tsx

@@ -36,8 +36,18 @@ class TraceIDSearchInput extends React.PureComponent<Props> {
 
   render() {
     return (
-      <Form layout="horizontal" onSubmit={this.goToTrace} className="TraceIDSearchInput--form">
-        <Input name="idInput" placeholder="Lookup by Trace ID..." prefix={<Icon type="search" />} />
+      <Form
+        data-testid="TraceIDSearchInput--form"
+        layout="horizontal"
+        onSubmit={this.goToTrace}
+        className="TraceIDSearchInput--form"
+      >
+        <Input
+          data-testid="idInput"
+          name="idInput"
+          placeholder="Lookup by Trace ID..."
+          prefix={<Icon type="search" />}
+        />
       </Form>
     );
   }

packages/jaeger-ui/vite.config.ts

@@ -42,7 +42,11 @@ export default defineConfig({
     },
   },
   plugins: [
-    react(),
+    react({
+      babel: {
+        babelrc: true,
+      },
+    }),
     legacy({
       targets: ['>0.5%', 'not dead', 'not ie <= 11', 'not op_mini all'],
     }),

yarn.lock

@@ -3657,6 +3657,11 @@ babel-plugin-polyfill-regenerator@^0.5.2:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.4.2"
 
+babel-plugin-react-remove-properties@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-react-remove-properties/-/babel-plugin-react-remove-properties-0.3.0.tgz#7b623fb3c424b6efb4edc9b1ae4cc50e7154b87f"
+  integrity sha512-vbxegtXGyVcUkCvayLzftU95vuvpYFV85pRpeMpohMHeEY46Qe0VNWfkVVcCbaZ12CXHzDFOj0esumATcW83ng==
+
 [email protected]:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a"