CODEWITHSUNDEEP
reactjsdom
JozeV
JozeV

Reputation: 696

Compare two html element in React.js

Inside React component there are two html elements, for example:

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

and

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

They both give the h5 with red text "Hello World" - (#ff0000 is the hex value of color red).

Now I have to compare them, to see if their output is the same.

EDIT: Also, it is not just about style comparison, but full html output, for example this two should return true when compared:

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

but these two should return false because their tags are different:

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

Any help? Can you suggest me some react package for that?

Thx in advance

Upvotes: 0

Views: 5784

Answers (2)

ManavM
ManavM

Reputation: 3108

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()

Upvotes: 1

Tholle
Tholle

Reputation: 112897

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>

Upvotes: 2

Related Questions