React test library cannot get the string value

daviyang35 commented 3 years ago

Detail the problem here, including any possible solutions.

When using the React test library to test the acceptance value rendering of the framework, the unexpected string value is correctly read from it.

The following code can repeat the problem

import React from "react";
import {render, screen} from "@testing-library/react";
import AceEditor from "react-ace";

describe("edit component", function () {
    it("render CodeBlock", () => {
        const {container} = render(<AceEditor value={"aaa"}/>);

        // first assert
        expect(container.querySelector("#ace-editor")).toBeInTheDocument();

        // second assert
        expect(screen.getByText("aaa")).toBeInTheDocument();
    });
});

The first assert is passed. The second assert is broken.

expect the second assert passed too.

package.json

{
"dependencies": {
    "@ant-design/icons": "^4.7.0",
    "ace-builds": "^1.4.13",
    "antd": "^4.16.13",
    "axios": "^0.22.0",
    "classnames": "^2.3.1",
    "copy-to-clipboard": "^3.3.1",
    "qs": "^6.10.1",
    "react": "^17.0.2",
    "react-ace": "^9.5.0",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
"devDependencies": {
    "@testing-library/cypress": "^8.0.1",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.2.1",
    "@types/classnames": "^2.3.1",
    "@types/jest": "^27.0.2",
    "@types/node": "^16.10.3",
    "@types/qs": "^6.9.7",
    "@types/react": "^17.0.27",
    "@types/react-dom": "^17.0.9",
    "@types/react-router-dom": "^5.3.1",
    "babel-plugin-import": "^1.13.3",
    "cross-env": "^7.0.3",
    "customize-cra": "^1.0.0",
    "cypress": "9.0.0",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-react-hooks": "^4.3.0",
    "less": "^4.1.2",
    "less-loader": "^7.3.0",
    "react-app-rewired": "^2.1.8",
    "ts-jest": "^27.0.7",
    "typescript": "^4.4.3"
  }
}

Reference

The debug output

<body>
  <div>
    <div
      class=" ace_editor ace_hidpi ace-tm"
      id="ace-editor"
      style="width: 500px; height: 500px; font-size: 12px;"
    >
      <textarea
        autocapitalize="off"
        autocorrect="off"
        class="ace_text-input"
        spellcheck="false"
        style="opacity: 0; font-size: 1px;"
        wrap="off"
      />
      <div
        aria-hidden="true"
        class="ace_gutter"
      >
        <div
          class="ace_layer ace_gutter-layer ace_folding-enabled"
          style="height: 1000000px;"
        />
      </div>
      <div
        class="ace_scroller"
        style="line-height: 0px;"
      >
        <div
          class="ace_content"
        >
          <div
            class="ace_layer ace_print-margin-layer"
          >
            <div
              class="ace_print-margin"
              style="left: 4px; visibility: visible;"
            />
          </div>
          <div
            class="ace_layer ace_marker-layer"
          />
          <div
            class="ace_layer ace_text-layer"
            style="height: 1000000px; margin: 0px 4px;"
          />
          <div
            class="ace_layer ace_marker-layer"
          />
          <div
            class="ace_layer ace_cursor-layer ace_hidden-cursors"
          >
            <div
              class="ace_cursor"
            />
          </div>
        </div>
      </div>
      <div
        class="ace_scrollbar ace_scrollbar-v"
        style="display: none; width: 20px;"
      >
        <div
          class="ace_scrollbar-inner"
          style="width: 20px;"
        >
           
        </div>
      </div>
      <div
        class="ace_scrollbar ace_scrollbar-h"
        style="display: none; height: 20px;"
      >
        <div
          class="ace_scrollbar-inner"
          style="height: 20px;"
        >
           
        </div>
      </div>
      <div
        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
      >
        <div
          style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
        />
        <div
          style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
        >
          XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        </div>
      </div>
    </div>
  </div>
</body>

nmorasb commented 2 years ago

I also have the same issue

kurapov commented 2 years ago

The same issue. Any updates? Workarounds?

securingsincity / react-ace

React test library cannot get the string value #1289

Reference