From b364e5264e35f9758fac7e3180c8c2a83174e49e Mon Sep 17 00:00:00 2001
From: Jerinjk14 <Jerin.George14@ibm.com>
Date: Tue, 17 Dec 2024 00:41:10 +0530
Subject: [PATCH] =?UTF-8?q?#2271=20Use=20React=20Testing=20Library=20for?=
 =?UTF-8?q?=20common-properties=20tests=20-=20Part=202-=E2=80=A6=20(#2272)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__tests__/_utils_/table-utilsRTL.js       |  10 +-
 .../panels/columnselection-test.js            | 288 +++++++++-------
 .../common-properties/panels/panel-test.js    | 103 +++---
 .../common-properties/panels/selector-test.js | 134 ++++----
 .../common-properties/panels/subtabs-test.js  | 117 ++++---
 .../common-properties/panels/summary-test.js  | 314 +++++++++---------
 .../panels/tearsheet-test.js                  | 111 ++++---
 .../common-properties/panels/text-test.js     | 119 ++++---
 8 files changed, 676 insertions(+), 520 deletions(-)

diff --git a/canvas_modules/common-canvas/__tests__/_utils_/table-utilsRTL.js b/canvas_modules/common-canvas/__tests__/_utils_/table-utilsRTL.js
index edda34ec89..e8dbfe636f 100644
--- a/canvas_modules/common-canvas/__tests__/_utils_/table-utilsRTL.js
+++ b/canvas_modules/common-canvas/__tests__/_utils_/table-utilsRTL.js
@@ -97,7 +97,15 @@ function getTableHeaderRows(container) {
 }
 
 function getTableRows(container) {
-	const rows = within(container).getAllByRole("row");
+	if (!container) {
+		return [];
+	}
+	let rows;
+	try {
+		rows = within(container).getAllByRole("row");
+	} catch (error) {
+		rows = Array.from(container.querySelectorAll(".properties-data-row"));
+	}
 	const res = [];
 	for (let i = 0; i < rows.length; i++) {
 		if (rows[i].outerHTML.includes("properties-data-row")) {
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/columnselection-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/columnselection-test.js
index b4ef8e32ab..9a56521650 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/panels/columnselection-test.js
+++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/columnselection-test.js
@@ -15,73 +15,96 @@
  */
 
 import { expect } from "chai";
-
-import propertyUtils from "./../../_utils_/property-utils";
-import tableUtils from "./../../_utils_/table-utils";
+import { within } from "@testing-library/react";
+import propertyUtilsRTL from "../../_utils_/property-utilsRTL";
+import tableUtilsRTL from "../../_utils_/table-utilsRTL";
 import columnSelectionPanel from "./../../test_resources/paramDefs/columnSelectionPanel_multiInput_paramDef.json";
 import panelParamDef from "./../../test_resources/paramDefs/panel_paramDef.json";
 import panelConditionsParamDef from "./../../test_resources/paramDefs/panelConditions_paramDef.json";
+import { cleanup, fireEvent } from "@testing-library/react";
 
 describe("selectcolumn and selectcolumns controls work in columnSelection panel", () => {
 	let wrapper;
 	beforeEach(() => {
-		const renderedObject = propertyUtils.flyoutEditorForm(panelParamDef);
+		const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelParamDef);
 		wrapper = renderedObject.wrapper;
 	});
 
 	afterEach(() => {
-		wrapper.unmount();
+		cleanup();
 	});
 
 	it("should show correct values from selectcolumn controls", () => {
-		const panel1 = wrapper.find("div[data-id='properties-field1_panel']");
-		expect(panel1.find("span.cds--list-box__label").text()).to.equal("age");
+		const { container } = wrapper;
+		const panel1 = container.querySelector("div[data-id='properties-field1_panel']");
+		const label1 = panel1.querySelector("span.cds--list-box__label");
+		expect(label1.textContent).to.equal("age");
+		const dropdownButton = panel1.querySelector("button.cds--list-box__field");
+		expect(dropdownButton).to.not.be.null;
+		fireEvent.click(dropdownButton);
+		const dropdown1 = panel1.querySelectorAll("ul.cds--list-box__menu li");
+		expect(dropdown1).to.not.be.null;
+		const actualOptions = Array.from(dropdown1).map((item) => ({
+			label: item.textContent.trim(),
+			value: item.getAttribute("data-value") || item.textContent.trim()
+		}));
 		const expectedOptions = [
-			{ label: "...", value: "" },
+			{ label: "...", value: "..." },
 			{ label: "age", value: "age" },
 			{ label: "Na", value: "Na" },
 			{ label: "drug", value: "drug" }
 		];
-		const actualOptions = panel1.find("Dropdown").prop("items");
 		expect(actualOptions).to.eql(expectedOptions);
-
-		const panel2 = wrapper.find("div[data-id='properties-field2_panel']");
-		expect(panel2.find("span.cds--list-box__label").text()).to.equal("BP");
+		const panel2 = container.querySelector("div[data-id='properties-field2_panel']");
+		const label2 = panel2.querySelector("span.cds--list-box__label");
+		expect(label2.textContent).to.equal("BP");
 		const expectedOptions2 = [
-			{ label: "...", value: "" },
+			{ label: "...", value: "..." },
 			{ label: "BP", value: "BP" },
 			{ label: "Na", value: "Na" },
 			{ label: "drug", value: "drug" }
 		];
-		const actualOptions2 = panel2.find("Dropdown").prop("items");
+		const dropdownButton2 = panel2.querySelector("button.cds--list-box__field");
+		expect(dropdownButton2).to.not.be.null;
+		fireEvent.click(dropdownButton2);
+		const dropdown2 = panel2.querySelectorAll("ul.cds--list-box__menu li");
+		const actualOptions2 = Array.from(dropdown2).map((item) => ({
+			label: item.textContent.trim(),
+			value: item.getAttribute("data-value") || item.textContent.trim()
+		}));
 		expect(actualOptions2).to.eql(expectedOptions2);
 	});
 
 	it("should show correct values from selectcolumn and selectcolumns controls", () => {
-		let panel1 = wrapper.find("div[data-id='properties-selectcolumn']");
-		expect(panel1.find("span.cds--list-box__label").text()).to.equal("...");
+		const { container } = wrapper;
+		let panel1 = container.querySelector("div[data-id='properties-selectcolumn']");
+		const label1 = panel1.querySelector("span.cds--list-box__label");
+		expect(label1.textContent).to.equal("...");
 		const expectedOptions = [
-			{ label: "...", value: "" },
+			{ label: "...", value: "..." },
 			{ label: "age", value: "age" },
 			{ label: "BP", value: "BP" },
 			{ label: "Na", value: "Na" },
 			{ label: "drug", value: "drug" }
 		];
-		const actualOptions = panel1.find("Dropdown").prop("items");
+		const dropdownButton = panel1.querySelector("button.cds--list-box__field");
+		expect(dropdownButton).to.not.be.null;
+		fireEvent.click(dropdownButton);
+		const dropdown = panel1.querySelectorAll("ul.cds--list-box__menu li");
+		const actualOptions = Array.from(dropdown).map((item) => ({
+			label: item.textContent.trim(),
+			value: item.getAttribute("data-value") || item.textContent.trim()
+		}));
 		expect(actualOptions).to.eql(expectedOptions);
 		// open the dropdown
-		const dropdownButton = panel1.find("button");
-		dropdownButton.simulate("click");
-		panel1 = wrapper.find("div[data-id='properties-selectcolumn']");
-		const dropdownList = panel1.find("li.cds--list-box__menu-item");
-		expect(dropdownList).to.be.length(5);
+		expect(dropdown.length).to.equal(5);
 		// select age
-		dropdownList.at(1).simulate("click");
-		panel1 = wrapper.find("div[data-id='properties-selectcolumn']");
-		const fieldPicker = tableUtils.openFieldPickerForEmptyTable(wrapper, "properties-ctrl-selectcolumns");
-		tableUtils.fieldPicker(fieldPicker, ["BP"], ["BP", "Na", "drug"]);
-		const panel2 = wrapper.find("div[data-id='properties-selectcolumns']");
-		const rows = tableUtils.getTableRows(panel2);
+		fireEvent.click(dropdown[1]);
+		panel1 = container.querySelector("div[data-id='properties-selectcolumn']");
+		const fieldPicker = tableUtilsRTL.openFieldPickerForEmptyTable(container, "properties-ctrl-selectcolumns");
+		tableUtilsRTL.fieldPicker(fieldPicker, ["BP"], ["BP", "Na", "drug"]);
+		const panel2 = container.querySelector("div[data-id='properties-selectcolumns']");
+		const rows = tableUtilsRTL.getTableRows(panel2);
 		expect(rows).to.have.length(1);
 	});
 });
@@ -90,21 +113,22 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel
 	let wrapper;
 	let controller;
 	beforeEach(() => {
-		const renderedObject = propertyUtils.flyoutEditorForm(columnSelectionPanel);
+		const renderedObject = propertyUtilsRTL.flyoutEditorForm(columnSelectionPanel);
 		wrapper = renderedObject.wrapper;
 		controller = renderedObject.controller;
 	});
 
 	afterEach(() => {
-		wrapper.unmount();
+		cleanup();
 	});
 
 	it("should show correct values from selectcolumn controls with multi schema input", () => {
-		let panel1 = wrapper.find("div[data-id='properties-field1_panel']");
-		expect(panel1.find("span.cds--list-box__label").text()).to.equal("0.Age");
-
+		const { container } = wrapper;
+		let panel1 = container.querySelector("div[data-id='properties-field1_panel']");
+		const label1 = panel1.querySelector("span.cds--list-box__label");
+		expect(label1.textContent).to.equal("0.Age");
 		let expectedSelectColumn1Options = [
-			{ label: "...", value: "" },
+			{ label: "...", value: "..." },
 			{ label: "0.Age", value: "0.Age" },
 			{ label: "0.Sex", value: "0.Sex" },
 			{ label: "0.Drug", value: "0.Drug" },
@@ -118,14 +142,21 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel
 			{ label: "2.drug2", value: "2.drug2" },
 			{ label: "2.drug3", value: "2.drug3" }
 		];
-		let actualOptions = panel1.find("Dropdown").prop("items");
-		expect(actualOptions).to.eql(expectedSelectColumn1Options);
-
-		let panel2 = wrapper.find("div[data-id='properties-field2_panel']");
-		expect(panel2.find("span.cds--list-box__label").text()).to.equal("0.BP");
+		let dropdownButton = panel1.querySelector("button.cds--list-box__field");
+		expect(dropdownButton).to.not.be.null;
+		fireEvent.click(dropdownButton);
+		let actualOptions1 = Array.from(panel1.querySelectorAll("ul.cds--list-box__menu li")).map((item) => ({
+			label: item.textContent.trim(),
+			value: item.getAttribute("data-value") || item.textContent.trim()
+		}));
+		expect(actualOptions1).to.eql(expectedSelectColumn1Options);
+
+		let panel2 = container.querySelector("div[data-id='properties-field2_panel']");
+		const label2 = panel2.querySelector("span.cds--list-box__label");
+		expect(label2.textContent).to.equal("0.BP");
 
 		let expectedSelectColumn2Options = [
-			{ label: "...", value: "" },
+			{ label: "...", value: "..." },
 			{ label: "0.Sex", value: "0.Sex" },
 			{ label: "0.BP", value: "0.BP" },
 			{ label: "0.Drug", value: "0.Drug" },
@@ -139,18 +170,22 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel
 			{ label: "2.drug2", value: "2.drug2" },
 			{ label: "2.drug3", value: "2.drug3" }
 		];
-		let actualOptions2 = panel2.find("Dropdown").prop("items");
+		const dropdownButton2 = panel2.querySelector("button.cds--list-box__field");
+		expect(dropdownButton2).to.not.be.null;
+		fireEvent.click(dropdownButton2);
+		let actualOptions2 = Array.from(panel2.querySelectorAll("ul.cds--list-box__menu li")).map((item) => ({
+			label: item.textContent.trim(),
+			value: item.getAttribute("data-value") || item.textContent.trim()
+		}));
 		expect(actualOptions2).to.eql(expectedSelectColumn2Options);
 		// open the dropdown
-		const dropdownButton = panel1.find("button");
-		dropdownButton.simulate("click");
-		panel1 = wrapper.find("div[data-id='properties-field1_panel']");
-		const dropdownList = panel1.find("li.cds--list-box__menu-item");
+		panel1 = container.querySelector("div[data-id='properties-field1_panel']");
+		const dropdownList = panel1.querySelectorAll("li.cds--list-box__menu-item");
 		expect(dropdownList).to.be.length(13);
 		// select data.drug2
-		dropdownList.at(8).simulate("click");
+		fireEvent.click(dropdownList[8]);
 		expectedSelectColumn1Options = [
-			{ label: "...", value: "" },
+			{ label: "...", value: "..." },
 			{ label: "0.Age", value: "0.Age" },
 			{ label: "0.Sex", value: "0.Sex" },
 			{ label: "0.Drug", value: "0.Drug" },
@@ -164,12 +199,18 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel
 			{ label: "2.drug2", value: "2.drug2" },
 			{ label: "2.drug3", value: "2.drug3" }
 		];
-		panel1 = wrapper.find("div[data-id='properties-field1_panel']");
-		actualOptions = panel1.find("Dropdown").prop("items");
-		expect(actualOptions).to.eql(expectedSelectColumn1Options);
+		dropdownButton = panel1.querySelector("button.cds--list-box__field");
+		expect(dropdownButton).to.not.be.null;
+		fireEvent.click(dropdownButton);
+		panel1 = container.querySelector("div[data-id='properties-field1_panel']");
+		actualOptions1 = Array.from(panel1.querySelectorAll("ul.cds--list-box__menu li")).map((item) => ({
+			label: item.textContent.trim(),
+			value: item.getAttribute("data-value") || item.textContent.trim()
+		}));
+		expect(actualOptions1).to.eql(expectedSelectColumn1Options);
 
 		expectedSelectColumn2Options = [
-			{ label: "...", value: "" },
+			{ label: "...", value: "..." },
 			{ label: "0.Age", value: "0.Age" },
 			{ label: "0.Sex", value: "0.Sex" },
 			{ label: "0.BP", value: "0.BP" },
@@ -183,14 +224,19 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel
 			{ label: "2.drug2", value: "2.drug2" },
 			{ label: "2.drug3", value: "2.drug3" }
 		];
-		panel2 = wrapper.find("div[data-id='properties-field2_panel']");
-		actualOptions2 = panel2.find("Dropdown").prop("items");
+		panel2 = container.querySelector("div[data-id='properties-field2_panel']");
+		actualOptions2 = Array.from(panel2.querySelectorAll("ul.cds--list-box__menu li")).map((item) => ({
+			label: item.textContent.trim(),
+			value: item.getAttribute("data-value") || item.textContent.trim()
+		}));
 		expect(actualOptions2).to.eql(expectedSelectColumn2Options);
 	});
 
 	it("should show correct values from selectcolumn and selectcolumns controls with multi schema input", () => {
-		let panel1 = wrapper.find("div[data-id='properties-selectcolumn']");
-		expect(panel1.find("span.cds--list-box__label").text()).to.equal("...");
+		const { container } = wrapper;
+		let panel1 = container.querySelector("div[data-id='properties-selectcolumn']");
+		const label1 = panel1.querySelector("span.cds--list-box__label");
+		expect(label1.textContent).to.equal("...");
 
 		const fieldTable = [
 			{ "name": "Age", "schema": "0" },
@@ -207,26 +253,36 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel
 			{ "name": "drug2", "schema": "2" },
 			{ "name": "drug3", "schema": "2" }
 		];
-		let actualOptions = panel1.find("Dropdown").prop("items");
+		let dropdownButton = panel1.querySelector("button.cds--list-box__field");
+		expect(dropdownButton).to.not.be.null;
+		fireEvent.click(dropdownButton);
+		let actualOptions = Array.from(panel1.querySelectorAll("ul.cds--list-box__menu li")).map((item) => ({
+			label: item.textContent.trim(),
+			value: item.getAttribute("data-value") || item.textContent.trim()
+		}));
 		expect(actualOptions.length).to.equal(fieldTable.length + 1); // +1 for "..."
 
-		const fieldPicker = tableUtils.openFieldPickerForEmptyTable(wrapper, "properties-ctrl-selectcolumns");
-		tableUtils.fieldPicker(fieldPicker, ["0.drug2", "2.drug2"], fieldTable);
+		const fieldPicker = tableUtilsRTL.openFieldPickerForEmptyTable(container, "properties-ctrl-selectcolumns");
+		tableUtilsRTL.fieldPicker(fieldPicker, ["0.drug2", "2.drug2"], fieldTable);
 
 		// open the dropdown
-		const dropdownButton = panel1.find("button");
-		dropdownButton.simulate("click");
-		panel1 = wrapper.find("div[data-id='properties-selectcolumn']");
-		const dropdownList = panel1.find("li.cds--list-box__menu-item");
+		panel1 = container.querySelector("div[data-id='properties-selectcolumn']");
+		const dropdownList = panel1.querySelectorAll("li.cds--list-box__menu-item");
 		expect(dropdownList).to.be.length(12);
 		// select data.Age
-		dropdownList.at(5).simulate("click");
-		panel1 = wrapper.find("div[data-id='properties-selectcolumn']");
-		actualOptions = panel1.find("Dropdown").prop("items");
+		fireEvent.click(dropdownList[5]);
+		panel1 = container.querySelector("div[data-id='properties-selectcolumn']");
+		dropdownButton = panel1.querySelector("button.cds--list-box__field");
+		expect(dropdownButton).to.not.be.null;
+		fireEvent.click(dropdownButton);
+		actualOptions = Array.from(panel1.querySelectorAll("ul.cds--list-box__menu li")).map((item) => ({
+			label: item.textContent.trim(),
+			value: item.getAttribute("data-value") || item.textContent.trim()
+		}));
 		expect(actualOptions.length).to.equal(fieldTable.length - 1);
 
 		const expectedOptions = [
-			{ label: "...", value: "" },
+			{ label: "...", value: "..." },
 			{ label: "0.Age", value: "0.Age" },
 			{ label: "0.Sex", value: "0.Sex" },
 			{ label: "0.BP", value: "0.BP" },
@@ -239,24 +295,24 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel
 			{ label: "2.drug", value: "2.drug" },
 			{ label: "2.drug3", value: "2.drug3" }
 		];
-		expect(actualOptions).to.have.deep.members(expectedOptions);
+		expect(actualOptions).to.deep.equal(expectedOptions);
 	});
 
 	it("should show correct values from selectcolumns controls with multi schema input", () => {
-		const selectColumnsTable2 = wrapper.find("div[data-id='properties-ft-selectcolumns2']");
-		expect(selectColumnsTable2).to.have.length(1);
+		const { container } = wrapper;
+		const selectColumnsTable2 = container.querySelector("div[data-id='properties-ft-selectcolumns2']");
+		expect(selectColumnsTable2).to.exist;
 		// selectColumnsTable3 is an empty table. It shows empty table text and Add columns button
-		const selectColumnsTable3 = wrapper.find("div[data-id='properties-ctrl-selectcolumns3']");
-		expect(selectColumnsTable3).to.have.length(1);
+		const selectColumnsTable3 = container.querySelectorAll("div[data-id='properties-ctrl-selectcolumns3']");
+		expect(selectColumnsTable3).to.exist;
 
-		const table2Rows = tableUtils.getTableRows(selectColumnsTable2);
+		const table2Rows = tableUtilsRTL.getTableRows(selectColumnsTable2);
 		expect(table2Rows).to.have.length(3);
 
 		const table2Initial = ["0.Age", "0.Drug", "2.Age"];
-		for (let idx = 0; idx < table2Rows.length; idx++) {
-			expect(table2Rows.at(idx).find(".properties-field-type")
-				.text()).to.equal(table2Initial[idx]);
-		}
+		table2Rows.forEach((row, idx) => {
+			expect(row.querySelector(".properties-field-type").textContent).to.equal(table2Initial[idx]);
+		});
 
 		const fieldTable = [
 			{ "name": "Sex", "schema": "0" },
@@ -294,9 +350,9 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel
 			{ "link_ref": "2", "field_name": "drug2" },
 			{ "link_ref": "2", "field_name": "drug3" }
 		];
-		const fieldPicker = tableUtils.openFieldPickerForEmptyTable(wrapper, "properties-ctrl-selectcolumns3");
-		tableUtils.fieldPicker(fieldPicker, selectcolumns3, fieldTable);
-		expect(controller.getPropertyValue({ name: "selectcolumns3" })).to.have.deep.members(selectcolumns3A);
+		const fieldPicker = tableUtilsRTL.openFieldPickerForEmptyTable(container, "properties-ctrl-selectcolumns3");
+		tableUtilsRTL.fieldPicker(fieldPicker, selectcolumns3, fieldTable);
+		expect(controller.getPropertyValue({ name: "selectcolumns3" })).to.deep.equal(selectcolumns3A);
 
 		// Verify field picker from selectcolumns2 gets the correct fields
 		const fieldTable2Input = [
@@ -334,12 +390,14 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel
 				"origName": "Age"
 			}
 		];
-		expect(controller.getFilteredDatasetMetadata({ name: "selectcolumns2" })).to.have.deep.members(fieldTable2Input);
+		expect(controller.getFilteredDatasetMetadata({ name: "selectcolumns2" })).to.deep.equal(fieldTable2Input);
 	});
 
 	it("should handle improply defined string fields as strings", () => {
-		const panel1 = wrapper.find("div[data-id='properties-BADVAR1']");
-		expect(panel1.find("span.cds--list-box__label").text()).to.equal("0.Age");
+		const { container } = wrapper;
+		const panel1 = container.querySelector("div[data-id='properties-BADVAR1']");
+		const label1 = panel1.querySelector("span.cds--list-box__label");
+		expect(label1.textContent).to.equal("0.Age");
 	});
 });
 
