Comfy-Org / Comfy-Org/ComfyUI_frontend

refactor(tests): migrate component tests to Vue Testing Library

Open
#10,226 0 comments 0 reactions 1 assignee Claimed by @DrJKL View on GitHub
area:testing developer experience
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

## Summary

Migrate component unit tests from `@vue/test-utils` to [Vue Testing Library](https://testing-library.com/docs/vue-testing-library/intro) for better user-centric, accessibility-focused test assertions.

## Motivation

Vue Testing Library encourages querying elements by accessible roles, labels, and text content rather than implementation details (component internals, class names, or `data-testid` attributes). This aligns with existing repo guidelines (prefer accessible properties over test IDs) and produces more maintainable, behavior-driven tests.

## Scope

- Replace `@vue/test-utils` mount/find patterns with `@testing-library/vue` `render` + `screen` queries across `src/**/*.test.ts` files.
- Start with recently updated test files such as `src/components/sidebar/tabs/queue/ResultGallery.test.ts` (introduced in PR #10134).
- Add `@testing-library/vue` (and `@testing-library/user-event`) as dev dependencies if not already present.
- Update test helpers and mounting utilities accordingly.

## References

- Raised in: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10134#discussion_r2950177965
- Related PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10134
- Requested by: @DrJKL

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-10226-refactor-tests-migrate-component-tests-to-Vue-Testing-Library-3276d73d3650818e9926ed92fb8f8e8e) by [Unito](https://www.unito.io)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.