在前端单元测试中,经常需要测试函数是否被调用以及调用时传递的参数是否符合期望。Jest 是一个流行的 JavaScript 测试工具,它提供了多种方式来达到这个目标。
1. 基本用法
Jest 中断言函数调用和参数的方式是使用 jest.fn()
创建一个 Mock 函数,并在测试中将其作为被测函数的替代品。这个 Mock 函数可以记录其是否被调用,以及每次调用时的传参。
举个例子,我们要测试以下代码:
-------- ------ -- - -------------- --- -
我们可以使用以下代码来创建 Mock 函数和测试它是否被调用:
--------- ------ -- -------- -- -- - ----- ------- - ---------- ------ --- ----------------------------------- ---
这个测试会失败,因为 foo
实际上并没有调用 mockFoo
,我们需要将 mockFoo
替代 foo
才可以。
--------- ------ -- -------- -- -- - ----- ------- - ---------- --- - -------- ------ --- ----------------------------------- ---
现在这个测试通过了,我们可以断言 Mock 函数被调用的次数:
--------- ------ -- ------ ------ -- -- - ----- ------- - ---------- --- - -------- ------ --- ----------------------------------------- ---
我们也可以断言 Mock 函数被传入了期望的参数:
--------- ------ -- ------ ---- ------- -------- -- -- - ----- ------- - ---------- --- - -------- ------ --- --------------------------------------- --- ---
2. Mock 返回值
除了记录调用和参数,Mock 函数还可以模拟返回值。我们可以使用 mockReturnValue()
方法来指定 Mock 函数的返回值,例如:
--------- ------ ------ --- -- -- - ----- ------- - ---------- --------------------------- --- - -------- ----- ------ - ------ --- ----------------------------------------- --------------------------------------- --- -------------------------- ---
3. 实际应用
断言函数调用和参数在测试 Redux 中非常有用。例如,我们有以下的 Redux action:
------ ----- ----------- - ------ -- - ------ - ----- --------------- -------- - ----- -- -- --
我们可以测试这个 action 被正确调用:
----------------- ------ -- ------ ---- ------- ------- -- -- - ----- ------------ - ---------- ----- -------------- - - ----- --------------- -------- - ----- ------- -- -- ---------------------------------- ---------------------------------------------------------- ---
另一个例子是测试 React 组件中的回调函数是否被正确调用。例如,我们有以下的组件:
------ ----- ---- -------- ------ ------- -------- ------------- - ------ - ------- ----------- -- ------------------------------ ----------- -- -
我们可以通过创建 Mock 函数并传入 props,来测试 onClick
函数是否被正确调用:
------ ----- ---- -------- ------ - ----- - ---- --------- ------ ------ ---- ----------- ------------------ -- -- - ------------- ------ -- ------ ---- ------- ------- -- -- - ----- ----------- - ---------- ----- ------- - ------------- ------ --------------------- ---- ----------------------------------------- ---------------------------------------------- --- ---
4. 注意事项
使用 Jest Mock 函数时需要注意以下几点:
- 如果被测函数是一个模块导出,需要使用
jest.mock()
方法来替换整个模块,详见 Jest 官方文档。 - 如果被测函数有多个返回值,可以使用
mockReturnValueOnce()
方法实现连续的多次不同的返回值。 - 如果被测函数中有异步操作,可能需要使用
await
来确保所有异步操作都完成后再断言被调用情况。
5. 总结
Jest 中断言函数调用和参数是前端单元测试中非常实用的功能。可以用于测试 Redux action、React 组件等情况。使用 Mock 函数时需要注意使用方法以及注意测试异步操作情况。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/648d134248841e9894b5f16b