[Vuejs]-Vue Unit test – child components & i18n

by

4👍

✅

You can mock $t like this:

shallowMount( baseTable, {
  mocks: {
    $t: (msg) => msg
  }
})

or you can add a global mock to avoid repeated code in every test file:

import VueTestUtils from "@vue/test-utils"

VueTestUtils.config.mocks["$t"] = msg => msg

https://lmiller1990.github.io/vue-testing-handbook/mocking-global-objects.html#example-with-vue-i18n

👤aach

1👍

The first and second errors might just be related to a missing Vue-router dependency in the Vue-test-utils vm, especially if you’re testing a component on its own while Vue-router was imported at the root of your app.

Have you tried importing Vue-router in your test file, before mounting your component?

import VueRouter from 'vue-router'

Vue.use(VueRouter)

As for the third error, this is just syntax, wrapper.find() expect a CSS selector, to select your component use wrapper.findComponent(), also shallowMount will stub ALL your child components by default, so you might want to use mount instead:

const wrapper = mount( baseTable, {
  propsData: {
    url: 'users',
    headers: [ null, 'name', 'email', 'role' ],
    fields: fields,
    row: 'Users'
  },
  stubs: ['router-link'],
  i18n
});

expect(wrapper.findComponent(rowUsers).exists()).toBe(true);
👤Ninowis

Leave a comment