跳到主要内容
版本:26.x.

Manipulacióndeldom

通常被认为难以测试的另一类功能是直接操纵DOM的代码。让我们看看我们如何测试侦听侦听到单击事件的jQuery代码的片段,异步获取一些数据并设置跨度的内容。

// displayuser.js.
'使用strict' ;
const $ = 要求 'jquery' ;
const fetchcurrentuser. = 要求 './fetchcurrentuser.js' ;
$ '#按钮' 点击 => {
fetchcurrentuser. 用户 => {
const LoggedText. = 'logged' + 用户 登录 '在' '出去' ;
$ '#用户名' 文本 用户 全名 + ' - ' + LoggedText. ;
} ;
} ; '在' '出去' ;
$ '#用户名' 文本 用户 全名 + ' - ' + LoggedText. ;
} ;
} ;

UnaVezmás,Creamos联合国Archivo de Test En La Capeta__tests__ /

// __tests __ / displayuser-test.js
'使用strict' ;
笑话 嘲笑 '../fetchcurrentuser' ;
测试 '单击'后显示用户 => {
//设置我们的文档正文
文档 身体 innerhtml. =
'
' +
'' +
'<按钮ID =“按钮”/>“ +
'' ;
//此模块具有副作用
要求 '../displayuser' ;
const $ = 要求 'jquery' ;
const fetchcurrentuser. = 要求 '../fetchcurrentuser' ;
//告诉FetchCurrentUser Mock函数以自动调用
//它与一些数据的回调
fetchcurrentuser. 模仿 CB. => {
CB. {
全名 'Johnny Cash'
登录 真的
} ;
} ;
//使用jquery仿真点击我们的按钮
$ '#按钮' 点击 ;
//断言,调用fetchCurrentUser函数,并且那个
// #USERName Span的内部文本已更新,因为我们期望它。
预计 fetchcurrentuser. 被称为 ;
预计 $ '#用户名' 文本 toequal. 'Johnny Cash - 登录' ;
} ;

正在测试的功能添加了一个事件侦听器#按钮DOM元素,所以我们需要正确地设置我们的DOM进行测试。笑船jsdom.它模拟了DOM环境,好像您在浏览器中。这意味着我们呼叫的每个DOM API都可以以相同的方式观察到浏览器中的相同方式!

estamos mockeando.fetchcurrentuser.js.para que nuestro测试没有haga una ocatud de红色真正的pero en su lugar mockeamos los datos a nivel local。Esto Garantiza Que Nuestro测试Puede Terminar en Milisegundos en Lugar de Segundos y GarantizaUnaRápidaInteracciónNenCadaUnidad De Test。

ElCódigode Este EjemertoEstáImedOnibleen:例子/ jQuery.