search

Home  >  Q&A  >  body text

React test library error: Uncaught

I have a react component

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

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;

It works fine in the UI. But when I write the following unit test:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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

  });

});

The test failed and I received the error log:

1

2

3

4

5

6

7

8

9

10

11

12

13

● 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

I'm trying to get help fixing my unit tests. There is a dependency on screenWidth on the useEffect function and when that changes we scroll to the beginning of the icon list.

P粉917406009P粉917406009299 days ago414

reply all(1)I'll reply

  • P粉256487077

    P粉2564870772024-03-30 00:35:31

    I also encountered a similar problem. I was able to make the test pass and eliminate the error by adding the following:

    1

    Element.prototype.scrollTo = jest.fn();

    By adding this to your setupTests file it should get rid of the errors, but since it's a mock now you won't be able to test the ether functionality.

    Also, I like that the test library is not ready or equipped to test scroll events, if you want to test them you need a browser based test environment, not a node like jest and test-library.

    Hope this helps.

    Edit 1:

    But you can test whether the function has been called, for example:

    1

    expect(Element.prototype.scrollTo).toHaveBeenCalled();

    reply
    0
  • Cancelreply