前言
在前端开发中，我们经常需要使用一些弹出框或者下拉框等外观效果。而实现这些效果时，我们通常会选择使用一些第三方库，如 Bootstrap、Popper.js 等等。即便是这些第三方库，我们也需要进行一些测试，以保证它们能够正常使用。本文将介绍一个 npm 包 —— test-popperjs，以指导读者如何进行 Popper.js 测试，并希望能够对读者有所帮助。
正文
- 安装 test-popperjs
首先，我们需要在开发环境中安装 test-popperjs。打开命令行工具，输入以下命令：
npm i test-popperjs -D
注意，因为 test-popperjs 仅用于开发环境，所以我们在安装时需要使用 -D 参数。
- 配置 test-popperjs
安装好 test-popperjs 后，我们需要进行一些配置。在 package.json 文件中，我们添加以下内容：
"scripts": {
"test": "test-popperjs"
}此外，我们还需要为 Popper.js 创建一个元素，让其显示在页面中。我们可以在 index.html 文件中添加以下内容：
-- -------------------- ---- -------
--------- -----
------
------
----------------------------
-------
------
---- -------------------
------- ----------------------
-------
-------最后，我们可以在 app.js 文件中编写测试代码了。以下代码会在我们创建的元素上创建一个 Popper.js：
const element = document.querySelector('#element');
const popover = new Popper(element, {
placement: 'right',
content: 'Hello, World!',
});
popover.update();- 运行测试
当我们完成以上步骤后，便可以运行测试了。在命令行中输入以下命令：
npm run test
test-popperjs 会为我们生成一个截图，并将其与预设的图片进行比较。如果测试通过，则控制台会输出测试通过的信息。否则，test-popperjs 会提示我们测试失败，并给出失败原因。
总结
在本文中，我们简单介绍了 npm 包 test-popperjs 的安装和配置过程，并为读者提供了一个示例。我们希望通过这篇文章，读者能够更好地了解 Popper.js 的测试流程，并更好地保证开发质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c5e81e8991b448ebdf9