测试一个React应用程序应该是关于行为的。也就是说，当应用程序被最终用户控制时，它是如何表现的。这是the guiding principles of react-testing-library的一个问题，我也同意。
因此，按照这句话，你可以做两件不同的事情：

• 测试导致边框颜色更改的完整行为，即Integration Testing
• 键入check组件以确保不会为borderColor传递错误的值，即Unit Testing
• 在我看来 * 在这个用例中，测试任何其他东西都是测试React本身，或者，正如另一个答案所指出的，测试你编写正确的css字符串的能力。后者可以用你自己的眼睛测试，而且不太可能改变

类型检查示例

给你一个集成测试的例子是很难做到的，如果你不知道完整的用例。至于类型检查，你有两个选择：

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

带属性类型

您可以使用PropTypes.oneOf：

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

typescript

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

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

可能误解了您的问题，但也许您这样问只是因为"is this string a valid CSS color"感觉像是一个愚蠢或烦人的测试细节，即使您意识到不编写测试会给其他将使用此组件的开发人员带来问题。
这是一个愚蠢的事情来测试？我同意 * 有条件 *。
IMO这是更好的解决方法，使用Typescript来强制字符串可以采取什么形式的约束。TypeScript - is it possible validate string types based on pattern matching or even length?
更好的测试方法可能是功能性问题，如“这个组件是否真的创建了一个按钮，用我们要求的1px纯色borderColor Package 子对象？”
在这种情况下，是的，我会为该功能编写一个测试。

您可以使用可视化回归测试工具（如Chromatic）来帮助测试基于 prop 的可视化更改。