Question

在React组件内部有两个html元素，例如：

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

和

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

它们都用红色文本“ Hello World”给h5-（＃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>

有帮助吗？你能建议我一些反应包吗？

提前谢谢

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，特别是structural testing

注意：结构测试的工作方式是渲染您提供的JSX / Component，然后存储渲染的DOM。然后将此DOM与更改后生成的DOM相匹配。这具有以下缺点。

如果单击后或延迟一段时间（例如，由于需要某些获取请求来完成）而呈现了页面的某些部分，则这些内容将不会得到测试。为了解决这个问题，您将需要模拟这些API调用并发送一些预定义的示例数据。
如果您的DOM中存在任何随机性元素（例如，如果您正在绘制日期，或随机生成的UUID），则每次测试都会失败。为了解决这个问题，您可能必须模拟一切可能更改的内容，例如math.random()

比较React.js中的两个html元素

2 个答案: