Testing with Jest gives TypeError Cannot read property 'end' of undefined

[kasadawa]

I have vue project with: vue with typescript, babel, tslint, vuex-module-decorators and jest And I have:

main.ts file:

import Vue from 'vue';
import Toasted from 'vue-toasted';
import './plugin/vuetify';
import App from './App.vue';
import router from './router';
import store from './store';

Vue.use(Toasted, {
  theme: 'toasted-primary',
  position: 'top-right',
  duration : 2000,
});
....
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

apple.module.ts

import Vue from 'vue';
export class AppleModule extends VuexModule {
     @Action({commit:'setBaseShop'})
     public async changeApple(){
         try{
          ..... 
            await ...
         }catch(e){
             Vue.toasted.error(e)
              return {} ;
         }

     }
}

main.spec.ts

import appleModule from '../../src/store/module/Apple.module';

describe('fetches first async req ', () => {

  it('get the first refresh', async () =>{
    await appleModule.refreshBaseShop();
    const obj = {};
    expect(appleModule.baseShop).toEqual(obj);
  })

})

When I try to Run the test with vue-cli-service test:unit i am getting TypeError:

TypeError: Cannot read property 'end' of undefined

      150 |         } catch (e) {
    > 151 |             Vue.toasted.error(e)

[SocyList]

We have the same issue. Just found out that it is related to https://github.com/juliangarnier/anime/issues/270. But I am not able to solve it yet.

[alenamm]

Any news about this issue? I am getting same problem, when testing with jest and vue-test-utils.

Well, until this issue is solved, we can just mock this function: mocks: { $toasted: { show: jest.fn() } }

[momoci99]

Any progress here? I have same issue

[anhhuy1605]

The problem is inside package animejs that vue-toasted use. Basically, they are checking if animation value like -45px is a valid selector by catching exception when executing querySelectorAll. In jest with jsdom, it does not throw any exception and return NodeList instead, which will cause error in later steps.

A dirty workaround would be overriding querySelectorAll in jsdom, to check and throw exception if validator is not valid before executing the query.