Vue-test-utils: .scrollTo is not a function

[darrenjennings]

In one of my tests I execute a method that scrolls an element. The element resultsScrollElement I'm querying like this: document.querySelector(".autosuggest__results"), and then I'm executing the scrollTo method.

I get this error:

TypeError: resultsScrollElement.scrollTo is not a function

      at VueComponent.ensureItemVisible (src/Autosuggest.vue:286:32)
      at VueComponent.boundFn [as ensureItemVisible] (node_modules/vue/dist/vue.runtime.common.js:187:14)
      at VueComponent.setChangeItem (src/Autosuggest.vue:266:16)
      at VueComponent.boundFn [as setChangeItem] (node_modules/vue/dist/vue.runtime.common.js:188:14)
      at VueComponent.handleKeyStroke (src/Autosuggest.vue:216:22)
      at boundFn (node_modules/vue/dist/vue.runtime.common.js:188:14)
      at invoker (node_modules/vue/dist/vue.runtime.common.js:1935:18)
      at HTMLInputElement.fn._withTask.fn._withTask (node_modules/vue/dist/vue.runtime.common.js:1770:18)
      at Wrapper.trigger (node_modules/vue-test-utils/dist/vue-test-utils.js:1278:16)
      at __tests__/autosuggest.test.js:264:23
      at __tests__/autosuggest.test.js:9:9
      at __tests__/autosuggest.test.js:10:21
      at __tests__/autosuggest.test.js:10:21
      at _callee6$ (__tests__/autosuggest.test.js:263:23)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:65:40)
      at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:299:22)
      at Generator.prototype.(anonymous function) [as next] (node_modules/regenerator-runtime/runtime.js:117:21)
      at step (node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
      at node_modules/babel-runtime/helpers/asyncToGenerator.js:35:14
      at F (node_modules/core-js/library/modules/_export.js:35:28)
      at Object.<anonymous> (node_modules/babel-runtime/helpers/asyncToGenerator.js:14:12)

Console.log on the element that I'm executing scrollTo on shows this:

console.log src/Autosuggest.vue:283
    HTMLDivElement { _prevClass: 'autosuggest__results' }

Using version: 1.0.0-beta.9

Thanks happy new year!!! 🍾

[eddyerburgh]

This isn't a vue-test-utils issue.

scrollTo isn't implemented in JSDOM—https://github.com/tmpvar/jsdom/blob/master/lib/jsdom/browser/Window.js#L574. If you run this in a browser the scrollTo method exists.

You can add scrollTo to the Element prototype before you mount:

Element.prototype.scrollTo = () => {} 

All Elements created after you add this code will have the scrollTo method.

[bviala]

In my case I had an issue due to my vue router scrollBehaviour property.
Above solution did not work, instead I had to add this before the mounts:

window.scrollTo = () => {};

[dewalibaidya]

This isn't a vue-test-utils issue.

scrollTo isn't implemented in JSDOM—https://github.com/tmpvar/jsdom/blob/master/lib/jsdom/browser/Window.js#L574. If you run this in a browser the scrollTo method exists.

You can add scrollTo to the Element prototype before you mount:

Element.prototype.scrollTo = () => {} 

All Elements created after you add this code will have the scrollTo method.

where do u add Element.prototype.scrollTo = () => {}

[dewalibaidya]

I am facing a similar issue
I am usig let fontSize = this.$el
.computedStyleMap()
.get('font-size')
.toString() in vue file

and in test it says this.$el
.computedStyleMap is not a function

the jest error:
TypeError: this.$el.computedStyleMap is not a function

[brmendez]

where do u add Element.prototype.scrollTo = () => {}

My question, exactly.

[darrenjennings]

@brmendez @dewalibaidya. It was already said by @eddyerburgh: "before you mount"