javascript - 如何使用 react-test-renderer 或其他替代库呈现纯 html 代码？

Question

react-test-renderer's to JSON 函数返回 React 结构而不是纯 html 代码。

例如：

import "./styles.css";
import renderer from 'react-test-renderer'

const Test1 = () => <span>Hello World!</span>
const Test2 = () => <span dangerouslySetInnerHTML={{ __html: 'Hello World!' }} />

export default function App() {
  return (
    <div className="App">
      <ul>
        <li key='test1'>{JSON.stringify(renderer.create(<Test1 />).toJSON())}</li>
        <li key='test2'>{JSON.stringify(renderer.create(<Test2 />).toJSON())}</li>
      </ul>
    </div>
  );
}

输出：

{"type":"span","props":{},"children":["Hello World!"]}
{"type":"span","props":{"dangerouslySetInnerHTML":{"__html":"Hello World!"}},"children":null}

因此，如果我将代码从 Test1 更改为 Test2，快照测试就会失败。

但实际上它们在浏览器中生成相同的 html 结构。

我想知道是否有一种方法可以呈现纯 html 代码而不是反应结构。例如：

<span>Hello World!</span>

代码沙盒： https ://codesandbox.io/s/brave-curie-lnt6y?file=/ src/App.js:0-472

Answer 1

我在Estus Flask的帮助下想通了。

import { render } from '@testing-library/react'

render(<Test1 />).baseElement