后端开发教程 - Java、Spring Boot 实战 - msg200.com
了解 React 测试库
谁会不喜欢React Testing Library？如果你为 React 编写测试，你可能经常使用它。人们甚至喜欢称它为Enzyme的继承者，但 React Testing Library 和 Enzyme 完全不同。虽然 React Testing Library 已经赋予了你超强的能力，但理解它的原理将帮助你为 React UI 编写更好的测试。我保证你一定会从这篇短文中有所收获。
理念与原则
用户是 React 测试库的核心原则。该库所做的一切都围绕着用户。
良好的 UI 测试能让您确信组件能够为用户正常工作。它们会验证组件的外观和行为是否正确。至于幕后的具体实现方式，对用户来说并不重要。正因如此，良好的 UI 测试永远不应该依赖于 UI 组件的实现细节。
如果你的测试依赖于某个组件的实现方式，那么当你重构代码库时，这些测试用例就会失效。这会使你的测试极难维护，并拖慢你的开发速度。你肯定不希望出现这种情况。
记住——你的 UI 测试应该验证最终结果，而不是内部实现。这是 React Testing Library 背后的核心思想。
您的测试越类似于您的软件的使用方式，它们就能给您越多的信心。
—testing-library.com
Enzyme 允许你访问组件的状态、props、children 等。React 测试库不提供这些功能。它直接提供 DOM，因为用户最终会用到 DOM。如果你的测试足够好，你就无需显式访问组件的状态或 props 来进行断言。直接使用 DOM 就行了。
将backgroundColorprop 传递给<Button />? 会将按钮渲染到 DOM 中，并验证渲染按钮的背景颜色。不要访问组件的 props 并进行断言。进行视觉断言。
it('should apply the background color properly', async () => {
const bgColor = '#ccc222';
const text= 'hi';
const { getByText} = render(<Button backgroundColor={bgColor} text={text} />);
const button = getByText(text);
expect(button.style.backgroundColor).toEqual(bgColor);
})
想要测试组件的加载状态吗？那就对组件加载时的外观进行断言。不要验证loading组件的状态是否为true。
it('should render correctly while loading', async () => {
const src= '#';
const altText = 'hi';
const { getByAltText } = render(<Image src={src} alt={altText} />);
const image = getByAltText(altText);
expect(image.src).toEqual(loadingSrc);
// Note: you need to write fireEvent.load(image) in order to complete loading the image.
// Since we have not done that, the image is still 'loading'.
})
优势
React Testing Library 的灵感源于其对卓越用户体验的热爱。如果您使用 React Testing Library 编写了优秀的测试，那么您可以放心，交付给用户的体验将符合您的预期。它能在您投入生产时给予您急需的信心，而且我告诉您，这种感觉非常棒。任何能减轻您压力的东西都是一种福气，而 React Testing Library 绝对就是这样的。
那么开发者体验如何？React Testing Library 在这方面也非常出色。它的语法非常直观。你无需了解任何复杂的知识即可轻松上手。诸如 、 等查询方法getByText允许getByAltText开发者像真正的终端用户一样查询 DOM。这一点非常重要。
这个库为开发者提供的另一个巨大好处是，只要你只重构组件的实现（而不是功能），你的测试就不会中断。我可能有点重复，但这会为你节省大量时间和精力。而且，当你重构代码后没有任何问题时，你一定会爱上它。相信我。
哦，对了，文档也完全符合开发者对库的所有要求。简直完美。
结论
总而言之，React 测试库可以帮助您交付针对最终用户优化的 UI。这是任何开发人员/团队都会拒绝的。
我在这里列出了使用该库的很多优点，但如果您认为有任何缺点，请在下方评论。让我们讨论一下！
如果您从本文中有所收获，请在 DEV 和Twitter上关注我。我会尽量在 Twitter 内容中平衡知识点和垃圾内容。我保证您不会失望！