Vue.js Vue单元测试-子组件和；i18n

我正在进入应用程序测试的世界，我对如何测试有些怀疑，主要是因为语言​​和子组件

基本上，我尝试运行的第一个测试是覆盖列表页面是否具有正确的数据

我目前的结构如下-

组件结构

baseTable
  |- columnHeader
  |- rowRoute

根据用户所处的路径，在

baseTable

组件中动态导入表体

例如，活动页面是users，因此它将导入rowUsers

我遇到的第一个错误是，在columnHeader组件中，它显示了错误

vm.$t不是一个函数

第二个错误出现在组件

rowUsers

中，其中显示

[Vue warn]：未知自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

第三个错误是

行用户

组件不存在

expect（wrapper.find（rowUsers.exists（））.toBe（true）
预期：正确
收到：假

我试图在包装器上传递i18n和路由器链接，但仍然没有成功

import { shallowMount } from '@vue/test-utils';
import baseTable from '@/components/bundles/tables/baseTable';
import rowUsers from '@/components/dynamic/tables/rowUsers';
import i18n from '@/plugins/i18n';

describe( 'Lists', () => {

    it( 'Users list', () => {
        // mock from user
        const fields = [{
            email: 'user@mail.com',
            name: 'user 1',
            role: 'admin'
        }];

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

        expect( wrapper.find( rowUsers ).exists()).toBe( true );
    })

})

有什么建议吗？
你可以这样模仿
$t
：

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

或者，您可以添加一个全局模拟，以避免在每个测试文件中重复代码：

import VueTestUtils from "@vue/test-utils"

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

您可以这样模拟
$t
：

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

或者，您可以添加一个全局模拟，以避免在每个测试文件中重复代码：

import VueTestUtils from "@vue/test-utils"

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

第一个和第二个错误可能只是与Vue test utils vm中缺少Vue路由器依赖项有关，尤其是当在应用程序根目录下导入Vue路由器时，您独自测试组件时

在安装组件之前，您是否尝试过在测试文件中导入Vue路由器

import VueRouter from 'vue-router'

Vue.use(VueRouter)

至于第三个错误，这只是语法，
wrapper.find（）
需要一个CSS选择器来选择您的组件使用
wrapper.findComponent（）
，并且默认情况下
shallowMount
将存根所有子组件，因此您可能希望使用
mount
：

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);

第一个和第二个错误可能只是与Vue test utils vm中缺少Vue路由器依赖项有关，特别是当在应用程序根目录导入Vue router时，您独自测试组件时

在安装组件之前，您是否尝试过在测试文件中导入Vue路由器

import VueRouter from 'vue-router'

Vue.use(VueRouter)

至于第三个错误，这只是语法，
wrapper.find（）
需要一个CSS选择器来选择您的组件使用
wrapper.findComponent（）
，并且默认情况下
shallowMount
将存根所有子组件，因此您可能希望使用
mount
：

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);