Question

我正在尝试对简单的自定义钩子getWindowWidth()进行单元测试，但无法在“酶”中调整窗口大小。

我正在使用酶来安装使用挂钩的组件，设置窗口对象的宽度，强制重新渲染，但是窗口的宽度永远不会改变。

这是钩子：

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');
});

我希望窗口可以调整为320，但是它保持在1024（默认值）。

Answer 1

问题在于Jest利用了不提供window对象的jsdom。您需要进行模拟才能对其进行测试。

带有窗口调整大小事件的单元测试自定义React Hook

1 个答案: