reactjs - 使用 Jest 和 enzyme 时如何在 React.useEffect 钩子(Hook)上获得行覆盖？

Question

使用 React、enzyme 和 jest，如何在 useEffect()

中获取我的 closeDrawer() 回调 Prop 的代码覆盖率

import React, {useEffect} from 'react';
import {Button} from './button';

const DrawerClose = ({closeDrawer}) => {
  useEffect(() => {
    const handleEsc = (e: any) => {
      if (e.key === 'Escape') {
        closeDrawer();
      }
    };
    window.addEventListener('keyup', handleEsc);
    return () => window.removeEventListener('keyup', handleEsc);
  });
  return (
    <Button>
      close
    </Button>
  );
};

export {DrawerClose};

测试:

import React from 'react';
import {DrawerClose as Block} from './drawer-close';

describe(`${Block.name}`, () => {
  it('should have drawer open', () => {
    const wrapper = shallow(<Block closeDrawer={() => 'closed'} />);
    expect(wrapper).toMatchSnapshot(); // will not hit the useEffect
  });
});

Answer 1

shallow() 还没有调用 useEffect。这是known issue #2086这是因为 React 的浅层渲染器。

您可以使用 mount() 并完全渲染，也可以模拟每个/某些嵌套组件并仍然使用 mount() 但结果更像 shallow( ) 可以。像这样的东西:

jest.mock('../../Button.jsx', (props) => <span {...props} />);

至于测试本身，您需要确保 closeDrawer 在按下 ESC 时被调用。所以我们需要使用spy，模拟模拟敲ESC

const closeDrawerSpy = jest.fn();
const wrapper = mount(<Block closeDrawer={closeDrawerSpy} />);
// simulate ESC pressing

关于模拟窗口按下ESC，我不确定jest-dom是否允许，你可以试试(取自Simulate keydown on document for JEST unit testing)

var event = new KeyboardEvent('keyup', {'keyCode': 27});
window.dispatchEvent(event);

如果那不起作用(window.dispatchEvent 不是一个函数 或类似的东西)你总是can mock addEventListener可以直接访问处理程序。