我应该测试所有组件道具吗？

Question

例如，我有这样的组件：

const Button = ({borderColor, children}) => {
  return (
    <button style={{borderColor: borderColor ? `border: 1px solid ${borderColor}` : null}}>
      {children}
    </button>
  )
}

该组件的主要目标是：

进一步传递children道具
处理自定义边框颜色

与 children - 这是通常的情况。但是 css 我不知道，我是否应该测试它。
一些关于 RTL 的文章告诉我们不必测试 css。但在我看来，在这种情况下，我们的 css 道具对最终用户很重要（例如，其他一些将使用此组件的开发人员）和此 css 应该进行测试。正确的方法是什么？

Answer 1

可能会误读您的问题，但也许您问这个问题只是因为 "is this string a valid CSS color" 感觉测试是一个愚蠢或烦人的细节，即使您知道不编写测试会给其他人带来的问题将使用此组件的开发人员。

测试这个东西很傻吗？我同意有条件。

在我看来，使用 Typescript 强制限制字符串可以采用的形式可以更好地解决这个问题。这里有一些想法：

更好的测试可能是功能性问题，例如“此组件是否真的创建了一个按钮，用我们要求的 1px 纯色边框颜色包裹子项？

在那种情况下，是的，我会为该功能编写一个测试。

Answer 2

测试 React 应用程序应该是关于行为的。也就是说，应用程序在最终用户控制时的行为方式。这是the guiding principles of react-testing-library之一，我同意。

因此，根据此声明，您可以做两件不同的事情：

测试导致边框颜色改变的完整行为。即Integration Testing
类型检查组件以确保您不会为 borderColor 传递不正确的值。即Unit Testing

在我看来对于这个用例，测试任何其他东西都将测试 React 本身，或者正如另一个答案所指出的，您能够编写正确的 css细绳。后者无论如何都可以亲眼所见，不太可能改变

类型检查示例

在不了解您的完整用例的情况下很难为您提供集成测试示例。至于类型检查，你有两个选择：

使用PropTypes
切换到 Typescript

注意：这些选项并不等同。 Proptypes 是一个库，它在 runtime 时使用开发构建检查 props。它们在生产构建中被忽略。另一方面，Typescript 是一个完整的编译器，在 build 期间运行。正确的解决方案取决于您的设置

有 PropTypes

您可以使用 PropTypes.oneOf :


Button.propTypes  = {
 // Edit as needed
 borderColor: PropTypes.oneOf(["red", ,blue"])
}

打字稿


interface ButtonProps {
 borderColor: "blue" | "red";
}

const Button: React.FunctionComponent<ButtonProps> = ({borderColor, children}) => {...}

我应该测试所有组件道具吗？

Should I test all component props?

reactjs

react-testing-library

类型检查示例

有 PropTypes

打字稿