Jest 测试 React 组件,如何 mock 父组件中的方法?
Jest 是由 Facebook 开源的一个 JavaScript 测试框架,用于编写高效、易读、可维护的测试用例来测试 JavaScript 应用程序的各个组件。React 是一个高性能的 JavaScript 库,用于构建用户界面。在使用 Jest 测试 React 组件时,我们可能需要 mock 父组件中的方法,以测试组件的行为。
下面,我们将介绍如何使用 Jest 测试 React 组件,并演示如何 mock 父组件中的方法。
安装 Jest
如果你还没有安装 Jest,可以全局安装或作为项目的开发依赖安装。
全局安装:
--- ------- -- ----
开发依赖安装:
--- ------- ---------- ----
在项目中配置 Jest
在项目根目录下创建一个名为 jest.config.js 的文件,并添加以下内容:
-------------- - - ----------------- - -- --------- ---- ---- ------------- ------------------ -- ---------------- -------- ---------- - ------------------- ------------- -------------- ---------------------------------------- ------------------------------- ---------------------------------------- -- ---------- ---------------------------------------------------- --------------------- ------ ------ ------- ----- ------- --------------------------- ------------- -------------------- - --------------------------- -------------------------------- ---------------------- --------------- - --
上述配置文件包含 Jest 的基本配置,包括模块名称映射、测试环境、转换器、测试正则表达式、模块文件扩展名、代码覆盖率忽略模式等。
创建 React 组件
我们将创建一个简单的 React 组件,并在其中包含一个按钮。当按钮被点击时,将通过父组件中的方法将数据返回给组件。
创建一个名为 MyButton 的组件,并在其中添加一个按钮和一个 handleClick 方法:
------ ------ - --------- - ---- -------- ----- -------- ------- --------- - ----------- - -- -- - -------------------------------- - -------- - ------ - ------- ------------------------------------------ -- - - ------ ------- ---------
在父组件中引入 MyButton 组件,并传递 handleSubmit 方法给它使用:
------ ------ - --------- - ---- -------- ------ -------- ---- ------------- ----- --------------- ------- --------- - ------------ - ------ -- - -- ---- - -------- - ------ - ----- ---------- -------------- --------- -------------------------------- -- ------ -- - - ------ ------- ----------------
编写测试用例
现在,我们已经创建了一个简单的 React 组件,并在父组件中引入了它。
接下来,我们将编写一个测试用例,测试 MyButton 组件的 handleClick 方法是否能够正确地调用 handleSubmit 方法。
首先,我们需要为 MyButton 组件创建一个测试文件 MyButton.test.js,然后添加以下代码:
------ ----- ---- -------- ------ - ------- - ---- --------- ------ -------- ---- ------------- ---------------------- -- -- - ---------- ---- ------------ ---- ------ -- --------- -- -- - ----- ---------------- - ---------- ----- ------- - ----------------- ------------------------------- ---- ----------------------------------------- ------------------------------------------------------ --- ---
在上面的代码中,我们使用 Jest 提供的测试框架进行测试,并引入了一个名为 shallow 的 Enzyme API,用于浅渲染一个 React 组件。然后,我们创建了一个名为 handleSubmitMock 的 mock 函数,并将它作为一个 props 传递给 MyButton 组件。最后,我们模拟了 MyButton 组件中的按钮点击事件,并验证 handleSubmitMock 函数是否被调用,并传递了正确的参数 'data'。
我们可以使用以下命令来运行测试:
---- ----------------
现在,我们已经成功地测试了 MyButton 组件的 handleClick 方法是否能够正确地调用 handleSubmit 方法。但是,如果我们想测试父组件中的 handleSubmit 方法,应该如何做呢?这时候,我们需要使用 jest.spyOn() 和 mock 函数来模拟父组件中的 handleSubmit 方法。
模拟父组件中的 handleSubmit 方法
在测试中,我们可以使用 jest.spyOn() 方法来模拟父组件中的 handleSubmit 方法,并返回一个 mock 函数。然后,我们调用 MyButton 组件中的 handleClick 方法,并验证 handleSubmitMock 函数是否被调用,并传递了正确的参数 'data'。
我们可以通过以下代码来实现:
------ ----- ---- -------- ------ - ------- - ---- --------- ------ -------- ---- ------------- ---------------------- -- -- - ---------- ---- ------------ ---- ------ -- --------- -- -- - ----- ---------------- - ---------- ----- --- - ------------------------------------- ----------------------------------------------------- ----- ------- - ----------------- ---- ----------------------------------------- ------------------------------------------------------ ------------------ --- ---
在上面的代码中,我们使用 jest.spyOn() 方法来模拟 ParentComponent.prototype.handleSubmit 方法,并返回一个 mock 函数,将它传递给 MyButton 组件。然后,我们模拟了 MyButton 组件中的按钮点击事件,并验证 mock 函数是否被调用,并传递了正确的参数 'data'。最后,我们使用 spy.mockRestore() 方法恢复原始的 handleSubmit 方法。
总结
在使用 Jest 测试 React 组件时,我们可以使用 Jest 的测试框架和 Enzyme 的 API 来编写测试用例。如果我们需要 mock 父组件中的方法,我们可以使用 jest.spyOn() 和 mock 函数来模拟它们,并验证它们是否被正确地调用。这样,我们可以保证组件行为的正确性,并提高代码的可靠性。
附完整代码如下:
MyButton.js
------ ------ - --------- - ---- -------- ----- -------- ------- --------- - ----------- - -- -- - -------------------------------- - -------- - ------ - ------- ------------------------------------------ -- - - ------ ------- ---------
ParentComponent.js
------ ------ - --------- - ---- -------- ------ -------- ---- ------------- ----- --------------- ------- --------- - ------------ - ------ -- - -- ---- - -------- - ------ - ----- ---------- -------------- --------- -------------------------------- -- ------ -- - - ------ ------- ----------------
MyButton.test.js
------ ----- ---- -------- ------ - ------- - ---- --------- ------ --------------- ---- -------------------- ------ -------- ---- ------------- ---------------------- -- -- - ---------- ---- ------------ ---- ------ -- --------- -- -- - ----- ---------------- - ---------- ----- --- - ------------------------------------- ----------------------------------------------------- ----- ------- - ----------------- ---- ----------------------------------------- ------------------------------------------------------ ------------------ --- ---
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/645b2fb0968c7c53b0d8b2af