test: Migrate tests from Enzyme to RTL

package.json

@@ -116,13 +116,14 @@
     "@babel/preset-env": "=7.24.7",
     "@babel/preset-react": "=7.24.7",
     "@babel/register": "=7.23.7",
-    "@cfaester/enzyme-adapter-react-18": "=0.8.0",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@jest/globals": "=29.7.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@release-it/conventional-changelog": "=8.0.1",
     "@svgr/webpack": "=8.1.0",
+    "@testing-library/jest-dom": "=6.6.3",
+    "@testing-library/react": "=16.0.1",
     "autoprefixer": "^10.4.19",
     "babel-loader": "^9.1.3",
     "babel-plugin-lodash": "=3.3.4",
@@ -137,7 +138,6 @@
     "cypress": "=13.13.0",
     "dedent": "^1.5.3",
     "deepmerge": "^4.3.1",
-    "enzyme": "=3.11.0",
     "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jest": "^28.6.0",
@@ -194,9 +194,6 @@
   "overrides": {
     "@pmmmwh/react-refresh-webpack-plugin": {
       "webpack-dev-server": "$webpack-dev-server"
-    },
-    "enzyme": {
-      "cheerio": "=1.0.0-rc.12"
     }
   },
   "config": {

src/core/components/online-validator-badge.jsx

@@ -54,7 +54,7 @@ export default class OnlineValidatorBadge extends React.Component {
         }
 
         return (<span className="float-right">
-                <a target="_blank" rel="noopener noreferrer" href={`${ sanitizedValidatorUrl }/debug?url=${ encodeURIComponent(this.state.url) }`}>
+                <a aria-label="validator" target="_blank" rel="noopener noreferrer" href={`${ sanitizedValidatorUrl }/debug?url=${ encodeURIComponent(this.state.url) }`}>
                     <ValidatorImage src={`${ sanitizedValidatorUrl }?url=${ encodeURIComponent(this.state.url) }`} alt="Online validator badge"/>
                 </a>
             </span>)

src/core/components/operation-tag.jsx

@@ -76,6 +76,7 @@ export default class OperationTag extends React.Component {
           id={isShownKey.map(v => escapeDeepLinkPath(v)).join("-")}
           data-tag={tag}
           data-is-open={showTag}
+          data-testid="opblock-tag"
         >
           <DeepLink
             enabled={deepLinking}

src/core/containers/filter.jsx

@@ -31,7 +31,7 @@ export default class FilterContainer extends React.Component {
       <div>
         {filter === false ? null :
           <div className="filter-container">
-            <Col className="filter wrapper" mobile={12}>
+            <Col data-testid="filter-col" className="filter wrapper" mobile={12}>
               <input className={classNames.join(" ")} placeholder="Filter by tag" type="text"
                      onChange={this.onFilterChange} value={typeof filter === "string" ? filter : ""}
                      disabled={isLoading}/>

src/core/plugins/syntax-highlighting/components/HighlightCode.jsx

@@ -70,7 +70,7 @@ const HighlightCode = ({
       {canCopy && (
         <div className="copy-to-clipboard">
           <CopyToClipboard text={children}>
-            <button />
+            <button aria-label="Copy to Clipboard" />
           </CopyToClipboard>
         </div>
       )}

test/unit/bugs/3199-sanitization-escaping.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { render } from "enzyme"
+import { render } from "@testing-library/react"
 import Markdown from "core/components/providers/markdown"
 
 describe("UI-3199: Sanitized Markdown causing code examples to be double escaped", function(){
@@ -13,9 +13,10 @@ describe("UI-3199: Sanitized Markdown causing code examples to be double escaped
       source: str
     }
 
-    let el = render(<Markdown {...props}/>)
+    const { container } = render(<Markdown {...props} />)
+    const codeElement = container.querySelector("code")
 
-    expect(el.find("code").first().text()).toEqual("{\"abc\": \"def\"}\n")
-    expect(el.find("code").first().html()).toEqual("{\"abc\": \"def\"}\n")
+    expect(codeElement.textContent).toEqual("{\"abc\": \"def\"}\n")
+    expect(codeElement.innerHTML).toEqual("{\"abc\": \"def\"}\n")
   })
 })

test/unit/bugs/3279-empty-markdown-source.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { render } from "enzyme"
+import { render } from "@testing-library/react"
 import Markdown from "core/components/providers/markdown"
 
 describe("UI-3279: Empty Markdown inputs causing bare `undefined` in output", function(){
@@ -10,7 +10,7 @@ describe("UI-3279: Empty Markdown inputs causing bare `undefined` in output", fu
 
     let el = render(<Markdown {...props}/>)
 
-    expect(el.text()).toEqual("")
+    expect(el.queryByText(/./)).toBeNull()
   })
 
   it("should return no text for `undefined` as source input", function(){
@@ -20,7 +20,7 @@ describe("UI-3279: Empty Markdown inputs causing bare `undefined` in output", fu
 
     let el = render(<Markdown {...props}/>)
 
-    expect(el.text()).toEqual("")
+    expect(el.queryByText(/./)).toBeNull()
   })
 
   it("should return no text for empty string as source input", function(){
@@ -30,6 +30,6 @@ describe("UI-3279: Empty Markdown inputs causing bare `undefined` in output", fu
 
     let el = render(<Markdown {...props}/>)
 
-    expect(el.text()).toEqual("")
+    expect(el.queryByText(/./)).toBeNull()
   })
 })

test/unit/bugs/4557-default-parameter-values.jsx

@@ -3,7 +3,7 @@
  */
 import React from "react"
 import { List, fromJS } from "immutable"
-import { render } from "enzyme"
+import { render } from "@testing-library/react"
 
 import ParameterRow from "core/components/parameter-row"
 import {

test/unit/components/filter.jsx

@@ -1,10 +1,10 @@
 import React from "react"
-import { mount } from "enzyme"
+import { render, screen } from "@testing-library/react"
+import "@testing-library/jest-dom" 
 import FilterContainer from "core/containers/filter"
 import { Col } from "core/components/layout-utils"
 
 describe("<FilterContainer/>", function(){
-
   const mockedProps = {
     specSelectors: {
       loadingStatus() {}
@@ -16,32 +16,30 @@ describe("<FilterContainer/>", function(){
   }
 
   it("renders FilterContainer if filter is provided", function(){
-
-    // Given
-    let props = {...mockedProps}
-    props.layoutSelectors = {...mockedProps.specSelectors}
-    props.layoutSelectors.currentFilter = function() {return true}
+     // Given
+     let props = {...mockedProps}
+     props.layoutSelectors = {...mockedProps.specSelectors}
+     props.layoutSelectors.currentFilter = function() {return true}
 
     // When
-    let wrapper = mount(<FilterContainer {...props}/>)
+    render(<FilterContainer {...props} />)
 
     // Then
-    const renderedColInsideFilter = wrapper.find(Col)
-    expect(renderedColInsideFilter.length).toEqual(1)
+    const renderedColInsideFilter = screen.queryByTestId("filter-col")
+   expect(renderedColInsideFilter).toBeInTheDocument()
   })
 
   it("does not render FilterContainer if filter is false", function(){
-
     // Given
     let props = {...mockedProps}
     props.layoutSelectors = {...mockedProps.specSelectors}
     props.layoutSelectors.currentFilter = function() {return false}
 
     // When
-    let wrapper = mount(<FilterContainer {...props}/>)
+    render(<FilterContainer {...props} />)
 
     // Then
-    const renderedColInsideFilter = wrapper.find(Col)
-    expect(renderedColInsideFilter.length).toEqual(0)
+    const renderedColInsideFilter = screen.queryByTestId("filter-col")
+    expect(renderedColInsideFilter).not.toBeInTheDocument()
   })
-})
+})

test/unit/components/highlight-code.jsx

@@ -1,6 +1,7 @@
+import { render,screen } from "@testing-library/react"
+import "@testing-library/jest-dom"
 import React from "react"
 import expect from "expect"
-import { shallow, mount } from "enzyme"
 import HighlightCode from "core/plugins/syntax-highlighting/components/HighlightCode"
 import SyntaxHighlighter from "core/plugins/syntax-highlighting/components/SyntaxHighlighter"
 
@@ -21,23 +22,29 @@ const fakeGetComponent = (name, isContainer) => {
 describe("<HighlightCode />", () => {
   it("should render a Download button if downloadable", () => {
     const props = { downloadable: true, getConfigs: fakeGetConfigs, getComponent: fakeGetComponent }
-    const wrapper = shallow(<HighlightCode {...props} />)
-    expect(wrapper.find(".download-contents").length).toEqual(1)
+    const {
+      container
+    } = render(<HighlightCode {...props} />)
+    expect(container.querySelectorAll(".download-contents").length).toEqual(1)
   })
 
   it("should render a Copy To Clipboard button if copyable", () => {
     const props = { canCopy: true, getConfigs: fakeGetConfigs, getComponent: fakeGetComponent }
-    const wrapper = shallow(<HighlightCode {...props} />)
-    expect(wrapper.find("CopyToClipboard").length).toEqual(1)
+    render(<HighlightCode {...props} />)
+    const copyButton = screen.queryByRole("button", { name: /copy/i })
+    expect(copyButton).toBeInTheDocument()
+
   })
 
   it("should render values in a preformatted element", () => {
     const value = "test text"
     const props = { children: value , getConfigs: fakeGetConfigs, getComponent: fakeGetComponent }
-    const wrapper = mount(<HighlightCode {...props} />)
-    const preTag = wrapper.find("pre")
+    const {
+      container
+    } = render(<HighlightCode {...props} />)
+    const preTag = container.querySelectorAll("pre")
 
     expect(preTag.length).toEqual(1)
-    expect(preTag.text()).toEqual(value)
+    expect(preTag[0].textContent).toEqual(value)
   })
 })

test/unit/components/info-wrapper.jsx

@@ -1,5 +1,5 @@
+import { render } from "@testing-library/react"
 import React from "react"
-import { mount } from "enzyme"
 import { fromJS } from "immutable"
 import InfoContainer from "core/containers/info"
 
@@ -30,10 +30,12 @@ describe("<InfoContainer/>", function () {
     props.specSelectors.info = function () {return fromJS(["info1", "info2"])}
 
     // When
-    let wrapper = mount(<InfoContainer {...props}/>)
+    let {
+      container
+    } = render(<InfoContainer {...props}/>)
 
     // Then
-    const renderedInfo = wrapper.find("span.mocked-info")
+    const renderedInfo = container.querySelectorAll("span.mocked-info")
     expect(renderedInfo.length).toEqual(1)
   })
 
@@ -45,10 +47,12 @@ describe("<InfoContainer/>", function () {
     props.specSelectors.info = function () {return fromJS([])}
 
     // When
-    let wrapper = mount(<InfoContainer {...props}/>)
+    let {
+      container
+    } = render(<InfoContainer {...props}/>)
 
     // Then
-    const renderedInfo = wrapper.find("span.mocked-info")
+    const renderedInfo = container.querySelectorAll("span.mocked-info")
     expect(renderedInfo.length).toEqual(0)
   })
 
@@ -58,10 +62,12 @@ describe("<InfoContainer/>", function () {
     let props = {...mockedProps}
 
     // When
-    let wrapper = mount(<InfoContainer {...props}/>)
+    let {
+      container
+    } = render(<InfoContainer {...props}/>)
 
     // Then
-    const renderedInfo = wrapper.find("span.mocked-info")
+    const renderedInfo = container.querySelectorAll("span.mocked-info")
     expect(renderedInfo.length).toEqual(0)
   })
-})
+})

test/unit/components/live-response.jsx

@@ -1,9 +1,10 @@
 import React from "react"
+import { render, screen } from "@testing-library/react"
+import "@testing-library/jest-dom"  
 import { fromJSOrdered } from "core/utils"
-import { shallow } from "enzyme"
 import Curl from "core/components/curl"
-import LiveResponse from "core/components/live-response"
 import ResponseBody from "core/components/response-body"
+import LiveResponse from "core/components/live-response"
 
 describe("<LiveResponse/>", function(){
   let request = fromJSOrdered({
@@ -35,9 +36,7 @@ describe("<LiveResponse/>", function(){
 
   tests.forEach(function(test) {
     it("passes " + test.expected.request + " to Curl when showMutatedRequest = " + test.showMutatedRequest, function() {
-
-      // Given
-
+// Given
       let response = fromJSOrdered({
         status: 200,
         url: "http://petstore.swagger.io/v2/pet/1",
@@ -52,8 +51,8 @@ describe("<LiveResponse/>", function(){
       let requestForSpy = jest.fn().mockImplementation(function() { return request })
 
       let components = {
-        curl: Curl,
-        responseBody: ResponseBody
+        curl: () => <div>Mocked Curl</div>,
+        responseBody: () => <div>Mocked ResponseBody</div>
       }
 
       let props = {
@@ -69,33 +68,21 @@ describe("<LiveResponse/>", function(){
         displayRequestDuration: true,
         getConfigs: () => ({ showMutatedRequest: test.showMutatedRequest })
       }
+       // When
+      render(<LiveResponse {...props}/>)
 
-      // When
-      let wrapper = shallow(<LiveResponse {...props}/>)
-
-      // Then
-      expect(mutatedRequestForSpy.mock.calls.length).toEqual(test.expected.mutatedRequestForCalls)
-      expect(requestForSpy.mock.calls.length).toEqual(test.expected.requestForCalls)
-
-      const curl = wrapper.find(Curl)
-      expect(curl.length).toEqual(1)
-      expect(curl.props().request).toBe(requests[test.expected.request])
-
-      const expectedUrl = requests[test.expected.request].get("url")
-      expect(wrapper.find("div.request-url pre.microlight").text()).toEqual(expectedUrl)
+       // Then
+      expect(mutatedRequestForSpy).toHaveBeenCalledTimes(test.expected.mutatedRequestForCalls)
+      expect(requestForSpy).toHaveBeenCalledTimes(test.expected.requestForCalls)
 
-      const duration = wrapper.find("Duration")
-      expect(duration.length).toEqual(1)
-      expect(duration.props().duration).toEqual(50)
-      expect(duration.html())
-        .toEqual("<div><h5>Request duration</h5><pre class=\"microlight\">50 ms</pre></div>")
+           const expectedUrl = requests[test.expected.request].get("url")
+      expect(screen.getByText(expectedUrl)).toBeInTheDocument()
 
-      const responseHeaders = wrapper.find("Headers")
-      expect(duration.length).toEqual(1)
-      expect(responseHeaders.props().headers.length).toEqual(1)
-      expect(responseHeaders.props().headers[0].key).toEqual("content-type")
-      expect(responseHeaders.html())
-        .toEqual("<div><h5>Response headers</h5><pre class=\"microlight\"><span class=\"headerline\"> content-type: application/xml </span></pre></div>")
+
+      expect(screen.getByText(/50 ms/)).toBeInTheDocument()
+      const headersElement = screen.getByText(/content-type/i)
+      expect(headersElement).toBeInTheDocument()
+      expect(headersElement.textContent).toContain("application/xml")
     })
   })
-})
+})