如何在RTL和Jest中测试scrollIntoView？

8mmmxcuj 于 2023-09-28 发布在 Jest

关注(0)|答案(1)|浏览(135)

我正在测试scrollIntoVew事件。有一个探索汽车按钮，当我们点击它时，它会将页面滚动到发现部分。我看到了几个类似的问题，我发现了这个方法：

const scrollIntoViewMock = jest.fn();
Element.prototype.scrollIntoView = scrollIntoViewMock();

这对我挺管用的。单元测试通过。问题是当我删除点击事件时，它也在传递。为什么？为什么？
组件：

"use client";

import Image from "next/image";

import { CustomButton } from "@/components";

const Hero: React.FC = () => {
  const handleScroll = () => {
    const nextSection = document.getElementById("discover");

    if (nextSection) {
      nextSection.scrollIntoView({ behavior: "smooth" });
    }
  };

  return (
    <div className="hero">
      <div className="flex-1 pt-36 padding-x">
        <h1 className="hero__title">
          Find, book, rent a car—quick and super easy!
        </h1>

        <p className="hero__subtitle">
          Streamline your car rental experience with our effortless booking
          process.
        </p>

        <CustomButton
          title="Explore Cars"
          containerStyles="bg-primary-blue text-white rounded-full mt-10"
          handleClick={handleScroll}
        />
      </div>
      <div className="hero__image-container">
        <div className="hero__image">
          <Image src="/hero.png" alt="hero" fill className="object-contain" />
        </div>

        <div className="hero__image-overlay" />
      </div>
    </div>
  );
};

export default Hero;

单元测试（通过）：

it("scrolls to the next section when Explore Cars button is clicked", () => {
    render(<Hero />);

    const scrollIntoViewMock = jest.fn();
    Element.prototype.scrollIntoView = scrollIntoViewMock();

    const buttonElement = screen.getByText("Explore Cars");
    userEvent.click(buttonElement);

    expect(scrollIntoViewMock).toHaveBeenCalled();
  });

无点击事件的单元测试（通过）：

it("scrolls to the next section when Explore Cars button is clicked", () => {
    render(<Hero />);

    const scrollIntoViewMock = jest.fn();
    Element.prototype.scrollIntoView = scrollIntoViewMock();

    expect(scrollIntoViewMock).toHaveBeenCalled();
  });

jestjs

来源：https://stackoverflow.com/questions/76961197/how-to-test-scrollintoview-in-rtl-and-jest

1条答案

按热度按时间

9fkzdhlc1#

因为您在测试用例中调用了scrollIntoViewMock函数。它应该是：

const scrollIntoViewMock = jest.fn();
Element.prototype.scrollIntoView = scrollIntoViewMock;

例如

import React from 'react';

const Hero = () => {
    const handleScroll = () => {
        const nextSection = document.getElementById('discover');

        if (nextSection) {
            nextSection.scrollIntoView({ behavior: 'smooth' });
        }
    };

    return (
        <div>
            <div id='discover'>discover</div>
            <button onClick={handleScroll}>Explore Cars</button>
        </div>
    );
};

export default Hero;

index.test.tsx：

import { render, screen } from '@testing-library/react';
import Hero from '.';
import userEvent from '@testing-library/user-event';
import React from 'react';

it('scrolls to the next section when Explore Cars button is clicked', async () => {
    render(<Hero />);

    const scrollIntoViewMock = jest.fn();
    Element.prototype.scrollIntoView = scrollIntoViewMock;

    const buttonElement = screen.getByText('Explore Cars');
    await userEvent.click(buttonElement);

    expect(scrollIntoViewMock).toHaveBeenCalled();
});

it('scrolls to the next section when Explore Cars button is clicked', () => {
    render(<Hero />);

    const scrollIntoViewMock = jest.fn();
    Element.prototype.scrollIntoView = scrollIntoViewMock;

    expect(scrollIntoViewMock).not.toHaveBeenCalled();
});

试验结果：

PASS  stackoverflow/76961197/index.test.tsx (6.247 s)
  ✓ scrolls to the next section when Explore Cars button is clicked (51 ms)
  ✓ scrolls to the next section when Explore Cars button is clicked (2 ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        6.478 s, estimated 7 s

赞(0）回复(0）举报 2023-09-28

我来回答

如何在RTL和Jest中测试scrollIntoView？

1条答案

相关问题

热门标签

最新问答