npm 包 @testing-library/preact 使用教程
在前端开发中，测试是至关重要的一部分。而使用 testing library 可以方便地进行 UI 测试。@testing-library/preact 是一个在 Preact 项目中使用的测试库，它可以帮助我们更加方便地写出高质量的测试用例。
安装
在使用该库之前，我们需要先将其作为依赖安装在我们的项目中：
npm install --save-dev @testing-library/preact
在测试中使用
在测试中使用该库时，我们需要先导入库中的一些方法。以下是一个使用该库进行测试的示例：
------ - ------- ------ - ---- ------------------------- ------ --- ---- ------- ------------- ----- ------ ------ -- -- - ----------- --- ----- ----------- - ----------------------- --------- --------------------------------------- --
在这个测试中，我们使用了 render 和 screen 方法。render 用于渲染组件，而 screen 则用于找到元素。在这个例子中，我们渲染了 App 组件，然后使用 screen.getByText 方法来查找包含“learn preact”文本的元素。
当该元素被找到时，我们使用内置的 expect 函数来断言该元素已经被渲染到了页面上。
更多方法
除了 getByText 之外，该库中还有很多其他的工具方法，可以让我们更加方便地进行测试。以下是该库提供的一些方法：
- getByLabelText - 根据 label 文本获取相关的 input 元素
- getByRole - 根据元素类型、角色、名称等获取元素
- getByTestId - 根据 data-testid 属性获取元素
- getByTitle - 根据 title 属性获取元素
- queryByText - 查询是否存在给定文本的元素
- queryByRole - 查询是否存在给定角色和名称的元素
- queryByTestId - 查询是否存在给定的 data-testid 属性的元素
总结
@testing-library/preact 是一个非常实用的库，它可以帮助我们更加方便地进行 Preact 项目的 UI 测试。在测试中，我们可以使用该库提供的方法来查找页面中的元素，然后进行断言。这样，在代码的开发过程中，我们可以更加自信地编写代码，而不用担心其产生的副作用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/testing-the-library-preact