javascript - 如何在 react.js 中获取代码输入作为组件

Question

我正在创建一个具有代码编辑器的网页，用户可以在其中编写 react.js 代码并使用用户输入的代码在终端上运行测试脚本。我有一个使用@testing-library/react. 我想从当前只是一个字符串的文本编辑器中获取代码输入，并将其呈现为测试文件上的一个组件，以便我可以使用用户的代码输入运行测试。

测试文件看起来像这样。

import { render } from "@testing-library/react";
import ToggleMessage from "./ToggleMessage";
import "@testing-library/jest-dom/extend-expect";

test("Render ToggleMessage component and check if it has text:'Want to buy a new car?'", () => {

  const { getByText } = render(<ToggleMessage />); //<= Here I want to render codeInput as component.

  const linkElement = getByText(/Want to buy a new car?/i);
  expect(linkElement).toBeInTheDocument();
});

这是 ToggleMessage.js 从文本编辑器获取 codeInput 作为道具的地方。

import React, { useState, useRef } from "react";

function ToggleMessage({ codeInput }) {

  const [display, setDisplay] = useState("none");
  const toggle = () => {
    display === "none" ? setDisplay("block") : setDisplay("none");
  };

  return (
    <div>
      <a href="#" onClick={toggle}>
        Want to buy a new car?
      </a>
      <p style={{ display }}>Call [phone] now!</p>
    </div>
  );
}

export default ToggleMessage;

有什么方法可以将 codeInput 道具传递给测试文件并将其呈现为组件？任何建议或帮助将不胜感激。谢谢！

标签： javascriptreactjs