跳转到主要内容
版本:25.倍

DOM操作

另一类通常被认为很难测试的函数是直接操作DOM的代码。让我们看看如何测试下面的jQuery代码片段,该代码片段监听单击事件、异步获取一些数据并设置跨度的内容。

/ / displayUser.js
使用严格的 ;
常量 美元 = 需要 ( jquery的 ) ;
常量 fetchCurrentUser = 需要 ( ”。/ fetchCurrentUser.js ' ) ;
美元 ( “#按钮” ) 点击 ( ( ) = > {
fetchCurrentUser ( 用户 = > {
常量 loggedText = “登录” + ( 用户 loggedIn ? “在” : “出” ) ;
美元 ( “#用户名” ) 文本 ( 用户 fullName + “- - -” + loggedText ) ;
} ) ;
} ) ;

同样,我们在__tests__ /文件夹:

/ / __tests__ / displayUser-test.js
使用严格的 ;
开玩笑 模拟 ( “. . / fetchCurrentUser” ) ;
测试 ( “点击后显示用户” , ( ) = > {
//设置我们的文档主体
文档 身体 innerHTML =
' < div > ' +
' ' +
“< / div >” ;
//这个模块有一个副作用
需要 ( “. . / displayUser” ) ;
常量 美元 = 需要 ( jquery的 ) ;
常量 fetchCurrentUser = 需要 ( “. . / fetchCurrentUser” ) ;
//告诉fetchCurrentUser模拟函数自动调用
//它的回调与一些数据
fetchCurrentUser mockImplementation ( cb = > {
cb ( {
fullName : “约翰尼·卡什” ,
loggedIn : 真正的 ,
} ) ;
} ) ;
//使用jquery模拟点击按钮
美元 ( “#按钮” ) 点击 ( ) ;
//断言fetchCurrentUser函数被调用,并且
//用户名span的内部文本被更新为我们所期望的。
预计 ( fetchCurrentUser ) toBeCalled ( ) ;
预计 ( 美元 ( “#用户名” ) 文本 ( ) ) toEqual ( '约翰尼·卡什-登录' ) ;
} ) ;

正在测试的函数在。上添加事件监听器#按钮DOM元素,因此我们需要为测试正确设置DOM。Jest附带jsdom它模拟了一个DOM环境,就像您在浏览器中一样。这意味着我们调用的每个DOM API都可以以在浏览器中同样的方式被观察到!

我们嘲笑fetchCurrentUser.js这样我们的测试就不会发出真正的网络请求,而是在本地解析模拟数据。这确保了我们的测试可以在毫秒而不是秒内完成,并保证了快速的单元测试迭代速度。

这个例子的代码可以在下面找到例子/ jquery

最后一次更新在通过Sebastien Lorber