From 0cabd4241298a1d975a8a9e2994cb1232d08088e Mon Sep 17 00:00:00 2001
From: zz <2418184580@qq.com>
Date: Mon, 25 Jul 2022 21:28:08 +0800
Subject: [PATCH] refactor(components): [checkbox] use JSX in Unit test (#9009)

---
 .../checkbox/__tests__/checkbox.test.tsx      | 854 ++++++++----------
 1 file changed, 390 insertions(+), 464 deletions(-)

diff --git a/packages/components/checkbox/__tests__/checkbox.test.tsx b/packages/components/checkbox/__tests__/checkbox.test.tsx
index 8eaeaba9f5..f6268952c7 100644
--- a/packages/components/checkbox/__tests__/checkbox.test.tsx
+++ b/packages/components/checkbox/__tests__/checkbox.test.tsx
@@ -1,4 +1,4 @@
-import { nextTick } from 'vue'
+import { nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
 import { ElFormItem } from '@element-plus/components/form'
@@ -6,29 +6,13 @@ import Checkbox from '../src/checkbox.vue'
 import CheckboxButton from '../src/checkbox-button.vue'
 import CheckboxGroup from '../src/checkbox-group.vue'
 
-const _mount = (
-  template: string,
-  data: () => Record<string, unknown>,
-  otherObj?: Record<string, unknown>
-) =>
-  mount({
-    components: {
-      'el-checkbox': Checkbox,
-      'el-checkbox-group': CheckboxGroup,
-      'el-checkbox-button': CheckboxButton,
-      'el-form-item': ElFormItem,
-    },
-    template,
-    data,
-    ...otherObj,
-  })
+import type { CheckboxValueType } from '../src/checkbox'
 
 describe('Checkbox', () => {
   test('create', async () => {
-    const wrapper = _mount(
-      '<el-checkbox v-model="checkbox" label="a"/>',
-      () => ({ checkbox: false })
-    )
+    const checked = ref(false)
+    const wrapper = mount(() => <Checkbox v-model={checked.value} label="a" />)
+
     expect(wrapper.classes()).toContain('el-checkbox')
     expect(wrapper.classes()).not.toContain('is-disabled')
     await wrapper.trigger('click')
@@ -39,301 +23,278 @@ describe('Checkbox', () => {
 
   describe('no v-model', () => {
     test('checkbox without label', async () => {
-      const wrapper = _mount('<el-checkbox />', () => ({
-        checkbox: false,
-      }))
+      const checked = ref(false)
+      const wrapper = mount(() => <Checkbox checked={checked.value} />)
+
       expect(wrapper.classes('is-checked')).toBe(false)
     })
 
     test('checkbox with label attribute', async () => {
-      const wrapper = _mount('<el-checkbox label="a"/>', () => ({
-        checkbox: false,
-      }))
+      const checked = ref(false)
+      const wrapper = mount(() => (
+        <Checkbox checked={checked.value} label="a" />
+      ))
+
       expect(wrapper.classes('is-checked')).toBe(false)
     })
   })
 
   describe('disabled', () => {
     test('checkbox without label', async () => {
-      const wrapper = _mount(
-        `<el-form-item label="test">
-          <el-checkbox ref="check" v-model="checkbox" disabled/>
-        </el-form-item>`,
-        () => ({ checkbox: false })
-      )
-      const checkbox = wrapper.findComponent({ ref: 'check' })
+      const checked = ref(false)
+      const wrapper = mount(() => (
+        <ElFormItem label="test">
+          <Checkbox v-model={checked.value} disabled />
+        </ElFormItem>
+      ))
+
+      const checkbox = wrapper.findComponent(Checkbox)
       expect(checkbox.classes()).toContain('is-disabled')
-      expect(wrapper.vm.checkbox).toBe(false)
+      expect(checked.value).toBe(false)
       await checkbox.trigger('click')
       await nextTick()
       expect(checkbox.classes()).toContain('is-disabled')
-      expect(wrapper.vm.checkbox).toBe(false)
+      expect(checked.value).toBe(false)
     })
 
     test('checkbox with label attribute', async () => {
-      const wrapper = _mount(
-        '<el-checkbox v-model="checkbox" disabled label="a"/>',
-        () => ({ checkbox: false })
-      )
+      const checked = ref(false)
+      const wrapper = mount(() => (
+        <Checkbox v-model={checked.value} disabled label="a" />
+      ))
+
       expect(wrapper.classes()).toContain('is-disabled')
-      expect(wrapper.vm.checkbox).toBe(false)
+      expect(checked.value).toBe(false)
       await wrapper.trigger('click')
       await nextTick()
       expect(wrapper.classes()).toContain('is-disabled')
-      expect(wrapper.vm.checkbox).toBe(false)
+      expect(checked.value).toBe(false)
     })
   })
 
   describe('change event', () => {
     test('checkbox without label', async () => {
-      const wrapper = _mount(
-        `<el-form-item label="test">
-          <el-checkbox ref="check" v-model="checked" @change="onChange" />
-        </el-form-item>`,
-        () => ({
-          data: null,
-          checked: false,
-        }),
-        {
-          methods: {
-            onChange(val: boolean) {
-              wrapper.setData({ data: val })
-            },
-          },
-        }
-      )
-      const vm = wrapper.vm
-      await wrapper.findComponent({ ref: 'check' }).trigger('click')
-      expect(vm.data).toBe(true)
+      const checked = ref(false)
+      const data = ref()
+      const onChange = (val: CheckboxValueType) => (data.value = val)
+      const wrapper = mount(() => (
+        <ElFormItem label="test">
+          <Checkbox v-model={checked.value} onChange={onChange} />
+        </ElFormItem>
+      ))
+
+      await wrapper.findComponent(Checkbox).trigger('click')
+      expect(data.value).toBe(true)
     })
 
     test('checkbox with label attribute', async () => {
-      const wrapper = _mount(
-        `<el-checkbox v-model="checked" label="Foobar" @change="onChange" />`,
-        () => ({
-          data: null,
-          checked: false,
-        }),
-        {
-          methods: {
-            onChange(val: boolean) {
-              wrapper.setData({ data: val })
-            },
-          },
-        }
-      )
-      const vm = wrapper.vm
+      const checked = ref(false)
+      const data = ref()
+      const onChange = (val: CheckboxValueType) => (data.value = val)
+      const wrapper = mount(() => (
+        <Checkbox v-model={checked.value} onChange={onChange} label="Foobar" />
+      ))
+
       await wrapper.trigger('click')
-      expect(vm.data).toBe(true)
+      expect(data.value).toBe(true)
     })
 
     test('checkbox with label as slot content', async () => {
-      const wrapper = _mount(
-        `<el-checkbox v-model="checked" @change="onChange">Foobar</el-checkbox>`,
-        () => ({
-          data: null,
-          checked: false,
-        }),
-        {
-          methods: {
-            onChange(val: boolean) {
-              wrapper.setData({ data: val })
-            },
-          },
-        }
-      )
-      const vm = wrapper.vm
+      const checked = ref(false)
+      const data = ref()
+      const onChange = (val: CheckboxValueType) => (data.value = val)
+      const wrapper = mount(() => (
+        <Checkbox v-model={checked.value} onChange={onChange}>
+          Foobar
+        </Checkbox>
+      ))
+
       await wrapper.trigger('click')
-      expect(vm.data).toBe(true)
+      expect(data.value).toBe(true)
     })
   })
 
   test('checkbox group', async () => {
-    const wrapper = _mount(
-      `
-      <el-checkbox-group v-model="checkList">
-        <el-checkbox label="a" ref="a"></el-checkbox>
-        <el-checkbox label="b" ref="b"></el-checkbox>
-        <el-checkbox label="c" ref="c"></el-checkbox>
-        <el-checkbox label="d" ref="d"></el-checkbox>
-      </el-checkbox-group>
-      `,
-      () => ({ checkList: [] })
-    )
-    const vm = wrapper.vm
-    expect(vm.checkList.length).toBe(0)
-    await wrapper.findComponent({ ref: 'a' }).trigger('click')
-    expect(vm.checkList.length).toBe(1)
+    const checkList = ref([])
+    const wrapper = mount({
+      setup() {
+        return () => (
+          <CheckboxGroup v-model={checkList.value}>
+            <Checkbox label="a" ref="a" />
+            <Checkbox label="b" ref="b" />
+            <Checkbox label="c" ref="c" />
+            <Checkbox label="d" ref="d" />
+          </CheckboxGroup>
+        )
+      },
+    })
+
+    expect(checkList.value.length).toBe(0)
+
+    await wrapper.findComponent({ ref: 'a' }).trigger('click')
+    expect(checkList.value.length).toBe(1)
+    expect(checkList.value).toContain('a')
 
-    expect(vm.checkList).toContain('a')
     await wrapper.findComponent({ ref: 'b' }).trigger('click')
-    expect(vm.checkList.length).toBe(2)
-    expect(vm.checkList).toContain('a')
-    expect(vm.checkList).toContain('b')
+    expect(checkList.value.length).toBe(2)
+    expect(checkList.value).toContain('a')
+    expect(checkList.value).toContain('b')
   })
 
   test('checkbox group without modelValue', async () => {
-    const wrapper = _mount(
-      `
-      <el-checkbox-group v-model="checkList">
-        <el-checkbox label="a" ref="a"></el-checkbox>
-        <el-checkbox label="b" ref="b"></el-checkbox>
-        <el-checkbox label="c" ref="c"></el-checkbox>
-        <el-checkbox label="d" ref="d"></el-checkbox>
-      </el-checkbox-group>
-      `,
-      () => ({ checkList: undefined } as any)
-    )
-    const vm = wrapper.vm
+    const checkList = ref([])
+    const wrapper = mount({
+      setup() {
+        return () => (
+          <CheckboxGroup v-model={checkList.value}>
+            <Checkbox label="a" ref="a" />
+            <Checkbox label="b" ref="b" />
+            <Checkbox label="c" ref="c" />
+            <Checkbox label="d" ref="d" />
+          </CheckboxGroup>
+        )
+      },
+    })
+
     await wrapper.findComponent({ ref: 'a' }).trigger('click')
-    expect(vm.checkList.length).toBe(1)
-    expect(vm.checkList).toContain('a')
+    expect(checkList.value.length).toBe(1)
+    expect(checkList.value).toContain('a')
   })
 
   test('checkbox group change', async () => {
-    const wrapper = _mount(
-      `
-      <el-checkbox-group v-model="checkList" @change="onChange">
-        <el-checkbox label="a" ref="a"></el-checkbox>
-        <el-checkbox label="b" ref="b"></el-checkbox>
-      </el-checkbox-group>
-      `,
-      () => ({ checkList: [], data: null } as any),
-      {
-        methods: {
-          onChange(val: string[]) {
-            ;(this as any).data = val
-          },
-        },
-      }
-    )
-    const vm = wrapper.vm
+    const checkList = ref([])
+    const data = ref<CheckboxValueType[]>([])
+    const onChange = (val: CheckboxValueType[]) => (data.value = val)
+    const wrapper = mount({
+      setup() {
+        return () => (
+          <CheckboxGroup v-model={checkList.value} onChange={onChange}>
+            <Checkbox label="a" ref="a" />
+            <Checkbox label="b" ref="b" />
+          </CheckboxGroup>
+        )
+      },
+    })
+
     await wrapper.findComponent({ ref: 'a' }).trigger('click')
     await nextTick()
-    expect(vm.data.length).toBe(1)
-    expect(vm.data).toEqual(['a'])
+    expect(data.value.length).toBe(1)
+    expect(data.value).toEqual(['a'])
   })
 
   test('nested group', async () => {
-    const wrapper = _mount(
-      `
-      <el-checkbox-group v-model="checkList">
-        <div>
-          <el-checkbox label="a" ref="a"></el-checkbox>
-          <el-checkbox label="b" ref="b"></el-checkbox>
-          <el-checkbox label="c" ref="c"></el-checkbox>
-          <el-checkbox label="d" ref="d"></el-checkbox>
-        </div>
-      </el-checkbox-group>
-      `,
-      () => ({ checkList: [] })
-    )
-    const vm = wrapper.vm
-    expect(vm.checkList.length).toBe(0)
+    const checkList = ref([])
+    const wrapper = mount({
+      setup() {
+        return () => (
+          <CheckboxGroup v-model={checkList.value}>
+            <Checkbox label="a" ref="a" />
+            <Checkbox label="b" ref="b" />
+            <Checkbox label="c" ref="c" />
+            <Checkbox label="d" ref="d" />
+          </CheckboxGroup>
+        )
+      },
+    })
+
+    expect(checkList.value.length).toBe(0)
     await wrapper.findComponent({ ref: 'a' }).trigger('click')
-    expect(vm.checkList).toEqual(['a'])
+    expect(checkList.value).toEqual(['a'])
   })
 
   describe('true false label', () => {
     test('without label', async () => {
-      const wrapper = _mount(
-        `<el-form-item label="test">
-          <el-checkbox ref="check" true-label="a" :false-label="3" v-model="checked" />
-        </el-form-item>`,
-        () => ({
-          checked: 'a',
-        })
-      )
-      const vm = wrapper.vm
-      const checkbox = wrapper.findComponent({ ref: 'check' })
+      const checked = ref('a')
+      const wrapper = mount(() => (
+        <ElFormItem label="test">
+          <Checkbox true-label="a" false-label={3} v-model={checked.value} />
+        </ElFormItem>
+      ))
+
+      const checkbox = wrapper.findComponent(Checkbox)
       await checkbox.trigger('click')
       await nextTick()
-      expect(vm.checked).toBe(3)
+      expect(checked.value).toBe(3)
       await checkbox.trigger('click')
       await nextTick()
-      expect(vm.checked).toBe('a')
+      expect(checked.value).toBe('a')
     })
 
     test('with label attribute', async () => {
-      const wrapper = _mount(
-        `<el-checkbox label="Foobar" true-label="a" :false-label="3" v-model="checked" />`,
-        () => ({
-          checked: 'a',
-        })
-      )
-      const vm = wrapper.vm
+      const checked = ref('a')
+      const wrapper = mount(() => (
+        <Checkbox
+          label="Foobar"
+          true-label="a"
+          false-label={3}
+          v-model={checked.value}
+        />
+      ))
+
       await wrapper.trigger('click')
       await nextTick()
-      expect(vm.checked).toBe(3)
+      expect(checked.value).toBe(3)
       await wrapper.trigger('click')
       await nextTick()
-      expect(vm.checked).toBe('a')
+      expect(checked.value).toBe('a')
     })
 
     test('with label as slot content', async () => {
-      const wrapper = _mount(
-        `<el-checkbox true-label="a" :false-label="3" v-model="checked">Foobar</el-checkbox>`,
-        () => ({
-          checked: 'a',
-        })
-      )
-      const vm = wrapper.vm
+      const checked = ref('a')
+      const wrapper = mount(() => (
+        <Checkbox true-label="a" false-label={3} v-model={checked.value}>
+          Foobar
+        </Checkbox>
+      ))
+
       await wrapper.trigger('click')
       await nextTick()
-      expect(vm.checked).toBe(3)
+      expect(checked.value).toBe(3)
       await wrapper.trigger('click')
       await nextTick()
-      expect(vm.checked).toBe('a')
+      expect(checked.value).toBe('a')
     })
   })
 
   test('check', () => {
-    const wrapper = _mount(
-      `
+    const checked = ref(false)
+    const checklist = ref([])
+    mount(() => (
       <div>
-        <el-checkbox v-model="checked" checked></el-checkbox>
-        <el-checkbox-group v-model="checklist">
-          <el-checkbox checked label="a"></el-checkbox>
-        </el-checkbox-group>
+        <Checkbox v-model={checked.value} checked />
+        <CheckboxGroup v-model={checklist.value}>
+          <Checkbox checked label="a" />
+        </CheckboxGroup>
       </div>
-      `,
-      () => ({
-        checked: false,
-        checklist: [],
-      })
-    ) as any
-    expect(wrapper.vm.checked).toBe(true)
-    expect(wrapper.vm.checklist).toEqual(['a'])
+    ))
+
+    expect(checked.value).toBe(true)
+    expect(checklist.value).toEqual(['a'])
   })
 
   test('label', async () => {
-    const wrapper = _mount(
-      `
-      <div>
-        <el-checkbox-group v-model="checklist">
-          <el-checkbox label="">all</el-checkbox>
-          <el-checkbox label="a">a</el-checkbox>
-          <el-checkbox label="b">b</el-checkbox>
-        </el-checkbox-group>
-      </div>
-      `,
-      () => ({
-        checked: false,
-        checklist: [],
-      })
-    )
+    const checklist = ref([])
+    const wrapper = mount(() => (
+      <CheckboxGroup v-model={checklist.value}>
+        <Checkbox label="">all</Checkbox>
+        <Checkbox label="a">a</Checkbox>
+        <Checkbox label="b">b</Checkbox>
+      </CheckboxGroup>
+    ))
+
     const checkbox = wrapper.find('.el-checkbox')
     await checkbox.trigger('click')
-    expect(wrapper.vm.checklist[0]).toEqual('')
+    expect(checklist.value[0]).toEqual('')
   })
 })
 
 describe('check-button', () => {
   test('create', async () => {
-    const wrapper = _mount(
-      '<el-checkbox-button v-model="checkbox" label="a"/>',
-      () => ({ checkbox: false })
-    )
+    const checked = ref(false)
+    const wrapper = mount(() => (
+      <CheckboxButton v-model={checked.value} label="a" />
+    ))
+
     expect(wrapper.classes()).toContain('el-checkbox-button')
     await wrapper.trigger('click')
     expect(wrapper.classes()).toContain('is-checked')
@@ -342,306 +303,271 @@ describe('check-button', () => {
   })
 
   test('disabled', async () => {
-    const wrapper = _mount(
-      '<el-checkbox-button v-model="checkbox" disabled label="a"/>',
-      () => ({ checkbox: false })
-    )
+    const checked = ref(false)
+    const wrapper = mount(() => (
+      <CheckboxButton v-model={checked.value} disabled label="a" />
+    ))
+
     expect(wrapper.classes()).toContain('is-disabled')
     await wrapper.trigger('click')
     expect(wrapper.classes()).toContain('is-disabled')
   })
 
   test('change event', async () => {
-    const wrapper = _mount(
-      `<el-checkbox-button v-model="checked" @change="onChange" />
-      `,
-      () => ({
-        data: '',
-        checked: false,
-      }),
-      {
-        methods: {
-          onChange(val: boolean) {
-            wrapper.setData({ data: val })
-          },
-        },
-      }
-    )
+    const checked = ref(false)
+    const data = ref()
+    const onChange = (val: CheckboxValueType) => (data.value = val)
+    const wrapper = mount(() => (
+      <CheckboxButton v-model={checked.value} onChange={onChange} />
+    ))
 
-    const vm = wrapper.vm
     await wrapper.trigger('click')
-    expect(vm.data).toBe(true)
+    expect(data.value).toBe(true)
   })
 
   test('button group change', async () => {
-    const wrapper = _mount(
-      `
-      <el-checkbox-group v-model="checkList" @change="onChange">
-        <el-checkbox-button label="a" ref="a"></el-checkbox-button>
-        <el-checkbox-button label="b" ref="b"></el-checkbox-button>
-        <el-checkbox-button label="c" ref="c"></el-checkbox-button>
-        <el-checkbox-button label="d" ref="d"></el-checkbox-button>
-      </el-checkbox-group>
-      `,
-      () => ({
-        data: null,
-        checkList: [],
-      }),
-      {
-        methods: {
-          onChange(val: string[]) {
-            wrapper.setData({
-              data: val,
-            })
-          },
-        },
-      }
-    )
-    const vm = wrapper.vm
+    const checkList = ref([])
+    const data = ref<CheckboxValueType[]>([])
+    const onChange = (val: CheckboxValueType[]) => (data.value = val)
+    const wrapper = mount({
+      setup() {
+        return () => (
+          <CheckboxGroup v-model={checkList.value} onChange={onChange}>
+            <CheckboxButton label="a" ref="a" />
+            <CheckboxButton label="b" ref="b" />
+            <CheckboxButton label="c" ref="c" />
+            <CheckboxButton label="d" ref="d" />
+          </CheckboxGroup>
+        )
+      },
+    })
+
     await wrapper.findComponent({ ref: 'a' }).trigger('click')
-    await nextTick() // await change event
-    expect(vm.data).toEqual(['a'])
+    expect(data.value).toEqual(['a'])
     await wrapper.findComponent({ ref: 'b' }).trigger('click')
-    await nextTick() // await change event
-    expect(vm.data).toEqual(['a', 'b'])
+    expect(data.value).toEqual(['a', 'b'])
   })
 
   test('button group props', () => {
-    const wrapper = _mount(
-      `
-      <el-checkbox-group v-model="checkList" size="large" fill="#FF0000" text-color="#000">
-        <el-checkbox-button label="a" ref="a"></el-checkbox-button>
-        <el-checkbox-button label="b" ref="b"></el-checkbox-button>
-        <el-checkbox-button label="c" ref="c"></el-checkbox-button>
-        <el-checkbox-button label="d" ref="d"></el-checkbox-button>
-      </el-checkbox-group>
-      `,
-      () => ({ checkList: ['a', 'b'] })
-    )
-    const vm = wrapper.vm
-    expect(vm.checkList.length).toBe(2)
-    expect((vm.$refs.a as any).$el.classList.contains('is-checked')).toBe(true)
+    const checkList = ref(['a', 'b'])
+    const wrapper = mount({
+      setup() {
+        return () => (
+          <CheckboxGroup
+            v-model={checkList.value}
+            size="large"
+            fill="#ff0000"
+            text-color="#000"
+          >
+            <CheckboxButton label="a" ref="a" />
+            <CheckboxButton label="b" ref="b" />
+            <CheckboxButton label="c" ref="c" />
+            <CheckboxButton label="d" ref="d" />
+          </CheckboxGroup>
+        )
+      },
+    })
+
+    const checkbox = wrapper.findComponent({ ref: 'a' })
+    expect(checkList.value.length).toBe(2)
+    expect(checkbox.classes()).contains('is-checked')
     expect(
-      (vm.$refs.a as any).$el.querySelector('.el-checkbox-button__inner').style
-        .borderColor
-    ).toEqual('#ff0000')
+      checkbox.find('.el-checkbox-button__inner').attributes('style')
+    ).contains('border-color: #ff0000;')
   })
 
   test('button group tag', () => {
-    const wrapper = _mount(
-      `
-      <el-checkbox-group v-model="checkList" tag="tr">
-        <el-checkbox-button label="a" ref="a"></el-checkbox-button>
-        <el-checkbox-button label="b" ref="b"></el-checkbox-button>
-        <el-checkbox-button label="c" ref="c"></el-checkbox-button>
-        <el-checkbox-button label="d" ref="d"></el-checkbox-button>
-      </el-checkbox-group>
-      `,
-      () => ({ checkList: ['a', 'b'] })
-    )
+    const checkList = ref(['a', 'b'])
+    const wrapper = mount(() => (
+      <CheckboxGroup v-model={checkList.value} tag="tr">
+        <CheckboxButton label="a" ref="a" />
+        <CheckboxButton label="b" ref="b" />
+        <CheckboxButton label="c" ref="c" />
+        <CheckboxButton label="d" ref="d" />
+      </CheckboxGroup>
+    ))
+
     expect(wrapper.find('tr').classes('el-checkbox-group')).toBeTruthy()
   })
 
   test('button group min and max', async () => {
-    const wrapper = _mount(
-      `
-      <el-checkbox-group
-        v-model="checkList"
-        :min="2"
-        :max="3"
-      >
-        <el-checkbox-button label="a" ref="a"></el-checkbox-button>
-        <el-checkbox-button label="b" ref="b"></el-checkbox-button>
-        <el-checkbox-button label="c" ref="c"></el-checkbox-button>
-        <el-checkbox-button label="d" ref="d"></el-checkbox-button>
-        <el-checkbox-button label="e" ref="e"></el-checkbox-button>
-      </el-checkbox-group>
-      `,
-      () => ({
-        checkList: ['a', 'b'],
-        lastEvent: null,
-      })
-    )
-    const vm = wrapper.vm
-    expect(vm.checkList.length).toBe(2)
-    await wrapper.findComponent({ ref: 'a' }).trigger('click')
-    vm.$nextTick(async () => {
-      expect(vm.checkList.length).toBe(2)
-      await wrapper.findComponent({ ref: 'c' }).trigger('click')
-      expect(vm.checkList.length).toBe(3)
-      expect(vm.checkList).toEqual(['a', 'b', 'c'])
-      expect((wrapper.findComponent({ ref: 'd' }).vm as any).isDisabled).toBe(
-        true
-      )
-      expect((wrapper.findComponent({ ref: 'e' }).vm as any).isDisabled).toBe(
-        true
-      )
-      vm.checkList = []
-      await vm.$nextTick()
-      await wrapper.findComponent({ ref: 'a' }).trigger('click')
-      await wrapper.findComponent({ ref: 'd' }).trigger('click')
-      expect(vm.checkList).toEqual(['a', 'd'])
-      await wrapper.findComponent({ ref: 'a' }).trigger('click')
-      expect(vm.checkList).toEqual(['a', 'd'])
-      expect((wrapper.findComponent({ ref: 'a' }).vm as any).isDisabled).toBe(
-        true
-      )
+    const checkList = ref(['a', 'b'])
+    const wrapper = mount({
+      setup() {
+        return () => (
+          <CheckboxGroup v-model={checkList.value} min={2} max={3}>
+            <CheckboxButton label="a" ref="a" />
+            <CheckboxButton label="b" ref="b" />
+            <CheckboxButton label="c" ref="c" />
+            <CheckboxButton label="d" ref="d" />
+            <CheckboxButton label="e" ref="e" />
+          </CheckboxGroup>
+        )
+      },
     })
+
+    expect(checkList.value.length).toBe(2)
+
+    await wrapper.findComponent({ ref: 'a' }).trigger('click')
+    expect(checkList.value.length).toBe(2)
+
+    await wrapper.findComponent({ ref: 'c' }).trigger('click')
+    expect(checkList.value.length).toBe(3)
+    expect(checkList.value).toEqual(['a', 'b', 'c'])
+
+    expect(wrapper.findComponent({ ref: 'd' }).vm.isDisabled).toBe(true)
+    expect(wrapper.findComponent({ ref: 'e' }).vm.isDisabled).toBe(true)
+
+    checkList.value = []
+    await nextTick()
+    await wrapper.findComponent({ ref: 'a' }).trigger('click')
+    await wrapper.findComponent({ ref: 'd' }).trigger('click')
+    expect(checkList.value).toEqual(['a', 'd'])
+    await wrapper.findComponent({ ref: 'a' }).trigger('click')
+    expect(checkList.value).toEqual(['a', 'd'])
+    expect(wrapper.findComponent({ ref: 'a' }).vm.isDisabled).toBe(true)
   })
 
   test('nested group', async () => {
-    const wrapper = _mount(
-      `
-      <el-checkbox-group v-model="checkList">
-        <div>
-          <el-checkbox-button label="a" ref="a"></el-checkbox-button>
-          <el-checkbox-button label="b" ref="b"></el-checkbox-button>
-          <el-checkbox-button label="c" ref="c"></el-checkbox-button>
-          <el-checkbox-button label="d" ref="d"></el-checkbox-button>
-        </div>
-      </el-checkbox-group>
-      `,
-      () => ({ checkList: [] })
-    )
-    const vm = wrapper.vm
-    expect(vm.checkList.length).toBe(0)
+    const checkList = ref([])
+    const wrapper = mount({
+      setup() {
+        return () => (
+          <CheckboxGroup v-model={checkList.value}>
+            <CheckboxButton label="a" ref="a" />
+            <CheckboxButton label="b" ref="b" />
+            <CheckboxButton label="c" ref="c" />
+            <CheckboxButton label="d" ref="d" />
+          </CheckboxGroup>
+        )
+      },
+    })
+
+    expect(checkList.value.length).toBe(0)
     await wrapper.findComponent({ ref: 'a' }).trigger('click')
-    expect(vm.checkList).toEqual(['a'])
+    expect(checkList.value).toEqual(['a'])
   })
 
   describe('checked prop', () => {
     test('check', () => {
-      const wrapper = _mount(
-        `
+      const checked = ref(false)
+      const checklist = ref([])
+      mount(() => (
         <div>
-          <el-checkbox-button v-model="checked" checked />
-          <el-checkbox-group v-model="checklist">
-            <el-checkbox-button checked label="a" />
-          </el-checkbox-group>
+          <Checkbox v-model={checked.value} checked />
+          <CheckboxGroup v-model={checklist.value}>
+            <CheckboxButton checked label="a" />
+          </CheckboxGroup>
         </div>
-        `,
-        () => ({
-          checked: false,
-          checklist: [],
-        })
-      )
-      expect(wrapper.vm.checked).toBe(true)
-      expect(wrapper.vm.checklist).toEqual(['a'])
+      ))
+
+      expect(checked.value).toBe(true)
+      expect(checklist.value).toEqual(['a'])
     })
 
     test('checked', () => {
-      const wrapper = _mount(`<el-checkbox checked />`, () => ({}))
-      expect(wrapper.find('.el-checkbox').classes().toString()).toMatch(
-        'is-checked'
-      )
+      const wrapper = mount(() => <Checkbox checked />)
+
+      expect(wrapper.find('.el-checkbox').classes()).contains('is-checked')
     })
   })
 
   describe('form item accessibility integration', () => {
     test('checkbox, no label, automatic label attachment', async () => {
-      const wrapper = _mount(
-        `
-        <el-form-item ref="item" label="Test">
-          <el-checkbox ref="checkbox" />
-        </el-form-item>
-        `,
-        () => ({})
-      )
-      await nextTick()
-      const formItem = await wrapper.findComponent({ ref: 'item' })
-      const checkbox = await wrapper.findComponent({ ref: 'checkbox' })
+      const wrapper = mount(() => (
+        <ElFormItem label="test">
+          <Checkbox />
+        </ElFormItem>
+      ))
+
+      const formItem = await wrapper.findComponent(ElFormItem)
+      const checkbox = await wrapper.findComponent(Checkbox)
       const formItemLabel = formItem.find('.el-form-item__label')
       const checkboxInput = checkbox.find('.el-checkbox__original')
-      expect(checkboxInput.attributes().id).toBe(formItemLabel.attributes().for)
+      expect(checkboxInput.attributes('id')).toBe(
+        formItemLabel.attributes('for')
+      )
     })
 
     test('checkbox with label, form item is group', async () => {
-      const wrapper = _mount(
-        `
-        <el-form-item ref="item" label="Test">
-          <el-checkbox label="Foo" ref="checkbox" />
-        </el-form-item>
-        `,
-        () => ({})
-      )
-      await nextTick()
-      const formItem = await wrapper.findComponent({ ref: 'item' })
-      const checkbox = await wrapper.findComponent({ ref: 'checkbox' })
+      const wrapper = mount(() => (
+        <ElFormItem label="test">
+          <Checkbox label="Foo" />
+        </ElFormItem>
+      ))
+
+      const formItem = await wrapper.findComponent(ElFormItem)
+      const checkbox = await wrapper.findComponent(Checkbox)
       const checkboxLabel = checkbox.find('.el-checkbox__label')
       const checkboxInput = checkbox.find('.el-checkbox__original')
       expect(checkboxLabel.element.textContent).toBe('Foo')
-      expect(checkboxInput.attributes().id).toBeFalsy()
-      expect(formItem.attributes().role).toBe('group')
+      expect(checkboxInput.attributes('id')).toBeFalsy()
+      expect(formItem.attributes('role')).toBe('group')
     })
 
     test('single checkbox group in form item', async () => {
-      const wrapper = _mount(
-        `
-        <el-form-item ref="item" label="Test">
-          <el-checkbox-group ref="checkboxGroup">
-            <el-checkbox label="Foo" />
-            <el-checkbox label="Bar" />
-          </el-checkbox-group>
-        </el-form-item>
-        `,
-        () => ({})
-      )
-      await nextTick()
-      const formItem = await wrapper.findComponent({ ref: 'item' })
-      const checkboxGroup = await wrapper.findComponent({
-        ref: 'checkboxGroup',
-      })
+      const wrapper = mount(() => (
+        <ElFormItem label="test">
+          <CheckboxGroup>
+            <Checkbox label="Foo" />
+            <Checkbox label="Bar" />
+          </CheckboxGroup>
+        </ElFormItem>
+      ))
+
+      const formItem = await wrapper.findComponent(ElFormItem)
+      const checkboxGroup = await wrapper.findComponent(CheckboxGroup)
       const formItemLabel = formItem.find('.el-form-item__label')
-      expect(formItem.attributes().role).toBeFalsy()
-      expect(checkboxGroup.attributes().role).toBe('group')
-      expect(formItemLabel.attributes().for).toBe(checkboxGroup.attributes().id)
-      expect(formItemLabel.attributes().id).toBe(
-        checkboxGroup.attributes()['aria-labelledby']
+      expect(formItem.attributes('role')).toBeFalsy()
+      expect(checkboxGroup.attributes('role')).toBe('group')
+      expect(formItemLabel.attributes('for')).toBe(
+        checkboxGroup.attributes('id')
+      )
+      expect(formItemLabel.attributes('id')).toBe(
+        checkboxGroup.attributes('aria-labelledby')
       )
     })
 
     test('single checkbox group in form item, override label', async () => {
-      const wrapper = _mount(
-        `
-        <el-form-item ref="item" label="Test">
-          <el-checkbox-group label="Foo" ref="checkboxGroup">
-            <el-checkbox label="Foo" />
-            <el-checkbox label="Bar" />
-          </el-checkbox-group>
-        </el-form-item>
-        `,
-        () => ({})
-      )
-      await nextTick()
-      const formItem = await wrapper.findComponent({ ref: 'item' })
-      const checkboxGroup = await wrapper.findComponent({
-        ref: 'checkboxGroup',
-      })
+      const wrapper = mount(() => (
+        <ElFormItem label="test">
+          <CheckboxGroup label="Foo">
+            <Checkbox label="Foo" />
+            <Checkbox label="Bar" />
+          </CheckboxGroup>
+        </ElFormItem>
+      ))
+
+      const formItem = await wrapper.findComponent(ElFormItem)
+      const checkboxGroup = await wrapper.findComponent(CheckboxGroup)
       const formItemLabel = formItem.find('.el-form-item__label')
-      expect(formItemLabel.attributes().for).toBe(checkboxGroup.attributes().id)
-      expect(checkboxGroup.attributes().role).toBe('group')
+      expect(formItemLabel.attributes('for')).toBe(
+        checkboxGroup.attributes('id')
+      )
+      expect(checkboxGroup.attributes('role')).toBe('group')
       expect(checkboxGroup.attributes()['aria-label']).toBe('Foo')
       expect(checkboxGroup.attributes()['aria-labelledby']).toBeFalsy()
     })
 
     test('multiple checkbox groups in form item', async () => {
-      const wrapper = _mount(
-        `
-        <el-form-item ref="item" label="Test">
-          <el-checkbox-group label="Foo" ref="checkboxGroup1">
-            <el-checkbox label="Foo" />
-            <el-checkbox label="Bar" />
-          </el-checkbox-group>
-          <el-checkbox-group label="Bar" ref="checkboxGroup2">
-            <el-checkbox label="Foo" />
-            <el-checkbox label="Bar" />
-          </el-checkbox-group>
-        </el-form-item>
-        `,
-        () => ({})
-      )
-      await nextTick()
-      const formItem = await wrapper.findComponent({ ref: 'item' })
+      const wrapper = mount({
+        setup() {
+          return () => (
+            <ElFormItem label="test">
+              <CheckboxGroup label="Foo" ref="checkboxGroup1">
+                <Checkbox label="Foo" />
+                <Checkbox label="Bar" />
+              </CheckboxGroup>
+              <CheckboxGroup label="Bar" ref="checkboxGroup2">
+                <Checkbox label="Foo" />
+                <Checkbox label="Bar" />
+              </CheckboxGroup>
+            </ElFormItem>
+          )
+        },
+      })
+
+      const formItem = await wrapper.findComponent(ElFormItem)
       const checkboxGroup1 = await wrapper.findComponent({
         ref: 'checkboxGroup1',
       })
@@ -649,14 +575,14 @@ describe('check-button', () => {
         ref: 'checkboxGroup2',
       })
       const formItemLabel = formItem.find('.el-form-item__label')
-      expect(formItem.attributes().role).toBe('group')
+      expect(formItem.attributes('role')).toBe('group')
       expect(formItem.attributes()['aria-labelledby']).toBe(
-        formItemLabel.attributes().id
+        formItemLabel.attributes('id')
       )
-      expect(checkboxGroup1.attributes().role).toBe('group')
+      expect(checkboxGroup1.attributes('role')).toBe('group')
       expect(checkboxGroup1.attributes()['aria-label']).toBe('Foo')
       expect(checkboxGroup1.attributes()['aria-labelledby']).toBeFalsy()
-      expect(checkboxGroup2.attributes().role).toBe('group')
+      expect(checkboxGroup2.attributes('role')).toBe('group')
       expect(checkboxGroup2.attributes()['aria-label']).toBe('Bar')
       expect(checkboxGroup2.attributes()['aria-labelledby']).toBeFalsy()
     })