test(ui): Convert multiselect to RTL (#36901)

static/app/components/deprecatedforms/form.tsx

@@ -133,7 +133,11 @@ class Form<
 
     return (
       <FormContext.Provider value={this.getContext()}>
-        <StyledForm onSubmit={this.onSubmit} className={this.props.className}>
+        <StyledForm
+          onSubmit={this.onSubmit}
+          className={this.props.className}
+          aria-label={this.props['aria-label']}
+        >
           {isError && !hideErrors && (
             <div className="alert alert-error alert-block">
               {nonFieldErrors ? (

tests/js/spec/components/deprecatedforms/multiSelectField.spec.jsx

@@ -1,51 +1,51 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
+import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import {MultiSelectField} from 'sentry/components/deprecatedforms';
 import Form from 'sentry/components/deprecatedforms/form';
 
 describe('MultiSelectField', function () {
-  describe('render()', function () {
-    it('renders without form context', function () {
-      const wrapper = mountWithTheme(
+  it('renders without form context', function () {
+    const wrapper = render(
+      <MultiSelectField
+        options={[
+          {label: 'a', value: 'a'},
+          {label: 'b', value: 'b'},
+        ]}
+        name="fieldName"
+      />
+    );
+    expect(wrapper.container).toSnapshot();
+  });
+
+  it('has the right value from props', function () {
+    render(
+      <form aria-label="Test Form">
         <MultiSelectField
           options={[
             {label: 'a', value: 'a'},
             {label: 'b', value: 'b'},
           ]}
           name="fieldName"
+          value={['a']}
         />
-      );
-      expect(wrapper).toSnapshot();
-    });
+      </form>
+    );
+    expect(screen.getByRole('form')).toHaveFormValues({fieldName: 'a'});
+  });
 
-    it('has the right value from props', function () {
-      const wrapper = mountWithTheme(
+  it('renders with form context', function () {
+    render(
+      <Form initialData={{fieldName: ['a', 'b']}} aria-label="Multi Form">
         <MultiSelectField
           options={[
             {label: 'a', value: 'a'},
             {label: 'b', value: 'b'},
           ]}
           name="fieldName"
-          value={['a']}
         />
-      );
-      expect(wrapper.find('StyledSelectControl').prop('value')).toEqual(['a']);
-    });
-
-    it('renders with form context', function () {
-      const wrapper = mountWithTheme(
-        <Form initialData={{fieldName: ['a', 'b']}}>
-          <MultiSelectField
-            options={[
-              {label: 'a', value: 'a'},
-              {label: 'b', value: 'b'},
-            ]}
-            name="fieldName"
-          />
-        </Form>
-      );
+      </Form>
+    );
 
-      expect(wrapper.find('StyledSelectControl').prop('value')).toEqual(['a', 'b']);
-    });
+    expect(screen.getByRole('form')).toHaveFormValues({fieldName: ['a', 'b']});
   });
 });