Question

我正在进入应用程序测试的世界，我对如何进行测试有一些疑问，主要是由于语言和子组件的影响。

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

我目前拥有的结构是以下结构-

组件结构

baseTable
  |- columnHeader
  |- rowRoute

根据用户所在的路线，在baseTable组件中动态导入表主体。

例如，活动页面是用户，因此它将导入rowUsers。

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

vm.$t is not a function

第二个错误是在组件 rowUsers中显示的

[Vue warn]: Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

第三个错误是rowUsers组件不存在。

expect( wrapper.find( rowUsers ).exists()).toBe( true ); 预期：真收到：假

我试图在包装器上传递i18n和router-link，但仍然无法正常工作。

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

})

有什么建议吗？

Answer 1

您可以像这样嘲笑$t：

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

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

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

Answer 2

第一个和第二个错误可能只是与Vue-test-utils vm中缺少的Vue-router依赖关系有关，尤其是当您在Vue-router导入到您的根目录下自行测试组件时应用程序。

在安装组件之前，您是否尝试过在测试文件中导入Vue-router？

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单元测试-子组件和i18n

2 个答案: