Vue 单元测试 - 子组件和 i18n

Posted 2023-02-22

【中文标题】Vue 单元测试 - 子组件和 i18n

【英文标题】：Vue Unit test - child components & i18n

【发布时间】：2020-10-16 04:51:12

【问题描述】：

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

基本上，我尝试运行的第一个测试是涵盖列表页面是否包含正确的数据。

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

组件结构

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 和路由器链接，但它仍然不起作用。

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: '[e-mail]',
            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 );
    )

)

有什么建议吗？

【参考方案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

【参考方案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);