test(jest): Remove usage of `toMatchSnapshot()` (#20720)

...or in the case of highlightFuseMatches, ignore it.

tests/js/spec/components/__snapshots__/dropdownAutoCompleteMenu.spec.jsx.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DropdownAutoCompleteMenu selects 1`] = `[MockFunction]`;

tests/js/spec/components/dropdownAutoCompleteMenu.spec.jsx

@@ -61,7 +61,16 @@ describe('DropdownAutoCompleteMenu', function() {
 
   it('selects', function() {
     const mock = jest.fn();
-
+    const countries = [
+      {
+        value: 'new zealand',
+        label: <div>New Zealand</div>,
+      },
+      {
+        value: 'australia',
+        label: <div>Australia</div>,
+      },
+    ];
     const wrapper = mountWithTheme(
       <DropdownAutoCompleteMenu
         isOpen
@@ -70,18 +79,10 @@ describe('DropdownAutoCompleteMenu', function() {
             id: 'countries',
             value: 'countries',
             label: 'countries',
-            items: [
-              {
-                value: 'new zealand',
-                label: <div>New Zealand</div>,
-              },
-              {
-                value: 'australia',
-                label: <div>Australia</div>,
-              },
-            ],
+            items: countries,
           },
         ]}
+        onSelect={mock}
       >
         {({selectedItem}) => (selectedItem ? selectedItem.label : 'Click me!')}
       </DropdownAutoCompleteMenu>,
@@ -92,7 +93,13 @@ describe('DropdownAutoCompleteMenu', function() {
       .find('AutoCompleteItem')
       .last()
       .simulate('click');
-    expect(mock).toMatchSnapshot();
+
+    expect(mock).toHaveBeenCalledTimes(1);
+    expect(mock).toHaveBeenCalledWith(
+      {index: 1, ...countries[1]},
+      {highlightedIndex: 0, inputValue: '', isOpen: true, selectedItem: null},
+      expect.anything()
+    );
   });
 
   it('shows empty message when there are no items', function() {

tests/js/spec/components/events/interfaces/__snapshots__/frameLine.spec.jsx.snap

@@ -1,91 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Frame renderContext() should render context lines 1`] = `
-Array [
-  <ContextLine
-    className="css-x7wq2i-FrameContext"
-    isActive={false}
-    line={
-      Array [
-        211,
-        "    # Mark the crashed thread and add its stacktrace to the exception",
-      ]
-    }
-  >
-    <li
-      className="css-x7wq2i-FrameContext expandable"
-      key="211"
-    >
-      <span
-        className="ws"
-      >
-            
-      </span>
-      <span
-        className="contextline"
-      >
-        # Mark the crashed thread and add its stacktrace to the exception
-      </span>
-    </li>
-  </ContextLine>,
-  <ContextLine
-    className="css-x7wq2i-FrameContext"
-    isActive={false}
-    line={
-      Array [
-        212,
-        "    crashed_thread = data['threads'][state.requesting_thread]",
-      ]
-    }
-  >
-    <li
-      className="css-x7wq2i-FrameContext expandable"
-      key="212"
-    >
-      <span
-        className="ws"
-      >
-            
-      </span>
-      <span
-        className="contextline"
-      >
-        crashed_thread = data['threads'][state.requesting_thread]
-      </span>
-    </li>
-  </ContextLine>,
-  <ContextLine
-    className="css-x7wq2i-FrameContext"
-    isActive={false}
-    line={
-      Array [
-        213,
-        "    crashed_thread['crashed'] = True",
-      ]
-    }
-  >
-    <li
-      className="css-x7wq2i-FrameContext expandable"
-      key="213"
-    >
-      <span
-        className="ws"
-      >
-            
-      </span>
-      <span
-        className="contextline"
-      >
-        crashed_thread['crashed'] = True
-      </span>
-    </li>
-  </ContextLine>,
-]
-`;
-
-exports[`Frame renderOriginalSourceInfo() should render the source map information as a HTML string 1`] = `
-<FrameDefaultTitleOriginalSourceInfo
-  map="vendor.js.map"
-  mapUrl="https://beta.getsentry.com/_static/sentry/dist/vendor.js.map"
-/>
-`;

tests/js/spec/components/events/interfaces/frameLine.spec.jsx

@@ -23,7 +23,7 @@ describe('Frame', function() {
     it('should render the source map information as a HTML string', function() {
       const frame = mountWithTheme(<FrameLine data={data} components={[]} />);
 
-      expect(frame.find('Tooltip').prop('title')).toMatchSnapshot();
+      expect(frame.find('Tooltip')).toSnapshot();
     });
   });
 
