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

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 #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
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
AI Usage
This issue is based on learningequality/kolibri#14184 which was written by @rtibbles with AI assistance. I copied it to Studio repository, reviewed, and adjusted.
❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.
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 #5060, where the current testing approach was blocking progress, but has broader general benefit.
Scope
Included:
@vue/test-utilsto@testing-library/vueshallowMount/mount→render,wrapper.find→screenqueries,wrapper.vm.*→ asserting on visible outputExcluded:
Guidance
Key migration patterns:
shallowMount()/mount()render()wrapper.find()screen.getByRole()/screen.getByText()/screen.getByLabelText()wrapper.vm.*wrapper.emitted()emitted()from render result, or assert on DOM changeswrapper.setProps()createLocalVue()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
render,screenqueries, anduserEvent. Follow Testing Library principles and Testing Library query priority recommendation@vue/test-utilsimports should remain in migrated filespnpm test <filename>AI Usage
This issue is based on learningequality/kolibri#14184 which was written by @rtibbles with AI assistance. I copied it to Studio repository, reviewed, and adjusted.