Сравните два html-элемента в React.js

Question

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

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

и

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

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

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

EDIT: Кроме того, речь идет не только о сравнении стилей, но и о полном выводе 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>

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

Спасибо заранее

Answer 1

Вы можете поставить 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>

Answer 2

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

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

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

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

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

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