导入
可以使用以下任何一种方法导入 jud-vdom-tester 包
- 使用 npm 安装依赖包
npm install jud-vdom-tester --save-dev
- 导入以后直接使用
import JudVDOMTester from 'jud-vdom-tester';
快速开始
VDOM 结构
假设我们有以下页面的 VDOM 结构
-- -------------------- ---- -------
---- ----------------
--- ------------------ --- ---- -----------
--- ------------
------ --------------------
------ --------------------
------ --------------------
-----
---- ----------------
-- ----------------------------------
------- ------------- ---------------------
------
------使用 JudVDOMTester 创建实例
我们需要在测试对象上创建 JudVDOMTester 类的实例。
const tester = new JudVDOMTester('.wrapper');操作 DOM
我们可以使用上面创建的 tester 实例操作 DOM。
-- -------------------- ---- ------- -- -- ------- ----- ------- - ---------------------------- -- -- ------- ---------------- -- -- ------- ---- ----- --------- - ---------------------------------- --------- -- ------- ----- ----------- - -------------------------------------- -- ------ ---- ----- --------- - ----------------------------------
断言
为了使用 jud-vdom-tester 包，我们需要以下的断言库之一：
以下是在使用 Jest 的情况下的示例：
-- -------------------- ---- ------- ------ ------------- ---- ------------------ ------ - ------ - ---- ------- ----- ------ - --- -------------------------- ---------- ---- ----- -------- -- -- - ------------------------------------- ---------------------------------------------------------------------- ---
使用 DeepEqual 比较
JudVDOMTester 提供了一个辅助函数，用于测试两个 VDOM 树是否相同。
-- -------------------- ---- -------
------ - --------- - ---- ---------
------ ------------- ---- ------------------
------------------- -- -- -
----- ------ - --- --------------------------
----- ------------ - -----------------
----- ------------ - ------------------------
----------- ----- ----- -------- ------ -- -- -
----- ------- - ---------------------------
------------------ --------------
---
----------- ----- ----- -------- ------ -- -- -
----- ------- - ----------------------------------
--------------------------------------------
---
---为你的测试框架增加断言
上面提到的辅助函数可以很容易地扩展到其他测试框架上，下面是一个使用 Jest 自定义断言的示例：
-- -------------------- ---- -------
------ ------------- ---- ------------------
----- ------ - --- --------------------------
---------------
--------------------- --------- -
----- ---- - ---------------------------- ----------
-- ------ -
------ -
-------- -- -- ------ --- -------
----- -----
--
-
------ -
-------- -- -- ------ --- --- -------
----- ------
--
--
---
---------- ---- ------ -- -- -
----- ------- - ---------------------------
------------------------------------------
---结论
使用 JudVDOMTester 可以轻松地测试你的 VDOM。它可以轻松扩展到不同的测试框架，并提供了丰富的 API 以轻松测试 DOM 元素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558ca81e8991b448d612b