reactjs - 如何使用 jest + 酶测试带有元素 ref 的 useCallback

Question

在我的反应应用程序中，我模仿了引导下拉菜单。它工作正常。

我想测试useCallback、useEffect和document方法

执行点：

1. 组件负载handleMouseEvent将附加到document mouseup event. 当mouseup event触发时，它会执行handleMouseEvent。
2. 然后hasFocus方法将返回下拉菜单的焦点状态。
3. 然后使用焦点状态，下拉菜单将显示或隐藏。

Dropdown.jsx

const Dropdown = props => {

    let dropdownRef = createRef();

    const hasFocus = useCallback((target) => {
        if (!dropdownRef) return false;

        let dropdownHasFocus = false;
        const nodeIterator = document.createNodeIterator(
            dropdownRef, NodeFilter.SHOW_ELEMENT, null, false
        );
        let node;

        while (node) {
            if (node === target) {
                dropdownHasFocus = true;
                break;
            }
            node = nodeIterator.nextNode()
        }

        return dropdownHasFocus;

    }, [ dropdownRef ]);

    const handleMouseEvent = useCallback((event) => {
        const dropdownHasFocus = hasFocus(event.target);
        console.log(dropdownHasFocus);
        // setToggleStatus(dropdownHasFocus);
    }, [ hasFocus ]);

    useEffect(() => {
        // handles mouse events like click and dblclick
        document.addEventListener('mouseup', handleMouseEvent);
        return () => {
            document.removeEventListener('mouseup', handleMouseEvent);
        }
    }, [ dropdownRef, handleMouseEvent ]);

    return <div class="dropdown"> {/* Dropdown HTML */} </div>;
} 

export default Dropdown;

这是我的测试代码

规范.jsx

describe('Dropdown testcase', () => {
    const map = {};
    beforeEach(() => {
        document.addEventListener = jest.fn((event, callback) => {
            map[ event ] = callback;
        });
    });
    it('test hasFocus', () => {
        const selectedSpy = jest.fn();
        const component = shallow(
            <Dropdown
                items={DropdownData}
                name="Dropdown"
                selected={selectedSpy}
            />
        );

        expect(component.find('div.dropdown-menu.show').exists()).toBeFalsy();
        component.find('span.dropdown-toggle').simulate('click');
        expect(component.find('div.dropdown-menu.show').exists()).toBeTruthy();

        /* map.mouseup({
            target: document.createElement('span', { className: 'dropdown-toggle' }, 'Dropdown')
        }); */
        expect(component.find('div.dropdown-menu.show').exists()).toBeFalsy();
    });
});

请帮助我

标签： reactjsjestjsreact-hooksenzyme