我有一個反應元件
import React, { useEffect, useRef, useState } from 'react'; import './PopularBrands.scss'; import LG from '../../../assets/images/brands/LG.png'; import Google from '../../../assets/images/brands/Google.jpeg'; import Apple from '../../../assets/images/brands/Apple.png'; import Boch from '../../../assets/images/brands/Boch.png'; import Dyson from '../../../assets/images/brands/Dyson.png'; import Philips from '../../../assets/images/brands/Philips.png'; import Samsung from '../../../assets/images/brands/Samsung.png'; import Simens from '../../../assets/images/brands/Simens.png'; import Sony from '../../../assets/images/brands/Sony.png'; import Xiomi from '../../../assets/images/brands/Xiomi.png'; import { FaChevronLeft } from 'react-icons/fa'; import { FaChevronRight } from 'react-icons/fa'; const PopularBrands = () => { const scrollViewRef = useRef<HTMLDivElement | null>(null); const [screenWidth, setScreenWidth] = useState(0); const [width, setWidth] = useState(0); const [widthTotal, setWidthTotal] = useState(0); const [showArrow, setShowArrow] = useState(false); useEffect(() => { function handleWindowResize() { if (scrollViewRef.current) setWidth(scrollViewRef.current.clientWidth); if (scrollViewRef.current) setWidthTotal(scrollViewRef.current.scrollWidth); } handleWindowResize(); window.addEventListener('resize', handleWindowResize); return () => { window.removeEventListener('resize', handleWindowResize); }; }, []); useEffect(() => { scrollViewRef.current?.scrollTo({ left: screenWidth, behavior: 'smooth' }); }, [screenWidth]); const toNextPage = () => { if (scrollViewRef && screenWidth <= widthTotal) { setScreenWidth(screenWidth + width); } }; const toPreviosPage = () => { if (scrollViewRef && screenWidth >= 0) { setScreenWidth(screenWidth - width); } }; return ( <div className="brandsContainer" onMouseEnter={() => setShowArrow(true)} onMouseLeave={() => setShowArrow(false)}> <div className="brands" ref={scrollViewRef}> <div> <img src={LG} alt="lg" /> </div> <div> <img src={Google} alt="Google" /> </div> <div> <img src={Apple} alt="Apple" /> </div> <div> <img src={Boch} alt="Boch" /> </div> <div> <img src={Dyson} alt="Dyson" /> </div> <div> <img src={Philips} alt="Philips" /> </div> <div> <img src={Samsung} alt="Samsung" /> </div> <div> <img src={Simens} alt="Simens" /> </div> <div> <img src={Sony} alt="Sony" /> </div> <div> <img src={Xiomi} alt="Xiomi" /> </div> </div> {screenWidth > 0 && showArrow && ( <div className="scrollIcon scrollBack" onClick={toPreviosPage}> <FaChevronLeft fontSize={30} /> </div> )} {screenWidth + width < widthTotal && showArrow && ( <div className="scrollIcon scrollNext" onClick={toNextPage}> <FaChevronRight fontSize={30} /> </div> )} </div> ); }; export default PopularBrands;
它在使用者介面中運作正常。但是當我編寫以下單元測試時:
import React from 'react'; import { render, screen } from '@testing-library/react'; import PopularBrands from './PopularBrands'; describe('PopularBrands', () => { test.only('renders the component', () => { render(<PopularBrands />); expect(screen.getByAltText('lg')).toBeInTheDocument(); expect(screen.getByAltText('Google')).toBeInTheDocument(); expect(screen.getByAltText('Apple')).toBeInTheDocument(); expect(screen.getByAltText('Boch')).toBeInTheDocument(); expect(screen.getByAltText('Dyson')).toBeInTheDocument(); expect(screen.getByAltText('Philips')).toBeInTheDocument(); expect(screen.getByAltText('Samsung')).toBeInTheDocument(); expect(screen.getByAltText('Simens')).toBeInTheDocument(); expect(screen.getByAltText('Sony')).toBeInTheDocument(); expect(screen.getByAltText('Xiomi')).toBeInTheDocument(); }); });
測試未通過,我收到錯誤日誌:
● PopularBrands › renders the component TypeError: _scrollViewRef$curren.scrollTo is not a function 37 | 38 | useEffect(() => { > 39 | scrollViewRef.current?.scrollTo({ left: screenWidth, behavior: 'smooth' }); | ^ 40 | }, [screenWidth]); 41 | 42 | const toNextPage = () => { at src/components/Directory/PopularBrands/PopularBrands.tsx:39:28
我正在嘗試尋求幫助來修復我的單元測試。在 useEffect 函數上有一個依賴 screenWidth,當該變化時,我們捲動到圖示清單的開頭。
我也遇到類似的問題了。我能夠透過添加以下內容來使測試通過並消除錯誤:
透過將其新增至您的 setupTests 檔案 setupTests 檔案中,它應該可以消除錯誤,但由於它現在是一個模擬,您將無法測試以太功能。
此外,我喜歡測試庫沒有準備好或沒有裝備來測試滾動事件,如果你想測試它們,你需要一個基於瀏覽器的測試環境,而不是一個像玩笑和測試這樣的節點 -圖書館。
希望這有幫助。
編輯1:
#但是您可以測試該函數是否已被調用,例如: