Question

是否应该测试没有逻辑的组件？我的组件仅从上面的文件中呈现 jsx 和其他一些组件。例子如下：

import React from 'react';
import SubscriptionForm from './SubscriptionForm';
import './style.scss';
import { FiPhone, FiMail } from 'react-icons/fi';
import { FaFacebook, FaTwitterSquare, FaLinkedin } from 'react-icons/fa';

export default function Footer() {
  return (
    <div className="footer-container">
      <div className="footer-container__contact">
        <h2>Contact us</h2>
        <p>
          <FiMail /> test@test.com
        </p>
        <p>
          <FiPhone /> +31 6 - 1222 - 123
        </p>
      </div>
      <div className="footer-container__subscription-form">
        <h2>Subscribe and never miss a release</h2>
        <SubscriptionForm />
      </div>
      <div className="footer-container__social">
        <h2>Follow us</h2>
        <div className="footer-container__social-icons">
          <FaFacebook className="footer-container__social-icon" />
          <FaTwitterSquare className="footer-container__social-icon" />
          <FaLinkedin className="footer-container__social-icon" />
        </div>
      </div>
    </div>
  );
}

您是否应该测试此类组件。我只能测试它是否呈现，对吗？我听说过快照测试，但我不确定这是否是我应该使用它的情况。

Answer 1

我不认为有一个正确的答案，但始终从用户的角度考虑测试的价值。

您是否打算更改此设置以支持翻译？因此通过快照或仅检查页面上的标签将是一个很好的测试。快照测试对您的团队有意义吗？或者他们会在出现错误时更新？

但从我的角度（和用户）来看，最重要的是样式，CSS 更改将能够打破该组件的样式，因此您可以考虑支持仅关注整个页面的视觉测试涵盖这些场景，需要真实的屏幕截图来比较图像。

测试没有逻辑的组件

1 个答案: