Jest를 사용하여 VueJS 구성 요소의 사용자 지정 모듈 조롱

Jest를 사용하여 VueJS 구성 요소의 사용자 지정 모듈 조롱

나는 내 Vue 구성요소 중 하나에 대해 간단한 Jest 유닛 테스트를 작성하려고 한다.

기술 스택:TypeScript, VueJS, Jest, Webpack,

구조:

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

나는 Jest를 사용하여 종속 모듈을 조롱하려고 할 때 이상한 행동을 관찰해 왔다.

src/succ/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/process/수용부에를 하다

<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/.*)"
  ]
}

/message.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/test/recept.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구성 요소 내부의 인스턴스(instance)가 교체된다.나는 'Anything'으로 설정되는 동안 그 모형이 결코 작동하지 않을 것이라는 것을 깨달았지만, 적어도 모조된 가치로 설정되기를 기대한다.

제스트 문서(https://facebook.github.io/jest/docs/en/es6-class-mocks.html)의 자동 조롱에 따르면 나는 위의 내용이 옳다고 생각한다.

분명 내가 뭔가 명백한 것을 놓치고 있는 것은 확실하지만 그것이 무엇인지 전혀 모르겠어.어떤 도움이라도 대단히 감사할 것이다:-)

jest.mock('./../../src/app', () => 'anything')공장 기능이 반환하는 값을 사용하여 모듈 내보내기를 모의한다.

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

ES 모듈에서 공통을 사용하기 때문에 이 기능이 ES 모듈 수입에 유용하지만내부 JS 모듈, 이것은 사양에 어긋난다.*수입은 물건이어야 한다.

테스트에서 호출된 테스트는 eventBus 및 패스에 대한 모의 값을 얻어야 한다.

조롱당하지 않는다.eventBus. 그것은 얻는다.*수출하다

구성 요소에서 호출된 테스트가 eventBus에 대한 시뮬레이션 값을 얻지 못함

거기에는 없다eventBus테스트가 실패하는 이유야

명명된 내보내기는 다음을 사용하여 조롱해야 한다.

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

참조URL: https://stackoverflow.com/questions/50374726/mocking-custom-modules-in-vuejs-components-using-jest