Fixes #39527 - Replace enzyme test in DateTime with RTL

webpack/assets/javascripts/react_app/components/common/forms/DateTime/DateTime.test.js

@@ -1,14 +1,39 @@
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Formik } from 'formik';
+import '@testing-library/jest-dom';
 import { DateTimeProps, DateTimeWithRequireAndInfo } from './DateTime.fixtures';
 import DateTime from './DateTime';
 
-const fixtures = {
-  'renders Report Date input': DateTimeProps,
-  'renders with Require and Info': DateTimeWithRequireAndInfo,
-};
+const renderDateTime = props =>
+  render(
+    <Formik initialValues={{}} onSubmit={() => {}}>
+      <DateTime {...props} />
+    </Formik>
+  );
 
 describe('DateTime', () => {
-  describe('rendering', () => {
-    testComponentSnapshotsWithFixtures(DateTime, fixtures);
+  it('renders the labeled date input', () => {
+    const { container } = renderDateTime(DateTimeProps);
+
+    expect(screen.getByText('some-label')).toBeInTheDocument();
+    expect(
+      container.querySelector('#template-date-input-4')
+    ).toBeInTheDocument();
+    // no required marker and no info help by default
+    expect(screen.queryByText('some-label *')).not.toBeInTheDocument();
+    expect(container.querySelector('.field-help')).not.toBeInTheDocument();
+  });
+
+  it('renders the required marker and info help', () => {
+    const { container } = renderDateTime(DateTimeWithRequireAndInfo);
+
+    // required adds an asterisk to the label
+    expect(screen.getByText('some-label *')).toBeInTheDocument();
+    // info renders a field-level help button
+    expect(container.querySelector('.field-help')).toBeInTheDocument();
+    expect(
+      container.querySelector('#template-date-input-4')
+    ).toBeInTheDocument();
   });
 });