如果你在开发前端应用中使用了 Ink 这个库来构建命令行界面，那么你一定会需要一个可靠的测试工具来保证你的代码能够正确地运行。此时，ink-testing-library 这个 npm 包就派上用场了。它提供了一个轻量级的 API，可以用来测试你的 Ink 组件。
在本文中，我们会详细讲解一下如何使用 ink-testing-library 进行测试。我们会以编写一个简单的 To-Do 应用为例，展示如何测试一个 Ink 组件。
安装 ink-testing-library
首先，我们需要在我们的项目中安装 ink-testing-library。可以通过以下命令来完成：
npm install --save-dev ink-testing-library # or yarn add --dev ink-testing-library
编写 To-Do 应用
我们先来快速地编写一个 To-Do 应用，供后续测试使用。我们将在控制台中输出一个 To-Do 列表，以及一些操作来添加、移除和完成 To-Do 任务。
-- -------------------- ---- -------
-- ----------
------ ------ - -------- - ---- --------
------ - ---- ----- - ---- ------
-------- ----- -
----- ------- --------- - -------------- ------ ----- --- -------
----- --------- ----------- - -------------
----- ------------- - -- -- -
-- -------- --- --- -------
------------------- ----------
---------------
--
----- ---------------- - ------- -- -
------------------- ---
---------------------
--
----- ------------------ - ------- -- -
------------ - -- -----------------
---------------------
--
------ -
---- -----------------------
------ ---------- -------------
----------------- ------ -- -
---- ------------
------ ------------ - --- --------
---------------------
------ ---- ---------
------
----
----------- -- ------------------------
-
------
--------
------ -------------
------
------
----------- -- --------------------------
-
--------
--------
------ -------------
------
---
-----
------ --------- -------------
------- --------
-------
---- ----------------
------ ----- -----
-----
--------
------
-------
----------
---------------
---------------------
--
--------
--------
------- --------
------
-----
----
-----------------------
-
---
--------
------
------
--
-
------ ------- ----测试 To-Do 应用
在完成 To-Do 应用的编写后，我们需要创建一个测试文件来测试我们的代码。在本例中，我们将创建一个名为 App.test.js 的测试文件。下面是一个可以把 To-Do 应用渲染到屏幕上的基础测试示例：
-- -------------------- ---- ------- -- --------------- ------ - ------- ------ - ---- ---------------------- ------ --- ---- -------- ------------- - ---- ------ -- -- - ----------- ---- ------------------------------ ----------------------------- ---------------------------- ---------------------------- ----------------------------- --- --------------------------- ---
在上面的测试代码中，我们使用 render 函数来把 App 组件渲染到 Ink 测试环境中。然后，我们使用 expect 函数来断言应用是否能够正确地渲染出 To-Do 列表（即：To-Do List:、Buy milk 和 Walk the dog）。
接下来，我们将使用 ink-testing-library 来测试我们的应用是否能够正常工作。
测试 To-Do 列表的添加功能
test('allows users to add todo', () => {
render(<App />);
screen.getByText('Add todo:').click();
screen.getByText(/^>$/).write('Buy eggs');
screen.getByText('Add').click();
expect(screen.getByText('Buy eggs')).toBeInTheDocument();
});在上面的测试代码中，我们使用 getByText 函数来获取添加 todo 的相关元素，并使用 click 和 write 函数来模仿用户在控制台输入添加的 todo。然后，我们再使用 expect 函数来断言应用是否能够正确地添加一个 To-Do 任务。
测试 To-Do 列表的删除功能
test('allows users to remove todo', () => {
render(<App />);
screen.getByText('Add todo:').click();
screen.getByText(/^>$/).write('Buy eggs');
screen.getByText('Add').click();
screen.getByText('Remove').click();
expect(screen.queryByText('Buy eggs')).not.toBeInTheDocument();
});在上面的测试代码中，我们使用 getByText 函数来获取删除 todo 的相关元素，并使用 click 函数来模仿用户在控制台输入删除的 todo。然后，我们再使用 expect 函数来断言应用是否能够正确地删除一个 To-Do 任务。
测试 To-Do 列表的完成功能
test('allows users to complete todo', () => {
render(<App />);
screen.getByText('Complete').click();
expect(screen.getByText(/^✅ Buy milk$/)).toBeInTheDocument();
});在上面的测试代码中，我们使用 getByText 函数来获取完成 todo 的相关元素，并使用 click 函数来模仿用户在控制台输入完成的 todo。然后，我们再使用 expect 函数来断言应用是否能够正确地完成一个 To-Do 任务。
总结
在本文中，我们使用 ink-testing-library 这个 npm 包来测试 Ink 组件。我们以编写 To-Do 应用为例，详细讲解了如何使用 ink-testing-library 来测试我们的应用。希望这篇文章能够对你学习和使用 ink-testing-library 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedae4bb5cbfe1ea0610e02