在前端单元测试中，经常需要测试函数是否被调用以及调用时传递的参数是否符合期望。Jest 是一个流行的 JavaScript 测试工具，它提供了多种方式来达到这个目标。
1. 基本用法
Jest 中断言函数调用和参数的方式是使用 jest.fn() 创建一个 Mock 函数，并在测试中将其作为被测函数的替代品。这个 Mock 函数可以记录其是否被调用，以及每次调用时的传参。
举个例子，我们要测试以下代码：
function foo(a, b) {
console.log(a, b);
}我们可以使用以下代码来创建 Mock 函数和测试它是否被调用：
test('foo should be called', () => {
const mockFoo = jest.fn();
foo(1, 2);
expect(mockFoo).toHaveBeenCalled();
});这个测试会失败，因为 foo 实际上并没有调用 mockFoo，我们需要将 mockFoo 替代 foo 才可以。
test('foo should be called', () => {
const mockFoo = jest.fn();
foo = mockFoo;
foo(1, 2);
expect(mockFoo).toHaveBeenCalled();
});现在这个测试通过了，我们可以断言 Mock 函数被调用的次数：
test('foo should be called once', () => {
const mockFoo = jest.fn();
foo = mockFoo;
foo(1, 2);
expect(mockFoo).toHaveBeenCalledTimes(1);
});我们也可以断言 Mock 函数被传入了期望的参数：
test('foo should be called with correct params', () => {
const mockFoo = jest.fn();
foo = mockFoo;
foo(1, 2);
expect(mockFoo).toHaveBeenCalledWith(1, 2);
});2. Mock 返回值
除了记录调用和参数，Mock 函数还可以模拟返回值。我们可以使用 mockReturnValue() 方法来指定 Mock 函数的返回值，例如：
-- -------------------- ---- ------- --------- ------ ------ --- -- -- - ----- ------- - ---------- --------------------------- --- - -------- ----- ------ - ------ --- ----------------------------------------- --------------------------------------- --- -------------------------- ---
3. 实际应用
断言函数调用和参数在测试 Redux 中非常有用。例如，我们有以下的 Redux action：
export const setUserName = (name) => {
return {
type: 'SET_USERNAME',
payload: {
name,
},
};
};我们可以测试这个 action 被正确调用：
-- -------------------- ---- -------
----------------- ------ -- ------ ---- ------- ------- -- -- -
----- ------------ - ----------
----- -------------- - -
----- ---------------
-------- -
----- -------
--
--
----------------------------------
----------------------------------------------------------
---另一个例子是测试 React 组件中的回调函数是否被正确调用。例如，我们有以下的组件：
import React from 'react';
export default function Button(props) {
return (
<button onClick={() => props.onClick(props.id)}>Click me</button>
);
}我们可以通过创建 Mock 函数并传入 props，来测试 onClick 函数是否被正确调用：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
------------- ------ -- ------ ---- ------- ------- -- -- -
----- ----------- - ----------
----- ------- - ------------- ------ --------------------- ----
-----------------------------------------
----------------------------------------------
---
---4. 注意事项
使用 Jest Mock 函数时需要注意以下几点：
- 如果被测函数是一个模块导出，需要使用
jest.mock()方法来替换整个模块，详见 Jest 官方文档。 - 如果被测函数有多个返回值，可以使用
mockReturnValueOnce()方法实现连续的多次不同的返回值。 - 如果被测函数中有异步操作，可能需要使用
await来确保所有异步操作都完成后再断言被调用情况。
5. 总结
Jest 中断言函数调用和参数是前端单元测试中非常实用的功能。可以用于测试 Redux action、React 组件等情况。使用 Mock 函数时需要注意使用方法以及注意测试异步操作情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d134248841e9894b5f16b