简介
@popperjs/test-utils 是一个基于 Jest 的 @popperjs/core 测试工具，它提供了一个方便且易于使用的测试套件，可以快速测试 Popper.js 或任何其他使用 Popper.js 的库。
安装
安装 @popperjs/test-utils：
npm install @popperjs/test-utils --save-dev
安装 Jest（如果尚未安装）：
npm install jest --save-dev
使用
初始化测试套件
首先，您需要初始化一个测试套件。在您的测试文件（例如 test.js）中，添加以下代码：
-- -------------------- ---- ------- ----- - ------------------- ---------- - - -------------------------------- ----- -------------- - --- ----- -------------- - -------- - --- -- - ----- ------ - ------------------------------------- ----- --------- - ------------------------------------- ----------------------------------------- -------------------------------------------- ----- -------- - -------------------------- ---------- - ------------------ ----------- --- ------ --------- -- ----------------------- ----------------展开代码
这将创建一个测试套件，用来测试 Popper.js 是否正常运行。
编写测试用例
您可以使用 test 函数来编写测试用例。测试函数应该返回 Promise，以通知 Jest 运行成功或失败。
例如，以下测试用例检查是否正确设置了 Popper.js 的位置：
test('placement', async () => { const instance = createInstance({ placement: 'bottom-start', }); await instance.update(); expect(instance.popper.style.top).toBe('10px'); expect(instance.popper.style.left).toBe('0px'); });
使用注入的 Popper 对象
如果您使用指定的 Popper，可以在创建测试套件时将其注入，随后在测试用例内使用它。
-- -------------------- ---- ------- ----- - ------------------- ---------- - - -------------------------------- ----- - ------------ - - -------------------------- ----- -------------- - --- ----- -------------- - -------- - --- ------ - ------------- -- - ----- --------- - ------------------------------------- -------------------------------------------- ----- -------- - -------------------- ---------- ------ -- - ------------------ ----------- --- ------ --------- -- --------------------- ---- ------ -------- ----------------展开代码
访问 Popper 元素
Popper.js 实例中的元素可以使用以下方法访问：
const instance = createInstance(); expect(instance.getPopperElement()).toBeInstanceOf(HTMLElement); expect(instance.getReferenceElement()).toBeInstanceOf(HTMLElement);
您还可以使用以下代码访问 Popper.js 实例：
const reference = window.document.createElement('div'); const popper = window.document.createElement('div'); const instance = createPopperTester(popper, reference); expect(instance.getInstance()).toBeInstanceOf(Popper);
执行其他操作
您可以使用 instance 对象执行多种其他操作，例如更新 Popper.js，获取样式和事件，模拟事件等。
-- -------------------- ---- ------- ----------------- ------- ----- -- -- - ----- -------- - ---------------- -------- ---- --- -------------------------------------------------------------- --------------------- -------- ----- --- ----- ------------------ --------------------------------------------------------------- ---展开代码
总结
@popperjs/test-utils 是基于 Jest 的 Popper.js 测试工具，提供快速测试 Popper.js 或使用 Popper.js 的库的功能。本文介绍了如何安装、初始化测试套件、编写测试用例以及执行其他操作。通过使用这个工具，您可以更轻松地测试 Popper.js 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/169364
