使用 Jest 在 VueJS 组件中模拟自定义模块

Posted 2023-02-22

【中文标题】使用 Jest 在 VueJS 组件中模拟自定义模块

【英文标题】：Mocking custom modules in VueJS components using Jest

【发布时间】：2018-10-26 17:38:30

【问题描述】：

我正在尝试在我的一个 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/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": 

最后是测试类

/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)

组件的created() 函数中的console.log(eventBus); 也产生undefined。

如果我尝试在测试中使用console.log(eventBus);，它也是undefined，我也不明白。

我期望发生的是组件内的eventBus 实例被替换。我意识到模拟设置为“任何”时将永远无法工作，但我希望至少看到它设置为模拟值。

根据关于自动模拟的 Jest 文档 (https://facebook.github.io/jest/docs/en/es6-class-mocks.html)，我认为以上是正确的。

我确定我遗漏了一些明显的东西，但我不知道它是什么。任何帮助将不胜感激:-)

【参考方案1】：

jest.mock('./../../src/app', () => 'anything') 使用工厂函数返回的值模拟模块导出：

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

虽然这适用于 ES 模块导入，因为它们在内部使用 CommonJS 模块，但这违反了规范，因为 * 导入应该是一个对象。

在 test 中调用的测试应该模拟得到 eventBus 的模拟值并通过。

它不会被嘲笑eventBus。它得到* 导出。

在组件中调用的测试应该模拟没有得到 eventBus 的模拟值

'anything' 字符串上没有 eventBus 属性，这就是测试失败的原因。

命名的导出应该被模拟为：

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

【讨论】：

太棒了 - 成功了！它只是有点违背我自己关于模拟框架应该如何表现的直觉。很好的解释！

很高兴它有帮助。