Jestjs 如何使用jest测试带有DOM元素的javascript代码

我是javascript新手，我一直在尝试为他的代码编写测试，但我没能，我们应该使用jest。 我已经研究了很长时间没有找到解决方案

document.getElementById（“注册”）.addEventListener（“提交”，函数（e）{
e、 预防默认值（）；
数据={
用户名：document.getElementById（“用户名”）.value，
电子邮件：document.getElementById（“电子邮件”）.value，
密码：document.getElementById（“密码”）.value，
确认密码：document.getElementById（“confirmPassword”）.value，
};
});
注册=（数据）=>{
取回（“https://diaryapi-v2.herokuapp.com/mydiary/v1/auth/register", {
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”
},
正文：JSON.stringify（数据）
})
.then（res=>res.json（））
。然后（数据=>{
如果（data.message==“您的帐户已创建”）{
设msg=data.message；
document.getElementById（“白色”）.innerHTML=msg；
window.location.href=“/sign”；
}否则{
设msg=Object.values（数据）；
控制台日志（msg）
document.getElementById（“白色”）.innerHTML=msg；
}
})
.catch（error=>console.error（“error:，error））；
}

您的代码没有任何导出，因此您需要在测试运行时使用

require（）

它发出网络请求并设置窗口位置，因此您需要使用来验证它是否按预期工作，而无需实际发出网络请求并设置窗口位置

它通过使用给

then（）

的回调异步执行一些工作，因此您需要在测试中考虑这一点

Jest

使用

jsdom

在单元测试中提供类似浏览器的环境，您可以在使用

require（）

运行代码之前使用该环境设置所有内容

我对您的代码进行了一些小的修改，如下所示：

---

code.js

document.getElementById（“注册”）.addEventListener（“提交”，函数（e）{
e、 预防默认值（）；
//添加“const”
常数数据={
用户名：document.getElementById（“用户名”）.value，
电子邮件：document.getElementById（“电子邮件”）.value，
密码：document.getElementById（“密码”）.value，
确认密码：document.getElementById（“confirmPassword”）.value，
};
注册（数据）；//使用数据调用注册
});
//添加“const”
常量注册=（数据）=>{
取回（“https://diaryapi-v2.herokuapp.com/mydiary/v1/auth/register", {
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”
},
正文：JSON.stringify（数据）
})
.then（res=>res.json（））
。然后（数据=>{
如果（data.message==“您的帐户已创建”）{
设msg=data.message；
document.getElementById（“白色”）.innerHTML=msg；
window.location.assign（“/signin”）；//将其更改为assign（），以便可以对其进行模拟
}否则{
设msg=Object.values（数据）；
控制台日志（msg）
document.getElementById（“白色”）.innerHTML=msg；
}
})
.catch（error=>console.error（“error:，error））；
}

---

以下是上述代码的工作测试，您可以将其用作参考：

code.test.js

description（'code'，（）=>{
让我们嘲笑；
让我们嘲笑；
在每个之前（（）=>{
//Jest使用jsdom作为默认测试环境，模拟
//浏览器，并为单元测试提供文档对象。
//使用测试所需的HTML初始化文档体
document.body.innerHTML+=`
`;
//创建用于获取的模拟并提供模拟实现
//因此，单元测试实际上并没有发出网络请求
fetchMock=jest.spyOn（全局“fetch”）；
fetchMock.mockImplementation（（）=>Promise.resolve({
json:（）=>Promise.resolve（{消息：'您的帐户已创建'}）
}));
//为window.location.assign（）创建模拟
//所以单元测试实际上并没有改变窗口的位置
assignMock=jest.spyOn（window.location，'assign'）；
assignMock.mockImplementation（（）=>{}）；
//设置好所有内容后，需要代码
要求（'./代码'）；
});
之后（（）=>{
//每次测试后调用mockRestore（）以还原原始函数
fetchMock.mockRestore（）；
assignMock.mockRestore（）；
//resetModules（）在Jest中重置模块注册表并确保
//在require（）上执行“/code”的新副本
jest.reset模块（）；
});
它（'应该获取数据，更改#white的内容，并在提交时更改页面位置'，async（）=>{
//提交表格
document.getElementById（'submitbutton'）。单击（）；
//检查是否使用预期参数调用了fetch
期望（fetchMock）.已被调用的时间（1）；
const fetchArgs=fetchMock.mock.calls[0]；
expect（fetchArgs[0]）.toBe（'https://diaryapi-v2.herokuapp.com/mydiary/v1/auth/register');
expect（fetchArgs[1]）.toEqual({
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”
},
正文：JSON.stringify({
用户名：“用户名”，
电子邮件：“电子邮件”，
密码：“密码”，
确认密码：“确认密码”，
})
});
//暂停两个事件循环测试的同步执行
//因此，由注册中的then（）排队的回调有机会运行
等待承诺。下决心（）然后（）；
//检查是否使用预期参数调用了window.location.assign（）
期望（assignMock）.已被催收时间（1）；
expect（assignMock.mock.calls[0][0]）toBe（'/sign'）；
//检查“白色”是否已更新
expect（document.getElementById（'white'）.innerHTML）.toBe（'您的帐户已创建'）；
});
});

am ge