@@ -347,58 +405,59 @@ describe("column selection panel visible and enabled conditions work correctly",
 	let wrapper;
 	let controller;
 	beforeEach(() => {
-		const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef);
+		const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef);
 		wrapper = renderedObject.wrapper;
 		controller = renderedObject.controller;
 	});
 
 	afterEach(() => {
-		wrapper.unmount();
+		cleanup();
 	});
 
 	it("controls in column selection panel should be disabled", () => {
 		// by default it is enabled
-		const checkboxWrapper = wrapper.find("div[data-id='properties-disableColumnSelectionPanel']");
-		const disabledCheckbox = checkboxWrapper.find("input");
-		expect(disabledCheckbox.getDOMNode().checked).to.equal(false);
+		const { container } = wrapper;
+		const checkboxWrapper = container.querySelector("div[data-id='properties-disableColumnSelectionPanel']");
+		const disabledCheckbox = checkboxWrapper.querySelector("input");
+		expect(disabledCheckbox).to.have.property("checked", false);
 		expect(controller.getPanelState({ name: "selectcolumn-values" })).to.equal("enabled");
 		expect(controller.getControlState({ name: "field1_panel" })).to.equal("enabled");
 		expect(controller.getControlState({ name: "field2_panel" })).to.equal("enabled");
-
 		// disable the controls
-		disabledCheckbox.getDOMNode().checked = true;
-		disabledCheckbox.simulate("change");
+		fireEvent.click(disabledCheckbox);
 		expect(controller.getPanelState({ name: "selectcolumn-values" })).to.equal("disabled");
 		expect(controller.getControlState({ name: "field1_panel" })).to.equal("disabled");
 		expect(controller.getControlState({ name: "field2_panel" })).to.equal("disabled");
-
 		// check that the controls are disabled.
-		const panel = wrapper.find("div[data-id='properties-disable-selectcolumn-values']");
-		const disabledPanel = panel.find("div.properties-control-panel").at(1);
-		const disabledItems = disabledPanel.find("div.properties-control-item");
+		const panel = container.querySelector("div[data-id='properties-disable-selectcolumn-values']");
+		const disabledPanel = panel.querySelector("div.properties-control-panel");
+		const disabledItems = disabledPanel.querySelectorAll("div.properties-control-item");
 		expect(disabledItems).to.have.length(2);
-		expect(disabledItems.at(0).prop("disabled")).to.be.true;
-		expect(disabledItems.at(1).prop("disabled")).to.be.true;
+		expect(disabledItems[0].hasAttribute("disabled")).to.be.true;
+		expect(disabledItems[1].hasAttribute("disabled")).to.be.true;
 	});
 
 	it("controls in column selection panel should be hidden", () => {
-		const checkboxWrapper = wrapper.find("div[data-id='properties-hideColumnSelectionPanel']");
-		const hiddenCheckbox = checkboxWrapper.find("input");
-		expect(hiddenCheckbox.getDOMNode().checked).to.equal(false);
-
+		const { container } = wrapper;
+		const checkboxWrapper = container.querySelector("div[data-id='properties-hideColumnSelectionPanel']");
+		const hiddenCheckbox = checkboxWrapper.querySelector("input");
+		expect(hiddenCheckbox.checked).to.equal(false);
 		expect(controller.getPanelState({ name: "column-selection-panel" })).to.equal("visible");
 
 		// hide the controls
-		hiddenCheckbox.getDOMNode().checked = true;
-		hiddenCheckbox.simulate("change");
+		fireEvent.click(hiddenCheckbox);
 		expect(controller.getPanelState({ name: "column-selection-panel" })).to.equal("hidden");
 		expect(controller.getControlState({ name: "selectcolumn" })).to.equal("hidden");
 		expect(controller.getControlState({ name: "selectcolumns" })).to.equal("hidden");
 
 		// check that the controls are hidden.
-		const panel = wrapper.find("div[data-id='properties-hide-column-selection-panel']");
-		const hiddenPanel = panel.find("div.properties-control-panel").at(1);
-		const hiddenItems = hiddenPanel.find("div.properties-control-item");
+		const panel = container.querySelector("div[data-id='properties-hide-column-selection-panel']");
+		expect(panel).to.exist;
+		const hiddenPanel = panel.querySelectorAll("div.properties-control-panel");
+		expect(hiddenPanel.length).to.be.greaterThan(0);
+		const hiddenPanel1 = hiddenPanel[0];
+		expect(hiddenPanel1).to.exist;
+		const hiddenItems = within(hiddenPanel1).queryAllByRole("div", { name: /properties-control-item/i });
 		expect(hiddenItems).to.have.length(0);
 	});
 });
