如何在JavaScript中测试响应逻辑？

我正在编写一个自定义React钩子，它简化了以下逻辑：

函数UserResponsiveOptions:数组{ 对于选项的常量[mediaQuery，result] 如果window.matchMediaQuery.matches返回结果 返回未定义 } 现在，我通过在每个测试用例之前模拟window.matchMedia来测试它，如下所示：

//模拟小屏幕窗口 window.matchMedia=mediaQuery=>{matches:mediaQuery==='minwidth:320px'}//小屏幕 //运行测试，然后撤消模拟 //模拟中屏幕窗口 window.matchMedia=mediaQuery=>{matches:mediaQuery==='最小宽度：480px'} //运行测试，然后撤消模拟 我使用的是Jest和JSDOM，window.matchMedia没有在那里实现，JSDOM没有进行实际的绘制

我想在没有任何模拟的情况下，通过设置窗口维度来测试这个端到端的钩子，以确保我的UserResponsive钩子按预期工作

我应该选择一些e2e测试库吗？哪一个是简单的？或者，还有其他选择吗

---

更新：

以下是单元测试解决方案：

UserResponsive.ts：

导出默认函数UserResponsiveOptions:Array{ 对于选项的常量[mediaQuery，result]{ 如果window.matchMediaQuery.matches{ 返回结果； } } 返回未定义； } useResponsive.spec.ts：

从“/UserResponsive”导入UserResponsive； 描述“用户响应”，=>{ 之后=>{ 开玩笑，嘲笑； }; 它“应该与媒体匹配”，=>{ 常量mMediaQueryList=[]； window.matchMedia=jest.fn.mockReturnValueOnce{matches:mMediaQueryList}； 常量选项：数组=['min-width:400px'，'some result']； const actual=useResponsiveoptions； 期望实际。是“某种结果”； }; 它“不应与媒体匹配”，=>{ window.matchMedia=jest.fn.mockReturnValueOnce{matches:undefined}； 常量选项：数组=['min-width:400px'，'some result']； const actual=useResponsiveoptions； 期望实际值为0.1，期望未定义； }; }; jest.config.js：

module.exports={ 预设：'ts jest/presets/js with ts'， }; 100%覆盖率的单元测试结果：

通过src/stackoverflow/59448015/useResponsive.spec.ts 用户响应 ✓ 应匹配介质5ms ✓ 不应与介质2ms匹配 ---------|-----|-----|-----|-----|----------| 文件|%Stmts |%Branch |%Funcs |%Lines |未覆盖的行| ---------|-----|-----|-----|-----|----------| 所有文件| 100 | 100 | 100 | 100 || useResponsive.ts | 100 | 100 | 100 | 100 || ---------|-----|-----|-----|-----|----------| 测试套件：1个通过，共1个 测试：2次通过，共2次 快照：共0个 时间：3.578秒

---

源代码：

我们通常用于此类UX测试，用于显示正确的嘲弄方式！我将重构我自己的单元测试。起初，这是一项带回家的任务，期限很紧，所以我忽略了那些开玩笑的助手来完成任务。