diff --git a/package.json b/package.json index ced0ad8a9..0ef6aa16f 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "typescript": "^3.7.5", "vue": "^3.0.2", "vue-class-component": "^8.0.0-beta.4", - "vue-jest": "^5.0.0-alpha.5", + "vue-jest": "^5.0.0-alpha.6", "vue-router": "^4.0.0-rc.1", "vuex": "^4.0.0-beta.4" }, diff --git a/src/utils.ts b/src/utils.ts index 6a7673c00..52d32f287 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -66,7 +66,13 @@ export const mergeDeep = ( } export function isClassComponent(component: any) { - return '__vccBase' in component + // TypeScript + return ( + component.toString().includes('_super.apply(this, arguments) || this') || + // native ES6 + (typeof component === 'function' && + /^\s*class\s+/.test(component.toString())) + ) } export function isFunctionalComponent(component: any) { diff --git a/tests/components/ClassComponent.vue b/tests/components/ClassComponent.vue new file mode 100644 index 000000000..d0a2183b0 --- /dev/null +++ b/tests/components/ClassComponent.vue @@ -0,0 +1,27 @@ + + + \ No newline at end of file diff --git a/tests/features/classComponent.spec.ts b/tests/features/classComponent.spec.ts index 3b4fdb436..0dd834a7a 100644 --- a/tests/features/classComponent.spec.ts +++ b/tests/features/classComponent.spec.ts @@ -2,23 +2,107 @@ import 'reflect-metadata' import { h } from 'vue' import { Options, Vue } from 'vue-class-component' import { mount } from '../../src' +import ClassComponent from '../components/ClassComponent.vue' -test('data: $props should be available', () => { - @Options({ - props: ['foo'] +describe('class component', () => { + it('minimal class component', () => { + class Foo extends Vue { + render() { + return h('span') + } + } + const wrapper = mount(Foo) + expect(wrapper.find('span').exists()).toBe(true) }) - class MyComp extends Vue { - message = 'answer is ' + (this.$props as any).foo - render() { - return h('div', this.message) + + it('data: $props should be available', () => { + @Options({ + props: ['foo'] + }) + class MyComp extends Vue { + message = 'answer is ' + (this.$props as any).foo + render() { + return h('div', this.message) + } } - } - const wrapper = mount(MyComp, { - props: { - foo: 42 + const wrapper = mount(MyComp, { + props: { + foo: 42 + } + }) + + expect(wrapper.html()).toBe('
answer is 42
') + }) + + it('hooks', () => { + let created = false + class MyComp extends Vue { + created() { + created = true + } + render() { + return h('div') + } } + mount(MyComp) + expect(created).toBe(true) }) - expect(wrapper.html()).toBe('
answer is 42
') + it('methods', () => { + let msg: string = '' + + class MyComp extends Vue { + hello() { + msg = 'hi' + } + content() { + return 'content' + } + render() { + return h('div', this.content()) + } + } + + const wrapper = mount(MyComp) + wrapper.vm.hello() + expect(wrapper.html()).toBe('
content
') + expect(msg).toBe('hi') + }) + + it('computed', () => { + class MyComp extends Vue { + a!: number + data() { + return { + a: 1 + } + } + get b() { + return this.a + 1 + } + render() { + return h('div') + } + } + + const wrapper = mount(MyComp) + expect(wrapper.vm.a).toBe(1) + expect(wrapper.vm.b).toBe(2) + wrapper.vm.a = 2 + expect(wrapper.vm.b).toBe(3) + }) + + it('works with shallow mount and SFC', async () => { + const wrapper = mount(ClassComponent, { + props: { + msg: 'Props Message' + }, + shallow: true + }) + expect(wrapper.get('[data-computed]').text()).toBe('Message: Props Message') + expect(wrapper.get('[data-props]').text()).toBe('Props Message') + await wrapper.get('button').trigger('click') + expect(wrapper.get('[data-methods]').text()).toBe('Updated') + }) }) diff --git a/yarn.lock b/yarn.lock index bd98d84da..ca65ab0cd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6164,10 +6164,10 @@ vue-class-component@^8.0.0-beta.4: resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-8.0.0-beta.4.tgz#bff95cdd44eb450a4a4e54b69da22099613d8071" integrity sha512-+QXBhVH/Mz8dEC+IU7e8XXM54Tn0Aj9/saybeuK8XmhQiJlcijCB8kB7CYpBEMpHWaA+DoLr6LvHMbclYRCwZQ== -vue-jest@^5.0.0-alpha.5: - version "5.0.0-alpha.5" - resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-5.0.0-alpha.5.tgz#a24b7569ba2078836a316033f283e151afc4906b" - integrity sha512-/ddNgiJYEtStK4kfTgIRSpBrkkrFepsCyu6qhIi2ph8rJk8OaI6HJANMjzD2tz2mnGqQOf0mTyZICVfDnLLZHA== +vue-jest@^5.0.0-alpha.6: + version "5.0.0-alpha.6" + resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-5.0.0-alpha.6.tgz#76615809ba84278e7cd3b7d6d3cc7f18caa2e893" + integrity sha512-B0GtGnAZhdS51hoLMqAQimO0574sPBHAyev8YNFNioKk1TbAMCUfDoUDxkPvVKXxeKdWBnXA+kgR9+KP1FizXA== dependencies: "@babel/plugin-transform-modules-commonjs" "^7.2.0" chalk "^2.1.0"