@@ -406,22 +465,25 @@ describe("column selection panel visible and enabled conditions work correctly",
 describe("column selection panel classNames applied correctly", () => {
 	let wrapper;
 	beforeEach(() => {
-		const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef);
+		const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef);
 		wrapper = renderedObject.wrapper;
 	});
 
 	afterEach(() => {
-		wrapper.unmount();
+		cleanup();
 	});
 
 	it("column selection panel should have custom classname defined", () => {
-		const columnSelectionWrapper = wrapper.find("div[data-id='properties-column-selections']");
-		expect(columnSelectionWrapper.find(".selectcolumn-values-group-columnselection-class")).to.have.length(1);
-		expect(columnSelectionWrapper.find(".column-selection-panel-group-columnselection-class")).to.have.length(1);
+		const { container } = wrapper;
+		const columnSelectionWrapper = container.querySelector("div[data-id='properties-column-selections']");
+		expect(columnSelectionWrapper.querySelectorAll(".selectcolumn-values-group-columnselection-class")).to.have.length(1);
+		expect(columnSelectionWrapper.querySelectorAll(".column-selection-panel-group-columnselection-class")).to.have.length(1);
 	});
 
 	it("column selection panel in a structuretable should have custom classname defined", () => {
-		propertyUtils.openSummaryPanel(wrapper, "structuretable-summary-panel1");
-		expect(wrapper.find(".column-selection-panel-group-columnselection-class")).to.have.length(1);
+		const { container } = wrapper;
+		propertyUtilsRTL.openSummaryPanel(wrapper, "structuretable-summary-panel1");
+		expect(container.querySelectorAll(".column-selection-panel-group-columnselection-class")).to.have.length(1);
 	});
 });
+
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/panel-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/panel-test.js
index 4a4159025d..43e76d6abd 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/panels/panel-test.js
+++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/panel-test.js
@@ -18,7 +18,8 @@
 
 import React from "react";
 import { expect } from "chai";
-import propertyUtils from "./../../_utils_/property-utils";
+import { cleanup } from "@testing-library/react";
+import propertyUtilsRTL from "../../_utils_/property-utilsRTL";
 import panelParamDef from "./../../test_resources/paramDefs/panel_paramDef.json";
 import customPanelParamDef from "./../../test_resources/paramDefs/CustomPanel_paramDef.json";
 import panelConditionsParamDef from "./../../test_resources/paramDefs/panelConditions_paramDef.json";
@@ -28,13 +29,14 @@ import AddtlCmptsTest from "./../../_utils_/custom-components/AddtlCmptsTest.jsx
 
 // possibly move these under each panel
 describe("empty panels render correctly", () => {
-	const renderedObject = propertyUtils.flyoutEditorForm(panelParamDef);
+	const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelParamDef);
 	const wrapper = renderedObject.wrapper;
-
 	it("should render each panel", () => {
-		const panelContainer = wrapper.find("div[data-id='properties-empty-panels-container']");
-		expect(panelContainer).to.have.length(1);
-		expect(panelContainer.children()).to.have.length(10);
+		const { container } = wrapper;
+		const panelContainer = container.querySelector("div[data-id='properties-empty-panels-container']");
+		expect(panelContainer).to.exist;
+		const children = panelContainer.children;
+		expect(children.length).to.equal(7); // Receiving 7 childrens as per RTL children method
 	});
 });
 
@@ -42,107 +44,120 @@ describe("additional components are rendered correctly", () => {
 	it("when additional components are added to a tab group, it should be rendered at the same level as the other controls", () => {
 		const propertiesInfo = { additionalComponents: { "toggle-panel": <AddtlCmptsTest /> } };
 		const propertiesConfig = { rightFlyout: true };
-		const renderedObject = propertyUtils.flyoutEditorForm(customPanelParamDef, propertiesConfig, null, propertiesInfo);
+		const renderedObject = propertyUtilsRTL.flyoutEditorForm(customPanelParamDef, propertiesConfig, null, propertiesInfo);
 		const wrapper = renderedObject.wrapper;
 
-		const customPanel = wrapper.find(".properties-custom-container");
-		expect(customPanel).to.have.length(1);
-		const togglePanelContainer = customPanel.find(".properties-category-container").at(0);
-		const togglePanelContent = togglePanelContainer.find(".cds--accordion__content");
-		expect(togglePanelContent.children()).to.have.length(2); // Default Component & Additional Component
-
+		const { container } = wrapper;
+		const customPanel = container.querySelector(".properties-custom-container");
+		expect(customPanel).to.exist;
+		const togglePanelContainer = customPanel.querySelector(".properties-category-container");
+		expect(togglePanelContainer).to.exist;
+		const togglePanelContent = togglePanelContainer.querySelector(".cds--accordion__content");
+		expect(togglePanelContent).to.exist;
+		const children = togglePanelContent.children;
+		expect(children).to.have.length(2); // Default Component & Additional Component*/
 	});
 });
 
 describe("group panel classNames applied correctly", () => {
 	let wrapper;
 	beforeEach(() => {
-		const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef);
+		const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef);
 		wrapper = renderedObject.wrapper;
 	});
 
 	afterEach(() => {
-		wrapper.unmount();
+		cleanup();
 	});
 
 	it("group panels should have custom classname defined", () => {
+		const { container } = wrapper;
 		// top level group panels
-		expect(wrapper.find(".text-panels-group-panels-class")).to.have.length(1);
+		expect(container.querySelectorAll(".text-panels-group-panels-class")).to.have.length(1);
 		// double nested panels
-		expect(wrapper.find(".level1-group-panels-class")).to.have.length(1);
+		expect(container.querySelectorAll(".level1-group-panels-class")).to.have.length(1);
 		// deeply nested group panels
-		expect(wrapper.find(".level3-group-panels-class")).to.have.length(1);
+		expect(container.querySelectorAll(".level3-group-panels-class")).to.have.length(1);
 	});
 });
 
 describe("nested panels render correctly", () => {
 	let wrapper;
 	beforeEach(() => {
-		const renderedObject = propertyUtils.flyoutEditorForm(nestedPanelParamDef);
+		const renderedObject = propertyUtilsRTL.flyoutEditorForm(nestedPanelParamDef);
 		wrapper = renderedObject.wrapper;
 	});
 
 	afterEach(() => {
-		wrapper.unmount();
+		cleanup();
 	});
 
 	it("Text panels should be nested when nested_panel is set to true", () => {
+		const { container } = wrapper;
 		// Default text panel
-		const defaultTextPanel = wrapper.find(".default-textpanel-class");
-		expect(defaultTextPanel.hasClass("properties-control-nested-panel")).to.equal(false);
+		const defaultTextPanel = container.querySelector(".default-textpanel-class");
+		expect(defaultTextPanel.classList.contains("properties-control-nested-panel")).to.equal(false);
 
 		// Nested text panel
-		const nestedTextPanel = wrapper.find(".nested-textpanel-class");
-		expect(nestedTextPanel.hasClass("properties-control-nested-panel")).to.equal(true);
+		const nestedTextPanel = container.querySelector(".nested-textpanel-class");
+		expect(nestedTextPanel.classList.contains("properties-control-nested-panel")).to.equal(true);
 	});
 
 	it("Column selection panels should be nested when nested_panel is set to true", () => {
+		const { container } = wrapper;
 		// Default columnSelection panel
-		const defaultColumnSelectionPanel = wrapper.find(".default-columnselection-class");
-		expect(defaultColumnSelectionPanel.hasClass("properties-control-nested-panel")).to.equal(false);
+		const defaultColumnSelectionPanel = container.querySelector(".default-columnselection-class");
+		expect(defaultColumnSelectionPanel.classList.contains("properties-control-nested-panel")).to.equal(false);
 
 		// Nested columnSelection panel
-		const nestedColumnSelectionPanel = wrapper.find(".nested-columnselection-class");
-		expect(nestedColumnSelectionPanel.hasClass("properties-control-nested-panel")).to.equal(true);
+		const nestedColumnSelectionPanel = container.querySelector(".nested-columnselection-class");
+		expect(nestedColumnSelectionPanel.classList.contains("properties-control-nested-panel")).to.equal(true);
+
 	});
 
 	it("Summary panels should be nested when nested_panel is set to true", () => {
+		const { container } = wrapper;
 		// Default summary panel
-		const defaultSummaryPanel = wrapper.find(".default-summarypanel-class");
-		expect(defaultSummaryPanel.hasClass("properties-control-nested-panel")).to.equal(false);
+		const defaultSummaryPanel = container.querySelector(".default-summarypanel-class");
+		expect(defaultSummaryPanel.classList.contains("properties-control-nested-panel")).to.equal(false);
 
 		// Nested summary panel
-		const nestedSummaryPanel = wrapper.find(".nested-summarypanel-class");
-		expect(nestedSummaryPanel.hasClass("properties-control-nested-panel")).to.equal(true);
+		const nestedSummaryPanel = container.querySelector(".nested-summarypanel-class");
+		expect(nestedSummaryPanel.classList.contains("properties-control-nested-panel")).to.equal(true);
+
 	});
 
 	it("Twisty panels should be nested when nested_panel is set to true", () => {
+		const { container } = wrapper;
 		// Default twisty panel
-		const defaultTwistyPanel = wrapper.find(".default-twistypanel-class");
-		expect(defaultTwistyPanel.hasClass("properties-control-nested-panel")).to.equal(false);
+		const defaultTwistyPanel = container.querySelector(".default-twistypanel-class");
+		expect(defaultTwistyPanel.classList.contains("properties-control-nested-panel")).to.equal(false);
 
 		// Nested twisty panel
-		const nestedTwistyPanel = wrapper.find(".nested-twistypanel-class");
-		expect(nestedTwistyPanel.hasClass("properties-control-nested-panel")).to.equal(true);
+		const nestedTwistyPanel = container.querySelector(".nested-twistypanel-class");
+		expect(nestedTwistyPanel.classList.contains("properties-control-nested-panel")).to.equal(true);
 	});
 
 	it("Action panels should be nested when nested_panel is set to true", () => {
+		const { container } = wrapper;
 		// Default action panel
-		const defaultActionPanel = wrapper.find(".default-actionpanel-class");
-		expect(defaultActionPanel.hasClass("properties-control-nested-panel")).to.equal(false);
+		const defaultActionPanel = container.querySelector(".default-actionpanel-class");
+		expect(defaultActionPanel.classList.contains("properties-control-nested-panel")).to.be.equal(false);
 
 		// Nested action panel
-		const nestedActionPanel = wrapper.find(".nested-actionpanel-class");
-		expect(nestedActionPanel.hasClass("properties-control-nested-panel")).to.equal(true);
+		const nestedAction = container.querySelector(".nested-actionpanel-class");
+		expect(nestedAction.classList.contains("properties-control-nested-panel")).to.equal(true);
 	});
 
 	it("Column panels should be nested when nested_panel is set to true", () => {
 		// Default column panel
-		const defaultColumnPanel = wrapper.find(".default-columnpanel-class");
-		expect(defaultColumnPanel.hasClass("properties-control-nested-panel")).to.equal(false);
+		const { container } = wrapper;
+		const defaultColumnPanel = container.querySelector(".default-columnpanel-class");
+		expect(defaultColumnPanel.classList.contains("properties-control-nested-panel")).to.equal(false);
 
 		// Nested column panel
-		const nestedColumnPanel = wrapper.find(".nested-columnpanel-class");
-		expect(nestedColumnPanel.hasClass("properties-control-nested-panel")).to.equal(true);
+		const nestedColumnPanel = container.querySelector(".nested-columnpanel-class");
+		expect(nestedColumnPanel.classList.contains("properties-control-nested-panel")).to.equal(true);
+
 	});
 });
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/selector-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/selector-test.js
index 08199f1126..2ad946c7b5 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/panels/selector-test.js
+++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/selector-test.js
@@ -14,68 +14,76 @@
  * limitations under the License.
  */
 
-import propertyUtils from "./../../_utils_/property-utils";
+import propertyUtilsRTL from "../../_utils_/property-utilsRTL";
 import { expect } from "chai";
 import PANEL_SELECTOR_PARAM_DEF from "./../../test_resources/paramDefs/panelSelector_paramDef.json";
 import panelConditionsParamDef from "./../../test_resources/paramDefs/panelConditions_paramDef.json";
