用开玩笑的结果简单测试一个 vue 组件失败

Posted

技术标签:

【中文标题】用开玩笑的结果简单测试一个 vue 组件失败【英文标题】:simple testing a vue component with jest results a fail 【发布时间】:2020-10-08 08:46:05 【问题描述】:

我是第一次使用 jest,我试图让我在开始大量测试之前正常运行。 一开始我只是在测试这个:

import  mount, createLocalVue  from '@vue/test-utils';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import BootstrapVue from 'bootstrap-vue';
import UsersList from './../../components/users/UsersList.vue';

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


describe('Foo', () => 
  it('renders a div', () => 
    const wrapper = mount(UsersList, 
      localVue
    )
    expect(wrapper.contains('div')).toBe(true)
  )
)

最后它应该会成功通过,因为我当然在我的组件中使用了 div。

但现在的问题是,Vuex,或者我不知道。似乎那个玩笑无法处理我的 vuex $store.state 引用。 TypeError: Cannot read property 'state' of undefined 在那之后: [Vue warn]: Error in render: "TypeError: Cannot read property 'resolve' of undefined"

我的配置如下所示:

jest.config.js:

/* eslint-disable no-undef */
// For a detailed explanation regarding each configuration property, visit:
// https://jestjs.io/docs/en/configuration.html
module.exports = 
  verbose: true,
  moduleFileExtensions: [
    'js',
    'json',
    // tell Jest to handle `*.vue` files
    'vue',
  ],
  transform: 
    // process `*.vue` files with `vue-jest`
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest',
  ,
  moduleNameMapper: 
    '\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/mocks/fileMock.js',
    '\\.(css|less|scss)$': '<rootDir>/mocks/styleMock.js',
  ,
  clearMocks: true,
;

【问题讨论】:

【参考方案1】:

问题是我必须更好地了解什么是嘲弄并将它们用于此目的。

import  shallowMount, createLocalVue  from '@vue/test-utils';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import BootstrapVue from 'bootstrap-vue';
import UsersList from './../../components/users/UsersList.vue';

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

describe('UsersList.vue', () => 
  let store;
  const state = 
    User: 
      id: 1,
    ,
  ;

  beforeEach(() => 
    store = new Vuex.Store(
      state,
    );
  );

  it('renders a div', () => 
    const wrapper = shallowMount(UsersList, 
      store,
      localVue,
    );
    expect(wrapper.contains('div')).toBe(true);
  );
);

我给自己定义了一个嘲弄的状态,这就是魔法

const state = 
    User: 
      id: 1,
    ,
  ;

【讨论】:

以上是关于用开玩笑的结果简单测试一个 vue 组件失败的主要内容,如果未能解决你的问题,请参考以下文章

Vue 组件中的 toHaveBeenCalled() 玩笑测试失败

开玩笑:模拟 console.error - 测试失败

VIcon 导致开玩笑测试失败 (Vue2/Vuetify3)

用 Jest 测试 Vue 失败,Jest 遇到了意外的令牌,SyntaxError: Unexpected token import

开玩笑的单元测试不会等待 axios 响应

使用玩笑的反应单元测试失败