diff --git a/src/checkbox-group/test/index.spec.js b/src/checkbox-group/test/index.spec.js
new file mode 100644
index 000000000..c9c1048e8
--- /dev/null
+++ b/src/checkbox-group/test/index.spec.js
@@ -0,0 +1,138 @@
+import { mount } from '@vue/test-utils';
+import Checkbox from '../../checkbox';
+import CheckboxGroup from '..';
+import { ref, nextTick } from 'vue';
+
+test('should emit "update:modelValue" event when checkbox is clicked', async () => {
+ const wrapper = mount({
+ setup() {
+ return {
+ value: ref([]),
+ };
+ },
+ render() {
+ return (
+
+
+
+
+ );
+ },
+ });
+
+ const items = wrapper.findAll('.van-checkbox');
+
+ items[0].trigger('click');
+ expect(wrapper.vm.value).toEqual(['a']);
+
+ await nextTick();
+ items[1].trigger('click');
+ expect(wrapper.vm.value).toEqual(['a', 'b']);
+
+ await nextTick();
+ items[0].trigger('click');
+ expect(wrapper.vm.value).toEqual(['b']);
+});
+
+test('should change icon size when using icon-size prop', () => {
+ const wrapper = mount({
+ render() {
+ return (
+
+
+
+
+ );
+ },
+ });
+
+ const icons = wrapper.findAll('.van-checkbox__icon');
+ expect(icons[0].element.style.fontSize).toEqual('10rem');
+ expect(icons[1].element.style.fontSize).toEqual('5rem');
+});
+
+test('should change checked color when using checked-color prop', () => {
+ const wrapper = mount({
+ render() {
+ return (
+
+
+
+
+ );
+ },
+ });
+
+ const icons = wrapper.findAll('.van-icon');
+ expect(icons[0].element.style.backgroundColor).toEqual('black');
+ expect(icons[1].element.style.backgroundColor).toEqual('white');
+});
+
+test('should ignore Checkbox if bind-group is false', async () => {
+ const wrapper = mount({
+ setup() {
+ return {
+ value: ref(false),
+ groupValue: ref([]),
+ toggleAll(checked) {
+ this.$refs.group.toggleAll(checked);
+ },
+ };
+ },
+ render() {
+ return (
+
+
+
+
+
+ );
+ },
+ });
+
+ const items = wrapper.findAll('.van-checkbox');
+ items[0].trigger('click');
+ expect(wrapper.vm.value).toBeTruthy();
+ expect(wrapper.vm.groupValue).toEqual([]);
+
+ wrapper.vm.toggleAll(true);
+ expect(wrapper.vm.groupValue).toEqual(['b', 'c']);
+});
+
+test('should toggle all checkboxes when toggleAll method is called', async () => {
+ const wrapper = mount({
+ setup() {
+ return {
+ value: ref(['a']),
+ toggleAll(checked) {
+ this.$refs.group.toggleAll(checked);
+ },
+ };
+ },
+ render() {
+ return (
+
+
+
+
+
+ );
+ },
+ });
+
+ wrapper.vm.toggleAll();
+ expect(wrapper.vm.value).toEqual(['b', 'c']);
+
+ wrapper.vm.toggleAll(false);
+ expect(wrapper.vm.value).toEqual([]);
+
+ wrapper.vm.toggleAll(true);
+ await nextTick();
+ expect(wrapper.vm.value).toEqual(['a', 'b', 'c']);
+
+ wrapper.vm.toggleAll({ skipDisabled: true });
+ expect(wrapper.vm.value).toEqual(['c']);
+
+ wrapper.vm.toggleAll({ checked: true, skipDisabled: true });
+ expect(wrapper.vm.value).toEqual(['a', 'b', 'c']);
+});