Testing scrollIntoView

See original GitHub issue
 scrollToAnchor(props) {
    const anchorName = props.location.hash;
    if (anchorName) {
      browserHistory.replace(`/url/${props.params.id}`);
      setTimeout(() => {
        const anchorElement = document.getElementById(anchorName);
        if (anchorElement) {
          anchorElement.scrollIntoView();
        }
      }, 0);
    }
  }

I am spying on scrollIntoView but haven’t been lucky at all.

it('should call scrollIntoView native method on element', () => {
          const props = getDefaultProps(); // Defined globally
          const wrapper = mount(<Abstractions {...props} />);
          const element = wrapper.findWhere(n => n.props().id === 'pods');
          sinon.spy(element, 'scrollIntoView');

          const instance = wrapper.instance();
          instance.scrollToAnchor({
            location: {
              hash: '#map'
            },
            params: {
              id: '1'
            }
          });

          expect(element.scrollIntoView).to.have.been.called;
        });

Am I missing something here or there’s some other mechanism that we need to adapt for testing the native methods?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:6
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

13reactions
jangeroocommented, Nov 19, 2018

You could spy on getElementById here and return a mock element that you can then add another spy for scrollIntoView on.

This solution helped me get this working for testing that a function scrollTo calls scrollIntoView:

...
const scrollIntoViewSpy = jest.fn();
jest.spyOn(global.document, 'getElementsByClassName')
  .mockImplementation(() => [{ scrollIntoView: scrollIntoViewSpy }]);

instance.scrollTo(selected);
expect(scrollIntoViewSpy).toHaveBeenCalledTimes(1);
0reactions
ljharbcommented, Sep 1, 2018

@laumair a ref callback provides that.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Testing scrollintoview Jest - Stack Overflow
So I stumbled on this question because I thought it was about how to test Element.scrollIntoView(), which can be done by mocking it...
Read more >
.scrollIntoView() | TestController | Test API | API | Docs
Scrolls parent containers of the target element until the element is in the viewport. Can be chained with other TestController methods. t.scrollIntoView(target ...
Read more >
ScrollIntoView Tests - CodePen
ScrollIntoView Tests · Fat Media Follow. Love Run. Pen Editor Menu. Settings. Change View. Use Left Layout Use Top Layout Use Right Layout....
Read more >
Reactjs – Testing scrollintoview Jest - iTecNote
I have a simple function: scrollToSecondPart() { this.nextPartRef.current.scrollIntoView({ behavior: "smooth" }); }. and I would like to test it using Jest.
Read more >
Browser Compatibility Testing of Scroll Into View - LambdaTest
With LambdaTest you can perform browser compatibility testing for Scroll Into View element across 3000+ browser-OS combinations.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found