Я пытаюсь написать простой тестовый модуль Jest для одного из моих компонентов Vue.
Технический стек: TypeScript, VueJS, Jest, Webpack,
Структура :
root
- src
- invite
- accept.ts
- accept.vue
- test
- invite
- accept.ts
- app.ts
- jest.config.json
- package.json
Я наблюдал странное поведение при попытке смоделировать модуль зависимости с помощью 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 / инвайт / 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": {}
}
И, наконец, тестовый класс
/ 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();
});
});
Тест с именем should mock in test получает проверенное значение для eventBus и проходит.
Тест с именем should mock in component не получает проверенное значение для eventBus, и оно составляет undefined.Точная ошибка выглядит следующим образом:
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)
console.log(eventBus); внутри функции created() компонента также дает undefined.
Если я попытаюсь и console.log(eventBus); внутри теста,это тоже undefined, чего я просто не понимаю.
Я ожидаю, что экземпляр eventBus внутри компонента будет заменен.Я понимаю, что макет никогда не будет работать, пока установлен «Все», но я ожидаю, что он будет установлен как минимум на макетированное значение.
В соответствии с документацией Jest (https://facebook.github.io/jest/docs/en/es6-class-mocks.html) на Automatic Mocking Iдумаю, что это правильно.
Я уверен, что упускаю что-то очевидное, но я понятия не имею, что это такое. Любая помощь будет принята с благодарностью: -)