fix: component unit test

src/packages/__VUE/backtop/__tests__/backtop.spec.ts

@@ -1,6 +1,17 @@
-import { mount } from '@vue/test-utils';
+import { mount, config } from '@vue/test-utils';
 import BackTop from '../index.vue';
-import Icon from '../../icon/index.vue';
+
+import NutIcon from '../../icon/index.vue';
+
+beforeAll(() => {
+  config.global.components = {
+    NutIcon
+  };
+});
+
+afterAll(() => {
+  config.global.components = {};
+});
 test('emit click event', () => {
   const wrapper = mount(BackTop);
   wrapper.trigger('click');

src/packages/__VUE/badge/__test__/badge.spec.ts

@@ -44,8 +44,8 @@ test('should render content slot correctly', () => {
 test('should change dot position when using offset prop', () => {
   const wrapper = mount(Badge, {
     props: {
-      top: 4,
-      right: -2
+      top: '4',
+      right: '-2'
     }
   });
 

src/packages/__VUE/checkbox/index.taro.vue

@@ -39,7 +39,7 @@ export default create({
   },
   emits: ['change', 'update:modelValue'],
   setup(props, { emit, slots }) {
-    const parent: any = inject('parent');
+    const parent: any = inject('parent', null);
 
     const hasParent = computed(() => !!parent);
 
@@ -83,9 +83,7 @@ export default create({
       return h(
         'view',
         {
-          class: `${componentName}__label ${
-            pDisabled.value ? `${componentName}__label--disabled` : ''
-          }`
+          class: `${componentName}__label ${pDisabled.value ? `${componentName}__label--disabled` : ''}`
         },
         slots.default?.()
       );
@@ -115,9 +113,7 @@ export default create({
       return h(
         'view',
         {
-          class: `${componentName} ${
-            props.textPosition === 'left' ? `${componentName}--reverse` : ''
-          }`,
+          class: `${componentName} ${props.textPosition === 'left' ? `${componentName}--reverse` : ''}`,
           onClick: handleClick
         },
         [renderIcon(), renderLabel()]

src/packages/__VUE/checkbox/index.vue

@@ -40,7 +40,7 @@ export default create({
   },
   emits: ['change', 'update:modelValue'],
   setup(props, { emit, slots }) {
-    const parent: any = inject('parent');
+    const parent: any = inject('parent', null);
 
     const hasParent = computed(() => !!parent);
 
@@ -84,9 +84,7 @@ export default create({
       return h(
         'view',
         {
-          class: `${componentName}__label ${
-            pDisabled.value ? `${componentName}__label--disabled` : ''
-          }`
+          class: `${componentName}__label ${pDisabled.value ? `${componentName}__label--disabled` : ''}`
         },
         slots.default?.()
       );
@@ -116,9 +114,7 @@ export default create({
       return h(
         'view',
         {
-          class: `${componentName} ${
-            props.textPosition === 'left' ? `${componentName}--reverse` : ''
-          }`,
+          class: `${componentName} ${props.textPosition === 'left' ? `${componentName}--reverse` : ''}`,
           onClick: handleClick
         },
         [renderIcon(), renderLabel()]

src/packages/__VUE/imagepreview/__tests__/__snapshots__/imagepreview.spec.ts.snap

@@ -0,0 +1,6 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render basic correctly 1`] = `
+"<!--teleport start-->
+<!--teleport end-->"
+`;

src/packages/__VUE/radio/index.taro.vue

@@ -32,7 +32,7 @@ export default create({
     }
   },
   setup(props, { emit, slots }) {
-    let parent: any = inject('parent');
+    let parent: any = inject('parent', null);
 
     const isCurValue = computed(() => {
       return parent.label.value == props.label;

src/packages/__VUE/radio/index.vue

@@ -32,7 +32,7 @@ export default create({
     }
   },
   setup(props, { emit, slots }) {
-    let parent: any = inject('parent');
+    let parent: any = inject('parent', null);
 
     const isCurValue = computed(() => {
       return parent.label.value == props.label;

src/packages/__VUE/rate/__tests__/rate.spec.ts

@@ -1,28 +1,39 @@
-import { mount } from '@vue/test-utils';
+import { mount, config } from '@vue/test-utils';
 import Rate from '../index.vue';
-import Icon from '../../icon/index.vue';
+
+import NutIcon from '../../icon/index.vue';
+
+beforeAll(() => {
+  config.global.components = {
+    NutIcon
+  };
+});
+
+afterAll(() => {
+  config.global.components = {};
+});
 
 test('base rate', () => {
   const wrapper = mount(Rate);
   const rate = wrapper.find('.nut-rate');
   expect(rate.exists()).toBe(true);
 });
-test('should have rate  when v-model', () => {
+test('should have rate  when v-model', () => {
   const wrapper = mount(Rate, { props: { modelValue: 4 } });
   const rate = wrapper.findAll('.nut-rate-item__icon--disabled');
   expect(rate.length).toBe(1);
 });
-test('should have rate  when v-model', () => {
+test('should have rate  when v-model', () => {
   const wrapper = mount(Rate, {
     props: { count: 10, iconSize: 20, activeColor: 'red' }
   });
   const rate = wrapper.findAll('.nut-rate-item');
   expect(rate.length).toBe(10);
 
-  const i = wrapper.find('.nut-rate-item__icon');
-  expect(i.attributes().size).toBe('20');
+  const i = wrapper.findAll('.nut-rate-item__icon');
+  expect((i[0].element as HTMLElement).style.fontSize).toBe('20px');
 });
-test('should have click', async () => {
+test('should have click', async () => {
   const wrapper = mount(Rate);
   const rate = wrapper.findAll('.nut-rate-item');
   await rate[3].trigger('click');
@@ -32,7 +43,7 @@ test('should have click', async () => {
     expect((wrapper.emitted('change') as any)[0][0]).toEqual('3');
   }, 200);
 });
-test('should have disabled', async () => {
+test('should have disabled', async () => {
   const wrapper = mount(Rate, { props: { disabled: true, modelValue: 4 } });
   const rate = wrapper.findAll('.nut-rate-item');
   await rate[1].trigger('click');
@@ -41,7 +52,7 @@ test('should have disabled', async () => {
     expect(rateDis.length).toBe(1);
   }, 200);
 });
-test('should have readonly', async () => {
+test('should have readonly', async () => {
   const wrapper = mount(Rate, { props: { readonly: true, modelValue: 4 } });
   const rate = wrapper.findAll('.nut-rate-item');
   await rate[1].trigger('click');

src/packages/__VUE/searchbar/__tests__/__snapshots__/searchbar.spec.ts.snap

@@ -1,39 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`render basic correctly 1`] = `
-"<view class=\\"nut-searchbar\\">
-  <!--v-if-->
-  <view class=\\"nut-searchbar__search-input\\">
-    <!--v-if-->
-    <view class=\\"nut-searchbar__input-inner\\">
-      <form action=\\"#\\"><input class=\\"nut-searchbar__input-bar\\" type=\\"text\\" maxlength=\\"9999\\" placeholder=\\"请输入\\"></form>
-      <view class=\\"nut-searchbar__input-clear\\" style=\\"display: none;\\">
-        <nut-icon name=\\"circle-close\\" size=\\"12\\" color=\\"#555\\"></nut-icon>
-      </view>
-    </view>
-    <!--v-if-->
-  </view>
-  <!--v-if-->
-</view>"
-`;
-
-exports[`render correctly 1`] = `
-"<view class=\\"nut-searchbar\\">
-  <!--v-if-->
-  <view class=\\"nut-searchbar__search-input\\">
-    <!--v-if-->
-    <view class=\\"nut-searchbar__input-inner\\">
-      <form action=\\"#\\"><input class=\\"nut-searchbar__input-bar\\" type=\\"text\\" maxlength=\\"9999\\" placeholder=\\"请输入\\"></form>
-      <view class=\\"nut-searchbar__input-clear\\" style=\\"display: none;\\">
-        <nut-icon name=\\"circle-close\\" size=\\"12\\" color=\\"#555\\"></nut-icon>
-      </view>
-    </view>
-    <!--v-if-->
-  </view>
-  <!--v-if-->
-</view>"
-`;
-
 exports[`should emit search event when enter key is pressed 1`] = `undefined`;
 
 exports[`should render background prop correctly 1`] = `
@@ -43,9 +9,7 @@ exports[`should render background prop correctly 1`] = `
     <!--v-if-->
     <view class=\\"nut-searchbar__input-inner\\">
       <form action=\\"#\\"><input class=\\"nut-searchbar__input-bar\\" type=\\"text\\" maxlength=\\"9999\\" placeholder=\\"请输入\\"></form>
-      <view class=\\"nut-searchbar__input-clear\\" style=\\"display: none;\\">
-        <nut-icon name=\\"circle-close\\" size=\\"12\\" color=\\"#555\\"></nut-icon>
-      </view>
+      <view class=\\"nut-searchbar__input-clear\\" style=\\"display: none;\\"><i class=\\"nutui-iconfont nut-icon nut-icon-circle-close\\" style=\\"color: rgb(85, 85, 85); font-size: 12px; width: 12px; height: 12px;\\" src=\\"\\"></i></view>
     </view>
     <!--v-if-->
   </view>
@@ -60,29 +24,10 @@ exports[`should render rightout slot correctly 1`] = `
     <!--v-if-->
     <view class=\\"nut-searchbar__input-inner\\">
       <form action=\\"#\\"><input class=\\"nut-searchbar__input-bar\\" type=\\"text\\" maxlength=\\"9999\\" placeholder=\\"请输入\\"></form>
-      <view class=\\"nut-searchbar__input-clear\\" style=\\"display: none;\\">
-        <nut-icon name=\\"circle-close\\" size=\\"12\\" color=\\"#555\\"></nut-icon>
-      </view>
+      <view class=\\"nut-searchbar__input-clear\\" style=\\"display: none;\\"><i class=\\"nutui-iconfont nut-icon nut-icon-circle-close\\" style=\\"color: rgb(85, 85, 85); font-size: 12px; width: 12px; height: 12px;\\" src=\\"\\"></i></view>
     </view>
     <!--v-if-->
   </view>
   <view class=\\"nut-searchbar__search-icon nut-searchbar__right-search-icon\\">搜索</view>
 </view>"
 `;
-
-exports[`slot test 1`] = `
-"<view class=\\"nut-searchbar\\">
-  <!--v-if-->
-  <view class=\\"nut-searchbar__search-input\\">
-    <!--v-if-->
-    <view class=\\"nut-searchbar__input-inner\\">
-      <form action=\\"#\\"><input class=\\"nut-searchbar__input-bar\\" type=\\"text\\" maxlength=\\"9999\\" placeholder=\\"请输入\\"></form>
-      <view class=\\"nut-searchbar__input-clear\\" style=\\"display: none;\\">
-        <nut-icon name=\\"circle-close\\" size=\\"12\\" color=\\"#555\\"></nut-icon>
-      </view>
-    </view>
-    <!--v-if-->
-  </view>
-  <!--v-if-->
-</view>"
-`;

src/packages/__VUE/searchbar/__tests__/searchbar.spec.ts

@@ -1,6 +1,18 @@
-import { mount } from '@vue/test-utils';
+import { mount, config } from '@vue/test-utils';
 import SearchBar from '../index.vue';
 
+import NutIcon from '../../icon/index.vue';
+
+beforeAll(() => {
+  config.global.components = {
+    NutIcon
+  };
+});
+
+afterAll(() => {
+  config.global.components = {};
+});
+
 test('should emit update:modelValue event when input value changed', () => {
   const onUpdateModelValue = jest.fn();
   const wrapper = mount(SearchBar, {

src/packages/__VUE/searchbar/index.vue

@@ -15,7 +15,6 @@
             :maxlength="maxLength"
             :placeholder="placeholder"
             :value="modelValue"
-            :enterkeyhint="done"
             @input="valueChange"
             @focus="valueFocus"
             @blur="valueBlur"

src/packages/__VUE/skeleton/__test__/__snapshots__/skeleton.spec.ts.snap

@@ -1,23 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should change avatar shape when using avatar-shape prop 1`] = `"<nut-avatar class=\\"avatarClass avatarClass--square\\" shape=\\"square\\" style=\\"width: 50px; height: 50px;\\" bg-color=\\"rgb(239, 239, 239)\\"></nut-avatar>"`;
+exports[`should change avatar shape when using avatarShape prop 1`] = `
+"<view style=\\"width: 50px; height: 50px; background-color: rgb(239, 239, 239);\\" class=\\"nut-avatar avatar-normal avatar-square avatarClass avatarClass--square\\"><i class=\\"nutui-iconfont nut-icon nut-icon- icon\\" src=\\"\\"></i>
+  <!--v-if-->
+</view>"
+`;
 
-exports[`should change avatar size when using avatar-size prop: 20px 1`] = `"20px"`;
+exports[`should change avatar size when using avatarSize prop: 20px 1`] = `"20px"`;
 
-exports[`should change avatar size when using avatar-size prop: 20px 2`] = `"20px"`;
+exports[`should change avatar size when using avatarSize prop: 20px 2`] = `"20px"`;
 
-exports[`should render with row width array correctly 1`] = `
-"<view class=\\"skeleton\\" rowwidth=\\"100%,30,5rem\\">
-  <view class=\\"skeleton-animation\\"></view>
+exports[`should render default slot 1`] = `
+"<view class=\\"skeleton\\">
+  <!--v-if-->
   <view class=\\"content\\">
     <!--v-if-->
-    <!--v-if-->
+    <view class=\\"blockClass\\" style=\\"width: 100px; height: 100px;\\"></view>
     <view class=\\"content-line\\">
       <view class=\\"title\\"></view>
       <view class=\\"blockClass\\" style=\\"width: 100px; height: 100px;\\"></view>
-      <view class=\\"blockClass\\" style=\\"width: 100px; height: 100px;\\"></view>
-      <view class=\\"blockClass\\" style=\\"width: 100px; height: 100px;\\"></view>
-      <view class=\\"blockClass\\" style=\\"width: 100px; height: 100px;\\"></view>
     </view>
   </view>
 </view>"

src/packages/__VUE/skeleton/__test__/skeleton.spec.ts

@@ -1,6 +1,20 @@
-import { mount } from '@vue/test-utils';
+import { mount, config } from '@vue/test-utils';
 import Skeleton from '../index.vue';
 
+import NutAvatar from '../../avatar/index.vue';
+import NutIcon from '../../icon/index.vue';
+
+beforeAll(() => {
+  config.global.components = {
+    NutAvatar,
+    NutIcon
+  };
+});
+
+afterAll(() => {
+  config.global.components = {};
+});
+
 test('should render with row width array correctly', () => {
   const wrapper = mount(Skeleton, {
     props: {

src/packages/__VUE/skeleton/common.ts

@@ -92,7 +92,7 @@ export const component = {
     };
 
     onMounted(() => {
-      console.log('row', props.row);
+      // console.log('row', props.row);
     });
 
     return {

src/packages/__VUE/switch/__tests__/switch.spec.ts

@@ -1,6 +1,18 @@
-import { mount } from '@vue/test-utils';
+import { mount, config } from '@vue/test-utils';
 import Switch from '../index.vue';
 
+import NutIcon from '../../icon/index.vue';
+
+beforeAll(() => {
+  config.global.components = {
+    NutIcon
+  };
+});
+
+afterAll(() => {
+  config.global.components = {};
+});
+
 test('render ok', () => {
   const wrapper = mount(Switch);
 

src/packages/__VUE/tag/__test__/__snapshots__/tag.spec.ts.snap

@@ -11,3 +11,9 @@ exports[`should render border-color correctly 1`] = `
   <!--v-if-->
 </view>"
 `;
+
+exports[`should render textColor correctly 1`] = `
+"<view class=\\"nut-tag nut-tag--default nut-tag--plain\\" style=\\"background: red; color: blue;\\">
+  <!--v-if-->
+</view>"
+`;

src/packages/__VUE/tag/__test__/tag.spec.ts

@@ -1,5 +1,17 @@
 import Tag from '../index.vue';
-import { mount } from '@vue/test-utils';
+import { mount, config } from '@vue/test-utils';
+
+import NutIcon from '../../icon/index.vue';
+
+beforeAll(() => {
+  config.global.components = {
+    NutIcon
+  };
+});
+
+afterAll(() => {
+  config.global.components = {};
+});
 
 test('should emit close event when clicking the close icon', () => {
   const wrapper = mount(Tag, {