vuejs：如何进行单元测试 main.ts

Question

我将 vuejs 与打字稿一起使用，但这个问题也适用于 javascript。

使用 vue-test-utils，使用 mount 或 shallowMount 测试组件。这样，我就能够对 App 主要组件进行单元测试。我现在想知道如何对 main.ts 文件进行单元测试，该文件已经安装了主要组件：

new Vue({
  router,
  store,
  i18n,
  render: (h) => h(App),
}).$mount('#app');

单元测试将检查 App 组件是否真的安装到 #app 中。不出所料，如果我只是在我的测试中导入 main.ts，我会得到这个错误：

Cannot find element: #app

是否可以创建一个包含 #app 元素的假 DOM，App 组件将安装在该元素中？

Answer 1

您可以使用 Jest 来模拟 DOM。这样你就可以设置多个测试：

初始化：*验证在没有任何参数的情况下它仍然可以实例化 Vue 实例（undefined 作为路由器、商店等）。验证路由器等属性是否已添加到原型中
安装：创建一个呈现给您创建的模拟应用程序 DOM 并验证该应用程序是否按预期呈现给正确的元素

特别是安装感觉更像是功能测试而不是单元测试（因为它执行的工作超过 'unit'）

编辑：提供示例

// __tests__/main.test.js
'use strict';

test('Can mount app', () => {
  document.body.innerHTML =
    '<div id="app">' +
    '</div>';


  // Executes main file
  require('../src/main');

  const pElement = document.getElementById('example');
  expect(pElement).toBeTruthy();
  expect(pElement.textContent).toEqual('Example');
});

主文件为：

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

还有一个 App.vue 文件：

<template>
  <div id="app">
    <p id="example">Example</p>
  </div>
</template>

重写为 Typescript 很简单。需要注意的几点：

应用程序本身未被模拟（Vue.app 注入 main.js）。这可以通过创建一个单独的模拟文件或使用 jest.fn() 来完成，尽管我自己没有测试过。
测试不是对其进行功能测试，但可以进行小的更改以验证小的工作单元

vuejs：如何进行单元测试 main.ts

vuejs : how to unit test main.ts

javascript

typescript

vue.js

vuejs2

vue-test-utils