Unit testing Vue components that rely on a global event bus

Question

I declare an event bus in my global `app.js` like so: ``` window.Event = new Vue(); ``` The component looks like ``` export default { data() { return { hasError: false, zip: '', }; }, methods: { setZip: function() { this.hasError = false; this.$emit('setZip', this.zip); }, }, mounted() { Event.$on('showErrors', (errors) => { this.hasError = errors.zip ? true : false; }); this.zip = this.editZip; }, props: [ 'editZip' ], } ``` I unit test my components with `ava` with the following `helpers/setup.js`: ``` const browserEnv = require('browser-env'); const hook = require('vue-node'); const { join } = require('path'); // Setup a fake browser environment browserEnv(); // Pass an absolute path to your webpack configuration to the hook function. hook(join(__dirname, './webpack.config.js')); ``` The `webpack.config.js` looks like: ``` module.exports = { module: { loaders: [ { test: /\.vue$/, loader: 'vue-loader', }, { test: /\.js$/, loader: 'babel', exclude: /node_modules/, }, ], }, resolve: {…

Accepted Answer

First of all, I'd recommend to remove the global EventBus from the window object (if you can), as it's not often ideal to rely on global props that could get overwritten by some other parts of the code leading to undesired effects.

You can just create a `event-bus.js` file and create the event bus in there:

```
import Vue from 'vue';
export const EventBus = new Vue();
```

Then you can just import that file from any other component that needs access to the event bus like

```
import {EventBus} from '/path/to/event-bus.js'
```

From there, you can use it exactly as you're currently using it.

However, if you have to keep your EventBus in the window object for some reason, you'll have to also mock it so you can test it.

First, when you call the `browserEnv` function, you'll need to mock the window object by doing this:

```
browserEnv(['window']);
```

Then, window will be available as a global variable, but you will need to change the implementation of your component to explicitly grab the EventBus from the window object, like:

```
window.EventBus
```

You can also define it globally in your component like:

```
const { EventBus } = window
```

Let me know if this works.

Thanks,

Unit testing Vue components that rely on a global event bus

Solution

Problem