在 React 应用程序中，我们经常使用各种第三方库和插件来实现特定的功能。其中，auth0-react 是一个用于身份验证和授权的库，可以帮助我们快速地将身份验证和授权集成到 React 应用程序中。
而在开发过程中，我们需要使用一些测试工具来保证组件的正确性和可靠性。 Enzyme就是一个非常好的测试工具，它可以帮助我们自动化地测试 React 组件。
在这篇文章中，我们将介绍如何使用 Enzyme 来测试在 React 组件中 auth0-react。
开始前的准备工作
在开始测试之前，我们需要安装 Enzyme 和 auth0-react。
如果您还没有安装 Enzyme，请在终端中运行以下命令进行安装：
npm install --save-dev enzyme enzyme-adapter-react-16
接着，我们还需要一个 Enzyme 适配器来与 React 16 协同工作。在终端中运行以下命令来安装：
npm install --save-dev enzyme-adapter-react-16
接下来，我们安装 auth0-react：
npm install auth0-react
测试 auth0-react 组件
假设我们在使用 auth0-react 来实现限制访问未认证用户的组件，下面我们将通过一个示例来演示如何使用 Enzyme 来测试该组件。
请看下面的代码，我们在 App.js 中实现了一个 PrivateRoute 组件：
-- -------------------- ---- -------
------ - ------ -------- - ---- -------------------
------ - -------------------------- - ---- ---------------------
----- ------------ - -- ---------- ------- -- -- -
------ -
------
---------
---------- --
-- -- -------------------------- --------------
------------------------------------- -
-- --------------
-------------- -- -- --------- ------ ---
--
-
--
--
--
------ ------- -------------该组件需要用户进行身份验证后才能访问。我们将测试该组件的行为。
首先，我们需要在测试文件中导入所需的库和组件：
import { render } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import { Auth0Provider } from '@auth0/auth0-react';
import Adapter from 'enzyme-adapter-react-16';
import { configure, mount } from 'enzyme';
import PrivateRoute from './App';接下来，我们将在测试文件中设置 auth0-react，以便在测试中使用：
-- -------------------- ---- -------
----- ------ - -----------------------------------
----- -------- - --------------------------------------
-- -- -----------
----- ------ - -
-------
---------
------------ -----------------------
--------- ----------------------------
------ --------------------
--
-- ---- --
----- ------------------ - ----------
-- -- ------------- --
----- ------------ - -- -------- -- -- -
--------------
----------------------
--------------------------
--------------------------------
---------------------------------------
--------------------------
--------------------
-
----------
----------------
--上面的代码中，我们首先从环境变量中获取 auth0 相关的信息，然后使用 Auth0Provider 组件来设置身份验证信息。
接下来，我们要设置 Enzyme 的适配器和配置：
-- -------------------- ---- -------
----------- -------- --- --------- ---
-- -------------
----- ------------------ - ---- - ---------------- - - --- -- -
------ -------
---------------
---------------------------------
-----------------
-------------
--
--
---------------------- --------- --------- -- -- -
---------- -------- -- ---- ---- ---- -- --- --------------- -- -- -
----- --------- - ----------
----- ------- - ------
---------------
--------------
------------- ----- --------------- --------------------- --
---------------
----------------
--
-------------------------------------------------
---------------------------------------------------------
------------------
---
---------- ------ --------- ---- ---- -- --------------- -- -- -
----- --------- - ----------
----- ------- - ------
---------------
--------------
------------- ----- --------------- --------------------- --
---------------
----------------
--
------------------------------------------------
------------------
---
---在上面的代码中，我们首先使用 renderWithProvider 函数将组件和auth0-react提供的组件一起渲染。
接下来，我们进行两个测试用例的测试。
在第一个测试用例中，我们检查组件是否在未认证用户访问时重定向到根路径。我们首先渲染带有未认证用户的组件，并检查是否有一个 Redirect 组件，并且该组件是否被正确地设置为重定向到根路径。最后，我们确保清除组件的实例。
在第二个测试用例中，我们检查组件是否在经过身份验证后显示。我们首先渲染带有身份验证用户的组件，并检查渲染的组件是否正确，并确保清除组件的实例。
总结
在本文中，我们介绍了如何使用 Enzyme 测试在 React 组件中的 auth0-react。通过使用 Enzyme，我们可以测试代码是否正常工作，并加强对组件的理解。在编写 React 应用程序和组件时使用该组合是非常有用的，因为它可以帮助我们更好地了解和管理我们的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d4708bb5eee0b525bfbfa4