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 @@
+
+
+
{{ computedMsg }}
+ {{ msg }}
+ {{ dataText }}
+
+
+
+
+
\ 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"