how would I test an event that causes the page to scroll?

[lostrouter]

I am trying to test for a click event causing a page scroll. I am trying this, and it is passing when i remove the click simulation. What am i not doing in the test?

React component

var React = require('react');

module.exports = React.createClass({
    onClick: function(e) {
        e.preventDefault();
        window.scrollTo(0, 0);
    },

    render: function() {
        return (<a href="#" className="back-to-top" onClick={this.onClick}>Back to top</a>);
    }       
});

Jest Test

global.React = require('react');

var TestUtils = React.addons.TestUtils;
var componentPath = '../React/Components/Footer/BackToTop/BackToTop.jsx';
jest.dontMock(componentPath);

describe("Click Event Handler", function() {
    it("should scroll to top of the page", function() {
        var Component = require(componentPath);
        var domComponent = TestUtils.renderIntoDocument(<Component></Component>);
        var anchorNode = TestUtils.findRenderedDOMComponentWithTag(domComponent, 'a');

        var expectedY = 0;
        var expectedX = 0;

        // scroll the window
        window.scrollTo(5, 1000);

        // click Back to Top
        TestUtils.Simulate.click(anchorNode);

        var actualY = window.pageYOffset;
        var actualX = window.pageXOffset;

        expect(actualX).toBe(expectedX);
        expect(actualY).toBe(expectedY);
    });
});

[davidgilbertson]

@lostrouter Did you have any luck with this? I'm trying the same thing. My problem seems to be that window.innerHeight is only 300, so window.scrollTo has no effect.

[lostrouter]

i didn't get anywhere with this and am falling back to testing in browser.

[ghost]

Thank you for reporting this issue and appreciate your patience. We've notified the core team for an update on this issue. We're looking for a response within the next 30 days or the issue may be closed.

[cpojer]

You might be able to just directly set window.scrollTop and window.scrollLeft. If that doesn't work, try Object.defineProperty(window, 'scrollTop', {value: 10, writable: true})

[inancgumus]

I would do it with a fake container instead of window. That's more testable.

[DarioG]

Well, here you have a couple of options...

• You can try to inject window ( dependency injection) and then it is really easy to test, just inject a fake window object in your tests, or
• you could spy spyOn(window, 'scrollTo') ( not sure if it is like that with that test framework) and you just check that that method was called with the arguments 0, 0

expect(window.scrollTo).toHaveBeenCalledWith(0, 0);

I think the second way is good enough, since you code actually "does not care" about what scrollTo does internally, you just need to test that you are calling that method when the click event happens.

I hope this helps :)

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.