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

我有一个功能组件，我想测试它，我使用滚动位置钩子（plugin@n8tb1t/use scroll position）通过传递回调参数得到Y。但是我发现我的测试并没有涵盖scroll position钩子的回调

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;

从'react'导入{useState}；
从'@n8tb1t/use-scroll-position'导入{useCollPosition}；
常量滚动=（）：JSX.Element=>{
const[y，setY]=useState（0）；
UseCrollPosition（{currPos}）：void=>{
setY（数学abs（currPos.y））；
});
返回(
{`
.家长{
位置：相对位置；
}
.y{
位置：固定；
顶部：1米；
右：1em；
背景色：#fff；
填料：2米；
边框：5px实心#000；
}
p{
高度：1500px；
填料：2米；
}
`}
Y{Y}px
洛雷姆·伊普苏姆·多洛（Lorem ipsum dolor）是一位杰出的建筑师，他认为多洛（dolor）的生态环境存在错误
)
}
导出默认滚动条；

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

我是测试新手，我不知道该怎么做。据我所知，我无法监视它，因为该函数是私有的。我尝试了模拟实现，没有任何变化

这是我制作的测试文件：

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

import{shall}来自“酶”；
从“React”导入React；
从'@src/pages/Scroll'导入滚动条；
从“@src/_mocks__/act”导入{waitForComponentToPaint}”；
之后（（）=>{
开玩笑。clearAllMocks（）；
});
描述（'滚动组件'，（）=>{
它（'应该在不引发错误的情况下呈现'，异步（）=>{
常数包裹=浅（）；
等待等待组件上漆（包装）；
expect（wrap.find（'#parent'））.toBeDefined（）；
});
});

---

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

来覆盖custom hook的回调参数，您只需要通过实现如下函数来配置一个mock：

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