在前端开发过程中,我们经常需要测试我们的代码,保证其高质量。而 Jest 是一个非常优秀的前端测试框架,它具有简单易用、强大的功能以及广泛的社区支持等优点,可以帮助我们轻松地进行前端测试。
Jest 还提供了 mocks 文件夹,它可以让我们很方便地自定义代码及外部依赖的模拟,这能够帮助我们避免在测试过程中产生副作用,提高测试代码的可靠性。
使用 mocks 文件夹
在 Jest 中,我们可以使用 mocks 文件夹来模拟我们需要测试的代码及外部依赖。在编写测试代码时,Jest 会自动优先加载 mocks 文件夹中的模块,从而根据我们的需求自动进行模拟。
为了更好地理解,我们来看一个示例代码:
-- -------------------- ---- ------- -- -------- ------ -------- ------ -- - ------ - - -- - -- ------------ ------ - --- - ---- ---------- -------- --------- - ------------------ ---- - ---------- -- ---- ------ ------ - ------- - ---- -------------- ---------- ----- -- -- - ---------- ---
在上面的代码中,我们在 testUtils.js 文件中引用了 add 函数,并在控制台中输出其返回值。在 Jest 中通过调用 testAdd 方法进行测试,这样测试的结果就会在控制台中输出。
现在我们想要测试 utils.js 中的代码,因为测试代码中引用了这些代码。但是如果我们直接测试 utils.js,那么 testAdd 方法中的输出就会出现在控制台中,这是我们不想要的。为了避免这种情况的发生,我们可以在 mocks 文件夹中创建一个与 utils.js 同名的模块,然后在模块中模拟 utils.js 中的函数。具体代码如下:
-- -------------------- ---- ------- -- ------------------ ------ -------- ------ -- - ------ - - -- - -- ---- ------ ------ - ------- - ---- -------------- --------------------- -- ------ ---------- ----- -- -- - ---------- ---
在上面的代码中,我们首先引入了模拟模块,然后在测试代码中使用 jest.mock('./utils') 引入了模拟模块。这样在测试代码执行时,将会优先加载模拟模块,从而达到我们模拟代码及外部依赖的目的。
模拟外部依赖
除了模拟自己的代码以外,mocks 文件夹还可以用来模拟外部依赖。下面我们来看一下一个简单的例子。
-- -------------------- ---- ------- -- -------- ------ -------- ----------- - ------ ----------------------------------------------------- -------------- -- ---------------- ---------- -- ------------ - -- ------------ ------ - --------- - ---- ---------- -------- ----------- - ---------------------- -- -------------------- - ------------ -- ---- ------ ------ - --------- - ---- -------------- ---------- ------- -- -- - ----------------------- -- -- - ------ ------------------------------- -- ----------------- ----- -- -- ----------------- ------ ----- ------ -- ---- --- -- -- ----- -- ------------ ---
在上面的代码中,我们模拟了 fetch 依赖,以便能够进行测试,具体实现是在 mocks/node-fetch.js 文件中模拟了该依赖。这段代码中我们使用了 jest.fn() 和 mockImplementation() 方法来创建一个模拟的返回值。
总结
Jest 中的 mocks 文件夹可以帮助我们更方便地对自己的代码及外部依赖进行模拟。这样不仅可以有效地消除不必要的副作用,而且还可以提高测试代码的可靠性,从而让我们更加轻松地进行前端开发。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/651a54e695b1f8cacd24c750