Jest 是一个流行的 JavaScript 测试框架，可以帮助开发人员写出更可靠、可维护的代码。在前端开发中，许多组件需要与用户进行交互，因此模拟用户操作对于进行自动化测试非常重要。在本文中，我们将介绍如何在 Jest 测试中模仿用户操作。
安装 Jest
在开始之前，我们需要先安装 Jest。可以使用以下命令进行安装：
npm install --save-dev jest
如果您使用的是 Yarn，则可以运行：
yarn add --dev jest
模拟用户操作
在测试中，我们需要模拟用户在浏览器中的操作，例如点击按钮或输入文本。为了实现这一点，我们可以使用 jsdom，这是一个模拟浏览器环境的库。
首先，我们需要在测试文件中初始化 jsdom，以便在测试中使用它。
const { JSDOM } = require("jsdom");
const { window } = new JSDOM(`...`);
global.window = window;
global.document = window.document;接下来，我们可以通过创建事件和将其分派到文档来模拟用户操作。以下是一个点击按钮的示例代码：
const button = document.createElement("button");
button.addEventListener("click", () => {
console.log("Button clicked!");
});
button.click();在这个示例中，我们创建了一个按钮，添加了一个点击事件监听器，当点击按钮时，会在控制台中打印一条消息。
同样地，我们可以创建一个输入框，并触发一个输入事件：
const input = document.createElement("input");
input.addEventListener("input", () => {
console.log(input.value);
});
input.value = "Hello, world!";
input.dispatchEvent(new Event("input", { bubbles: true }));在这个示例中，我们创建了一个输入框，添加了一个输入事件监听器，并将输入框的值设置为“Hello, world!”，然后触发了一个输入事件，并在控制台中打印了输入框的值。
使用 Jest 进行测试
现在，我们已经了解了如何使用 jsdom 模拟用户操作。接下来，我们将使用 Jest 进行测试。
假设我们有一个组件，它包含一个按钮和一个文本框。当用户单击按钮时，它会将输入框的值添加到一个列表中。以下是组件代码：
-- -------------------- ---- -------
----- --- -
------------- -
---------- - ---
----- ------ - ---------------------------------
------------------ - ------
-------------------------------- -- -- -
----- ----- - --------------------------------
------------------------------- -- -- -
-----------------------------
---
---------------------------------
---
----------------------------------
-
-我们想测试以下内容：
- 单击按钮时，应向“items”数组添加一个元素。
- 应正确地显示在列表中添加的元素。
我们可以编写以下测试代码：
-- -------------------- ---- ------- ------------ --- ---- -- ------ ------- -- -- - ----- --- - --- ------ ----- ------ - --------------------------------- ----- ----- - -------------------------------- ----------- - ----- --- ------------------------ ------------------- - -------- ---- ---- ----------------------- -------------- - -------- ---- ---- ----------------------------------------- --- ------------ ------- ----- ----- -- --- ------ -- -- - ----- --- - --- ------ ----- ------ - --------------------------------- ----- ----- - -------------------------------- ----------- - ----- --- ------------------------ ------------------- - -------- ---- ---- ----------------------- -------------- - -------- ---- ---- ------------------------ ------------------- - -------- ---- ---- ----- ----- - -------------------------------- ------------------------------ ----------------------------------------------- ---
在第一个测试中，我们单击了添加按钮，并在输入框中输入“Item 1”。然后，我们验证是否将其添加到 items 数组中。
在第二个测试中，我们单击了添加按钮两次，并在每个输入框中输入一个值。然后，我们验证是否正确地显示了添加的元素。
结论
在本文中，我们介绍了如何在 Jest 测试中模仿用户操作。我们学习了如何使用 jsdom 模拟浏览器环境，并使用示例代码演示了如何单击按钮和输入文本。我们还编写了一些测试，以验证单击按钮是否正确添加了元素，并验证是否正确地显示了添加的元素。
自动化测试是一个非常重要的工具，能够帮助我们编写更可靠、可维护的代码。如果您在编写前端代码时还没有使用自动化测试，现在就是时候开始了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677362be6d66e0f9aae2ab49