Как визуализировать простой html-код с помощью react-test-renderer или другими альтернативными библиотеками?

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

Источник

1 ответ

Я понял это с помощью estus .

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

render(<Test1 />).baseElement
Источник
Другие вопросы по тегам