为每个笑话测试重置 Vue?
Reset Vue for every jest test?
我正在使用带有@vue/test-utils 和开玩笑的 Vue JS。对于我的测试,我打电话给:
let localVue = createLocalVue();
vueMount(MyComponent, { localVue: localVue, options });
问题是,我正在引用执行以下操作的库:
import Vue from 'vue'
import Msal from 'vue-msal'
//...
Vue.use(Msal, {...});
Vue.use() 在原型等上注册了一些全局内容。出于测试目的,我需要它来重新开始每次测试。我唯一能想到的就是在 Vue 对象上开玩笑地使用 mockImplementation() 。但我不太确定我如何才能做到这一点,如果可能的话。
有什么办法吗?谢谢!
我花了一段时间,但这是我解决这个问题的方法...
let setupComplete = false;
let setupFailure = false;
let testContext = {};
function resetTestContext() {
Object.keys(testContext).forEach(function(key) { delete testContext[key]; });
}
function createTestContext(configureTestContext) {
beforeEach(() => {
jest.isolateModules(() => {
setupFailure = true;
jest.unmock('vue');
resetTestContext();
testContext.vueTestUtils = require('@vue/test-utils');
testContext.vue = testContext.vueTestUtils.createLocalVue();
jest.doMock('vue', () => testContext.vue);
testContext.vuetify = require('vuetify');
testContext.vue.use(testContext.vuetify);
testContext.vuetifyInstance = new testContext.vuetify();
if (configureTestContext) {
configureTestContext(testContext);
}
setupComplete = true;
setupFailure = false;
});
});
afterEach(() => {
setupComplete = false;
resetTestContext();
jest.resetModules();
setupFailure = false;
});
return testContext;
},
使这成为可能的是 jest.isolateModules() 方法。通过这种方法,Vue 及其原型,以及 Vuetify,在每个测试用例中都被完全重新创建并且是全新的。
为了让它工作,测试规范和包含上述实用程序的库可能不是 'import'Vue 或依赖于 Vue 的任何模块。相反,它需要在 configureTestContext() 函数或测试用例本身中被要求。
我的测试规格如下:
import createTestContext from '@/scripts/createTestContext'
describe('sample', () => {
const testContext = createTestContext(function configureTestContext(testContext)
{
testContext.vueDependency = require('@/scripts/vueDependency').default;
});
test('demo', () => {
// I added a helper to more easily do this in the test context...
const sample = testContext.vueTestUtils.mount(require('@/components/Sample').default, {
localVue: testContext.vue,
vuetify: testContext.vuetifyInstance
});
expect(testContext.vueDependency.doSomething(sample)).toBe(true);
expect(sample.isVueInstance()).toBeTruthy();
});
});
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
const localVue = createLocalVue();
const { user } = require('./customer.mock');
const originUser = { ...user };
const resetUserData = wrapper => {
wrapper.setData( { userData: originUser } );
};
const TestComponent = localVue.component( 'TestComponent', {
name : 'TestComponent',
data : () => {
return { userData: user };
},
render( createElement ) {
return createElement( 'h3', 'hoy hoy' );
},
} );
describe( 'computed fields', () => {
afterEach( () => {
resetUserData( wrapper );
} );
it( 'isPrivatePerson should return false', () => {
wrapper.setData( { userData: { Contacts: [{ grpid: 'bad field' }] } } );
expect( !wrapper.vm.isPrivatePerson ).toBeTruthy();
} );
it( 'isPrivatePerson should return true', () => {
expect( wrapper.vm.isPrivatePerson ).toBeTruthy();
} );
});
我正在使用带有@vue/test-utils 和开玩笑的 Vue JS。对于我的测试,我打电话给:
let localVue = createLocalVue();
vueMount(MyComponent, { localVue: localVue, options });
问题是,我正在引用执行以下操作的库:
import Vue from 'vue'
import Msal from 'vue-msal'
//...
Vue.use(Msal, {...});
Vue.use() 在原型等上注册了一些全局内容。出于测试目的,我需要它来重新开始每次测试。我唯一能想到的就是在 Vue 对象上开玩笑地使用 mockImplementation() 。但我不太确定我如何才能做到这一点,如果可能的话。
有什么办法吗?谢谢!
我花了一段时间,但这是我解决这个问题的方法...
let setupComplete = false;
let setupFailure = false;
let testContext = {};
function resetTestContext() {
Object.keys(testContext).forEach(function(key) { delete testContext[key]; });
}
function createTestContext(configureTestContext) {
beforeEach(() => {
jest.isolateModules(() => {
setupFailure = true;
jest.unmock('vue');
resetTestContext();
testContext.vueTestUtils = require('@vue/test-utils');
testContext.vue = testContext.vueTestUtils.createLocalVue();
jest.doMock('vue', () => testContext.vue);
testContext.vuetify = require('vuetify');
testContext.vue.use(testContext.vuetify);
testContext.vuetifyInstance = new testContext.vuetify();
if (configureTestContext) {
configureTestContext(testContext);
}
setupComplete = true;
setupFailure = false;
});
});
afterEach(() => {
setupComplete = false;
resetTestContext();
jest.resetModules();
setupFailure = false;
});
return testContext;
},
使这成为可能的是 jest.isolateModules() 方法。通过这种方法,Vue 及其原型,以及 Vuetify,在每个测试用例中都被完全重新创建并且是全新的。
为了让它工作,测试规范和包含上述实用程序的库可能不是 'import'Vue 或依赖于 Vue 的任何模块。相反,它需要在 configureTestContext() 函数或测试用例本身中被要求。
我的测试规格如下:
import createTestContext from '@/scripts/createTestContext'
describe('sample', () => {
const testContext = createTestContext(function configureTestContext(testContext)
{
testContext.vueDependency = require('@/scripts/vueDependency').default;
});
test('demo', () => {
// I added a helper to more easily do this in the test context...
const sample = testContext.vueTestUtils.mount(require('@/components/Sample').default, {
localVue: testContext.vue,
vuetify: testContext.vuetifyInstance
});
expect(testContext.vueDependency.doSomething(sample)).toBe(true);
expect(sample.isVueInstance()).toBeTruthy();
});
});
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
const localVue = createLocalVue();
const { user } = require('./customer.mock');
const originUser = { ...user };
const resetUserData = wrapper => {
wrapper.setData( { userData: originUser } );
};
const TestComponent = localVue.component( 'TestComponent', {
name : 'TestComponent',
data : () => {
return { userData: user };
},
render( createElement ) {
return createElement( 'h3', 'hoy hoy' );
},
} );
describe( 'computed fields', () => {
afterEach( () => {
resetUserData( wrapper );
} );
it( 'isPrivatePerson should return false', () => {
wrapper.setData( { userData: { Contacts: [{ grpid: 'bad field' }] } } );
expect( !wrapper.vm.isPrivatePerson ).toBeTruthy();
} );
it( 'isPrivatePerson should return true', () => {
expect( wrapper.vm.isPrivatePerson ).toBeTruthy();
} );
});