具有Jest和Typescript的单元测试VueJ-未安装组件

Question

我们正在使用VueJs构建应用程序。我们以前在使用Jasmine和karma进行Angular单元测试方面有经验，因此我们决定在我们的VueJs应用中使用Typescript。

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

这里是component的示例：

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

这是我的spec：

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

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

我在控制台日志中什么都看不到。

我想念的是什么？该项目是通过Vue CLI v4.3.1

设置的

这里是Vue info：

  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

Answer 1

这似乎很愚蠢，但是问题在于Jest正在缓存我的测试结果。

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

在packages.json：

中

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

可以在这里找到其他替代方法：

How to clear Jest cache?