在前端开发中，我们经常需要写测试代码以保证应用程序的健壮性和稳定性。Jest 是一个流行的 JavaScript 测试框架，它提供了一些方便的 API 以编写高效的测试代码。然而，在编写测试代码时，使用 Mock 对象往往是一种不必要的陷阱，它会导致测试不够严谨，难以发现错误和缺陷。
本文将介绍为什么应该避免 Mock 对象的滥用，并提供一些技巧，帮助你编写更好的测试代码。
什么是 Mock 对象？
Mock 对象是一种模拟对象，它可以模拟某些行为，以在测试代码中使用。例如，当测试一个 React 组件中的某个方法时，我们可以使用一个 Mock 对象来模拟这个方法的行为，以确保测试代码能够被正确执行。
Mock 对象通常使用 Jest 提供的 jest.fn() 函数创建。这个函数返回一个可执行的函数，可以接收任意参数，并返回一个默认值（通常是 undefined）。
const fn = jest.fn() fn() console.log(fn.mock.calls.length) // 1
以上代码创建了一个 Mock 对象 fn，并执行了它一次。然后我们可以通过 fn.mock 来获取关于它的一些信息，例如它被调用的次数（fn.mock.calls.length）。
Mock 对象的滥用
在一些情况下，Mock 对象是非常有用的，例如：
- 模拟网络请求，在测试过程中避免调用真实的 API。
- 模拟 React 组件中的某些方法，以判断组件的行为是否正确。
- 模拟返回异步的函数，以测试异步编码是否正确。
然而，在一些情况下，Mock 对象却会导致测试代码错误或者丢失测试本身的意义。
Case 1: 未正确模拟依赖
在测试过程中，我们可能会需要 Mock 一些依赖，以避免测试受到外部因素的干扰。例如在测试 Redux 组件时，我们可能会需要 Mock 掉 Redux Store，以避免实际代码访问真实的 Store。这时，我们需要确保 Mock 对象正确地模拟了真实的依赖，以避免测试通过但实际运行时出现问题。
-- -------------------- ---- -------
-- --- ----
------ - ----------- - ---- -------------
------------------------ -- -- -
----- -------- - ---------
------ -
------------ -- -- ---------
------------ ---------
-
--// 错误的 Mock
import { useDispatch } from 'react-redux'
jest.mock('react-redux', () => ({
useDispatch: jest.fn(),
useSelector: jest.fn()
}))Case 2: Mock 破坏测试覆盖率
在某些情况下，Mock 对象可能会破坏测试代码的覆盖率。例如，当我们 Mock 掉某个库中的某个函数以确保测试通过时，我们可能会忽略某些边界条件，这个导致测试代码严谨性不足，覆盖率也会受影响。
-- -------------------- ---- ------- -- ---- --------- -- ----- -- ------ ------ ---- -------- ------------------- -- -- -- ---- -- -- ---------- --- ---------- ------ ---- ----------- -- -- - ----- ---- - --- ---------------- ------------------------------------------------------------ --
在以上代码中，我们 Mock 了 moment.js 中的 now() 函数（返回固定的时间戳 1234567890），以确保测试通过。然而，这个测试并没有覆盖到其他时间戳的情况，可能会忽略某些边界条件。
Case 3: Mock 破坏与真实环境的一致性
在一些情况下，Mock 对象可能会破坏测试代码与真实环境的一致性，以至于我们在测试通过后依然会遇到问题。例如，当 Mock 掉某些函数以模拟异步返回时，我们可能会忽略异步执行过程中的一些问题，导致测试无法反映真实的运行环境。
-- -------------------- ---- ------- -- ---- ----- - ----- -- ------ ----- ---- ------- ------------------ -- -- -- ---- ----------------------------- ----- - -------- ------ ------ - -- --- ---------- ----- ---- ----------- ----- -- -- - ----- - ---- - - ----- ---------------------- -------------------------------- ------- --
在以上代码中，我们 Mock 了 axios 的 get() 函数以立即返回一个 Promise，以确保测试通过。然而，在实际的运行环境中，我们可能会遇到网络问题或其他运行时问题，这个导致测试通过但实际运行时出现问题。
如何有效地使用 Mock 对象
在编写测试代码时，我们应该尽量避免 Mock 对象的滥用，以确保测试代码能够正确反映真实的运行环境。以下是一些使用 Mock 对象时的技巧：
Tip 1：减少 Mock 对象的层数
当我们使用 Mock 对象时，最好尽量减少它们的层数，以避免测试代码与真实环境的一致性问题。通常情况下，我们 Mock 掉的对象应该与我们正在测试的对象越接近越好。
// Mock document.cookie
Object.defineProperty(document, 'cookie', {
value: 'name=value; path=/',
writable: true
})在以上代码中，我们直接 Mock 了 document 对象的 cookie 属性，而没有使用任何 Mock 对象，以确保测试代码与实际运行环境完全一致。
Tip 2：使用真实对象进行测试
有时候，我们可能需要使用真实的对象进行测试，以确保测试代码能够正确反映真实的运行环境。例如，在测试某个方法时，我们可能需要调用该方法的实际实现，而不是一个 Mock 对象。
import { sum } from './math'
it('should sum two numbers correctly', () => {
expect(sum(1, 2)).toBe(3)
})在以上代码中，我们直接导入了 math.js 中的 sum() 函数，并使用真实的参数进行测试，以确保测试代码能够正确反映真实的运行环境。
Tip 3：合理使用 Mock 对象
在使用 Mock 对象时，我们应该务必注意它们的合理使用方式，以避免测试代码与真实环境的一致性问题。通常情况下，我们仅在必要的情况下才应该使用 Mock 对象，例如：
- 模拟网络请求，在测试过程中避免调用真实的 API。
- 模拟 React 组件中的某些方法，以判断组件的行为是否正确。
- 模拟返回异步的函数，以测试异步编码是否正确。
-- -------------------- ---- ------- -- ---- --- -- ------ ----- ---- ------- ------ - --------- - ---- ------- ------------------ ---------- ----- ---- ----------- ----- -- -- - ----------------------------- ----- - -------- ------ ------ - -- ----- ---- - ----- ----------- -------------------------------- ------- --
在以上代码中，我们 Mock 了 axios 的 get() 函数以模拟网络请求，并确保测试代码能够正确地反映真实的运行环境。
结论
通过本文，我们可以了解到使用 Mock 对象时可能会面临的一些挑战和问题，并掌握一些技巧，以避免它们的滥用，从而编写更好的测试代码。我们希望这篇文章对你有所帮助，如果你有任何问题或建议，请随时在评论中留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670ccaee5f551281025bacf1