Convert some tests from Enzyme to RTL (#9483)

test/components/views/elements/StyledRadioGroup-test.tsx

@@ -15,9 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
-// eslint-disable-next-line deprecate/import
-import { mount } from 'enzyme';
-import { act } from "react-dom/test-utils";
+import { fireEvent, render } from "@testing-library/react";
 
 import StyledRadioGroup from "../../../../src/components/views/elements/StyledRadioGroup";
 
@@ -44,16 +42,16 @@ describe('<StyledRadioGroup />', () => {
         definitions: defaultDefinitions,
         onChange: jest.fn(),
     };
-    const getComponent = (props = {}) => mount(<StyledRadioGroup {...defaultProps} {...props} />);
+    const getComponent = (props = {}) => render(<StyledRadioGroup {...defaultProps} {...props} />);
 
-    const getInputByValue = (component, value) => component.find(`input[value="${value}"]`);
-    const getCheckedInput = component => component.find('input[checked=true]');
+    const getInputByValue = (component, value) => component.container.querySelector(`input[value="${value}"]`);
+    const getCheckedInput = component => component.container.querySelector('input[checked]');
 
     it('renders radios correctly when no value is provided', () => {
         const component = getComponent();
 
-        expect(component).toMatchSnapshot();
-        expect(getCheckedInput(component).length).toBeFalsy();
+        expect(component.asFragment()).toMatchSnapshot();
+        expect(getCheckedInput(component)).toBeFalsy();
     });
 
     it('selects correct button when value is provided', () => {
@@ -61,7 +59,7 @@ describe('<StyledRadioGroup />', () => {
             value: optionC.value,
         });
 
-        expect(getCheckedInput(component).at(0).props().value).toEqual(optionC.value);
+        expect(getCheckedInput(component).value).toEqual(optionC.value);
     });
 
     it('selects correct buttons when definitions have checked prop', () => {
@@ -74,10 +72,10 @@ describe('<StyledRadioGroup />', () => {
             value: optionC.value, definitions,
         });
 
-        expect(getInputByValue(component, optionA.value).props().checked).toBeTruthy();
-        expect(getInputByValue(component, optionB.value).props().checked).toBeFalsy();
+        expect(getInputByValue(component, optionA.value)).toBeChecked();
+        expect(getInputByValue(component, optionB.value)).not.toBeChecked();
         // optionC.checked = false overrides value matching
-        expect(getInputByValue(component, optionC.value).props().checked).toBeFalsy();
+        expect(getInputByValue(component, optionC.value)).not.toBeChecked();
     });
 
     it('disables individual buttons based on definition.disabled', () => {
@@ -87,16 +85,16 @@ describe('<StyledRadioGroup />', () => {
             { ...optionC, disabled: true },
         ];
         const component = getComponent({ definitions });
-        expect(getInputByValue(component, optionA.value).props().disabled).toBeFalsy();
-        expect(getInputByValue(component, optionB.value).props().disabled).toBeTruthy();
-        expect(getInputByValue(component, optionC.value).props().disabled).toBeTruthy();
+        expect(getInputByValue(component, optionA.value)).not.toBeDisabled();
+        expect(getInputByValue(component, optionB.value)).toBeDisabled();
+        expect(getInputByValue(component, optionC.value)).toBeDisabled();
     });
 
     it('disables all buttons with disabled prop', () => {
         const component = getComponent({ disabled: true });
-        expect(getInputByValue(component, optionA.value).props().disabled).toBeTruthy();
-        expect(getInputByValue(component, optionB.value).props().disabled).toBeTruthy();
-        expect(getInputByValue(component, optionC.value).props().disabled).toBeTruthy();
+        expect(getInputByValue(component, optionA.value)).toBeDisabled();
+        expect(getInputByValue(component, optionB.value)).toBeDisabled();
+        expect(getInputByValue(component, optionC.value)).toBeDisabled();
     });
 
     it('calls onChange on click', () => {
@@ -106,9 +104,7 @@ describe('<StyledRadioGroup />', () => {
             onChange,
         });
 
-        act(() => {
-            getInputByValue(component, optionB.value).simulate('change');
-        });
+        fireEvent.click(getInputByValue(component, optionB.value));
 
         expect(onChange).toHaveBeenCalledWith(optionB.value);
     });

test/components/views/elements/__snapshots__/StyledRadioGroup-test.tsx.snap

@@ -1,152 +1,83 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<StyledRadioGroup /> renders radios correctly when no value is provided 1`] = `
-<StyledRadioGroup
-  className="test-class"
-  definitions={
-    Array [
-      Object {
-        "className": "a-class",
-        "description": "anteater description",
-        "label": <span>
-          Anteater label
-        </span>,
-        "value": "Anteater",
-      },
-      Object {
-        "label": <span>
-          Badger label
-        </span>,
-        "value": "Badger",
-      },
-      Object {
-        "description": <span>
-          Canary description
-        </span>,
-        "label": <span>
-          Canary label
-        </span>,
-        "value": "Canary",
-      },
-    ]
-  }
-  name="test"
-  onChange={[MockFunction]}
->
-  <StyledRadioButton
-    aria-describedby="test-Anteater-description"
-    checked={false}
-    childrenInLabel={true}
-    className="test-class a-class"
-    id="test-Anteater"
-    name="test"
-    onChange={[Function]}
-    value="Anteater"
+<DocumentFragment>
+  <label
+    class="mx_StyledRadioButton test-class a-class mx_StyledRadioButton_enabled"
   >
-    <label
-      className="mx_StyledRadioButton test-class a-class mx_StyledRadioButton_enabled"
+    <input
+      aria-describedby="test-Anteater-description"
+      id="test-Anteater"
+      name="test"
+      type="radio"
+      value="Anteater"
+    />
+    <div>
+      <div />
+    </div>
+    <div
+      class="mx_StyledRadioButton_content"
     >
-      <input
-        aria-describedby="test-Anteater-description"
-        checked={false}
-        id="test-Anteater"
-        name="test"
-        onChange={[Function]}
-        type="radio"
-        value="Anteater"
-      />
-      <div>
-        <div />
-      </div>
-      <div
-        className="mx_StyledRadioButton_content"
-      >
-        <span>
-          Anteater label
-        </span>
-      </div>
-      <div
-        className="mx_StyledRadioButton_spacer"
-      />
-    </label>
-  </StyledRadioButton>
+      <span>
+        Anteater label
+      </span>
+    </div>
+    <div
+      class="mx_StyledRadioButton_spacer"
+    />
+  </label>
   <span
     id="test-Anteater-description"
   >
     anteater description
   </span>
-  <StyledRadioButton
-    checked={false}
-    childrenInLabel={true}
-    className="test-class"
-    id="test-Badger"
-    name="test"
-    onChange={[Function]}
-    value="Badger"
+  <label
+    class="mx_StyledRadioButton test-class mx_StyledRadioButton_enabled"
   >
-    <label
-      className="mx_StyledRadioButton test-class mx_StyledRadioButton_enabled"
+    <input
+      id="test-Badger"
+      name="test"
+      type="radio"
+      value="Badger"
+    />
+    <div>
+      <div />
+    </div>
+    <div
+      class="mx_StyledRadioButton_content"
     >
-      <input
-        checked={false}
-        id="test-Badger"
-        name="test"
-        onChange={[Function]}
-        type="radio"
-        value="Badger"
-      />
-      <div>
-        <div />
-      </div>
-      <div
-        className="mx_StyledRadioButton_content"
-      >
-        <span>
-          Badger label
-        </span>
-      </div>
-      <div
-        className="mx_StyledRadioButton_spacer"
-      />
-    </label>
-  </StyledRadioButton>
-  <StyledRadioButton
-    aria-describedby="test-Canary-description"
-    checked={false}
-    childrenInLabel={true}
-    className="test-class"
-    id="test-Canary"
-    name="test"
-    onChange={[Function]}
-    value="Canary"
+      <span>
+        Badger label
+      </span>
+    </div>
+    <div
+      class="mx_StyledRadioButton_spacer"
+    />
+  </label>
+  <label
+    class="mx_StyledRadioButton test-class mx_StyledRadioButton_enabled"
   >
-    <label
-      className="mx_StyledRadioButton test-class mx_StyledRadioButton_enabled"
+    <input
+      aria-describedby="test-Canary-description"
+      id="test-Canary"
+      name="test"
+      type="radio"
+      value="Canary"
+    />
+    <div>
+      <div />
+    </div>
+    <div
+      class="mx_StyledRadioButton_content"
     >
-      <input
-        aria-describedby="test-Canary-description"
-        checked={false}
-        id="test-Canary"
-        name="test"
-        onChange={[Function]}
-        type="radio"
-        value="Canary"
-      />
-      <div>
-        <div />
-      </div>
-      <div
-        className="mx_StyledRadioButton_content"
-      >
-        <span>
-          Canary label
-        </span>
-      </div>
-      <div
-        className="mx_StyledRadioButton_spacer"
-      />
-    </label>
-  </StyledRadioButton>
+      <span>
+        Canary label
+      </span>
+    </div>
+    <div
+      class="mx_StyledRadioButton_spacer"
+    />
+  </label>
   <span
     id="test-Canary-description"
   >
@@ -154,5 +85,5 @@ exports[`<StyledRadioGroup /> renders radios correctly when no value is provided
       Canary description
     </span>
   </span>
-</StyledRadioGroup>
+</DocumentFragment>
 `;