用Jest/Enzyme覆盖自定义钩子中的回调参数

Question

我有一个想要测试的功能组件，我使用scroll position钩子(plugin @n8tb1t/ use -scroll-position)通过传递回调参数来获取Y。但是我发现我的测试没有覆盖滚动位置钩子的回调。

import { useState } from 'react';
import { useScrollPosition } from '@n8tb1t/use-scroll-position';

const Scroll = (): JSX.Element => {
    const [y, setY] = useState(0);

    useScrollPosition(({ currPos }): void => {
        setY(Math.abs(currPos.y));
    });

    return (
        <>
            <style jsx global>{`
                .parent {
                    position: relative;
                }

                .y {
                    position: fixed;
                    top: 1em;
                    right: 1em;
                    background-color: #fff;
                    padding: 2em;
                    border: 5px solid #000;
                }

                .p {
                    height: 1500px;
                    padding: 2em;
                }
            `}</style>
            <div id="parent" className="parent">
                <b className="y">Y {y}px</b>
                <p className="p">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum molestias architecto quam assumenda error enim ab quia animi placeat dolor.</p>
            </div>
        </>
    )
}

export default Scroll;

这是我的组件的覆盖结果：

​

​

我是测试新手，我不知道该怎么说。据我所知，我不能窥探它，因为这个函数是私有的。我尝试了模拟实现，没有任何改变！

这是我制作的测试文件：

import { shallow } from 'enzyme';
import React from 'react';
import Scroll from '@src/pages/scroll';
import { waitForComponentToPaint } from '@src/__mocks__/act';

afterEach(() => {
    jest.clearAllMocks();
});

describe('Scroll Component', () => {
    it('Should render without throwing an error', async () => {
        const wrap = shallow(<Scroll />);
        await waitForComponentToPaint(wrap);

        expect(wrap.find('#parent')).toBeDefined();
    });
});

在我的项目中，我使用Next.js作为框架

Answer 1

为了覆盖自定义钩子的回调参数，您只需要通过实现如下函数来配置一个mock：

jest.mock('@n8tb1t/use-scroll-position', () => ({
    ...jest.requireActual('@n8tb1t/use-scroll-position'),
    useScrollPosition: jest.fn()
        .mockImplementationOnce((cb) => cb({ currPos: { y: 200 } })),
}));