什么是 @testing-library/react
@testing-library/react 是一个用于测试 React 组件的 JavaScript 库。它的设计思想是基于用户使用组件的方式进行测试，而不是测试组件实现的细节。它提供了一系列 API，可以帮助开发人员更容易地编写和维护可靠的测试用例。
安装
使用 npm 安装 @testing-library/react：
npm install --save-dev @testing-library/react
示例代码
以下是一个测试 React 组件的示例代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- --------- - ---- ------------------------- ------ ------ ---- ----------- ---------------- ----------- -- -- - ------------ ------ ------ ----------- -- -- - ----- - --------- - - -------------------- ------------- ----------------------- -------------------------- --- ------------ ---- ------- -------- ---- ------ -- --------- -- -- - ----- ------- - ---------- ----- - --------- - - -------------- ----------------------- ------------- -------------------------------- ------ ----------------------------------------- --- ---展开代码
在这个示例中，我们测试了一个 Button 组件。我们使用 render 函数渲染了这个组件，并使用 getByText 函数找到文本为 "Click me" 的元素。我们使用 toBeInTheDocument 函数来验证这个元素是否存在于文档中。
在第二个测试中，我们测试了点击按钮，并验证了 onClick 函数是否被调用了一次。我们使用 jest.fn 函数创建了一个模拟函数，用于验证这个函数被正确调用。
除了这些示例，@testing-library/react 还提供了许多其他的测试方法和工具，以测试 React 组件的各个方面，如组件的状态、生命周期等等。
优点
相比较于传统的测试方式，@testing-library/react 有以下特点：
- 面向用户：它的设计思想是基于用户使用组件的方式进行测试，而不是测试组件实现的细节。
- 更容易的维护：由于是面向用户的测试方式，因此只要用户使用方式不变，那么测试用例就不需要改变。
- 更好的覆盖率：它提供的工具和方法可以更容易地测试组件的各个方面，从而提高了测试覆盖率。
- 开发效率高：由于这种测试方式更加贴近用户，因此可以更快速地发现和修复问题，从而提高了开发效率。
结论
@testing-library/react 是一个极具价值的 JavaScript 库，它可以帮助开发人员更容易地编写和维护可靠的测试用例。它的设计思想是基于用户使用组件的方式进行测试，而不是测试组件实现的细节。这使得它更容易维护，更容易覆盖测试用例，从而提高了开发效率。如果你是一个使用 React 的前端开发人员，那么一定要尝试一下 @testing-library/react！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/168206
