介绍
在前端开发中，我们通常会写一些单元测试来确保代码在不同场景下的正确性。在进行单元测试时，我们经常需要对 DOM 对象做出断言。而 @testing-library/jest-dom 是在 Jest 中使用的 DOM 引用断言库。
@testing-library/jest-dom 提供了一些 API 来简化 DOM 断言的编写，让我们能够更加专注于测试场景本身。
安装
通过 npm 安装 @testing-library/jest-dom。
npm install -D @testing-library/jest-dom
用法
引入
在测试文件中引入 @testing-library/jest-dom。
import "@testing-library/jest-dom";
链式 API
@testing-library/jest-dom 提供了一系列的链式 API 用于进行 DOM 断言的编写。例如：
-- -------------------- ---- ------- ------------- -------- ----- ----- ------ ------- -- -- - ----- -------- - -------------------------- - ----- ---- --- ------ --- ----- --------- - ------------------------------ ------------------------------------------------ -------------------------- -------------------------------------------- ---展开代码
默认情况下，所有方法都是 case-insensitive 的。如果要强制执行大小写，则可以添加 I 标志。
expect(el).toHaveTextContent("HELLO"); // 不区分大小写 expect(el).toHaveTextContent(/hello/i); // 不区分大小写 expect(el).toHaveTextContent(/^hello$/); // 区分大小写 expect(el).toHaveTextContent(/^hello$/i); // 不区分大小写
匹配器
匹配器是可以对引用进行比较的函数。以下列出了一些常见的匹配器。
expect(el).toBeVisible(): 断言元素是否可见expect(el).not.toBeVisible(): 断言元素是否不可见expect(el).toBeEnabled(): 断言元素是否启用expect(el).not.toBeEnabled(): 断言元素是否禁用expect(el).toBeChecked(): 断言元素是否被选中expect(el).not.toBeChecked(): 断言元素是否没有被选中expect(el).toBeEmpty(): 断言元素是否为空expect(el).not.toBeEmpty(): 断言元素是否不为空expect(el).toBeInvalid(): 断言元素是否无效expect(el).not.toBeInvalid(): 断言元素是否有效expect(el).toBeRequired(): 断言元素是否需要输入expect(el).not.toBeRequired(): 断言元素是否不需要输入expect(el).toBeInTheDocument(): 断言元素是否在 document 中expect(el).not.toBeInTheDocument(): 断言元素是否不在 document 中expect(el).toBeInstanceOf(HTMLInputElement): 断言元素是否是 HTMLInputElement 的实例expect(el).toHaveAttribute("id", "my-id"): 断言元素是否具有特定属性expect(el).not.toHaveAttribute("disabled"): 断言元素是否没有特定属性expect(el).toHaveClass("my-class"): 断言元素是否具有特定类名expect(el).not.toHaveClass("is-active"): 断言元素是否没有特定类名expect(el).toHaveStyle("color: red"): 断言元素是否具有特定样式expect(el).not.toHaveStyle("padding: 10px"): 断言元素是否没有特定样式expect(el).toHaveValue("my value"): 断言元素的值是否与特定值相等expect(el).not.toHaveValue("my value"): 断言元素的值是否与特定值不相等
Tips
- 不要在测试中使用
document,window等全局变量，而是使用jsdom提供的全局变量。 - 使用
jest-extend可以轻松地添加自定义的断言方法。
示例
一个简单的 Vue.js 组件测试
下面是一个简单的 Vue.js 组件测试示例。
-- -------------------- ---- ------- ---------- ----- ------- -------------------- --- ------------- ----- ------------------------ ------- --------- ------ ----------- -------- ------ ------- - ------ - ------ - -------- --- -- -- -------- - --------- - ------------ - ---- ---- ------- -- -- -- ---------展开代码
-- -------------------- ---- ------- ------ ---------------------------- ------ - ---------- ------ - ---- ----------------------- ------ - -------------- - ---- ------------------ ------ --- ---- ----------------------- ----- -------- - ----------------- ------------- -------- ----- ----- ------ ------- ----- -- -- - ----- ------- - ---------- - -------- --- ----- -------- - -------------------------- - ----- ---- --- ------ --- ----- --------- - ------------------------------ ------------------------------------------------ ----- -------------------------- -------------------------------------------- ---展开代码
总结
性能优化是前端开发常常要面临的问题，而追求良好的用户体验则更加吸引人。为了保证代码的质量，我们需要编写并执行各种类型的自动化测试。@testing-library/jest-dom 提供了一组便于使用的 DOM 断言 API，可以在测试中简化我们的工作，这带来了进一步的自动化程度和代码质量的提高。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/168168