@@ -38,7 +38,7 @@ describe('Frame', function() {
       };
 
       const frame = mountWithTheme(<FrameLine data={data} components={[]} isExpanded />);
-      expect(frame.find('ContextLine')).toMatchSnapshot();
+      expect(frame.find('ContextLine')).toSnapshot();
     });
 
     it('should render register values', () => {

tests/js/spec/components/forms/__snapshots__/genericField.spec.jsx.snap

@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GenericField renders text as TextInput 1`] = `
-<TextField
-  disabled={false}
-  formState="Ready"
-  help={null}
-  hideErrorMessage={false}
-  key="field-name"
-  label="field label*"
-  name="field-name"
-  required={true}
-  type="text"
-/>
-`;
-
-exports[`GenericField renders text with choices as SelectCreatableField 1`] = `
-<SelectCreatableField
-  choices={Array []}
-  clearable={true}
-  deprecatedSelectControl={true}
-  disabled={false}
-  formState="Ready"
-  help={null}
-  hideErrorMessage={false}
-  key="field-name"
-  label="field label*"
-  multiple={false}
-  name="field-name"
-  required={true}
-  type="text"
-/>
-`;

tests/js/spec/components/forms/__snapshots__/rangeField.spec.jsx.snap

@@ -1,85 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RangeField render() renders 1`] = `
-<div
-  className="control-group"
->
-  <div
-    className="controls"
-  >
-    <input
-      className="form-control"
-      disabled={false}
-      id="id-fieldName"
-      name="fieldName"
-      onChange={[Function]}
-      required={false}
-      type="range"
-      value=""
-    />
-  </div>
-</div>
-`;
-
-exports[`RangeField render() renders with form context 1`] = `
-<div
-  className="control-group"
->
-  <div
-    className="controls"
-  >
-    <input
-      className="form-control"
-      disabled={false}
-      id="id-fieldName"
-      name="fieldName"
-      onChange={[Function]}
-      required={false}
-      type="range"
-      value={2}
-    />
-  </div>
-</div>
-`;
-
-exports[`RangeField render() renders with optional attributes 1`] = `
-<div
-  className="control-group"
->
-  <div
-    className="controls"
-  >
-    <input
-      className="form-control"
-      disabled={false}
-      id="id-fieldName"
-      name="fieldName"
-      onChange={[Function]}
-      required={false}
-      type="range"
-      value=""
-    />
-  </div>
-</div>
-`;
-
-exports[`RangeField render() renders with value 1`] = `
-<div
-  className="control-group"
->
-  <div
-    className="controls"
-  >
-    <input
-      className="form-control"
-      disabled={false}
-      id="id-fieldName"
-      name="fieldName"
-      onChange={[Function]}
-      required={false}
-      type="range"
-      value={2}
-    />
-  </div>
-</div>
-`;

tests/js/spec/components/forms/genericField.spec.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import {shallow} from 'sentry-test/enzyme';
+import {mountWithTheme} from 'sentry-test/enzyme';
 
 import {GenericField, FormState} from 'app/components/forms';
 
 describe('GenericField', function() {
   it('renders text as TextInput', function() {
-    const wrapper = shallow(
+    const wrapper = mountWithTheme(
       <GenericField
         formState={FormState.READY}
         config={{
@@ -16,12 +16,11 @@ describe('GenericField', function() {
         }}
       />
     );
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.name()).toEqual('TextField');
+    expect(wrapper.find('TextField')).toHaveLength(1);
   });
 
   it('renders text with choices as SelectCreatableField', function() {
-    const wrapper = shallow(
+    const wrapper = mountWithTheme(
       <GenericField
         formState={FormState.READY}
         config={{
@@ -32,7 +31,6 @@ describe('GenericField', function() {
         }}
       />
     );
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.name()).toEqual('SelectCreatableField');
+    expect(wrapper.find('SelectCreatableField')).toHaveLength(1);
   });
 });

tests/js/spec/components/forms/rangeField.spec.jsx

@@ -7,14 +7,13 @@ import {RangeField} from 'app/components/forms';
 describe('RangeField', function() {
   describe('render()', function() {
     it('renders', function() {
-      const wrapper = shallow(<RangeField name="fieldName" />, {
+      shallow(<RangeField name="fieldName" />, {
         disableLifecycleMethods: true,
       });
-      expect(wrapper).toMatchSnapshot();
     });
 
     it('renders with optional attributes', function() {
-      const wrapper = shallow(
+      shallow(
         <RangeField
           name="fieldName"
           min={0}
@@ -25,18 +24,16 @@ describe('RangeField', function() {
         />,
         {disableLifecycleMethods: true}
       );
-      expect(wrapper).toMatchSnapshot();
     });
 
     it('renders with value', function() {
-      const wrapper = shallow(<RangeField name="fieldName" value={2} />, {
+      shallow(<RangeField name="fieldName" value={2} />, {
         disableLifecycleMethods: true,
       });
-      expect(wrapper).toMatchSnapshot();
     });
 
     it('renders with form context', function() {
-      const wrapper = shallow(<RangeField name="fieldName" />, {
+      shallow(<RangeField name="fieldName" />, {
         disableLifecycleMethods: true,
         context: {
           form: {
@@ -47,7 +44,6 @@ describe('RangeField', function() {
           },
         },
       });
-      expect(wrapper).toMatchSnapshot();
     });
 
     it('renders with value=0 in form context', function() {

tests/js/spec/utils/highlightFuseMatches.spec.jsx

@@ -50,10 +50,12 @@ describe('highlightFuseMatches', function() {
   });
 
   it('renders a highlighted string', function() {
+    // eslint-disable-next-line sentry/no-to-match-snapshot
     expect(highlightFuseMatches(matchObj)).toMatchSnapshot();
   });
 
   it('matches whole word', function() {
+    // eslint-disable-next-line sentry/no-to-match-snapshot
     expect(highlightFuseMatches({value: 'foo', indices: [[0, 2]]})).toMatchSnapshot();
   });
 });