Question

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

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

在此测试中，我发生了3个问题。

第一个问题

require.context is not a function

在vue-router的设置中，我动态导入了每个路由的中间件，并且在运行测试时，此错误对我显示。有什么办法解决这个问题？

配置vue-路由器

...

const resolveMiddlewares = ( requireContext ) => {
    return requireContext.keys()
        .map(file =>
            [file.replace(/(^.\/)|(\.js$)/g, ''), requireContext(file)]
        ).reduce((guards, [name, guard]) => ({
            ...guards, [name]: guard.default
        }), {})
}

...

const routeMiddlewares = resolveMiddlewares( require.context( './middlewares', false, /.*\.js$/ ) );

如果我在const routeMiddlewares = ...这行中发表评论，则测试将继续，并出现第二个问题。

第二个问题

[vue-test-utils]: find did not return .table__users__col__1, cannot call text() on empty Wrapper

我正在尝试复制用于清单的组件的结构。如下所示，其结构如下。我有一个父组件baseTable，它将有两个子组件columnHeader，它们将根据用户导航的路线填充表的标题，而另一个将被动态调用。在此示例中，假设路由来自用户页面。

组件结构

baseTable
  |- columnHeader
  |- rowRoute

在测试中，我正在执行以下操作：

import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import baseTable from '@/components/bundles/tables/baseTable';
import getters from '@/store/modules/globals/user/getters';
import actions from '@/store/modules/globals/user/actions';

const localVue = createLocalVue();
localVue.use( Vuex );

describe( 'Lists', () => {

    it( 'Users list', () => {
        // mock users
        const users = [{
            id: 1,
            name: 'User 1',
            email: 'user@email.com',
            role: 'Admin'
        }];

        const wrapper = shallowMount( baseTable, {
            propsData: {
                url: 'users',
                headers: [ null, 'name', 'email', 'role' ],
                fields: users,
                row: 'Users',
            },
            stubs: [ 'router-link' ],
            mocks: {
                $t: ( msg ) => msg
            },
            getters,
            actions
        });

        console.log( wrapper.html() );

        // validates if the fields are being filled in the appropriate places.
        // table__users__col__1 - class from dynamic child ( rowUsers ).
        expect( wrapper.find( '.table__users__col__1' ).text() ).toBe( user.name );
        expect( wrapper.find( '.table__users__col__2' ).text() ).toBe( user.email );
        expect( wrapper.find( '.table__users__col__3' ).text() ).toBe( user.role );
    })

})

我注意到代码中的日志仅向我返回父组件baseTable的HTML，我不知道这是否是问题所在。

第三个问题

[Vue警告]：创建的挂钩中出现错误：“ TypeError：无法读取未定义的属性'dispatch'”

[Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性'getters'”

这是因为在rowUsers组件中我有一个子组件baseAvatar，为了避免不必要的请求，化身存储在商店中。

我试图通过包装器获取吸气剂和动作，但是没有用。

测试：

import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import getters from '@/store/modules/globals/user/getters';
import actions from '@/store/modules/globals/user/actions';
import rowUsers from '@/components/dynamic/tables/rowUsers';

const localVue = createLocalVue();
localVue.use( Vuex );

describe( 'List', () => {

    it( 'User list', () => {
        // mock user
        const user = {
            id: 1,
            name: 'User 1',
            email: 'user@email.com',
            role: 'Admin'
        };

        const wrapper = shallowMount( rowUsers, {
            propsData: {
                url: 'users',
                headers: [ null, 'name', 'email', 'role' ],
                row: user,
            },
            stubs: [ 'router-link' ],
            mocks: {
                $t: ( msg ) => msg
            },
            getters,
            actions
        });

        // validates if the fields are being filled in the appropriate places.
        expect( wrapper.find( '.table__users__col__1' ).text() ).toBe( user.name );
        expect( wrapper.find( '.table__users__col__2' ).text() ).toBe( user.email );
        expect( wrapper.find( '.table__users__col__3' ).text() ).toBe( user.role );
    })

})

如果我对baseAvatar组件中的 rowUsers组件的导入发表评论，则测试通过并通过。

有帮助吗？

Vue单元测试-动态组件和子组件以及require.context

0 个答案: