feat(unit-tests): migrate from enzyme to rtl COMPASS-10349 (#7840)

* feat(unit-tests): migrate from enzyme to rtl

* chore: fix linter issues

* refactor: use getByRole and getByLabelText queries instead of getByTestId where possible

* fix: test assertion

* fix: test assertion on table view

* fix: remove unused deps

Author: ivandevp

package-lock.json

@@ -54,14 +54,12 @@
     "@mongodb-js/prettier-config-compass": "^1.2.9",
     "@mongodb-js/testing-library-compass": "^1.5.2",
     "@mongodb-js/tsconfig-compass": "^1.2.14",
-    "@types/enzyme": "^3.10.14",
     "@types/reflux": "^6.4.3",
     "chai": "^4.1.2",
     "chai-as-promised": "^7.1.1",
     "depcheck": "^1.4.1",
     "electron": "^37.10.3",
     "electron-mocha": "^12.2.0",
-    "enzyme": "^3.11.0",
     "mocha": "^10.2.0",
     "mongodb-instance-model": "^12.67.0",
     "nyc": "^15.1.0",

packages/compass-crud/package.json

@@ -1,36 +1,29 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import type { ReactWrapper } from 'enzyme';
+import { render, screen, cleanup } from '@mongodb-js/testing-library-compass';
 import HadronDocument from 'hadron-document';
 import { expect } from 'chai';
 
 import DocumentListView from './document-list-view';
-import { CompassComponentsProvider } from '@mongodb-js/compass-components';
 
 describe('<DocumentListView />', function () {
+  afterEach(cleanup);
+
   describe('#render', function () {
     context('when the documents have objects for ids', function () {
-      const docs = [{ _id: { name: 'test-1' } }, { _id: { name: 'test-2' } }];
-      const hadronDocs = docs.map((doc) => new HadronDocument(doc));
-      let component: ReactWrapper;
-      beforeEach(function () {
-        component = mount(
+      it('renders all the documents', function () {
+        const docs = [{ _id: { name: 'test-1' } }, { _id: { name: 'test-2' } }];
+        const hadronDocs = docs.map((doc) => new HadronDocument(doc));
+
+        render(
           <DocumentListView
             docs={hadronDocs}
             isEditable={false}
             isTimeSeries={false}
-          />,
-          { wrappingComponent: CompassComponentsProvider }
+          />
         );
-      });
 
-      afterEach(function () {
-        component?.unmount();
-      });
-
-      it('renders all the documents', function () {
-        const wrapper = component.find('[data-testid="readonly-document"]');
-        expect(wrapper).to.have.length(2);
+        const documents = screen.getAllByTestId('readonly-document');
+        expect(documents).to.have.length(2);
       });
     });
   });