Unit testing VueJs with Jest and Typescript - components not mounted

Question

We are building an app with VueJs. We have previous experience with Angular unit testing with Jasmine and karma, so we decided to use Typescript for our VueJs app.

Currently I have written very simple specs for components, but it seems like the components are not getting mounted.

Here is an example of a component:

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

Here is my spec:

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

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

I don't see anything in the console log.

What am I missing? This project was set with Vue CLI v4.3.1

Here is the 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

score 2 · Answer 1 · answered May 19 '20 at 20:44

This seems really silly, but the problem was that Jest was caching my test results.

I could fix this by just executing the tests with --no-cache args.

In packages.json:

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

Other alternatives can be found here:

How to clear Jest cache?

Unit testing VueJs with Jest and Typescript - components not mounted

1 Answers1