Merge branch 'peterhegman/remove-toExist-jest-matcher' into 'master'

Remove `toExist` jest matcher

See merge request gitlab-org/gitlab!73874

app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue

@@ -213,6 +213,7 @@ export default {
     <div
       v-if="hasRotateError"
       class="gl-text-red-500 gl-display-flex gl-align-items-center gl-font-weight-normal gl-mb-3"
+      data-testid="rotate-error"
     >
       <gl-icon name="warning" class="gl-mr-2" />
       <span>{{ $options.translations.instanceIdRegenerateError }}</span>

ee/app/assets/javascripts/vue_shared/security_reports/components/event_item.vue

@@ -82,7 +82,11 @@ export default {
 
     <slot v-if="showRightSlot" name="right-content"></slot>
 
-    <div v-else-if="showActionButtons" class="gl-flex-shrink-0 gl-align-self-start">
+    <div
+      v-else-if="showActionButtons"
+      class="gl-flex-shrink-0 gl-align-self-start"
+      data-testid="action-buttons"
+    >
       <gl-button
         v-for="button in actionButtons"
         :key="button.title"

ee/spec/frontend/groups/settings/compliance_frameworks/components/shared_form_spec.js

@@ -55,12 +55,12 @@ describe('SharedForm', () => {
     it('shows the correct input and button fields', () => {
       wrapper = createComponent();
 
-      expect(findNameInput()).toExist();
-      expect(findDescriptionInput()).toExist();
-      expect(findPipelineConfigurationInput()).toExist();
-      expect(findColorPicker()).toExist();
-      expect(findSubmitBtn()).toExist();
-      expect(findCancelBtn()).toExist();
+      expect(findNameInput().exists()).toBe(true);
+      expect(findDescriptionInput().exists()).toBe(true);
+      expect(findPipelineConfigurationInput().exists()).toBe(true);
+      expect(findColorPicker().exists()).toBe(true);
+      expect(findSubmitBtn().exists()).toBe(true);
+      expect(findCancelBtn().exists()).toBe(true);
     });
 
     it('sets the submit button text from the property', () => {

ee/spec/frontend/related_items_tree/components/epic_health_status_spec.js

@@ -23,12 +23,6 @@ describe('EpicHealthStatus', () => {
     wrapper.destroy();
   });
 
-  it('renders tooltip', () => {
-    const tooltip = wrapper.find(GlTooltip);
-
-    expect(tooltip).toExist();
-  });
-
   describe('when no statuses are assigned', () => {
     it('hasHealthStatus computed property returns false', () => {
       expect(wrapper.vm.hasHealthStatus).toBe(false);
@@ -54,6 +48,12 @@ describe('EpicHealthStatus', () => {
       });
     });
 
+    it('renders tooltip', () => {
+      const tooltip = wrapper.find(GlTooltip);
+
+      expect(tooltip.exists()).toBe(true);
+    });
+
     it('hasHealthStatus computed property returns false', () => {
       expect(wrapper.vm.hasHealthStatus).toBe(true);
     });

ee/spec/frontend/related_items_tree/components/issue_health_status_spec.js

@@ -37,7 +37,7 @@ describe('IssueHealthStatus', () => {
   it('applies correct health status class', () => {
     const expectedValue = issueHealthStatusCSSMapping[healthStatus];
 
-    expect(wrapper.find(`.${expectedValue}`)).toExist();
+    expect(wrapper.find(`.${expectedValue}`).exists()).toBe(true);
   });
 
   it('contains health status tooltip', () => {

ee/spec/frontend/requirements/components/import_requirements_modal_spec.js

@@ -66,7 +66,6 @@ describe('ImportRequirementsModal', () => {
 
       const emitted = wrapper.emitted('import')[0][0];
 
-      expect(emitted).toExist();
       expect(emitted.file).toBe(file);
       expect(emitted.projectPath).toBe(wrapper.vm.projectPath);
     });

ee/spec/frontend/security_configuration/dast_profiles/components/dast_saved_scans_list_spec.js

@@ -48,7 +48,7 @@ describe('EE - DastSavedScansList', () => {
   };
   const createFullComponent = wrapperFactory(mount);
 
-  const findProfileList = () => wrapper.find(ProfilesList);
+  const findProfileList = () => wrapper.findComponent(ProfilesList);
 
   afterEach(() => {
     wrapper.destroy();
@@ -59,7 +59,7 @@ describe('EE - DastSavedScansList', () => {
       propsData: { profiles: savedScans },
     });
 
-    expect(findProfileList()).toExist();
+    expect(findProfileList().exists()).toBe(true);
   });
 
   it('renders branch information for each profile', () => {

ee/spec/frontend/security_configuration/dast_profiles/components/dast_scanner_profiles_list_spec.js

@@ -33,7 +33,7 @@ describe('EE - DastScannerProfileList', () => {
   };
   const createFullComponent = wrapperFactory(mount);
 
-  const findProfileList = () => wrapper.find(ProfilesList);
+  const findProfileList = () => wrapper.findComponent(ProfilesList);
 
   afterEach(() => {
     wrapper.destroy();
@@ -44,7 +44,7 @@ describe('EE - DastScannerProfileList', () => {
       propsData: { profiles: scannerProfiles },
     });
 
-    expect(findProfileList()).toExist();
+    expect(findProfileList().exists()).toBe(true);
   });
 
   it('passes down the props properly', () => {

ee/spec/frontend/security_configuration/dast_profiles/components/dast_site_profiles_list_spec.js

@@ -71,7 +71,7 @@ describe('EE - DastSiteProfileList', () => {
   const getAllTableRows = () => within(getTableBody()).getAllByRole('row');
   const getTableRowForProfile = (profile) => getAllTableRows()[siteProfiles.indexOf(profile)];
 
-  const findProfileList = () => wrapper.find(ProfilesList);
+  const findProfileList = () => wrapper.findComponent(ProfilesList);
 
   afterEach(() => {
     wrapper.destroy();
@@ -83,7 +83,7 @@ describe('EE - DastSiteProfileList', () => {
       propsData: { profiles: siteProfiles },
     });
 
-    expect(findProfileList()).toExist();
+    expect(findProfileList().exists()).toBe(true);
   });
 
   it('passes down the props properly', () => {
@@ -155,7 +155,7 @@ describe('EE - DastSiteProfileList', () => {
           const validateButton = within(actionsCell).queryByRole('button', {
             name: buttonLabel,
           });
-          expect(validateButton).toExist();
+          expect(validateButton).not.toBe(null);
         });
 
         it(`should ${isBtnDisabled ? '' : 'not '}disable ${buttonLabel} button`, () => {

ee/spec/frontend/storage_counter/components/app_spec.js

@@ -165,7 +165,7 @@ describe('Storage counter app', () => {
       it('does render link', () => {
         const link = findPurchaseStorageLink();
 
-        expect(link).toExist();
+        expect(link.exists()).toBe(true);
         expect(link.attributes('href')).toBe('customers.gitlab.com');
       });
     });

ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/event_item_spec.js.snap

@@ -83,6 +83,7 @@ exports[`Event Item with action buttons renders the action buttons 1`] = `
    
   <div
     class="gl-flex-shrink-0 gl-align-self-start"
+    data-testid="action-buttons"
   >
     <button
       aria-label="Foo Action"

ee/spec/frontend/vue_shared/security_reports/components/event_item_spec.js

 import { GlButton } from '@gitlab/ui';
-import { shallowMount, mount } from '@vue/test-utils';
+
+import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper';
 import Component from 'ee/vue_shared/security_reports/components/event_item.vue';
 import NoteHeader from '~/notes/components/note_header.vue';
 
 describe('Event Item', () => {
   let wrapper;
 
-  const mountComponent = (options, mountFn = shallowMount) => {
+  const mountComponent = (options, mountFn = shallowMountExtended) => {
     wrapper = mountFn(Component, options);
   };
 
@@ -51,7 +52,7 @@ describe('Event Item', () => {
     });
 
     it('renders the action buttons container', () => {
-      expect(wrapper.find('.action-buttons')).toExist();
+      expect(wrapper.findByTestId('action-buttons').exists()).toBe(true);
     });
 
     it('renders the default slot', () => {
@@ -83,11 +84,11 @@ describe('Event Item', () => {
     });
 
     beforeEach(() => {
-      mountComponent({ propsData }, mount);
+      mountComponent({ propsData }, mountExtended);
     });
 
     it('renders the action buttons container', () => {
-      expect(wrapper.find('.action-buttons')).toExist();
+      expect(wrapper.findByTestId('action-buttons').exists()).toBe(true);
     });
 
     it('renders the action buttons', () => {

spec/frontend/alert_handler_spec.js

@@ -26,12 +26,12 @@ describe('Alert Handler', () => {
       });
 
       it('should render the alert', () => {
-        expect(findFirstAlert()).toExist();
+        expect(findFirstAlert()).not.toBe(null);
       });
 
       it('should dismiss the alert on click', () => {
         findFirstDismissButton().click();
-        expect(findFirstAlert()).not.toExist();
+        expect(findFirstAlert()).toBe(null);
       });
     });
 
@@ -58,12 +58,12 @@ describe('Alert Handler', () => {
       });
 
       it('should render the banner', () => {
-        expect(findFirstBanner()).toExist();
+        expect(findFirstBanner()).not.toBe(null);
       });
 
       it('should dismiss the banner on click', () => {
         findFirstDismissButton().click();
-        expect(findFirstBanner()).not.toExist();
+        expect(findFirstBanner()).toBe(null);
       });
     });
 
@@ -79,12 +79,12 @@ describe('Alert Handler', () => {
       });
 
       it('should render the banner', () => {
-        expect(findFirstAlert()).toExist();
+        expect(findFirstAlert()).not.toBe(null);
       });
 
       it('should dismiss the banner on click', () => {
         findFirstDismissButtonByClass().click();
-        expect(findFirstAlert()).not.toExist();
+        expect(findFirstAlert()).toBe(null);
       });
     });
   });

spec/frontend/confirm_modal_spec.js

@@ -72,7 +72,7 @@ describe('ConfirmModal', () => {
 
   it('starts with only JsHooks', () => {
     expect(findJsHooks()).toHaveLength(buttons.length);
-    expect(findModal()).not.toExist();
+    expect(findModal()).toBe(null);
   });
 
   describe('when button clicked', () => {
@@ -87,7 +87,7 @@ describe('ConfirmModal', () => {
 
     describe('GlModal', () => {
       it('is rendered', () => {
-        expect(findModal()).toExist();
+        expect(findModal()).not.toBe(null);
         expect(modalIsHidden()).toBe(false);
       });
 

spec/frontend/delete_label_modal_spec.js

@@ -40,7 +40,7 @@ describe('DeleteLabelModal', () => {
 
   it('starts with only js-containers', () => {
     expect(findJsHooks()).toHaveLength(buttons.length);
-    expect(findModal()).not.toExist();
+    expect(findModal()).toBe(null);
   });
 
   describe('when first button clicked', () => {
@@ -54,7 +54,7 @@ describe('DeleteLabelModal', () => {
     });
 
     it('renders GlModal', () => {
-      expect(findModal()).toExist();
+      expect(findModal()).not.toBe(null);
     });
   });
 

spec/frontend/deploy_keys/components/key_spec.js

@@ -50,20 +50,20 @@ describe('Deploy keys key', () => {
     it('shows pencil button for editing', () => {
       createComponent({ deployKey });
 
-      expect(wrapper.find('.btn [data-testid="pencil-icon"]')).toExist();
+      expect(wrapper.find('.btn [data-testid="pencil-icon"]').exists()).toBe(true);
     });
 
     it('shows disable button when the project is not deletable', () => {
       createComponent({ deployKey });
 
-      expect(wrapper.find('.btn [data-testid="cancel-icon"]')).toExist();
+      expect(wrapper.find('.btn [data-testid="cancel-icon"]').exists()).toBe(true);
     });
 
     it('shows remove button when the project is deletable', () => {
       createComponent({
         deployKey: { ...deployKey, destroyed_when_orphaned: true, almost_orphaned: true },
       });
-      expect(wrapper.find('.btn [data-testid="remove-icon"]')).toExist();
+      expect(wrapper.find('.btn [data-testid="remove-icon"]').exists()).toBe(true);
     });
   });
 
@@ -137,7 +137,7 @@ describe('Deploy keys key', () => {
 
     it('shows pencil button for editing', () => {
       createComponent({ deployKey });
-      expect(wrapper.find('.btn [data-testid="pencil-icon"]')).toExist();
+      expect(wrapper.find('.btn [data-testid="pencil-icon"]').exists()).toBe(true);
     });
 
     it('shows disable button when key is enabled', () => {
@@ -145,7 +145,7 @@ describe('Deploy keys key', () => {
 
       createComponent({ deployKey });
 
-      expect(wrapper.find('.btn [data-testid="cancel-icon"]')).toExist();
+      expect(wrapper.find('.btn [data-testid="cancel-icon"]').exists()).toBe(true);
     });
   });
 });

spec/frontend/deploy_keys/components/keys_panel_spec.js

@@ -37,7 +37,7 @@ describe('Deploy keys panel', () => {
     mountComponent();
     const tableHeader = findTableRowHeader();
 
-    expect(tableHeader).toExist();
+    expect(tableHeader.exists()).toBe(true);
     expect(tableHeader.text()).toContain('Deploy key');
     expect(tableHeader.text()).toContain('Project usage');
     expect(tableHeader.text()).toContain('Created');

spec/frontend/design_management/components/list/item_spec.js

@@ -87,7 +87,7 @@ describe('Design management list item component', () => {
 
     describe('before image is loaded', () => {
       it('renders loading spinner', () => {
-        expect(wrapper.find(GlLoadingIcon)).toExist();
+        expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
       });
     });
 

spec/frontend/feature_flags/components/configure_feature_flags_modal_spec.js

 import { GlModal, GlSprintf, GlAlert } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import Component from '~/feature_flags/components/configure_feature_flags_modal.vue';
 
 describe('Configure Feature Flags Modal', () => {
@@ -20,7 +21,7 @@ describe('Configure Feature Flags Modal', () => {
   };
 
   let wrapper;
-  const factory = (props = {}, { mountFn = shallowMount, ...options } = {}) => {
+  const factory = (props = {}, { mountFn = shallowMountExtended, ...options } = {}) => {
     wrapper = mountFn(Component, {
       provide,
       stubs: { GlSprintf },
@@ -140,11 +141,13 @@ describe('Configure Feature Flags Modal', () => {
 
   describe('has rotate error', () => {
     afterEach(() => wrapper.destroy());
-    beforeEach(factory.bind(null, { hasRotateError: false }));
+    beforeEach(() => {
+      factory({ hasRotateError: true });
+    });
 
     it('should display an error', async () => {
-      expect(wrapper.find('.text-danger')).toExist();
-      expect(wrapper.find('[name="warning"]')).toExist();
+      expect(wrapper.findByTestId('rotate-error').exists()).toBe(true);
+      expect(wrapper.find('[name="warning"]').exists()).toBe(true);
     });
   });
 

spec/frontend/invite_members/components/invite_members_modal_spec.js

@@ -198,7 +198,7 @@ describe('InviteMembersModal', () => {
 
     describe('rendering the access expiration date field', () => {
       it('renders the datepicker', () => {
-        expect(findDatepicker()).toExist();
+        expect(findDatepicker().exists()).toBe(true);
       });
     });
   });

spec/frontend/issuable/components/csv_import_modal_spec.js

-import { GlButton, GlModal } from '@gitlab/ui';
+import { GlModal } from '@gitlab/ui';
 import { stubComponent } from 'helpers/stub_component';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import CsvImportModal from '~/issuable/components/csv_import_modal.vue';
+import { __ } from '~/locale';
 
 jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
 
@@ -36,7 +37,6 @@ describe('CsvImportModal', () => {
   });
 
   const findModal = () => wrapper.findComponent(GlModal);
-  const findPrimaryButton = () => wrapper.findComponent(GlButton);
   const findForm = () => wrapper.find('form');
   const findFileInput = () => wrapper.findByLabelText('Upload CSV file');
   const findAuthenticityToken = () => new FormData(findForm().element).get('authenticity_token');
@@ -64,11 +64,11 @@ describe('CsvImportModal', () => {
         expect(findForm().exists()).toBe(true);
         expect(findForm().attributes('action')).toBe(importCsvIssuesPath);
         expect(findAuthenticityToken()).toBe('mock-csrf-token');
-        expect(findFileInput()).toExist();
+        expect(findFileInput().exists()).toBe(true);
       });
 
       it('displays the correct primary button action text', () => {
-        expect(findPrimaryButton()).toExist();
+        expect(findModal().props('actionPrimary')).toEqual({ text: __('Import issues') });
       });
 
       it('submits the form when the primary action is clicked', () => {

spec/frontend/monitoring/components/dashboard_spec.js

@@ -456,7 +456,7 @@ describe('Dashboard', () => {
 
     it('shows the links section', () => {
       expect(wrapper.vm.shouldShowLinksSection).toBe(true);
-      expect(wrapper.find(LinksSection)).toExist();
+      expect(wrapper.findComponent(LinksSection).exists()).toBe(true);
     });
   });
 

spec/frontend/monitoring/components/links_section_spec.js

 import { GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+
 import LinksSection from '~/monitoring/components/links_section.vue';
 import { createStore } from '~/monitoring/stores';
 
@@ -26,12 +28,12 @@ describe('Links Section component', () => {
     createShallowWrapper();
   });
 
-  it('does not render a section if no links are present', () => {
+  it('does not render a section if no links are present', async () => {
     setState();
 
-    return wrapper.vm.$nextTick(() => {
-      expect(findLinks()).not.toExist();
-    });
+    await nextTick();
+
+    expect(findLinks().length).toBe(0);
   });
 
   it('renders a link inside a section', () => {

spec/frontend/monitoring/components/variables/text_field_spec.js

@@ -15,12 +15,12 @@ describe('Text variable component', () => {
     });
   };
 
-  const findInput = () => wrapper.find(GlFormInput);
+  const findInput = () => wrapper.findComponent(GlFormInput);
 
   it('renders a text input when all props are passed', () => {
     createShallowWrapper();
 
-    expect(findInput()).toExist();
+    expect(findInput().exists()).toBe(true);
   });
 
   it('always has a default value', () => {

spec/frontend/monitoring/pages/dashboard_page_spec.js

@@ -29,7 +29,7 @@ describe('monitoring/pages/dashboard_page', () => {
     });
   };
 
-  const findDashboardComponent = () => wrapper.find(Dashboard);
+  const findDashboardComponent = () => wrapper.findComponent(Dashboard);
 
   beforeEach(() => {
     buildRouter();
@@ -60,7 +60,7 @@ describe('monitoring/pages/dashboard_page', () => {
       smallEmptyState: false,
     };
 
-    expect(findDashboardComponent()).toExist();
+    expect(findDashboardComponent().exists()).toBe(true);
     expect(allProps).toMatchObject(findDashboardComponent().props());
   });
 });

spec/frontend/notes/components/note_body_spec.js

@@ -58,7 +58,6 @@ describe('issue_note_body component', () => {
     it('adds autosave', () => {
       const autosaveKey = `autosave/Note/${note.noteable_type}/${note.id}`;
 
-      expect(vm.autosave).toExist();
       expect(vm.autosave.key).toEqual(autosaveKey);
     });
   });

spec/frontend/packages_and_registries/package_registry/components/details/installations_commands_spec.js

@@ -33,12 +33,12 @@ describe('InstallationCommands', () => {
     });
   }
 
-  const npmInstallation = () => wrapper.find(NpmInstallation);
-  const mavenInstallation = () => wrapper.find(MavenInstallation);
-  const conanInstallation = () => wrapper.find(ConanInstallation);
-  const nugetInstallation = () => wrapper.find(NugetInstallation);
-  const pypiInstallation = () => wrapper.find(PypiInstallation);
-  const composerInstallation = () => wrapper.find(ComposerInstallation);
+  const npmInstallation = () => wrapper.findComponent(NpmInstallation);
+  const mavenInstallation = () => wrapper.findComponent(MavenInstallation);
+  const conanInstallation = () => wrapper.findComponent(ConanInstallation);
+  const nugetInstallation = () => wrapper.findComponent(NugetInstallation);
+  const pypiInstallation = () => wrapper.findComponent(PypiInstallation);
+  const composerInstallation = () => wrapper.findComponent(ComposerInstallation);
 
   afterEach(() => {
     wrapper.destroy();
@@ -57,7 +57,7 @@ describe('InstallationCommands', () => {
       it(`${packageEntity.packageType} instructions exist`, () => {
         createComponent({ packageEntity });
 
-        expect(selector()).toExist();
+        expect(selector().exists()).toBe(true);
       });
     });
   });

spec/frontend/pages/admin/projects/components/namespace_select_spec.js

@@ -38,7 +38,7 @@ describe('Dropdown select component', () => {
   it('creates a hidden input if fieldName is provided', () => {
     mountDropdown({ fieldName: 'namespace-input' });
 
-    expect(findNamespaceInput()).toExist();
+    expect(findNamespaceInput().exists()).toBe(true);
     expect(findNamespaceInput().attributes('name')).toBe('namespace-input');
   });
 
@@ -57,9 +57,9 @@ describe('Dropdown select component', () => {
       // wait for dropdown options to populate
       await wrapper.vm.$nextTick();
 
-      expect(findDropdownOption('user: Administrator')).toExist();
-      expect(findDropdownOption('group: GitLab Org')).toExist();
-      expect(findDropdownOption('group: Foobar')).not.toExist();
+      expect(findDropdownOption('user: Administrator').exists()).toBe(true);
+      expect(findDropdownOption('group: GitLab Org').exists()).toBe(true);
+      expect(findDropdownOption('group: Foobar').exists()).toBe(false);
 
       findDropdownOption('user: Administrator').trigger('click');
       await wrapper.vm.$nextTick();

spec/frontend/pipelines/empty_state_spec.js

@@ -35,7 +35,7 @@ describe('Pipelines Empty State', () => {
     });
 
     it('should render the CI/CD templates', () => {
-      expect(pipelinesCiTemplates()).toExist();
+      expect(pipelinesCiTemplates().exists()).toBe(true);
     });
   });
 

spec/frontend/pipelines/pipelines_spec.js

@@ -554,7 +554,7 @@ describe('Pipelines', () => {
       });
 
       it('renders the CI/CD templates', () => {
-        expect(wrapper.find(PipelinesCiTemplates)).toExist();
+        expect(wrapper.findComponent(PipelinesCiTemplates).exists()).toBe(true);
       });
 
       describe('when the code_quality_walkthrough experiment is active', () => {
@@ -568,7 +568,7 @@ describe('Pipelines', () => {
           });
 
           it('renders the CI/CD templates', () => {
-            expect(wrapper.find(PipelinesCiTemplates)).toExist();
+            expect(wrapper.findComponent(PipelinesCiTemplates).exists()).toBe(true);
           });
         });
 
@@ -597,7 +597,7 @@ describe('Pipelines', () => {
           });
 
           it('renders the CI/CD templates', () => {
-            expect(wrapper.find(PipelinesCiTemplates)).toExist();
+            expect(wrapper.findComponent(PipelinesCiTemplates).exists()).toBe(true);
           });
         });
 

spec/frontend/projects/commits/components/author_select_spec.js

@@ -115,7 +115,7 @@ describe('Author Select', () => {
     });
 
     it('does not have popover text by default', () => {
-      expect(wrapper.attributes('title')).not.toExist();
+      expect(wrapper.attributes('title')).toBeUndefined();
     });
   });
 

spec/frontend/security_configuration/components/app_spec.js

@@ -134,12 +134,12 @@ describe('App component', () => {
 
     it('renders main-heading with correct text', () => {
       const mainHeading = findMainHeading();
-      expect(mainHeading).toExist();
+      expect(mainHeading.exists()).toBe(true);
       expect(mainHeading.text()).toContain('Security Configuration');
     });
 
     it('renders GlTab Component ', () => {
-      expect(findTab()).toExist();
+      expect(findTab().exists()).toBe(true);
     });
 
     it('renders right amount of tabs with correct title ', () => {

spec/frontend/sidebar/components/time_tracking/report_spec.js

@@ -50,7 +50,7 @@ describe('Issuable Time Tracking Report', () => {
   it('should render loading spinner', () => {
     mountComponent();
 
-    expect(findLoadingIcon()).toExist();
+    expect(findLoadingIcon().exists()).toBe(true);
   });
 
   it('should render error message on reject', async () => {

spec/frontend/test_setup.js

@@ -47,10 +47,12 @@ Object.assign(global, {
   setFixtures: setHTMLFixture,
 });
 
+const JQUERY_MATCHERS_TO_EXCLUDE = ['toHaveLength', 'toExist'];
+
 // custom-jquery-matchers was written for an old Jest version, we need to make it compatible
 Object.entries(jqueryMatchers).forEach(([matcherName, matcherFactory]) => {
-  // Don't override existing Jest matcher
-  if (matcherName === 'toHaveLength') {
+  // Exclude these jQuery matchers
+  if (JQUERY_MATCHERS_TO_EXCLUDE.includes(matcherName)) {
     return;
   }
 

spec/frontend/vue_mr_widget/components/states/mr_widget_merged_spec.js

@@ -191,7 +191,7 @@ describe('MRWidgetMerged', () => {
   });
 
   it('shows button to copy commit SHA to clipboard', () => {
-    expect(selectors.copyMergeShaButton).toExist();
+    expect(selectors.copyMergeShaButton).not.toBe(null);
     expect(selectors.copyMergeShaButton.getAttribute('data-clipboard-text')).toBe(
       vm.mr.mergeCommitSha,
     );
@@ -201,14 +201,14 @@ describe('MRWidgetMerged', () => {
     vm.mr.mergeCommitSha = null;
 
     Vue.nextTick(() => {
-      expect(selectors.copyMergeShaButton).not.toExist();
+      expect(selectors.copyMergeShaButton).toBe(null);
       expect(vm.$el.querySelector('.mr-info-list').innerText).not.toContain('with');
       done();
     });
   });
 
   it('shows merge commit SHA link', () => {
-    expect(selectors.mergeCommitShaLink).toExist();
+    expect(selectors.mergeCommitShaLink).not.toBe(null);
     expect(selectors.mergeCommitShaLink.text).toContain(vm.mr.shortMergeCommitSha);
     expect(selectors.mergeCommitShaLink.href).toBe(vm.mr.mergeCommitPath);
   });

spec/frontend/vue_shared/components/content_viewer/content_viewer_spec.js

@@ -16,6 +16,6 @@ describe('ContentViewer', () => {
       propsData: { path, fileSize: 1024, type },
     });
 
-    expect(wrapper.find(selector).element).toExist();
+    expect(wrapper.find(selector).exists()).toBe(true);
   });
 });

spec/frontend/vue_shared/components/content_viewer/viewers/markdown_viewer_spec.js

@@ -42,7 +42,7 @@ describe('MarkdownViewer', () => {
     it('renders an animation container while the markdown is loading', () => {
       createComponent();
 
-      expect(wrapper.find('.animation-container')).toExist();
+      expect(wrapper.find('.animation-container').exists()).toBe(true);
     });
 
     it('renders markdown preview preview renders and loads rendered markdown from server', () => {

spec/frontend/whats_new/utils/notification_spec.js

@@ -29,7 +29,7 @@ describe('~/whats_new/utils/notification', () => {
 
       subject();
 
-      expect(findNotificationCountEl()).toExist();
+      expect(findNotificationCountEl()).not.toBe(null);
       expect(notificationEl.classList).toContain('with-notifications');
     });
 
@@ -38,11 +38,11 @@ describe('~/whats_new/utils/notification', () => {
       notificationEl.classList.add('with-notifications');
       localStorage.setItem('display-whats-new-notification', 'version-digest');
 
-      expect(findNotificationCountEl()).toExist();
+      expect(findNotificationCountEl()).not.toBe(null);
 
       subject();
 
-      expect(findNotificationCountEl()).not.toExist();
+      expect(findNotificationCountEl()).toBe(null);
       expect(notificationEl.classList).not.toContain('with-notifications');
     });
   });