Vue 单元测试 - 子组件和 i18n答案

【问题标题】：Vue Unit test - child components & i18nVue 单元测试 - 子组件和 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: '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 );
    })

})

有什么建议吗？

【问题讨论】：

标签： vue.js jestjs vue-router vue-test-utils vue-i18n

【解决方案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);

【讨论】：