使用Jest和酶时，如何在React.useEffect钩子上获得线路覆盖率?

Question

使用 React、酶和玩笑，如何在 useEffect() 中获取closeDrawer()回调道具的代码覆盖率

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。这是已知的问题 #2086，并且由于 React 的浅层渲染器而发生。

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

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

至于测试本身，您需要确保在击中ESC时调用closeDrawer。所以我们需要使用间谍和模拟模拟击中ESC

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

至于模拟按下窗口的ESC，我不确定jest-dom是否允许，您可以尝试(取自模拟文档上的键控以进行JEST单元测试(

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

如果这不起作用(window.dispatchEvent is not a function或类似的东西(，你总是可以模拟addEventListener直接访问处理程序。