Блог

Внутри компонента React есть два html-элемента, например:

 <h5 style={{color:'red'}}>Hello World</h5>
  

и

 <h5 style={{color:'#ff0000'}}>Hello World</h5>
  

Они оба выдают h5 с красным текстом «Hello World» — (#ff0000 — это шестнадцатеричное значение красного цвета).

Теперь я должен сравнить их, чтобы увидеть, совпадают ли их выходные данные.

РЕДАКТИРОВАТЬ: Кроме того, речь идет не только о сравнении стилей, но и о полном выводе html, например, эти два должны возвращать true при сравнении:

 <h5 style={{color:'red'}}>Hello World</h5>
<h5 style={{color:'#ff0000'}}>Hello World</h5>
  

но эти два должны возвращать false, потому что их теги разные:

 <h5 style={{color:'red'}}>Hello World</h5>
<h4 style={{color:'red'}}>Hello World</h4>
  

Любая помощь?
Можете ли вы предложить мне какой-нибудь пакет react для этого?

Заранее спасибо

Вы можете поставить ref на каждый интересующий вас элемент и использовать getComputedStyle во всех ссылках, а также сравнить интересующие вас свойства стиля.

Пример

 class App extends React.Component {
  ref1 = React.createRef();
  ref2 = React.createRef();

  componentDidMount() {
    const ref1Styles = getComputedStyle(this.ref1.current);
    const ref2Styles = getComputedStyle(this.ref2.current);

    console.log(
      ref1Styles.color === ref2Styles.color
        ? "Colors are the same!"
        : "Colors are not the same."
    );
  }

  render() {
    return (
      <div>
        <h5 ref={this.ref1} style={{ color: "red" }}>
          Hello World
        </h5>
        <h5 ref={this.ref2} style={{ color: "#ff0000" }}>
          Hello World
        </h5>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>  

Если вы пытаетесь проверить, есть ли визуальные изменения на основе каких-либо изменений, которые вы внесли в свою кодовую базу, есть очень удобный инструмент под названием jest-image-snapshot.

Обратите внимание, что при этом используется сопоставление пикселей для поиска различий в отображаемых компонентах. Что может сделать ваши тесты немного тяжелыми, если у вас много тестов.

Если вы хотите проверить, есть ли в отображаемом html какие-либо изменения, вы можете использовать что-то под названием storybook, особенно структурное тестирование

ПРИМЕЧАНИЕ: Способ, которым работает структурное тестирование, заключается в рендеринге JSX / компонента, который вы ему предоставляете, а затем в сохранении отрисованного DOM. Затем этот DOM сопоставляется с DOM, сгенерированным после изменений. Это имеет следующие недостатки.

• Если у вас есть какая-то часть страницы, которая отображается после щелчка мыши или после некоторой задержки (например, из-за необходимости завершения некоторых запросов на выборку), то эти вещи не будут протестированы. Чтобы решить эту проблему, вам нужно будет смоделировать эти вызовы API и отправить некоторые предопределенные образцы данных.

• Ваши тесты будут завершаться неудачей каждый раз, если в вашем DOM есть какой-либо элемент случайности (например, если вы отображаете даты или случайно сгенерированный UUID). Чтобы решить эту проблему, вам, возможно, придется смоделировать все, что может измениться, например math.random()