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

问题描述

>>> df3 = df2.groupby(['EQ2']).agg({('A','mean') : ['mean','std']}).reset_index() >>> df3 EQ2 A mean mean std 0 b1 -0.055529 1.159608 的 JSON 函数返回 React 结构而不是纯 html 代码。

例如：

react-test-renderer

输出：

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>
  );
}

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

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

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

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

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

解决方法

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

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

render(<Test1 />).baseElement