diff --git a/packages/create-instance/create-component-stubs.js b/packages/create-instance/create-component-stubs.js index b82addd99..a831c3e05 100644 --- a/packages/create-instance/create-component-stubs.js +++ b/packages/create-instance/create-component-stubs.js @@ -60,10 +60,25 @@ function getCoreProperties(componentOptions: Component): Object { } function createClassString(staticClass, dynamicClass) { - if (staticClass && dynamicClass) { - return staticClass + ' ' + dynamicClass + // :class="someComputedObject" can return a string, object or undefined + // if it is a string, we don't need to do anything special. + let evaluatedDynamicClass = dynamicClass + + // if it is an object, eg { 'foo': true }, we need to evaluate it. + // see https://github.com/vuejs/vue-test-utils/issues/1474 for more context. + if (typeof dynamicClass === 'object') { + evaluatedDynamicClass = Object.keys(dynamicClass).reduce((acc, key) => { + if (dynamicClass[key]) { + return acc + ' ' + key + } + return acc + }, '') + } + + if (staticClass && evaluatedDynamicClass) { + return staticClass + ' ' + evaluatedDynamicClass } - return staticClass || dynamicClass + return staticClass || evaluatedDynamicClass } function resolveOptions(component, _Vue) { diff --git a/test/resources/components/component-with-functional-child.vue b/test/resources/components/component-with-functional-child.vue new file mode 100644 index 000000000..5d18f7272 --- /dev/null +++ b/test/resources/components/component-with-functional-child.vue @@ -0,0 +1,22 @@ + + + diff --git a/test/specs/shallow-mount.spec.js b/test/specs/shallow-mount.spec.js index 3f3fb2864..eb3f444f0 100644 --- a/test/specs/shallow-mount.spec.js +++ b/test/specs/shallow-mount.spec.js @@ -3,6 +3,7 @@ import Vue from 'vue' import { mount, shallowMount, createLocalVue } from '@vue/test-utils' import Component from '~resources/components/component.vue' import ComponentWithChild from '~resources/components/component-with-child.vue' +import ComponentWithFunctionalChild from '~resources/components/component-with-functional-child.vue' import ComponentWithNestedChildren from '~resources/components/component-with-nested-children.vue' import ComponentWithLifecycleHooks from '~resources/components/component-with-lifecycle-hooks.vue' import ComponentWithoutName from '~resources/components/component-without-name.vue' @@ -25,6 +26,17 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { sandbox.restore() }) + it('renders dynamic class of functional child', () => { + const wrapper = shallowMount(ComponentWithFunctionalChild) + expect(wrapper.find('functional-component-stub').classes()).to.contain( + 'foo', + 'bar' + ) + expect(wrapper.find('functional-component-stub').classes()).not.to.contain( + 'qux' + ) + }) + it('returns new VueWrapper of Vue localVue if no options are passed', () => { const compiled = compileToFunctions('
') const wrapper = shallowMount(compiled)