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

Question

我有一个要测试的功能组件，我使用滚动位置挂钩（插件@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

为了覆盖自定义钩子的回调参数，你只需要通过实现这样的函数来配置一个模拟：

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

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

Cover the callback argument inside custom hook with Jest/Enzyme

reactjs

test-coverage

jestjs

enzyme

react-hooks