diff --git a/packages/components/overlay/__tests__/overlay.test.ts b/packages/components/overlay/__tests__/overlay.test.tsx
similarity index 68%
rename from packages/components/overlay/__tests__/overlay.test.ts
rename to packages/components/overlay/__tests__/overlay.test.tsx
index 6c0f05e40a..9297593a79 100644
--- a/packages/components/overlay/__tests__/overlay.test.ts
+++ b/packages/components/overlay/__tests__/overlay.test.tsx
@@ -1,3 +1,4 @@
+import { nextTick, ref } from 'vue'
import { mount } from '@vue/test-utils'
import { describe, expect, test } from 'vitest'
import Overlay from '../src/overlay'
@@ -6,11 +7,7 @@ const AXIOM = 'Rem is the best girl'
describe('Overlay.vue', () => {
test('render test', async () => {
- const wrapper = mount(Overlay, {
- slots: {
- default: AXIOM,
- },
- })
+ const wrapper = mount(() => {AXIOM})
expect(wrapper.text()).toEqual(AXIOM)
const testClass = 'test-class'
await wrapper.setProps({
@@ -21,31 +18,28 @@ describe('Overlay.vue', () => {
})
test('should emit click event', async () => {
- const wrapper = mount(Overlay, {
- slots: {
- default: AXIOM,
- },
- })
+ const wrapper = mount(() => {AXIOM})
await wrapper.find('.el-overlay').trigger('click')
expect(wrapper.emitted()).toBeTruthy()
})
test('no mask', async () => {
- const wrapper = mount(Overlay, {
- slots: {
- default: AXIOM,
- },
- })
+ const mask = ref(true)
+ const wrapper = mount(() => {AXIOM})
+
const selector = '.el-overlay'
expect(wrapper.find(selector).exists()).toBe(true)
- await wrapper.setProps({
- mask: false,
- })
+ mask.value = false
+
+ await nextTick()
+
expect(wrapper.find(selector).exists()).toBe(false)
- await wrapper.setProps({
- mask: true,
- })
+
+ mask.value = true
+
+ await nextTick()
+
expect(wrapper.find(selector).exists()).toBe(true)
})
})