Vue 单元测试 - 子组件和 i18n

Question

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

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

我现在的结构是下面的结构-

组件结构

baseTable
  |- columnHeader
  |- rowRoute

根据用户所在的路线，在 baseTable 组件中动态导入 table 正文。

例如，活动页面是users，所以它会导入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 ); Expected: true Received: false

我尝试在 wrapper 上传递 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 虚拟机中缺少 Vue-router 依赖项有关，尤其是当您在单独测试一个组件时，而 Vue-router 是在根目录中导入的您的应用程序。

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

import VueRouter from 'vue-router'

Vue.use(VueRouter)

至于第三个错误，这只是语法，wrapper.find() 期待 CSS select 或者 select 你的组件使用 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

Vue Unit test - child components & i18n

vue.js

jestjs

vue-router

vue-test-utils

vue-i18n