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

【问题标题】：How to render plain html code with react-test-renderer or other alternative libs?如何使用 react-test-renderer 或其他替代库呈现纯 html 代码？
【发布时间】：2021-03-22 18:34:49
【问题描述】：

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

【问题讨论】：

这超出了测试渲染器的范围。使用（React）测试库。
@EstusFlask 知道了，谢谢！

标签： javascript reactjs jestjs react-test-renderer snapshot-testing

【解决方案1】：

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

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

render(<Test1 />).baseElement

【讨论】：