Mocking custom modules in VueJS components using Jest

Question

I'm trying to write a simple Jest unit test on one of my Vue components.

Tech stack: TypeScript, VueJS, Jest, Webpack,

Structure:

 root
   - src
     - invite
      - accept.ts
      - accept.vue
   - test
     - invite
       - accept.ts
   - app.ts
   - jest.config.json
   - package.json

I've been observing some strange behaviour when attempting to mock out a dependency module using Jest.

src/invite/accept.ts:

import Vue from "vue";
import Component from 'vue-class-component';
import { eventBus } from './../app';

@Component
export default class InviteAccept extends Vue {

    created() {
        console.log(eventBus);
        eventBus.$emit('hideNavigation');
    };
}

src/invite/accept.vue

<template>
    <div class="row">
        <div class="col">
            <h1>Blah</h1>
        </div>
    </div>
</template>
<script src="./accept.ts" lang="ts"></script>

src/app.ts

import { polyfill } from 'es6-promise'
import Vue from 'vue';
import VueRouter from 'vue-router';
import Invite from './invite/accept.vue';

polyfill();

export const eventBus = new Vue();

const router = new VueRouter({
    routes: [
        { path: '/invite/accept/:token', component: Invite, name: 'inviteAccept' },
        { path: '/', component: undefined, name: 'index' },
    ]
});

Vue.use(VueRouter);

const app = new Vue({ router }).$mount('#app');

/jest.config.json

{
  "transform": {
    "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js",
    "\\.(vue)$": "<rootDir>/node_modules/vue-jest"
  },
  "testRegex": "/test/.*\\.(ts|tsx)$",
  "moduleFileExtensions": [
    "vue",
    "ts",
    "tsx",
    "js"
  ],
  "transformIgnorePatterns": [
    "<rootDir>/node_modules/(?!lodash-es/.*)"
  ]
}

/package.json

{
  "name": "blah",
  "version": "1.0.0",
  "license": "UNLICENSED",
  "scripts": {
    "build": "webpack --config webpack.prod.js",
    "watch": "webpack --watch --config webpack.dev.js",
    "test": "jest -c jest.config.json"
  },
  "devDependencies": {
    "@types/es6-promise": "^3.3.0",
    "@types/jest": "^22.2.3",
    "@vue/test-utils": "^1.0.0-beta.16",
    "applicationinsights-js": "^1.0.15",
    "bootstrap-vue": "^2.0.0-rc.9",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.10",
    "es6-promise": "^4.2.4",
    "extract-text-webpack-plugin": "3.0.2",
    "html-webpack-plugin": "^3.0.6",
    "jest": "^22.4.3",
    "jest-teamcity-reporter": "^0.9.0",
    "ts-jest": "^22.4.6",
    "ts-loader": "3.4.0",
    "typescript": "^2.7.2",
    "vue": "^2.5.13",
    "vue-class-component": "^6.2.0",
    "vue-jest": "^2.5.0",
    "vue-loader": "^14.1.1",
    "vue-router": "^3.0.1",
    "vue-style-loader": "^4.0.2",
    "vue-template-compiler": "^2.5.13",
    "vue-types": "^1.2.0",
    "webpack": "3.10.0",
    "webpack-merge": "^4.1.2"
  },
  "dependencies": {}
}

And finally, the test class

/test/invite/accept.ts

import InviteAccept from './../../src/invite/accept';
import { eventBus } from './../../src/app';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import VueRouter = require('vue-router'); // This needs to be 'require', rather than 'from'. Some weird thing or something.
import 'jest';

describe('invites', () => {
    jest.mock('./../../src/app', () => 'anything');

    function createWrapper() {
        const localVue = createLocalVue();
        localVue.use(VueRouter);
        const router = new VueRouter();

        return shallowMount(InviteAccept, {
            localVue,
            router
        });
    };

    test('should mock in test', () => {
        // this works:
        const test = require('./../../src/app');
        expect(test).toEqual('anything');
    });

    test('should mock in component', () => {
        const wrapper = createWrapper();
    });

});

The test called should mock in test gets the mocked value for eventBus and passes.

The test called should mock in component does not get the mocked value for eventBus and it is undefined. The exact error is as follows:

TypeError: Cannot read property '$emit' of undefined

      at VueComponent.Object.<anonymous>.InviteAccept.created (src/invite/accept.vue:49:23)
      at callHook (node_modules/vue/dist/vue.runtime.common.js:2919:21)
      at VueComponent.Vue._init (node_modules/vue/dist/vue.runtime.common.js:4628:5)
      at new VueComponent (node_modules/vue/dist/vue.runtime.common.js:4796:12)
      at createInstance (node_modules/@vue/test-utils/dist/vue-test-utils.js:4230:12)
      at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:5376:12)
      at Object.shallowMount (node_modules/@vue/test-utils/dist/vue-test-utils.js:5414:10)
      at createWrapper (test/invite/accept.ts:13:29)
      at Object.<anonymous> (test/invite/accept.ts:25:23)

The console.log(eventBus); inside the component's created() function also yields undefined.

If I try and console.log(eventBus); inside the test, it is undefined too, which i just don't understand either.

What I expect to happen is that the eventBus instance inside the component is replaced. I realise that the mock will never work whilst set to 'Anything' but I expect to see it set to the mocked value at least.

According to the Jest documentation (https://facebook.github.io/jest/docs/en/es6-class-mocks.html) on Automatic Mocking I think the above is correct.

I'm sure I'm missing something obvious but I have no idea what it is. Any help would be greatly appreciated :-)

Answer 1

jest.mock('./../../src/app', () => 'anything') mocks module export with a value that factory function returns:

    const test = require('./../../src/app');
    expect(test).toEqual('anything');

Although this will work for ES module imports because they use CommonJS modules internally, this is against specs, because * import should be an object.

The test called should mock in test gets the mocked value for eventBus and passes.

It doesn't get mocked eventBus. It gets * export.

The test called should mock in component does not get the mocked value for eventBus

There is no eventBus property on 'anything' string, that's why the test fails.

Named export should be mocked with:

jest.mock('./../../src/app', () => ({
  eventBus: { $emit: jest.fn() }
}));