使用 Jest 和 Typescript 对 VueJ 进行单元测试 - 未安装组件

Posted 2023-02-22

【中文标题】使用 Jest 和 Typescript 对 VueJ 进行单元测试 - 未安装组件

【英文标题】：Unit testing VueJs with Jest and Typescript - components not mounted

【发布时间】：2020-09-05 17:44:38

【问题描述】：

我们正在使用 VueJs 构建一个应用程序。我们之前有使用 Jasmine 和 karma 进行 Angular 单元测试的经验，因此我们决定将 Typescript 用于我们的 VueJs 应用程序。

目前我已经为组件编写了非常简单的规范，但似乎组件没有安装。

这是一个组件的示例：

export default class TableOverview extends Vue 
  public mounted() 
    console.log("mounted");
  

这是我的规范：

describe("table-overview.vue", () => 
  it("logs mounted", () => 
    const wrapper = mount(TableOverview);

    expect(wrapper).toBeDefined();
  );
);

我在控制台日志中看不到任何内容。

我错过了什么？该项目是使用 Vue CLI v4.3.1

设置的

这是 Vue 信息：

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
  Binaries:
    Node: 8.11.3 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.1.2
    @vue/babel-preset-app:  4.2.3
    @vue/babel-preset-jsx:  1.1.2
    @vue/babel-sugar-functional-vue:  1.1.2
    @vue/babel-sugar-inject-h:  1.1.2
    @vue/babel-sugar-v-model:  1.1.2
    @vue/babel-sugar-v-on:  1.1.2
    @vue/cli-overlay:  4.2.3
    @vue/cli-plugin-babel: ~4.2.0 => 4.2.3
    @vue/cli-plugin-eslint: ~4.2.0 => 4.2.3
    @vue/cli-plugin-router:  4.2.3
    @vue/cli-plugin-typescript: ~4.2.0 => 4.2.3
    @vue/cli-plugin-unit-jest: ~4.2.0 => 4.2.3
    @vue/cli-plugin-vuex: ~4.2.0 => 4.2.3
    @vue/cli-service: ~4.2.0 => 4.2.3
    @vue/cli-shared-utils:  4.2.3
    @vue/component-compiler-utils:  3.1.1
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0
    @vue/eslint-config-typescript: ^5.0.1 => 5.0.2
    @vue/preload-webpack-plugin:  1.1.1
    @vue/test-utils: 1.0.0-beta.31 => 1.0.0-beta.31
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^6.1.2 => 6.2.2
    jest-serializer-vue:  2.0.2
    typescript: ~3.7.5 => 3.7.5
    vue: ^2.6.11 => 2.6.11
    vue-class-component:  7.2.3
    vue-eslint-parser:  7.0.0
    vue-hot-reload-api:  2.3.4
    vue-jest:  3.0.5
    vue-loader:  15.9.1
    vue-property-decorator: ^8.3.0 => 8.4.1
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.11 => 2.6.11
    vue-template-es2015-compiler:  1.9.1
    vuetify: ^2.2.25 => 2.2.25
    vuetify-loader: ^1.4.3 => 1.4.3
    vuex: ^3.1.2 => 3.1.3
    vuex-class: ^0.3.2 => 0.3.2
    vuex-module-decorators: ^0.17.0 => 0.17.0
  npmGlobalPackages:
    @vue/cli: Not Found

【参考方案1】：

这看起来很傻，但问题是 Jest 正在缓存我的测试结果。

我可以通过使用 --no-cache args 执行测试来解决此问题。

在 packages.json 中：

"test:unit": "vue-cli-service test:unit --no-cache"

可在此处找到其他替代方案：

How to clear Jest cache?