Testing Vue Single File Components which use a Global Event Bus Testing Vue Single File Components which use a Global Event Bus vue.js vue.js

Testing Vue Single File Components which use a Global Event Bus


You're trying to reference a local event bus called Event. You should call the bus you registered on the window object, like this: window.Event.$on("activate-edit-modal"....

After you've ensured that your component is calling the bus registered on the window object as shown above, make sure you also add the following before you mount your component in the test file like so:

import Vue from 'vue';window.Event = new Vue();const wrapper = mount(adminResults);


Your global event bus "Event": where is it defined? I can't see it being imported anywhere into the component with the error. I suspect this is your problem.

Beware global event bus is a top five antipattern, according to one of the presentations at the recent vue conf. I much prefer a plain global javascript object as a global state store.


You can mock your event bus and assert that methods are called on it with correct parameters.

For instance, in the above scenario try window.Event = { $on: sinon.spy() }.

After mounting you should be able to assert that $on was called with correct parameters.

Here's documentation on Mocha and spies. https://github.com/mochajs/mocha/wiki/Spies

I'm not as familiar with mocha so I'm not exactly sure I've got the details correct.