TypeError:scrollIntoView는 함수가 아닙니다.

TypeError:scrollIntoView는 함수가 아닙니다.

react-testing-library/jeast를 처음 접하여 (react-router-dom을 사용하여) 경로의 네비게이션이 올바르게 수행되는지 확인하기 위한 테스트를 작성하려고 합니다.지금까지 README와 이 튜토리얼의 사용 방법에 대해 살펴보았습니다.

컴포넌트 중 하나가 로컬 함수로 scrollIntoView를 사용하여 테스트가 실패합니다.

TypeError: this.messagesEnd.scrollIntoView is not a function

  45 |
  46 |     scrollToBottom = () => {
> 47 |         this.messagesEnd.scrollIntoView({ behavior: "smooth" });
     |                          ^
  48 |     }
  49 |
  50 | 

다음은 내 챗봇 구성 요소의 기능입니다.

componentDidUpdate() {
    this.scrollToBottom();
}

scrollToBottom = () => {
    this.messagesEnd.scrollIntoView({ behavior: "smooth" });
}

다음은 불합격 테스트의 예입니다.

test('<App> default screen', () => {

    const { getByTestId, getByText } = renderWithRouter(<App />)

    expect(getByTestId('index'))

    const leftClick = {button: 0}
    fireEvent.click(getByText('View Chatbot'), leftClick) <-- test fails

    expect(getByTestId('chatbot'))

})

모의 기능을 사용하려고 했지만 아직 오류가 남아 있습니다.

여기서부터.messageEnd가 할당됩니다.

    <div className="chatbot">
        <div className="chatbot-messages">
            //render messages here
        </div>
        <div className="chatbot-actions" ref={(el) => { this.messagesEnd = el; }}>
            //inputs for message actions here
        </div>
    </div>

다음 스택 오버플로우 질문에서 코드를 참조했습니다.어떻게 반응해서 아래로 스크롤합니까?

솔루션

test('<App> default screen', () => {

    window.HTMLElement.prototype.scrollIntoView = function() {};

    const { getByTestId, getByText } = renderWithRouter(<App />)

    expect(getByTestId('index'))

    const leftClick = {button: 0}
    fireEvent.click(getByText('View Chatbot'), leftClick)

    expect(getByTestId('chatbot'))

})

scrollIntoView는 jsdom에서 구현되지 않습니다.문제는 링크입니다.

수동으로 추가하는 것으로, 동작할 수 있습니다.

window.HTMLElement.prototype.scrollIntoView = function() {};

리액트 테스트 라이브러리를 사용하여 리액트 어플리케이션에서 'scrollIntoView' 함수를 테스트하려면 'jest'를 사용하여 함수를 시뮬레이션할 수 있습니다.

window.HTMLElement.prototype.scrollIntoView = jest.fn()

언급URL : https://stackoverflow.com/questions/53271193/typeerror-scrollintoview-is-not-a-function