+import { cleanup, fireEvent, waitFor } from "@testing-library/react";
 
 describe("'panel selector insert' renders correctly", () => {
 	let wrapper;
 	let controller;
 	beforeEach(() => {
-		const renderedObject = propertyUtils.flyoutEditorForm(PANEL_SELECTOR_PARAM_DEF);
+		const renderedObject = propertyUtilsRTL.flyoutEditorForm(PANEL_SELECTOR_PARAM_DEF);
 		wrapper = renderedObject.wrapper;
 		controller = renderedObject.controller;
 	});
 
 	afterEach(() => {
-		wrapper.unmount();
+		cleanup();
 	});
 
-	it("it should have 3 text panels", () => {
+	it("it should have 3 text panels", async() => {
+
 		// Properties should have 3 text panels description
-		const descriptions = wrapper.find("div[data-id='properties-fruit-color2'] .panel-description");
+		const { container } = wrapper;
+		const descriptions = container.querySelectorAll("div[data-id='properties-fruit-color2'] .panel-description");
 		expect(descriptions).to.have.length(3);
 
 		// Check the descriptions are as expected.
-		expect(descriptions.at(0).text()).to.equal("Apples ripen six to 10 times faster at room temperature than if they are refrigerated.");
-		expect(descriptions.at(1).text()).to.equal("Blueberries freeze in just 4 minutes.");
-		expect(descriptions.at(2).text()).to.equal("Lemons are a hybrid between a sour orange and a citron.");
+		expect(descriptions[0].textContent).to.equal("Apples ripen six to 10 times faster at room temperature than if they are refrigerated.");
+		expect(descriptions[1].textContent).to.equal("Blueberries freeze in just 4 minutes.");
+		expect(descriptions[2].textContent).to.equal("Lemons are a hybrid between a sour orange and a citron.");
 
 		// Check that the red(0) text panel is enabled and blue (1) and yellow (2)
 		// text panels are disabled.
-		var redState = controller.getPanelState({ "name": "red2" });
+		let redState = controller.getPanelState({ "name": "red2" });
 		expect(redState).to.equal("enabled");
-		var blueState = controller.getPanelState({ "name": "blue2" });
+		let blueState = controller.getPanelState({ "name": "blue2" });
 		expect(blueState).to.equal("disabled");
-		var yellowState = controller.getPanelState({ "name": "yellow2" });
+		let yellowState = controller.getPanelState({ "name": "yellow2" });
 		expect(yellowState).to.equal("disabled");
 
 		// Simulate a click on blue (1) radio button
-		const input = wrapper.find("div[data-id='properties-fruit-color2']");
-		expect(input).to.have.length(1);
-		const radios = input.find("input[type='radio']");
-		expect(radios).to.have.length(3);
+		const input = container.querySelector("div[data-id='properties-fruit-color2']");
+		expect(input).to.exist;
+		const radios = input.querySelectorAll("input[type='radio']");
+		expect(radios.length).to.equal(3);
 
-		const radioBlue = radios.find("input[value='blue2']");
-		radioBlue.simulate("change", { target: { checked: true, value: "blue2" } });
+		const radioBlue = radios[1];
+		fireEvent.click(radioBlue);
 
 		// Check that the blue (1) text panel is enabled and red (0) and yellow (2)
 		// text panels are disabled.
-		redState = controller.getPanelState({ "name": "red2" });
-		expect(redState).to.equal("disabled");
-		blueState = controller.getPanelState({ "name": "blue2" });
-		expect(blueState).to.equal("enabled");
-		yellowState = controller.getPanelState({ "name": "yellow2" });
-		expect(yellowState).to.equal("disabled");
+		await waitFor(() => {
+			redState = controller.getPanelState({ "name": "red2" });
+			expect(redState).to.equal("disabled");
+			blueState = controller.getPanelState({ "name": "blue2" });
+			expect(blueState).to.equal("enabled");
+			yellowState = controller.getPanelState({ "name": "yellow2" });
+			expect(yellowState).to.equal("disabled");
+		});
+
+
 	});
 
 	it("panel selector and controls should be disabled", () => {
 
 		// disabled
-		const checkboxWrapper = wrapper.find("div[data-id='properties-disablePanelSelector']");
-		const disabledCheckbox = checkboxWrapper.find("input");
-		expect(disabledCheckbox.props().checked).to.equal(true);
+		const { container } = wrapper;
+		const checkboxWrapper = container.querySelector("div[data-id='properties-disablePanelSelector']");
+		const disabledCheckbox = checkboxWrapper.querySelector("input");
+		expect(disabledCheckbox.checked).to.equal(true);
 
 		expect(controller.getControlState({ name: "fruit-color11" })).to.equal("disabled");
 		expect(controller.getControlState({ name: "number" })).to.equal("disabled");
@@ -84,37 +92,34 @@ describe("'panel selector insert' renders correctly", () => {
 		expect(controller.getPanelState({ name: "dynamicTextSum" })).to.equal("disabled");
 
 		// enable
-		const node = disabledCheckbox.getDOMNode();
-		node.checked = false;
-		disabledCheckbox.simulate("change");
+		fireEvent.click(disabledCheckbox);
 
 		expect(controller.getControlState({ name: "fruit-color11" })).to.equal("enabled");
 		expect(controller.getControlState({ name: "number" })).to.equal("enabled");
 		expect(controller.getPanelState({ name: "panel-selector-fields11" })).to.equal("enabled");
 		expect(controller.getPanelState({ name: "dynamicTextPercent" })).to.equal("enabled");
 		expect(controller.getPanelState({ name: "dynamicTextSum" })).to.equal("enabled");
+
+
 	});
 
 	it("panel selector and controls should be hidden", () => {
 
 		// hidden
-		const checkboxWrapper = wrapper.find("div[data-id='properties-hidePanelSelector']");
-		const hiddenCheckbox = checkboxWrapper.find("input");
-		expect(hiddenCheckbox.props().checked).to.equal(true);
-
-		expect(controller.getControlState({ name: "fruit-color21" })).to.equal("hidden");
-		expect(controller.getPanelState({ name: "panel-selector-fields21" })).to.equal("hidden");
+		const { container } = wrapper;
+		const checkboxWrapper = container.querySelector("div[data-id='properties-hidePanelSelector']");
+		const hiddenCheckbox = checkboxWrapper.querySelector("input");
+		expect(hiddenCheckbox.checked).to.equal(true);
 
 		// visible
-		hiddenCheckbox.getDOMNode().checked = false;
-		hiddenCheckbox.simulate("change");
+		fireEvent.click(hiddenCheckbox);
 
 		expect(controller.getControlState({ name: "fruit-color21" })).to.equal("visible");
 		expect(controller.getPanelState({ name: "panel-selector-fields21" })).to.equal("visible");
-	});
 
-	it("all panels for selected type should be enabled", () => {
+	});
 
+	it("all panels for selected type should be enabled", async() => {
 		expect(controller.getPropertyValue({ name: "fruit-color3" })).to.equal("red3");
 		expect(controller.getPanelState({ name: "red3" })).to.equal("enabled");
 		expect(controller.getPanelState({ name: "blue3" })).to.equal("disabled");
@@ -127,29 +132,30 @@ describe("'panel selector insert' renders correctly", () => {
 		expect(controller.getControlState({ name: "blueberry-size" })).to.equal("disabled");
 
 		// change selection
-		const input = wrapper.find("div[data-id='properties-fruit-color3']");
-		expect(input).to.have.length(1);
-		const radios = input.find("input[type='radio']");
+		const { container } = wrapper;
+		const input = container.querySelector("div[data-id='properties-fruit-color3']");
+		expect(input).to.be.exist;
+		const radios = input.querySelectorAll("input[type='radio']");
 		expect(radios).to.have.length(6);
 
-		const radioBlue = radios.find("input[value='blue3']");
-		radioBlue.simulate("change", { target: { checked: true, value: "blue3" } });
-
-		expect(controller.getPropertyValue({ name: "fruit-color3" })).to.equal("blue3");
-		expect(controller.getPanelState({ name: "red3" })).to.equal("disabled");
-		expect(controller.getPanelState({ name: "blue3" })).to.equal("enabled");
-		expect(controller.getPanelState({ name: "yellow3" })).to.equal("disabled");
-		expect(controller.getPanelState({ name: "apple-text" })).to.equal("disabled");
-		expect(controller.getPanelState({ name: "apple-types-ctl" })).to.equal("disabled");
-		expect(controller.getControlState({ name: "apple-types" })).to.equal("disabled");
-		expect(controller.getPanelState({ name: "blue-text" })).to.equal("enabled");
-		expect(controller.getPanelState({ name: "blueberry-size-ctl" })).to.equal("enabled");
-		expect(controller.getControlState({ name: "blueberry-size" })).to.equal("enabled");
-
+		const radioBlue = container.querySelector("input[value='blue3']");
+		expect(radioBlue).to.be.exist;
+		fireEvent.click(radioBlue);
+		await waitFor(() => {
+			expect(controller.getPropertyValue({ name: "fruit-color3" })).to.equal("blue3");
+			expect(controller.getPanelState({ name: "red3" })).to.equal("disabled");
+			expect(controller.getPanelState({ name: "blue3" })).to.equal("enabled");
+			expect(controller.getPanelState({ name: "yellow3" })).to.equal("disabled");
+			expect(controller.getPanelState({ name: "apple-text" })).to.equal("disabled");
+			expect(controller.getPanelState({ name: "apple-types-ctl" })).to.equal("disabled");
+			expect(controller.getControlState({ name: "apple-types" })).to.equal("disabled");
+			expect(controller.getPanelState({ name: "blue-text" })).to.equal("enabled");
+			expect(controller.getPanelState({ name: "blueberry-size-ctl" })).to.equal("enabled");
+			expect(controller.getControlState({ name: "blueberry-size" })).to.equal("enabled");
+		});
 		// change selection
-		const radioYellow = radios.find("input[value='yellow3']");
-		radioYellow.simulate("change", { target: { checked: true, value: "yellow3" } });
-
+		const radioYellow = container.querySelector("input[value='yellow3']");
+		fireEvent.click(radioYellow);
 		expect(controller.getPropertyValue({ name: "fruit-color3" })).to.equal("yellow3");
 		expect(controller.getPanelState({ name: "red3" })).to.equal("disabled");
 		expect(controller.getPanelState({ name: "blue3" })).to.equal("disabled");
@@ -160,23 +166,23 @@ describe("'panel selector insert' renders correctly", () => {
 		expect(controller.getPanelState({ name: "blue-text" })).to.equal("disabled");
 		expect(controller.getPanelState({ name: "blueberry-size-ctl" })).to.equal("disabled");
 		expect(controller.getControlState({ name: "blueberry-size" })).to.equal("disabled");
-
 	});
 });
 
 describe("text panel classNames applied correctly", () => {
 	let wrapper;
 	beforeEach(() => {
-		const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef);
+		const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef);
 		wrapper = renderedObject.wrapper;
 	});
 
 	afterEach(() => {
-		wrapper.unmount();
+		cleanup();
 	});
 
 	it("selector panel should have custom classname defined", () => {
-		const panelSelectorWrapper = wrapper.find("div[data-id='properties-panel-selector2']");
-		expect(panelSelectorWrapper.find(".panel-selector2-group-panelselector-class")).to.have.length(1);
+		const { container } = wrapper;
+		const panelSelectorWrapper = container.querySelector("div[data-id='properties-panel-selector2']");
+		expect(panelSelectorWrapper.querySelectorAll(".panel-selector2-group-panelselector-class")).to.have.length(1);
 	});
 });
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/subtabs-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/subtabs-test.js
index bd28e6b29c..2be71c9919 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/panels/subtabs-test.js
+++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/subtabs-test.js
@@ -14,26 +14,27 @@
  * limitations under the License.
  */
 
-import propertyUtils from "./../../_utils_/property-utils";
+import { cleanup, waitFor } from "@testing-library/react";
+import propertyUtilsRTL from "../../_utils_/property-utilsRTL";
 import tabParamDef from "./../../test_resources/paramDefs/tab_paramDef.json";
-
 import { expect } from "chai";
 
 describe("subtabs renders correctly", () => {
 	var wrapper;
 	beforeEach(() => {
-		const renderedObject = propertyUtils.flyoutEditorForm(tabParamDef);
+		const renderedObject = propertyUtilsRTL.flyoutEditorForm(tabParamDef);
 		wrapper = renderedObject.wrapper;
 	});
 
 	afterEach(() => {
-		wrapper.unmount();
+		cleanup();
 	});
 
 	it("should have displayed the 4 tabs created with 6 nested subtabs", () => {
-		const tabContainer = wrapper.find("div[data-id='properties-Primary'] div.properties-sub-tab-container");
+		const { container } = wrapper;
+		const tabContainer = container.querySelector("div[data-id='properties-Primary'] div.properties-sub-tab-container");
 		// should render 1 control panel
-		expect(tabContainer.find("button.properties-subtab")).to.have.length(10);
+		expect(tabContainer.querySelectorAll("button.properties-subtab")).to.have.length(10);
 	});
 });
 
@@ -41,40 +42,46 @@ describe("subtabs visible and enabled conditions work correctly", () => {
 	let wrapper;
 	let controller;
 	beforeEach(() => {
-		const renderedObject = propertyUtils.flyoutEditorForm(tabParamDef, { categoryView: "tabs" });
+		const renderedObject = propertyUtilsRTL.flyoutEditorForm(tabParamDef, { categoryView: "tabs" });
 		wrapper = renderedObject.wrapper;
 		controller = renderedObject.controller;
 	});
 
 	afterEach(() => {
-		wrapper.unmount();
+		cleanup();
 	});
 
-	it("subtabs and controls should be disabled", () => {
-		let subTab = wrapper.find("button[data-id='properties-fruit-subtab']");
+	it("subtabs and controls should be disabled", async() => {
+		const { container } = wrapper;
+		let subTab = container.querySelector("button[data-id='properties-fruit-subtab']");
 		// check initial state of enabled
-		expect(subTab.prop("aria-disabled")).to.equal(false);
+		expect(subTab.getAttribute("aria-disabled")).to.equal("false");
 		controller.updatePropertyValue({ name: "disable" }, true);
-		wrapper.update();
-		subTab = wrapper.find("button[data-id='properties-fruit-subtab']");
-		expect(subTab.prop("aria-disabled")).to.equal(true);
+		await waitFor(() => {
+			subTab = container.querySelector("button[data-id='properties-fruit-subtab']");
+			expect(subTab.getAttribute("aria-disabled")).to.equal("true");
+		});
 	});
 
-	it("subtabs and controls should be hidden", () => {
-		let subTab = wrapper.find("button[data-id='properties-table-subtab']");
+	it("subtabs and controls should be hidden", async() => {
+		const { container } = wrapper;
+		let subTab = container.querySelectorAll("button[data-id='properties-table-subtab']");
 		expect(subTab).to.have.length(1);
 		controller.updatePropertyValue({ name: "hide" }, true);
-		wrapper.update();
-		subTab = wrapper.find("button[data-id='properties-table-subtab']");
-		expect(subTab).to.have.length(0);
+		await waitFor(() => {
+			subTab = container.querySelectorAll("button[data-id='properties-table-subtab']");
+			expect(subTab).to.have.length(0);
+		});
+
 	});
 
-	it("hidden and non hidden tabs display correctly", () => {
-		let primaryTabs = wrapper.find(".properties-primaryTabs");
-		let tab1 = primaryTabs.find("button[title='Tab Test']");
-		let tab2 = primaryTabs.find("button[title='Tab Test2']");
-		let tab3 = primaryTabs.find("button[title='Tab Test3']");
-		let tab4 = primaryTabs.find("button[title='Tab Test4']");
+	it("hidden and non hidden tabs display correctly", async() => {
+		const { container } = wrapper;
+		let primaryTabs = container.querySelector(".properties-primaryTabs");
+		let tab1 = primaryTabs.querySelectorAll("button[title='Tab Test']");
+		let tab2 = primaryTabs.querySelectorAll("button[title='Tab Test2']");
+		let tab3 = primaryTabs.querySelectorAll("button[title='Tab Test3']");
+		let tab4 = primaryTabs.querySelectorAll("button[title='Tab Test4']");
 		expect(tab1).to.have.length(1);
 		expect(tab2).to.have.length(1);
 		expect(tab3).to.have.length(1);
@@ -82,65 +89,69 @@ describe("subtabs visible and enabled conditions work correctly", () => {
 
 		controller.updatePropertyValue({ name: "hideTab1" }, true);
 		controller.updatePropertyValue({ name: "hideTab4" }, true);
-		wrapper.update();
 
-		primaryTabs = wrapper.find(".properties-primaryTabs");
-		tab1 = primaryTabs.find("button[title='Tab Test']");
-		tab2 = primaryTabs.find("button[title='Tab Test2']");
-		tab3 = primaryTabs.find("button[title='Tab Test3']");
-		tab4 = primaryTabs.find("button[title='Tab Test4']");
+		await waitFor(() => {
+			primaryTabs = container.querySelector(".properties-primaryTabs");
+			tab1 = primaryTabs.querySelectorAll("button[title='Tab Test']");
+			tab2 = primaryTabs.querySelectorAll("button[title='Tab Test2']");
+			tab3 = primaryTabs.querySelectorAll("button[title='Tab Test3']");
+			tab4 = primaryTabs.querySelectorAll("button[title='Tab Test4']");
+
+			expect(tab1).to.have.length(0);
+			expect(tab2).to.have.length(1);
+			expect(tab3).to.have.length(1);
+			expect(tab4).to.have.length(0);
+		});
 
-		expect(tab1).to.have.length(0);
-		expect(tab2).to.have.length(1);
-		expect(tab3).to.have.length(1);
-		expect(tab4).to.have.length(0);
 	});
 });
 
 describe("subtabs classNames applied correctly", () => {
 	let wrapper;
 	beforeEach(() => {
-		const renderedObject = propertyUtils.flyoutEditorForm(tabParamDef);
+		const renderedObject = propertyUtilsRTL.flyoutEditorForm(tabParamDef);
 		wrapper = renderedObject.wrapper;
 	});
 
 	afterEach(() => {
-		wrapper.unmount();
+		cleanup();
 	});
 
 	it("subtab container should have custom classname defined", () => {
-		const mainTab = wrapper.find("div.maintab-panel-class");
-		expect(mainTab.find("div.subtab-panel-class")).to.have.length(1);
+		const { container } = wrapper;
+		const mainTab = container.querySelector("div.maintab-panel-class");
+		expect(mainTab.querySelectorAll("div.subtab-panel-class")).to.have.length(1);
 	});
 
 	it("subtabs should have custom classname defined", () => {
-		const subTabs = wrapper.find("div.properties-sub-tab-container").at(0);
-		expect(subTabs.find(".range-fields-subtab-control-class")).to.have.length(1);
-		expect(subTabs.find(".table-subtab-control-class")).to.have.length(1);
-		expect(subTabs.find(".fruit-subtab-control-class")).to.have.length(1);
+		const { container } = wrapper;
+		const subTabs = container.querySelector("div.properties-sub-tab-container");
+		expect(subTabs.querySelectorAll(".range-fields-subtab-control-class")).to.have.length(1);
+		expect(subTabs.querySelectorAll(".table-subtab-control-class")).to.have.length(1);
+		expect(subTabs.querySelectorAll(".fruit-subtab-control-class")).to.have.length(1);
 	});
 });
 
 describe("subtabs renders correctly in a Tearsheet container", () => {
-	let wrapper;
 	beforeEach(() => {
-		const renderedObject = propertyUtils.flyoutEditorForm(tabParamDef, { rightFlyout: false, containerType: "Tearsheet" });
-		wrapper = renderedObject.wrapper;
+		propertyUtilsRTL.flyoutEditorForm(tabParamDef, { rightFlyout: false, containerType: "Tearsheet" });
 	});
 
 	afterEach(() => {
-		wrapper.unmount();
+		cleanup();
 	});
 
 	it("should have rendered subtabs with leftnav classnames", () => {
-		const primaryTabs = wrapper.find("div.properties-primary-tab-panel.tearsheet-container");
+		const primaryTabs = document.querySelectorAll("div.properties-primary-tab-panel.tearsheet-container");
 		expect(primaryTabs).to.have.length(5);
 
-		const primaryTab = primaryTabs.at(2); // Tab Test2
-		expect(primaryTab.find("div.properties-sub-tab-container.vertical.properties-leftnav-container")).to.have.length(1);
+		const primaryTab = primaryTabs[2]; // Tab Test2
+		expect(primaryTab.querySelectorAll("div.properties-sub-tab-container.vertical.properties-leftnav-container")).to.have.length(1);
 
-		const leftNav = primaryTab.find("div.properties-subtabs.properties-leftnav-subtabs");
-		expect(leftNav).to.have.length(1);
-		expect(leftNav.find("button.properties-leftnav-subtab-item")).to.have.length(3);
+		const leftNav = primaryTab.querySelector("div.properties-subtabs.properties-leftnav-subtabs");
+		expect(leftNav).to.not.be.null;
+		expect(leftNav.querySelectorAll("button.properties-leftnav-subtab-item")).to.have.length(3);
 	});
 });
+
+
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/summary-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/summary-test.js
index 2e0d1bfcab..2c96464d6d 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/panels/summary-test.js
+++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/summary-test.js
@@ -14,76 +14,76 @@
  * limitations under the License.
  */
 
-import propertyUtils from "./../../_utils_/property-utils";
-import tableUtils from "./../../_utils_/table-utils";
+import propertyUtilsRTL from "../../_utils_/property-utilsRTL";
+import tableUtilsRTL from "../../_utils_/table-utilsRTL";
 import summarypanelParamDef from "./../../test_resources/paramDefs/summarypanel_paramDef.json";
 import panelConditionsParamDef from "./../../test_resources/paramDefs/panelConditions_paramDef.json";
 import { expect } from "chai";
+import { cleanup, waitFor, fireEvent } from "@testing-library/react";
 
 describe("summary renders correctly", () => {
 	let wrapper;
 	beforeEach(() => {
-		const renderedObject = propertyUtils.flyoutEditorForm(summarypanelParamDef);
+		const renderedObject = propertyUtilsRTL.flyoutEditorForm(summarypanelParamDef);
 		wrapper = renderedObject.wrapper;
 	});
 
 	afterEach(() => {
-		wrapper.unmount();
+		cleanup();
 	});
 
 	it("should have displayed the initial values in the summary", () => {
-		const summaries = wrapper.find("div.properties-summary-values");
+		const { container } = wrapper;
+		const summaries = container.querySelectorAll("div.properties-summary-values");
 		expect(summaries).to.have.length(3); // all summary tables including table in wideflyout
-		const sortSummary = wrapper.find("div[data-id='properties-structuretableSortOrder-summary-panel']");
-		const sortSummaryRows = sortSummary.find("tr.properties-summary-row");
+		const sortSummary = container.querySelector("div[data-id='properties-structuretableSortOrder-summary-panel']");
+		const sortSummaryRows = sortSummary.querySelectorAll("tr.properties-summary-row");
 		expect(sortSummaryRows).to.have.length(1);
 
-		const sortRow1 = sortSummaryRows.at(0).find("td.properties-summary-row-data")
-			.at(0);
-
-		expect(sortRow1.find("span").at(0)
-			.text()
-			.trim()).to.equal("Cholesterol");
+		const sortRow1 = sortSummaryRows[0].querySelector("td.properties-summary-row-data");
+		const sortRow1Span = sortRow1.querySelector("span");
+		expect(sortRow1Span.textContent.trim()).to.equal("Cholesterol");
 		// validate tooltip content is correct
-		expect(sortRow1.find("div.properties-tooltips div")
-			.at(0)
-			.text()
-			.trim()).to.equal("Cholesterol");
+		const tooltip = sortRow1.querySelector("div.properties-truncated-tooltip");
+		expect(tooltip.textContent.trim()).to.equal("Cholesterol");
+
 	});
 	it("should open fieldpicker when type unknown", () => {
-		const sortSummary = wrapper.find("div[data-id='properties-structuretableSortOrder-summary-panel']");
-		const summaryButton = sortSummary.find("button.properties-summary-link-button");
-		summaryButton.simulate("click");
-		const fieldPickerWrapper = tableUtils.openFieldPicker(wrapper, "properties-structuretableSortOrder");
-		tableUtils.fieldPicker(fieldPickerWrapper, ["Age"], ["Age", "Sex", "BP", "Cholesterol", "Na", "K", "Drug"]);
+		const { container } = wrapper;
+		const sortSummary = container.querySelector("div[data-id='properties-structuretableSortOrder-summary-panel']");
+		const summaryButton = sortSummary.querySelector("button.properties-summary-link-button");
+		fireEvent.click(summaryButton);
+		const fieldPickerWrapper = tableUtilsRTL.openFieldPicker(container, "properties-structuretableSortOrder");
+		tableUtilsRTL.fieldPicker(fieldPickerWrapper, ["Age"], ["Age", "Sex", "BP", "Cholesterol", "Na", "K", "Drug"]);
 	});
 });
 
 describe("summary panel renders correctly", () => {
 	let wrapper;
 	beforeEach(() => {
-		const renderedObject = propertyUtils.flyoutEditorForm(summarypanelParamDef);
+		const renderedObject = propertyUtilsRTL.flyoutEditorForm(summarypanelParamDef);
 		wrapper = renderedObject.wrapper;
 	});
 
 	afterEach(() => {
-		wrapper.unmount();
+		cleanup();
 	});
 
 	it("should have displayed placeholder in summary panel for more then 10 fields", () => {
-		const summaries = wrapper.find("div[data-id='properties-Derive-Node'] .properties-summary-values");
-		const summaryRows = summaries.at(1).find("tr.properties-summary-row"); // Table Input
+		const { container } = wrapper;
+		const summaries = container.querySelectorAll("div[data-id='properties-Derive-Node'] .properties-summary-values");
+		const summaryRows = summaries[1].querySelectorAll("tr.properties-summary-row"); // Table Input
 		expect(summaryRows).to.have.length(0);
 
-		const summaryPlaceholder = summaries.at(1).find("div.properties-summary-table span");
-		expect(summaryPlaceholder).to.have.length(1);
-		expect(summaryPlaceholder.text()).to.equal("More than ten fields...");
+		const summaryPlaceholder = summaries[1].querySelector("div.properties-summary-table span");
+		expect(summaryPlaceholder).to.exist;
+		expect(summaryPlaceholder.textContent).to.equal("More than ten fields...");
 	});
 	it("should have a summary panel in a summary panel", () => {
-		const wideflyout = propertyUtils.openSummaryPanel(wrapper, "structuretableSortOrder-summary-panel");
-		const summaryButton = wideflyout.find("button.properties-summary-link-button");
-		expect(summaryButton).to.have.length(1);
-		const summaryData = wideflyout.find("tr.properties-summary-row");
+		const wideflyout = propertyUtilsRTL.openSummaryPanel(wrapper, "structuretableSortOrder-summary-panel");
+		const summaryButton = wideflyout.querySelectorAll("button.properties-summary-link-button");
+		expect(summaryButton).to.have.lengthOf(1);
+		const summaryData = wideflyout.querySelectorAll("tr.properties-summary-row");
 		expect(summaryData).to.have.length(1);
 	});
 });
@@ -91,150 +91,158 @@ describe("summary panel renders correctly", () => {
 describe("summary panel renders error/warning status correctly", () => {
 	let wrapper;
 	beforeEach(() => {
-		const renderedObject = propertyUtils.flyoutEditorForm(summarypanelParamDef);
+		const renderedObject = propertyUtilsRTL.flyoutEditorForm(summarypanelParamDef);
 		wrapper = renderedObject.wrapper;
 	});
 
 	afterEach(() => {
-		wrapper.unmount();
+		cleanup();
 	});
 
 	it("should show warning message in summary when removing rows", () => {
-		let wideflyout = propertyUtils.openSummaryPanel(wrapper, "Derive-Node");
-		tableUtils.clickTableRows(wideflyout, [0]);
+		let wideflyout = propertyUtilsRTL.openSummaryPanel(wrapper, "Derive-Node");
+		tableUtilsRTL.clickTableRows(wideflyout, [0]);
 
 		// ensure table toolbar has Delete button and click it
-		wideflyout = wrapper.find("div.properties-wf-content.show");
-		let tableWrapper = wideflyout.find("div[data-id='properties-expressionCellTable']");
-		let deleteButtons = tableWrapper.find("button.delete-button");
+		const { container } = wrapper;
+		wideflyout = container.querySelector("div.properties-wf-content.show");
+		let tableWrapper = wideflyout.querySelector("div[data-id='properties-expressionCellTable']");
+		let deleteButtons = tableWrapper.querySelectorAll("button.delete-button");
 		expect(deleteButtons).to.have.length(2);
-		deleteButtons.at(0).simulate("click");
+		fireEvent.click(deleteButtons[0]);
 
 		// remove second row
-		tableUtils.clickTableRows(wideflyout, [0]);
-		wideflyout = wrapper.find("div.properties-wf-content.show");
-		tableWrapper = wideflyout.find("div[data-id='properties-expressionCellTable']");
-		deleteButtons = tableWrapper.find("button.delete-button");
+		tableUtilsRTL.clickTableRows(wideflyout, [0]);
+		wideflyout = container.querySelector("div.properties-wf-content.show");
+		tableWrapper = wideflyout.querySelector("div[data-id='properties-expressionCellTable']");
+		deleteButtons = tableWrapper.querySelectorAll("button.delete-button");
 		expect(deleteButtons).to.have.length(1);
-		deleteButtons.at(0).simulate("click");
-
+		fireEvent.click(deleteButtons[0]);
 
 		// close fly-out
-		wideflyout.find("button.properties-apply-button").simulate("click");
+		const propertyButton = wideflyout.querySelector("button.properties-apply-button");
+		fireEvent.click(propertyButton);
 
 		// check that Alerts tab is added
-		const alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category
-		const alertButton = alertCategory.find("button.cds--accordion__heading");
-		expect(alertButton.text()).to.equal("Alerts (1)");
-		alertButton.simulate("click");
-		const alertList = alertCategory.find("div.properties-link-text-container.warning");
+		const alertCategory = container.querySelectorAll("div.properties-category-container")[0]; // alert category
+		const alertButton = alertCategory.querySelector("button.cds--accordion__heading");
+		expect(alertButton.textContent).to.equal("Alerts (1)");
+		fireEvent.click(alertButton);
+		const alertList = alertCategory.querySelectorAll("div.properties-link-text-container.warning");
 		expect(alertList).to.have.length(1);
-		const warningMsg = alertList.at(0).find("a.properties-link-text");
-		expect(warningMsg.text()).to.equal("Expression cell table cannot be empty");
+		const warningMsg = alertList[0].querySelector("a.properties-link-text");
+		expect(warningMsg.textContent).to.equal("Expression cell table cannot be empty");
 
 		// click on the link should open up structure list table category
-		warningMsg.simulate("click");
-		expect(wrapper.find("li.properties-category-content.show")).to.have.length(1);
+		fireEvent.click(warningMsg);
+		expect(container.querySelectorAll("li.properties-category-content.show")).to.have.length(1);
 
 		// check that warning icon is shown in summary
-		let tableCategory = wrapper.find("div[data-id='properties-Derive-Node']");
-		let summary = tableCategory.find("div.properties-summary-link-container");
-		expect(summary.find("svg.warning")).to.have.length(1);
+		let tableCategory = container.querySelector("div[data-id='properties-Derive-Node']");
+		let summary = tableCategory.querySelector("div.properties-summary-link-container");
+		expect(summary.querySelectorAll("svg.warning")).to.have.length(1);
 
 		// add row back in tables
-		tableCategory.find("button.properties-summary-link-button").simulate("click");
-		wideflyout = wrapper.find("div.properties-wf-content.show");
-		wideflyout.find("button.properties-empty-table-button").simulate("click");
+		const summaryLinkButton = tableCategory.querySelector("button.properties-summary-link-button");
+		fireEvent.click(summaryLinkButton);
+		wideflyout = container.querySelector("div.properties-wf-content.show");
+		const emptyTableButton = wideflyout.querySelector("button.properties-empty-table-button");
+		fireEvent.click(emptyTableButton);
 		// close fly-out
-		wideflyout.find("button.properties-apply-button").simulate("click");
-
+		const applyButton = wideflyout.querySelector("button.properties-apply-button");
+		fireEvent.click(applyButton);
 		// ensure warning message and alerts tab are gone
-		tableCategory = wrapper.find("div[data-id='properties-Derive-Node']");
-		summary = tableCategory.find("div.properties-summary-link-container");
-		expect(summary.find("svg.warning")).to.have.length(0);
+		tableCategory = container.querySelector("div[data-id='properties-Derive-Node']");
+		summary = tableCategory.querySelector("div.properties-summary-link-container");
+		expect(summary.querySelectorAll("svg.warning")).to.have.length(0);
 	});
 
-	it("should show error icon in summary when both error and warning messages exist", () => {
-		let wideflyout = propertyUtils.openSummaryPanel(wrapper, "Derive-Node");
-		tableUtils.clickTableRows(wideflyout, [0]);
+	it("should show error icon in summary when both error and warning messages exist", async() => {
+		let wideflyout = propertyUtilsRTL.openSummaryPanel(wrapper, "Derive-Node");
+		tableUtilsRTL.clickTableRows(wideflyout, [0]);
 
-		wideflyout = wrapper.find("div.properties-wf-content.show");
+		const { container } = wrapper;
+		wideflyout = container.querySelector("div.properties-wf-content.show");
 		// ensure table toolbar has Delete button and click it
-		let tableWrapper = wideflyout.find("div[data-id='properties-expressionCellTable']");
-		let deleteButtons = tableWrapper.find("button.delete-button");
-		deleteButtons.at(0).simulate("click");
+		let tableWrapper = wideflyout.querySelector("div[data-id='properties-expressionCellTable']");
+		let deleteButtons = tableWrapper.querySelectorAll("button.delete-button");
+		fireEvent.click(deleteButtons[0]);
 
 		// remove second row
-		tableUtils.clickTableRows(wideflyout, [0]);
-		wideflyout = wrapper.find("div.properties-wf-content.show");
-		tableWrapper = wideflyout.find("div[data-id='properties-expressionCellTable']");
-		deleteButtons = tableWrapper.find("button.delete-button");
-		deleteButtons.at(0).simulate("click");
-
+		tableUtilsRTL.clickTableRows(wideflyout, [0]);
+		wideflyout = container.querySelector("div.properties-wf-content.show");
+		tableWrapper = wideflyout.querySelector("div[data-id='properties-expressionCellTable']");
+		deleteButtons = tableWrapper.querySelectorAll("button.delete-button");
+		fireEvent.click(deleteButtons[0]);
 
 		// check that all rows were removed
-		wideflyout = wrapper.find("div.properties-wf-content.show");
-		expect(tableUtils.getTableRows(wideflyout.find("div[data-id='properties-expressionCellTable']"))).to.have.length(0);
+		wideflyout = container.querySelector("div.properties-wf-content.show");
+		expect(tableUtilsRTL.getTableRows(wideflyout.querySelector("div[data-id='properties-expressionCellTable']"))).to.have.length(0);
+
+		wideflyout = container.querySelector("div.properties-wf-content.show");
+		expect(tableUtilsRTL.getTableRows(wideflyout.querySelector("div[data-id='properties-ft-structurelisteditorTableInput']"))).to.have.length(11);
 
-		wideflyout = wrapper.find("div.properties-wf-content.show");
-		expect(tableUtils.getTableRows(wideflyout.find("div[data-id='properties-ft-structurelisteditorTableInput']"))).to.have.length(11);
 		// remove all rows from Table Input table
-		const tableInputBodyData = wideflyout.find("div[data-id='properties-ft-structurelisteditorTableInput']");
+		const tableInputBodyData = wideflyout.querySelector("div[data-id='properties-ft-structurelisteditorTableInput']");
 		summarypanelParamDef.current_parameters.structurelisteditorTableInput.forEach((value) => {
-			tableUtils.selectCheckboxes(tableInputBodyData, [0]);
-			const tableInputRemoveButton = wrapper.find("div[data-id='properties-ft-structurelisteditorTableInput']")
-				.find("div.properties-table-toolbar")
-				.find("button.properties-action-delete");
+			tableUtilsRTL.selectCheckboxes(tableInputBodyData, [0]);
+			const tableToolbar = wideflyout.querySelector("div.properties-table-toolbar");
+			const tableInputRemoveButton = tableToolbar.querySelectorAll("button.properties-action-delete");
 			expect(tableInputRemoveButton).to.have.length(1);
-
-			tableInputRemoveButton.simulate("click");
+			fireEvent.click(tableInputRemoveButton[0]);
 		});
 		// check that all rows were removed
-		wideflyout = wrapper.find("div.properties-wf-content.show");
-		expect(tableUtils.getTableRows(wideflyout.find("div[data-id='properties-ft-structurelisteditorTableInput']"))).to.have.length(0);
+		wideflyout = container.querySelector("div.properties-wf-content.show");
+		expect(tableUtilsRTL.getTableRows(wideflyout.querySelector("div[data-id='properties-ft-structurelisteditorTableInput']"))).to.have.length(0);
 
 		// close fly-out
-		wideflyout.find("button.properties-apply-button").simulate("click");
+		const PropApplyButton = wideflyout.querySelector("button.properties-apply-button");
+		fireEvent.click(PropApplyButton);
 
 		// check that Alerts tab is added and that is shows error message before warning message
-		let alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category
-		expect(alertCategory.find("button.cds--accordion__heading").text()).to.equal("Alerts (2)");
-		let alertList = alertCategory.find("div.properties-link-text-container");
+		let alertCategory = container.querySelectorAll("div.properties-category-container")[0]; // alert category
+		expect(alertCategory.querySelector("button.cds--accordion__heading").textContent).to.equal("Alerts (2)");
+		let alertList = alertCategory.querySelectorAll("div.properties-link-text-container");
 		expect(alertList).to.have.length(2);
-		const errorWrapper = alertCategory.find("div.properties-link-text-container.error");
-		expect(errorWrapper).to.have.length(1);
-		expect(errorWrapper.find("a.properties-link-text").text()).to.equal("Structure list editor table cannot be empty");
-		let warningWrapper = alertCategory.find("div.properties-link-text-container.warning");
-		expect(warningWrapper).to.have.length(1);
-		expect(warningWrapper.find("a.properties-link-text").text()).to.equal("Expression cell table cannot be empty");
+		const errorWrapper = alertCategory.querySelector("div.properties-link-text-container.error");
+		expect(errorWrapper).to.not.be.null;
+		expect(errorWrapper.querySelector("a.properties-link-text").textContent).to.equal("Structure list editor table cannot be empty");
+		let warningWrapper = alertCategory.querySelector("div.properties-link-text-container.warning");
+		expect(warningWrapper).to.not.be.null;
+		expect(warningWrapper.querySelector("a.properties-link-text").textContent).to.equal("Expression cell table cannot be empty");
 		// check that summary icon is an error icon
-		let tableCategory = wrapper.find("div.properties-category-container").at(1); // Structure list table category
-		expect(tableCategory.find("button.cds--accordion__heading").text()).to.equal("Structure List Table (2)");
-		let summary = tableCategory.find("div.properties-summary-link-container");
-		expect(summary.find("svg.error")).to.have.length(1);
+		let tableCategory = container.querySelectorAll("div.properties-category-container")[1]; // Structure list table category
+		expect(tableCategory.querySelector("button.cds--accordion__heading").textContent).to.equal("Structure List Table (2)");
+		let summary = tableCategory.querySelector("div.properties-summary-link-container");
+		expect(summary.querySelectorAll("svg.error")).to.have.length(1);
 
 		// add row back into Table Input table
-		tableCategory.find("button.properties-summary-link-button").simulate("click");
-		wideflyout = wrapper.find("div.properties-wf-content.show");
+		const summaryLinkButton = tableCategory.querySelector("button.properties-summary-link-button");
+		fireEvent.click(summaryLinkButton);
+		wideflyout = container.querySelector("div.properties-wf-content.show");
+
+		const emptyTabButton = wideflyout.querySelectorAll("button.properties-empty-table-button")[1];
+		fireEvent.click(emptyTabButton);
 
-		wideflyout.find("button.properties-empty-table-button").at(1)
-			.simulate("click");
 		// close fly-out
-		wideflyout.find("button.properties-apply-button").simulate("click");
+		const propApplyButton = wideflyout.querySelector("button.properties-apply-button");
+		fireEvent.click(propApplyButton);
 
 		// check that Alerts tab is added and that is shows error message before warning message
-		alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category
-		expect(alertCategory.find("button.cds--accordion__heading").text()).to.equal("Alerts (1)");
-		alertList = alertCategory.find("div.properties-link-text-container");
+		alertCategory = container.querySelectorAll("div.properties-category-container")[0]; // alert category
+		expect(alertCategory.querySelector("button.cds--accordion__heading").textContent).to.equal("Alerts (1)");
+		alertList = alertCategory.querySelectorAll("div.properties-link-text-container");
 		expect(alertList).to.have.length(1);
-		warningWrapper = alertCategory.find("div.properties-link-text-container.warning");
-		expect(warningWrapper).to.have.length(1);
-		expect(warningWrapper.find("a.properties-link-text").text()).to.equal("Expression cell table cannot be empty");
+		warningWrapper = alertCategory.querySelector("div.properties-link-text-container.warning");
+		expect(warningWrapper).to.not.be.null;
+		expect(warningWrapper.querySelector("a.properties-link-text").textContent).to.equal("Expression cell table cannot be empty");
+
 		// check that summary icon is an error icon
-		tableCategory = wrapper.find("div.properties-category-container").at(1); // Structure list table category
-		expect(tableCategory.find("button.cds--accordion__heading").text()).to.equal("Structure List Table (1)");
-		summary = tableCategory.find("div.properties-summary-link-container");
-		expect(summary.find("svg.warning")).to.have.length(1);
+		tableCategory = container.querySelectorAll("div.properties-category-container")[1]; // Structure list table category
+		expect(tableCategory.querySelector("button.cds--accordion__heading").textContent).to.equal("Structure List Table (1)");
+		summary = tableCategory.querySelector("div.properties-summary-link-container");
+		expect(summary.querySelectorAll("svg.warning")).to.have.length(1);
+
 	});
 });
 
@@ -242,63 +250,71 @@ describe("summary panel visible and enabled conditions work correctly", () => {
 	let wrapper;
 	let controller;
 	beforeEach(() => {
-		const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef);
+		const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef);
 		wrapper = renderedObject.wrapper;
 		controller = renderedObject.controller;
 	});
 
 	afterEach(() => {
-		wrapper.unmount();
+		cleanup();
 	});
 
-	it("summary panel link should be disabled and table should be gone", () => {
-		let firstSummary = wrapper.find("div[data-id='properties-structuretable-summary-panel1']");
-		expect(firstSummary.props().disabled).to.be.false;
-		expect(firstSummary.find("div.properties-summary-values")).to.have.length(2);
+	it("summary panel link should be disabled and table should be gone", async() => {
+		const { container } = wrapper;
+		let firstSummary = container.querySelector("div[data-id='properties-structuretable-summary-panel1']");
+		expect(firstSummary.hasAttribute("disabled")).to.equal(false);
+		const summaryValue = firstSummary.querySelectorAll("div.properties-summary-values");
+		expect(summaryValue.length).to.equal(2);
 		expect(controller.getPanelState({ name: "structuretable-summary-panel1" })).to.equal("enabled");
 		expect(controller.getControlState({ name: "structuretable_summary1" })).to.equal("enabled");
 		expect(controller.getControlState({ name: "structuretable_summary2" })).to.equal("enabled");
 
 		controller.updatePropertyValue({ name: "enableSummary" }, false);
-		wrapper.update();
-		firstSummary = wrapper.find("div[data-id='properties-structuretable-summary-panel1']");
-		expect(firstSummary.props().disabled).to.be.true;
-		expect(controller.getPanelState({ name: "structuretable-summary-panel1" })).to.equal("disabled");
-		expect(controller.getControlState({ name: "structuretable_summary1" })).to.equal("disabled");
-		expect(controller.getControlState({ name: "structuretable_summary2" })).to.equal("disabled");
-		expect(firstSummary.find("div.properties-summary-values")).to.have.length(0);
+		await waitFor(() => {
+			firstSummary = container.querySelector("div[data-id='properties-structuretable-summary-panel1']");
+			expect(firstSummary.hasAttribute("disabled")).to.be.true;
+			expect(controller.getPanelState({ name: "structuretable-summary-panel1" })).to.equal("disabled");
+			expect(controller.getControlState({ name: "structuretable_summary1" })).to.equal("disabled");
+			expect(controller.getControlState({ name: "structuretable_summary2" })).to.equal("disabled");
+			const propSummaryValue = firstSummary.querySelectorAll("div.properties-summary-values");
+			expect(propSummaryValue.length).to.equal(0);
+		});
 	});
 
-	it("summary panel link should be hidden", () => {
-		let secondSummary = wrapper.find("div[data-id='properties-structuretable-summary-panel2']");
-		const link = secondSummary.find("button.properties-summary-link-button");
+	it("summary panel link should be hidden", async() => {
+		const { container } = wrapper;
+		let secondSummary = container.querySelector("div[data-id='properties-structuretable-summary-panel2']");
+		const link = secondSummary.querySelectorAll("button.properties-summary-link-button");
 		expect(link).to.have.length(1);
 		expect(controller.getPanelState({ name: "structuretable-summary-panel2" })).to.equal("visible");
-		expect(secondSummary.find("div.properties-summary-values")).to.have.length(1);
+		expect(secondSummary.querySelectorAll("div.properties-summary-values")).to.have.length(1);
 
 		controller.updatePropertyValue({ name: "hideSummary" }, true);
-		wrapper.update();
 
-		expect(controller.getPanelState({ name: "structuretable-summary-panel2" })).to.equal("hidden");
-		expect(controller.getControlState({ name: "structuretable_summary3" })).to.equal("hidden");
-		secondSummary = wrapper.find("div[data-id='properties-structuretable-summary-panel2']");
-		expect(secondSummary.find("div.properties-summary-values")).to.have.length(0);
+		await waitFor(() => {
+			expect(controller.getPanelState({ name: "structuretable-summary-panel2" })).to.equal("hidden");
+			expect(controller.getControlState({ name: "structuretable_summary3" })).to.equal("hidden");
+			secondSummary = container.querySelector("div[data-id='properties-structuretable-summary-panel2']");
+			expect(secondSummary.querySelectorAll("div.properties-summary-values")).to.have.length(0);
+		});
 	});
 });
 
 describe("summary panel classNames applied correctly", () => {
 	let wrapper;
 	beforeEach(() => {
-		const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef);
+		const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef);
 		wrapper = renderedObject.wrapper;
 	});
 
 	afterEach(() => {
-		wrapper.unmount();
+		cleanup();
 	});
 
 	it("summary panel should have custom classname defined", () => {
-		const summaryContainer = wrapper.find("div[data-id='properties-summary_panel_category']");
-		expect(summaryContainer.find(".structuretable-summary-panel1-category-group-summarypanel-class")).to.have.length(1);
+		const { container } = wrapper;
+		const summaryContainer = container.querySelector("div[data-id='properties-summary_panel_category']");
+		expect(summaryContainer.querySelectorAll(".structuretable-summary-panel1-category-group-summarypanel-class")).to.have.lengthOf(1);
 	});
 });
+
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/tearsheet-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/tearsheet-test.js
index 76a40f15ea..ee69169548 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/panels/tearsheet-test.js
+++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/tearsheet-test.js
@@ -16,66 +16,77 @@
 
 // Test suite for generic tearsheet testing
 import React from "react";
-import propertyUtils from "./../../_utils_/property-utils";
+import propertyUtilsRTL from "../../_utils_/property-utilsRTL";
 import { expect } from "chai";
-import { mountWithIntl } from "../../_utils_/intl-utils";
+import { renderWithIntl } from "../../_utils_/intl-utils";
 import TearSheet from "./../../../src/common-properties/panels/tearsheet";
 import codeParamDef from "./../../test_resources/paramDefs/code_paramDef.json";
 import Sinon from "sinon";
+import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
 
 describe("tearsheet tests", () => {
-	let wrapper;
 	let controller;
+	let renderedObject;
 	beforeEach(() => {
-		const renderedObject = propertyUtils.flyoutEditorForm(codeParamDef);
-		wrapper = renderedObject.wrapper;
+		renderedObject = propertyUtilsRTL.flyoutEditorForm(codeParamDef);
 		controller = renderedObject.controller;
 	});
 
 	afterEach(() => {
-		wrapper.unmount();
+		cleanup();
 	});
 	it("should be have only one tearsheet rendered", () => {
-		expect(wrapper.find("div.properties-tearsheet-panel")).to.have.length(1);
+		expect(document.querySelectorAll("div.properties-tearsheet-panel")).to.have.length(1);
 	});
-	it("should be visible from the controller method", () => {
+	it("should be visible from the controller method", async() => {
 		controller.setActiveTearsheet("tearsheet1");
-		wrapper.update();
-		expect(wrapper.find("div.properties-tearsheet-panel.is-visible")).to.have.length(1);
+		await waitFor(() => {
+			const tearsheetpanel = document.querySelector("div.properties-tearsheet-panel.is-visible");
+			expect(tearsheetpanel).to.not.be.null;
+		});
 	});
-	it("should have title and description set", () => {
+	it("should have title and description set", async() => {
 		controller.setActiveTearsheet("tearsheet1");
-		wrapper.update();
-		expect(wrapper.find("div.properties-tearsheet-panel .properties-tearsheet-header h2").text()).to.equal("Python");
-		expect(wrapper.find("div.properties-tearsheet-panel .properties-tearsheet-header p").text()).to.equal("Your change is automatically saved.");
+		await waitFor(() => {
+			expect(document.querySelector("div.properties-tearsheet-panel .properties-tearsheet-header h2").textContent).to.equal("Python");
+			expect(document.querySelector("div.properties-tearsheet-panel .properties-tearsheet-header p").textContent).to.equal("Your change is automatically saved.");
+		});
 	});
-	it("should be hidden but not removed from DOM on the tearsheet close button", () => {
+	it("should be hidden but not removed from DOM on the tearsheet close button", async() => {
 		controller.setActiveTearsheet("tearsheet1");
-		wrapper.update();
-		wrapper.find("div.properties-tearsheet-panel button.cds--modal-close").simulate("click");
-		wrapper.update();
-		expect(wrapper.find("div.properties-tearsheet-panel.is-visible")).to.have.length(0);
-		expect(wrapper.find("div.properties-tearsheet-panel")).to.have.length(1);
-		expect(controller.getActiveTearsheet()).to.equal(null);
+		await waitFor(() => {
+			const buttonModalClose = document.querySelector("div.properties-tearsheet-panel");
+			expect(buttonModalClose).to.not.be.null;
+			expect(buttonModalClose.classList.contains("is-visible")).to.be.false;
+
+			const closeButton = document.querySelector("button.cds--modal-close");
+			expect(closeButton).to.not.be.null;
+			fireEvent.click(closeButton);
+			expect(document.querySelectorAll("div.properties-tearsheet-panel.is-visible")).to.have.length(0);
+			expect(document.querySelectorAll("div.properties-tearsheet-panel")).to.have.length(1);
+			expect(controller.getActiveTearsheet()).to.equal(null);
+		});
+
 	});
-	it("should show tearsheet content which is previously hidden", () => {
-		expect(wrapper.find("div.properties-tearsheet-panel")).to.have.length(1);
-		expect(wrapper.find("div.properties-tearsheet-panel.is-visible")).to.have.length(0);
-		expect(wrapper.find("div.properties-tearsheet-panel div[data-id='properties-ctrl-code_rows']")).to.have.length(0);
-		wrapper.update();
+	it("should show tearsheet content which is previously hidden", async() => {
+		expect(document.querySelectorAll("div.properties-tearsheet-panel")).to.have.length(1);
+		expect(document.querySelectorAll("div.properties-tearsheet-panel.is-visible")).to.have.length(0);
+		expect(document.querySelectorAll("div.properties-tearsheet-panel div[data-id='properties-ctrl-code_rows']")).to.have.length(0);
 		controller.updatePropertyValue({ name: "hide" }, false);
-		wrapper.update();
-		wrapper.find("div[data-id='properties-ctrl-code_rows'] button.maximize").simulate("click");
-		wrapper.update();
-		expect(wrapper.find("div.properties-tearsheet-panel.is-visible")).to.have.length(1);
-		expect(wrapper.find("div.properties-tearsheet-panel .properties-tearsheet-header h2").text()).to.equal("Python 2");
-		expect(wrapper.find("div.properties-tearsheet-panel div[data-id='properties-ctrl-code_rows']")).to.have.length(1);
+		await waitFor(() => {
+			const maximizeButton = document.querySelector("div[data-id='properties-ctrl-code_rows']");
+			const btnClick = maximizeButton.querySelector("button.maximize");
+			fireEvent.click(btnClick);
+			expect(document.querySelector("div.properties-tearsheet-panel.is-visible")).to.not.be.null;
+			expect(document.querySelector("div.properties-tearsheet-panel .properties-tearsheet-header h2").textContent).to.equal("Python 2");
+			expect(document.querySelector("div.properties-tearsheet-panel div[data-id='properties-ctrl-code_rows']")).to.not.be.null;
+		});
 	});
 });
 
 describe("Tearsheet renders correctly", () => {
 	it("should not display buttons in tearsheet if showPropertiesButtons is false", () => {
-		const wrapper = mountWithIntl(<TearSheet
+		const wrapper = renderWithIntl(<TearSheet
 			open
 			onCloseCallback={Sinon.spy()}
 			tearsheet={{
@@ -85,21 +96,21 @@ describe("Tearsheet renders correctly", () => {
 			showPropertiesButtons={false}
 			applyOnBlur
 		/>);
-		const tearsheet = wrapper.find("div.properties-tearsheet-panel");
-		expect(tearsheet).to.have.length(1);
-		expect(tearsheet.find("div.properties-tearsheet-header")).to.have.length(1);
-		expect(tearsheet.find("div.properties-tearsheet-header > h2").text()).to.equal("test title");
-		expect(tearsheet.find("div.properties-tearsheet-body")).to.have.length(1);
-		expect(tearsheet.find("div.properties-tearsheet-body").text()).to.equal("test content");
-		expect(tearsheet.find("div.properties-tearsheet-body.with-buttons")).to.have.length(0);
-		expect(tearsheet.find("div.properties-modal-buttons")).to.have.length(0);
+		const { container } = wrapper;
+		const tearsheet = container.getElementsByClassName("properties-tearsheet-panel");
+		expect(tearsheet).to.not.be.null;
+		const header = screen.getByText("test title", { selector: "h2" });
+		expect(header).to.exist;
+		expect(header.tagName).to.equal("H2");
 
-		// Verify close button is visible
-		expect(tearsheet.find("div.properties-tearsheet-header.hide-close-button")).to.have.length(0);
+		const body = screen.getByText("test content");
+		expect(body).to.exist;
+		expect(container.querySelectorAll("div.properties-tearsheet-body.with-buttons")).to.have.length(0);
+		expect(container.querySelectorAll("div.properties-modal-buttons")).to.have.length(0);
 	});
 
 	it("should display buttons in tearsheet if showPropertiesButtons is true and applyOnBlur is false", () => {
-		const wrapper = mountWithIntl(<TearSheet
+		const wrapper = renderWithIntl(<TearSheet
 			open
 			onCloseCallback={null}
 			tearsheet={{
@@ -112,12 +123,14 @@ describe("Tearsheet renders correctly", () => {
 			cancelHandler={Sinon.spy()}
 			showPropertiesButtons
 		/>);
-		const tearsheet = wrapper.find("div.properties-tearsheet-panel");
-		expect(tearsheet).to.have.length(1);
-		expect(tearsheet.find("div.properties-tearsheet-body.with-buttons")).to.have.length(1);
-		expect(tearsheet.find("div.properties-modal-buttons")).to.have.length(1);
+		const { container } = wrapper;
+		const tearsheet = container.querySelectorAll("properties-tearsheet-panel");
+		expect(tearsheet).to.not.be.null;
+		expect(container.querySelectorAll("div.properties-tearsheet-body.with-buttons")).to.not.be.null;
+		expect(container.querySelectorAll("div.properties-modal-buttons")).to.not.be.null;
+
 
 		// Verify close button is not visible
-		expect(tearsheet.find("div.properties-tearsheet-header.hide-close-button")).to.have.length(1);
+		expect(container.querySelectorAll("div.properties-tearsheet-header.hide-close-button")).to.not.be.null;
 	});
 });
diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/text-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/text-test.js
index aeeeeaebf2..7c8599328e 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/panels/text-test.js
+++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/text-test.js
@@ -15,61 +15,83 @@
  */
 
 import { expect } from "chai";
-import propertyUtils from "./../../_utils_/property-utils";
+import propertyUtilsRTL from "../../_utils_/property-utilsRTL";
 import panelParamDef from "./../../test_resources/paramDefs/panel_paramDef.json";
 import panelConditionsParamDef from "./../../test_resources/paramDefs/panelConditions_paramDef.json";
+import { cleanup, fireEvent, waitFor } from "@testing-library/react";
 
 describe("textPanel render correctly", () => {
-	const renderedObject = propertyUtils.flyoutEditorForm(panelParamDef);
-	const wrapper = renderedObject.wrapper;
+	let renderedObject;
+	let wrapper;
+
+	beforeEach(() => {
+		renderedObject = propertyUtilsRTL.flyoutEditorForm(panelParamDef);
+		wrapper = renderedObject.wrapper;
+	});
+
+	afterEach(() => {
+		cleanup();
+	});
 
 	it("should have displayed correct number of textPanel elements", () => {
-		const panel = wrapper.find("div[data-id='properties-text-panels']");
-		const staticText = panel.find("div.properties-text-panel");
+		const { container } = wrapper;
+		const panel = container.querySelector("div[data-id='properties-text-panels']");
+		const staticText = panel.querySelectorAll("div.properties-text-panel");
 		expect(staticText).to.have.length(5);
-		const labels = panel.find("div.panel-label");
+		const labels = panel.querySelectorAll("div.panel-label");
 		expect(labels).to.have.length(5);
 		// 3 on_panel descriptions
-		const descriptions = panel.find("div.panel-description");
+		const descriptions = panel.querySelectorAll("div.panel-description");
 		expect(descriptions).to.have.length(3);
 		// 1 tooltip description
-		const tooltipDescription = panel.find("div.properties-text-panel").find("div.properties-label-container");
+		const tooltipDescription = panel.querySelectorAll("div.properties-text-panel div.properties-label-container");
 		expect(tooltipDescription).to.have.length(1);
 	});
 	it("should have displayed correct text in textPanel elements", () => {
-		let panel = wrapper.find("div[data-id='properties-text-panels']");
-		const labels = panel.find("div.panel-label");
-		expect(labels.at(0).text()).to.equal("Oranges");
-		let descriptions = panel.find("div.panel-description");
-		expect(descriptions.at(0).text()).to.equal("An orange tree can grow to reach 30 feet and live for over a hundred years.");
-		expect(descriptions.at(1).text()).to.equal("Percent: 9.090909 with 6 decimals. Percent: 9.09 with 2 decimals");
-		expect(descriptions.at(2).text()).to.equal("Sum: 22 with (number, number). Sum: 24 with (number, 2, number)");
-		const input = panel.find("[type='number']");
-		input.simulate("change", { target: { value: 0.52, validity: { badInput: false } } });
-		panel = wrapper.find("div[data-id='properties-text-panels']");
-		descriptions = panel.find("div.panel-description");
-		expect(descriptions.at(1).text()).to.equal("Percent: 192.307692 with 6 decimals. Percent: 192.31 with 2 decimals");
-		expect(descriptions.at(2).text()).to.equal("Sum: 1.04 with (number, number). Sum: 3.04 with (number, 2, number)");
+		const { container } = wrapper;
+		let panel = container.querySelector("div[data-id='properties-text-panels']");
+		const labels = panel.querySelectorAll("div.panel-label");
+		expect(labels[0].textContent).to.equal("Oranges");
+		let descriptions = panel.querySelectorAll("div.panel-description");
+		expect(descriptions[0].textContent).to.equal("An orange tree can grow to reach 30 feet and live for over a hundred years.");
+		expect(descriptions[1].textContent).to.equal("Percent: 9.090909 with 6 decimals. Percent: 9.09 with 2 decimals");
+		expect(descriptions[2].textContent).to.equal("Sum: 22 with (number, number). Sum: 24 with (number, 2, number)");
+		const input = panel.querySelector("[type='number']");
+		expect(input.tagName.toLowerCase()).to.equal("input");
+		fireEvent.change(input, { target: { value: 0.52, } }); // validity has only getter function
+		panel = container.querySelector("div[data-id='properties-text-panels']");
+		descriptions = panel.querySelectorAll("div.panel-description");
+		expect(descriptions[1].textContent).to.equal("Percent: 192.307692 with 6 decimals. Percent: 192.31 with 2 decimals");
+		expect(descriptions[2].textContent).to.equal("Sum: 1.04 with (number, number). Sum: 3.04 with (number, 2, number)");
 	});
 	it("should not show a description when one isn't provided", () => {
-		const panel = wrapper.find("div[data-id='properties-text-panels']");
-		const textPanel = panel.find("div.properties-text-panel").at(4); // panel without description
-		expect(textPanel.find("div.panel-label").text()).to.equal("This panel shouldn't have a description");
-		expect(textPanel.find("div.panel-description")).to.have.length(0);
+		const { container } = wrapper;
+		const panel = container.querySelector("div[data-id='properties-text-panels']");
+		const textPanel = panel.querySelectorAll("div.properties-text-panel")[4]; // panel without description
+		expect(textPanel.querySelector("div.panel-label").textContent).to.equal("This panel shouldn't have a description");
+		const panelDescription = textPanel.querySelectorAll("div.panel-description");
+		expect(panelDescription).to.have.length(0);
 	});
-	it("should have displayed textPanel description in tooltip", () => {
-		const panel = wrapper.find("div[data-id='properties-text-panels']");
-		const textPanel = panel.find("div.properties-text-panel").at(1); // panel with description in tooltip
-		expect(textPanel.find("div.panel-label").text()).to.equal("Avocados");
-		expect(textPanel.find("div.properties-label-container")).to.have.length(1);
+	it("should have displayed textPanel description in tooltip", async() => {
+		const { container } = wrapper;
+		const textPanel = container.querySelectorAll(".properties-text-panel")[1]; // panel with description in tooltip
+		const textLabel = textPanel.querySelector(".panel-label");
+		expect(textLabel.textContent).to.equal("Avocados");
+		const labelContainer = textPanel.querySelectorAll(".properties-label-container");
+		expect(labelContainer).to.have.length(1);
 		// Show description in tooltip
-		const tooltipTrigger = textPanel.find(".tooltip-trigger");
-		const tooltipId = tooltipTrigger.props()["aria-labelledby"];
-		tooltipTrigger.simulate("click");
-		const textPanelTooltip = wrapper.find(`div[data-id='${tooltipId}']`);
-		expect(textPanelTooltip.props()).to.have.property("aria-hidden", false);
-		expect(textPanelTooltip.text()).to.equal("An avocado tree can range from 15 to 30 feet tall.");
-
+		const tooltipTrigger = textPanel.querySelector(".tooltip-trigger");
+		expect(tooltipTrigger).to.not.be.null;
+		const tooltipId = tooltipTrigger.getAttribute("aria-labelledby");
+		expect(tooltipId).to.not.be.null;
+		fireEvent.click(tooltipTrigger);
+		await waitFor(() => {
+			const textPanelTooltip = document.querySelector(`div[data-id='${tooltipId}']`);
+			expect(textPanelTooltip).to.not.be.null;
+			const ariaHidden = textPanelTooltip.getAttribute("aria-hidden");
+			expect(ariaHidden).to.equal("false");
+			expect(textPanelTooltip.textContent).to.equal("An avocado tree can range from 15 to 30 feet tall.");
+		});
 	});
 });
 
@@ -78,15 +100,16 @@ describe("text panel visible and enabled conditions work correctly", () => {
 	let panels;
 	let controller;
 	beforeEach(() => {
-		const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef);
+		const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef);
 		wrapper = renderedObject.wrapper;
-		const textPanelcategory = wrapper.find("div.properties-category-container").at(2); // TEXT PANEL category
-		panels = textPanelcategory.find("div.properties-text-panel");
+		const { container } = wrapper;
+		const textPanelcategory = container.querySelectorAll("div.properties-category-container")[2]; // TEXT PANEL category
+		panels = textPanelcategory.querySelectorAll("div.properties-text-panel");
 		controller = renderedObject.controller;
 	});
 
 	afterEach(() => {
-		wrapper.unmount();
+		cleanup();
 	});
 
 	it("text panel should be disabled", () => {
@@ -108,20 +131,22 @@ describe("text panel classNames applied correctly", () => {
 	let wrapper;
 	let panels;
 	beforeEach(() => {
-		const renderedObject = propertyUtils.flyoutEditorForm(panelConditionsParamDef);
+		const renderedObject = propertyUtilsRTL.flyoutEditorForm(panelConditionsParamDef);
 		wrapper = renderedObject.wrapper;
 	});
 
 	afterEach(() => {
-		wrapper.unmount();
+		cleanup();
 	});
 
 	it("text panel should have custom classname defined", () => {
-		panels = wrapper.find("div.properties-text-panel");
-		expect(panels.find(".orange-panel-group-textpanel-class")).to.have.length(1);
+		const { container } = wrapper;
+		panels = container.querySelectorAll("div.properties-text-panel");
+		expect(panels[0].className.includes("orange-panel-group-textpanel-class")).to.equal(true);
 		// textPanel within a panelSelector
-		expect(panels.find(".panel-selector-fields1-red1-group-textpanel-class")).to.have.length(1);
+		expect(panels[4].className.includes("panel-selector-fields1-red1-group-textpanel-class")).to.equal(true);
 		// deeply nested textpanel group
-		expect(panels.find(".level3-group-textpanel-class")).to.have.length(1);
+		expect(panels[9].className.includes("level3-group-textpanel-class")).to.equal(true);
 	});
 });
+