在前端测试中，我们经常需要模拟某个函数的行为，以确保代码的正确性和可靠性。Jest 是一个流行的 JavaScript 测试框架，它提供了丰富的 mocking 功能，可以帮助我们快速有效地创建测试用例。在 Jest 中，我们可以使用 mocked 函数来替代原始函数，以便在测试过程中检查这些函数的调用和返回值。本文将介绍如何在 Jest 中使用 mocked 函数替代原始函数，并提供详细的示例和指导意义。
什么是 mocked 函数：
mocked 函数是 Jest 提供的一种特殊函数，它可以模拟原始函数的行为，并允许我们对其进行定制。使用 mocked 函数可以帮助我们在测试代码时，创建一个虚拟的环境，以允许我们模拟特定的场景和情况。例如，我们可以使用 mocked 函数来测试一个函数是否正确地处理参数，或者在出现异常或错误时是否正确地抛出异常或错误。
如何替代原始函数：
在 Jest 中，使用 mocked 函数替代原始函数的方法非常简单。我们可以使用 jest.fn() 函数来创建一个 mocked 函数，并使用 jest.mock() 函数来将该函数替代原始函数。例如，假设我们有一个名为 fetchData 的函数，它使用 fetch API 来获取数据：
async function fetchData(url) { const response = await fetch(url); const data = await response.json(); return data; }
我们可以使用 mocked 函数来替代 fetchData 函数，并返回一个预定的响应：
-- -------------------- ---- ------- ------------------------- ------ --------- ---- -------------- ---------- --------- ---------- ----- -- -- - ----------------------------------------- ----- ------- ---------------- ----- ---- - ----- ------------------------------------------ ------------------------------ ----- ------- ---------------- ---展开代码
在上面的示例中，我们使用 jest.mock() 函数来将 fetchData 函数替代为 mocked 函数。mocked 函数的行为由 jest.fn() 自动生成，但我们可以使用 .mockResolvedValueOnce() 函数来为其添加预定义的返回值。由于 mocked fetchData 函数不会真正地使用 fetch API，因此我们可以控制其行为，使其返回预定的响应。在测试过程中，我们使用 await fetchData('https://api.example.com/data') 调用 mocked fetchData 函数，并断言其返回值是否正确。由于我们可以完全控制 mocked 函数的行为，因此我们可以创建任意复杂的测试用例，以确保代码的正确性和可靠性。
mocked 函数的定制：
在 Jest 中，我们可以定制 mocked 函数的行为，以便测试特定场景或情况。以下是一些常见的 mocked 函数定制方法：
mockReturnValue
使用 .mockReturnValue() 函数可以在 mocked 函数中设置返回值。例如：
fetchData.mockReturnValue({message: 'Data fetched successfully'});
mockResolvedValue
使用 .mockResolvedValue() 函数可以在 mocked 函数中设置解析的返回值。例如：
fetchData.mockResolvedValue({message: 'Data fetched successfully'});
mockRejectedValue
使用 .mockRejectedValue() 函数可以在 mocked 函数中设置拒绝的返回值。例如：
fetchData.mockRejectedValue(Error('Data fetching failed'));
mockImplementation
使用 .mockImplementation() 函数可以在 mocked 函数中设置自定义实现。例如：
fetchData.mockImplementation(async (url) => { if (url === 'https://api.example.com/data') { return {message: 'Data fetched successfully'}; } else { throw Error('Invalid URL'); } });
mockImplementationOnce
使用 .mockImplementationOnce() 函数可以在 mocked 函数中设置一次性的自定义实现。例如：
fetchData.mockImplementationOnce(async () => { return {message: 'Data fetched successfully'}; }); fetchData.mockImplementationOnce(async () => { throw Error('Data fetching failed'); });
示例代码：
以下是一个完整的示例代码，展示如何在 Jest 中使用 mocked 函数替代原始函数，并对其进行定制，以测试不同情况下的代码行为：
-- -------------------- ---- ------- -- ------------ ----- -------- -------------- - ----- -------- - ----- ----------- ----- ---- - ----- ---------------- ------ ----- - ------ ------- ---------- -- ----------------- ------------------------- ------ --------- ---- -------------- -------------- --------- ---------- -- -- - ------------- -- - ---------------------- --- ---------- --------- -------- ---- ----- ----- ----- -- -- - ----------------------------------------- ----- ------- ---------------- ----- ---- - ----- ------------------------------------------ ------------------------------ ----- ------- ---------------- ------------------------------------------- ----------------------------------------------------------------------- --- ---------- --------- -------- ---- ------- ----- ----- -- -- - -------------------------------------- -- -- - ----- -------------- ------ --- ----- ------------------------------------------------------------------------------ ------ ------------------------------------------- --------------------------------------------------------------------------- --- ---------- --------- -------- ---- ------- ------- ----- -- -- - ------------------------------------------ --------- ----- -------------------------------------------------------------------------- -------- ------------------------------------------- ----------------------------------------------------------------------- --- ---展开代码
在上面的示例代码中，我们首先导入了 fetchData 函数，并使用 jest.mock() 函数将其替代为 mocked 函数。在测试过程中，我们定义了三个测试用例，分别测试了不同情况下的代码行为。
在第一个测试用例中，我们使用 .mockResolvedValueOnce() 函数设置 mocked fetchData 函数的返回值，并调用 fetchData 函数。我们断言 fetchData 函数只被调用了一次，并且其参数为指定的 URL。此外，我们还断言 fetchData 函数的返回值是否正确。
在第二个测试用例中，我们使用 .mockImplementationOnce() 函数设置 mocked fetchData 函数的自定义实现，并调用该函数。由于自定义实现抛出了异常，我们使用 expect().rejects.toThrow() 断言该函数是否正确地抛出了异常。同样，我们也断言 fetchData 函数是否只被调用了一次，并且其参数为指定的 URL。
在第三个测试用例中，我们使用 .mockRejectedValue() 函数设置 mocked fetchData 函数的拒绝返回值，并调用该函数。由于拒绝返回值是一个错误对象，我们使用 expect().rejects.toThrow() 断言该函数是否正确地抛出了错误。同样，我们也断言 fetchData 函数是否只被调用了一次，并且其参数为指定的 URL。
指导意义：
使用 mocked 函数是编写有效测试的重要组成部分。在 Jest 中，我们可以轻松地使用 mocked 函数替代任何函数，并模拟不同的情况和场景。了解如何使用 mocked 函数可以帮助我们创建更加可靠和健壮的代码，并确保我们的产品在不同环境下的正确性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b69beb306f20b3a62adaec
