Question

我不熟悉 Jest，想编写我的第一个测试，我想在我的 swiper 中测试幻灯片更改。我的下一张幻灯片按钮上的 onClick 有一个来自 react useContext 的回调函数。

当我运行测试时，出现此错误：

SwiperComponent › Swiper slide › renders the name of the next item of my mockData, after clicking next button

    TypeError: trackClickWithParam is not a function

      116 |                         onClick={(event) => {
      117 |                             (event.target as HTMLButtonElement).blur();
    > 118 |                             trackClickWithParam(trackingParamNext);
          |                             ^
      119 |                         }}

这是我的背景：

//context
export const TrackingProvider: React.FC = ({ children }) => {
    const [webtrekk, setWebtrekk] = useState<WebTrekk | null>(null);
    const [showCookieConsentLayer, setShowCookieConsentLayer] = useState<boolean>(false);

    const initWebtrekkWithConfig = (config: WebtrekkConfig): void => {
        setWebtrekk(new webtrekkV3(config));
    };

    const trackClickWithParam = (param: string): void => {
        TRACKING_ACTIVE && webtrekk && webtrekk.sendinfo({ linkId: param });
    };

    useEffect(() => {
        TRACKING_ACTIVE && webtrekk && webtrekk.sendinfo();
        window.wt = webtrekk;
    }, [webtrekk]);

    return (
        <TrackingContext.Provider
            value={{
                initWebtrekkWithConfig,
                trackClickWithParam,
                showCookieConsentLayer,
                setShowCookieConsentLayer,
            }}
        >
            {children}
        </TrackingContext.Provider>
    );
};

这是我的测试：

//test
import { render, screen } from '@testing-library/react';
import SwiperComponent from './SwiperComponent';
import user from '@testing-library/user-event';

const props = {
    onSwiperSlide: jest.fn(),
    currentSwipeLabel: mockData[0].name,
    currentContentItem: mockData[0],
    contentData: mockData,
    contentType: 0,
    trackingParamPrev: '',
    trackingParamNext: '',
};

describe('SwiperComponent', () => {
    beforeEach(() => {
        render(<SwiperComponent {...props} />);
    });

    it('renders the name of the first item of my mockData', () => {
        const swiperActiveContentName = screen.getByText(mockData[0].name);
        expect(swiperActiveContentName).toBeInTheDocument();
    });

    it('renders the next-slide button', () => {
        const nextSlideButton = screen.getByRole('button', { name: 'Nächster Slide' });
        expect(nextSlideButton).toBeInTheDocument();
    });

    describe('Swiper slide', () => {
        beforeEach(() => {
            user.click(screen.getByRole('button', { name: 'Nächster Slide' }));
        });

        it('renders the name of the next item of my mockData, after clicking next button', () => {
            expect(screen.getByText(mockData[1].name)).toBeInTheDocument();
        });
    });
});

有人知道为什么 trackClickWithParam 不应该是函数吗？该代码不会在我的测试之外抛出任何错误。我可以以某种方式告诉测试忽略回调吗？

我很感谢任何提示 =)

Jest useContext 返回值函数不是函数

0 个答案: