Jest 是一个流行的 JavaScript 测试框架。对于 React 开发人员来说，Jest 是测试组件和应用的首选工具之一。本文将讨论如何在 Jest 中测试 JSX。
准备工作
在 Jest 中测试 JSX 需要为项目安装 @babel/preset-react 。该插件将 JSX 转换为 JavaScript，从而使 Jest 能够正确解析和测试 JSX。
以下是如何在项目中安装 @babel/preset-react 的命令：
npm install --save-dev @babel/preset-react
此外，您需要确保项目中存在 react 和 react-dom 依赖项。如果还没有，请使用以下命令进行安装：
npm install --save react react-dom
创建测试文件
在您的项目中创建一个名为 App.test.js 的文件。该文件将包含测试 App 组件的代码，并确保它始终渲染正确的 JSX。
在 App.test.js 文件中添加以下代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ - ---- ------------------------- ------ --- ---- -------- ------------- --- ------- ------ -- -- - ----- - --------- - - ----------- ---- ----- ----------- - ----------------- ---------- ---------------------------------------- ---
在这段代码中，您导入了必要的依赖项和 App 组件。您还创建了一个名为 test 的 Jest 配置块，它包含在应用程序渲染后检索文本和断言该文本在文档中存在的代码。
现在，运行以下命令以运行测试：
npm test
Jest 应该运行并显示测试结果。如果一切顺利，测试应该通过！
渲染并测试组件
您可以通过使用 Jest 的 render 函数来渲染 React 组件。render 函数可以渲染组件，并返回一个包含组件中的 DOM 元素的对象。
以下是如何使用 render 函数渲染 App 组件的代码：
const { getByText } = render(<App />);在这段代码中，您将 App 组件传递给 render 函数，并解构返回的对象以获取它生成的 DOM 中的元素。
您可以使用类似以下方式的另一个 Jest 断言来确保 render 函数工作正常：
expect(getByText(/Hello, World!/i)).toBeInTheDocument();
这个断言检验是否有一个元素中包含了 “Hello, World!” 的文本，如果这个文本不在文档中，则测试不通过。
在组件中查找元素
您可以使用 Jest 提供的几个查询函数来查找组件中的元素。以下是使用 Jest getBy* 查询函数的示例：
const titleElement = getByText(/Hello, World!/i);
const inputElement = getByPlaceholderText('Enter your name');
const buttonElement = getByRole('button', { name: 'Submit' });在这些代码中，您使用了 getByText、getByPlaceholderText 和 getByRole 三个查询函数。这些函数通过文本、占位符属性或元素角色来查找 DOM 中的元素。
如果您的组件包含复杂结构，则可以使用通过 querySelector 查找元素的自定义查询函数来更直接地查找元素。
总结
在 Jest 中测试 JSX 是一项挑战性任务，但我们已经看到了它是如何完成的。使用 @babel/preset-react ，您可以让 Jest 识别和解析 JSX 代码。并且您可以通过使用 render 函数和各种查询函数来测试您的组件。通过坚持测试，您可以确保您的应用程序提供了最优的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f555f968c7c53b015e16a