如何使用 react-test-renderer 或其他替代库渲染纯 html 代码？

Question

react-test-renderer 到 JSON 函数 returns 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>

codesandbox: 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

如何使用 react-test-renderer 或其他替代库渲染纯 html 代码？

How to render plain html code with react-test-renderer or other alternative libs?

javascript

reactjs

jestjs

react-test-renderer

snapshot-testing