Javascript 使用窗口调整大小事件对自定义React挂钩进行单元测试

我正在尝试对一个简单的自定义钩子进行单元测试，

getWindowWidth（）

，但是我无法让Ezyme中的窗口调整大小

我正在使用Ezyme挂载一个使用钩子的组件，设置窗口对象的宽度，强制重新渲染，但窗口宽度从未改变

这是钩子：

import { useState, useEffect } from 'react';

export default function getWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  });

  return width;
}

这是我的测试：

import React from 'react';
import { mount } from 'enzyme';
import getWindowWidth from './getWindowWidth';

// simulate window resize
function fireResize(width) {
  window.innerWidth = width;
  window.dispatchEvent(new Event('resize'))
}
// Test component that uses the Hook
function EffecfulComponent() {
  const viewport = getWindowWidth()
  return <span>{viewport}</span>
}

test('should show updated window width', () => {
  const wrapper = mount(<EffecfulComponent />)
  expect(wrapper.text()).toEqual('1024');
  fireResize(320);
  wrapper.update();
  expect(wrapper.text()).toEqual('320');
});

从“React”导入React；
从“酶”导入{mount}；
从“/getWindowWidth”导入getWindowWidth；
//模拟窗口大小调整
函数fireResize（宽度）{
window.innerWidth=宽度；
dispatchEvent（新事件（'resize'））
}
//测试使用挂钩的组件
函数effectfulcomponent（）{
const viewport=getWindowWidth（）
返回{viewport}
}
测试（'应显示更新的窗口宽度'，（）=>{
const wrapper=mount（）
expect（wrapper.text（））.toEqual（'1024'）；
火炉（320）；
wrapper.update（）；
expect（wrapper.text（））.toEqual（'320'）；
});

---

我希望窗口的大小调整为320，但它保持在1024（默认值）。

问题是Jest使用了jsdom，而jsdom不提供窗口对象。为了测试它，您需要进行模拟