用开玩笑的结果简单测试一个 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() 玩笑测试失败
VIcon 导致开玩笑测试失败 (Vue2/Vuetify3)
用 Jest 测试 Vue 失败,Jest 遇到了意外的令牌,SyntaxError: Unexpected token import