search

David-Desmaisons / Vue.resize

Vue directive to detect resize events with deboucing and throttling capacity.
MIT License
327 stars 36 forks source link

Can't run tests because IntersectionObserver is not defined #11

Closed ciemarr closed 5 years ago

ciemarr commented 5 years ago

There seems to be a problem with some combination of Vue, Webpack, Mocha, vue-resize-directive, and the intersection-observer polyfill. (I've cross-posted this question to the Vue community more broadly, too.)

The v-resize directive does work just fine in a real browser. It's only the test that is failing to find the definition of IntersectionObserver.

Repro Steps

I created a new Vue project:

  1. vue create vue-resize-directive-test
    • selected Babel, Typescript, class-component syntax, and Mocha + Chai
  2. yarn test:unit on generated example code passes

Then I added the v-resize directive:

  1. yarn add vue-resize-directive
  2. added a placeholder Typescript definition file, typings/vue-resize-directive.d.ts: 
    declare module 'vue-resize-directive';
  3. updated tsconfig.json to include the definition: 
    "paths": {
  "@/*": [
    "src/*"
  ],
  "*": [
    "typings/*"
  ]
},
  4. added the directive to a component: 
    
<template>
<div class="hello" v-resize="onResize">
Hello, World!
</div>
</template>

7. `yarn test:unit` on generated example code **fails** with an error that "ReferenceError: IntersectionObserver is not defined":

WEBPACK Compiled successfully in 13052ms

MOCHA Testing...

HelloWorld.vue [Vue warn]: Error in directive resize inserted hook: "ReferenceError: IntersectionObserver is not defined"

found in

---> at src/components/HelloWorld.vue

ReferenceError: IntersectionObserver is not defined at u (/Users/cmrodgers/github/mine/vue-resize-directive-test/dist/webpack:/node_modules/vue-resize-directive/dist/Vueresize.js:1:1) at inserted (/Users/cmrodgers/github/mine/vue-resize-directive-test/dist/webpack:/node_modules/vue-resize-directive/dist/Vueresize.js:1:1) at callHook$1 (/Users/cmrodgers/github/mine/vue-resize-directive-test/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:6620:1) at callInsert (/Users/cmrodgers/github/mine/vue-resize-directive-test/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:6559:1) at wrappedHook (/Users/cmrodgers/github/mine/vue-resize-directive-test/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:2225:1) at invokeWithErrorHandling (/Users/cmrodgers/github/mine/vue-resize-directive-test/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:1847:1) at Object.invoker [as insert] (/Users/cmrodgers/github/mine/vue-resize-directive-test/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:2165:1) at invokeInsertHook (/Users/cmrodgers/github/mine/vue-resize-directive-test/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:6286:1) at VueComponent.patch [as __patch__] (/Users/cmrodgers/github/mine/vue-resize-directive-test/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:6505:1) at VueComponent.Vue._update (/Users/cmrodgers/github/mine/vue-resize-directive-test/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:3898:1) at VueComponent.updateComponent (/Users/cmrodgers/github/mine/vue-resize-directive-test/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4019:1) at Watcher.get (/Users/cmrodgers/github/mine/vue-resize-directive-test/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4419:1) at new Watcher (/Users/cmrodgers/github/mine/vue-resize-directive-test/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4408:1) at mountComponent (/Users/cmrodgers/github/mine/vue-resize-directive-test/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4026:1) at VueComponent../node_modules/vue/dist/vue.runtime.esm.js.Vue.$mount (/Users/cmrodgers/github/mine/vue-resize-directive-test/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:8350:1) at mount (/Users/cmrodgers/github/mine/vue-resize-directive-test/dist/webpack:/node_modules/@vue/test-utils/dist/vue-test-utils.js:8649:1) at shallowMount (/Users/cmrodgers/github/mine/vue-resize-directive-test/dist/webpack:/node_modules/@vue/test-utils/dist/vue-test-utils.js:8677:1) at Context.it (/Users/cmrodgers/github/mine/vue-resize-directive-test/dist/webpack:/tests/unit/example.spec.ts:8:1) at callFn (/Users/cmrodgers/github/mine/vue-resize-directive-test/node_modules/mocha/lib/runnable.js:372:21) at Test.Runnable.run (/Users/cmrodgers/github/mine/vue-resize-directive-test/node_modules/mocha/lib/runnable.js:364:7) at Runner.runTest (/Users/cmrodgers/github/mine/vue-resize-directive-test/node_modules/mocha/lib/runner.js:455:10) at /Users/cmrodgers/github/mine/vue-resize-directive-test/node_modules/mocha/lib/runner.js:573:12 at next (/Users/cmrodgers/github/mine/vue-resize-directive-test/node_modules/mocha/lib/runner.js:369:14) at /Users/cmrodgers/github/mine/vue-resize-directive-test/node_modules/mocha/lib/runner.js:379:7 at next (/Users/cmrodgers/github/mine/vue-resize-directive-test/node_modules/mocha/lib/runner.js:303:14) at Immediate._onImmediate (/Users/cmrodgers/github/mine/vue-resize-directive-test/node_modules/mocha/lib/runner.js:347:5) at runCallback (timers.js:694:18) at tryOnImmediate (timers.js:665:5) at processImmediate (timers.js:647:5) ``` I also repeated the same steps, but with plain Javascript instead of Typescript: ``` ``` Same error. **Debugging Info** I confirmed that the [intersection-observer](https://github.com/w3c/IntersectionObserver) Node package exists in `node_modules/`, so I would have expected it to polyfill correctly. I tried running the tests as `yarn test:unit --require intersection-observer` and/or `--include node_modules/intersection-observer/intersection-observer.js`, but that made no difference. _Version Info:_ - vue-resize-directive in `package.json`: 1.1.4 - vue in `package.json`: 2.5.22 - intersection-observer in `node_modules`:0.5.1 - `vue --version`: 3.40 - `yarn --version`: node-1.13.0 - `node --version`: 10.11.0
ciemarr commented 5 years ago

I still don't know what the problem with the IntersectionObserver polyfill in tests is, but I am able to ignore it for now by passing a second parameter into shallowMount to mock out the resize directive:

var mockDirective = {};
shallowMount(HelloWorld, { directives: { resize: mockDirective } });
David-Desmaisons commented 5 years ago

I was reading your first post before seeing your second comment, and I was thinking exatly the same thing that you suggest before. For test purpose a mock directive should do the trick.