Compare two html element in React.js

You can put a ref on each element you are interested in and use getComputedStyle on all the refs and compare the style properties you are interested in.

Example

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>

If you're trying to test if there is a visual change based on any change you made in your codebase, there is a very handly tool called jest-image-snapshot.

Note that this uses pixelmatch to find differences in the rendered components. Which might make your tests a tad heavy if you have a lot of tests.

If you want to test if the renderable html has any changes then you can use something called storybook, especially the structural testing

NOTE: The way structural testing works is by rendering the JSX/Component you give it and then storing the rendered DOM. This DOM is then matched against the DOM generated after changes. This has the following drawbacks.

• If you have some part of the page that is rendered after a click, or after some delay (due to needing some fetch requests to finish for example), then those things will not get tested. To solve this you will need to mock these API calls and send some predefined sample data.

• Your tests will fail every time if there is any element of randomness in your DOM (for exmaple, if you are rendering dates, or a randomly generated UUID). In order to solve this you might have to mock everything that might change like math.random()