Migrate frontend tests from vue-test-utils to Vue Testing Library

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Blocked by

https://github.com/learningequality/studio/issues/5890

Overview

Studio's frontend testing is migrating from @vue/test-utils (vue-test-utils) to @testing-library/vue (Vue Testing Library). Vue Testing Library encourages testing components from the user's perspective — querying by role, text, and label rather than implementation details like component internals and CSS selectors. This produces more resilient, maintainable tests. This tracking issue coordinates the migration.

Value Add

In support of https://github.com/learningequality/studio/issues/5060, where the current testing approach was blocking progress, but has broader general benefit.

Scope

Included:

• Migrating all files currently using @vue/test-utils to @testing-library/vue
• Updating test patterns: shallowMount/mount → render, wrapper.find → screen queries, wrapper.vm.* → asserting on visible output

Excluded:

• Migrating components themselves from Options API to Composition API (separate work, though contributors may discover this is needed)
• Changes to the Vue Testing Library setup or test infrastructure itself

Guidance

• Studio uses Vue 2.7
• Install the legacy Vue Devtools (v6) to work efficiently, e.g. to locate Vue components in user interface easily.

Key migration patterns:

vue-test-utils	Vue Testing Library
shallowMount() / mount()	render()
wrapper.find()	screen.getByRole() / screen.getByText() / screen.getByLabelText()
wrapper.vm.*	Don't test internals — test visible output
wrapper.emitted()	emitted() from render result, or assert on DOM changes
wrapper.setProps()	Re-render with new props
createLocalVue()	Not needed with VTL

Strategy

Sub-issues are scoped per plugin, so each migration is self-contained and can be submitted as a single PR without needing to coordinate across plugin boundaries.

Acceptance Criteria

• Cover all major workflows while avoiding excessive testing of details
• Pull request description includes a screenshot or screen recording of the feature covered by these tests
• Concise but explicit test descriptions that describe what's tested from a user point of view
• Migrated tests should use render, screen queries, and userEvent. Follow Testing Library principles and Testing Library query priority recommendation
• Follow our Unit testing guide and Testing template, where you will also find how we mock router, store, composables, and more.
• No residual @vue/test-utils imports should remain in migrated files
• All migrated tests must pass pnpm test <filename>

AI Usage

This issue is based on https://github.com/learningequality/kolibri/issues/14184 which was written by @rtibbles with AI assistance. I copied it to Studio repository, reviewed, and adjusted.

Start by reviewing the blocked issue 5890 and inventorying files that import @vue/test-utils. Migrate the scoped frontend tests using the stated render, screen, and userEvent patterns, then run pnpm test ; done means migrated tests pass and no residual @vue/test-utils imports remain.