Repository: element-plus/element-plus
File: packages/components/input-tag/__tests__/input-tag.test.tsx (TypeScript)

Code before:
          collapseTags
          maxCollapseTags={3}
        />
      ))

      const tags = wrapper.findAll('.el-tag')
      expect(tags.length).toBe(4)
      expect(tags[0].text()).toBe('tag1')
      expect(tags[1].text()).toBe('tag2')
      expect(tags[2].text()).toBe('tag3')
      expect(tags[3].text()).toBe('+ 2')
    })

    vi.mock('@vueuse/core', async () => {
      return {
        ...((await vi.importActual('@vueuse/core')) as Record<string, any>),
        useResizeObserver: vi.fn(async (_, callback) => {
          await nextTick()
          callback()
        }),
      }
    })

    afterAll(() => {
      vi.restoreAllMocks()
    })

    test('collapseTags should prevent line break when content exceeds', async () => {
      const mockStyle = vi.spyOn(window, 'getComputedStyle').mockReturnValue({
        width: '100px',
        gap: '6px',
      } as any)
      const mockRect = vi
        .spyOn(HTMLElement.prototype, 'getBoundingClientRect')
        .mockReturnValue({
          width: 40,
        } as any)
      const longTag =
        'This is a very long tag content that might cause line break'
      const wrapper = mount(
        <InputTag modelValue={[longTag, 'tag2']} collapseTags />
      )

      await nextTick()
      const tags = wrapper.findAll('.el-tag')
      const firstTag = tags[0]
      const tagStyle = firstTag.attributes('style')
      // 100(innerWidth) - 40(collapseItemWidth) - 6(gap) - 17(inputSlotWidth) = 37
      expect(tagStyle).toContain('max-width: 37px')
      mockStyle.mockRestore()
      mockRect.mockRestore()

Review comment (suggestion):
This should be placed at the top level, right?

```ts
vi.mock('@vueuse/core' ...

afterAll( ...

// tests
describe('InputTag.vue' ...

  ...

  // your test
)
```

Code after:
      expect(tags[0].text()).toBe('tag1')
      expect(tags[1].text()).toBe('+ 4')

      await tags[1].trigger('mouseenter')
      await nextTick()

      const tooltip = wrapper.findComponent({ name: 'ElTooltip' })
      expect(tooltip.exists()).toBe(true)
    })

    test('maxCollapseTags', async () => {
      const wrapper = mount(() => (
        <InputTag
          modelValue={['tag1', 'tag2', 'tag3', 'tag4', 'tag5']}
          collapseTags
          maxCollapseTags={3}
        />
      ))

      const tags = wrapper.findAll('.el-tag')
      expect(tags.length).toBe(4)
      expect(tags[0].text()).toBe('tag1')
      expect(tags[1].text()).toBe('tag2')
      expect(tags[2].text()).toBe('tag3')
      expect(tags[3].text()).toBe('+ 2')
    })

    test('collapseTags should prevent line break when content exceeds', async () => {
      const mockStyle = vi.spyOn(window, 'getComputedStyle').mockReturnValue({
        width: '100px',
        gap: '6px',
      } as any)
      const mockRect = vi
        .spyOn(HTMLElement.prototype, 'getBoundingClientRect')
        .mockReturnValue({
          width: 40,
        } as any)
      const longTag =
        'This is a very long tag content that might cause line break'
      const wrapper = mount(
        <InputTag modelValue={[longTag, 'tag2']} collapseTags />
      )

      await nextTick()
      const tags = wrapper.findAll('.el-tag')
      const firstTag = tags[0]
      const tagStyle = firstTag.attributes('style')
      // 100(innerWidth) - 40(collapseItemWidth) - 6(gap) - 17(inputSlotWidth) = 37
      expect(tagStyle).toContain('max-width: 37px')
      mockStyle.mockRestore()
      mockRect.mockRestore()