Migrate to Vue Testing Library

[EshaanAgg]

Blocked by

https://github.com/learningequality/kolibri-design-system/issues/439

Context

Vue Testing Library is a lightweight wrapper that builds on top of the DOM Testing Library by adding APIs for working with Vue components. It is built on top of @vue/test-utils, which is currently used in the KDS.

As per the documentation, Vue Testing Library does three things:

1. Re-exports query utilities and helpers from the DOM Testing Library.
2. Hides @vue/test-utils methods that conflict with Testing Library Guiding Principle.
3. Tweaks some methods from both sources.

Product

KDS

The Value Add

I personally advocate for VTL because of two major reasons:

1. Most of the products (OSS or otherwise) are migrating toward the Testing Library (or its framework wrappers like React Testing Library etc.), and thus the community support is much more. The libraries are actively maintained, and using them leads to similar-looking tests irrespective of the framework of your choice. We can also then install @testing-library/jest-dom to use the custom Jest matchers for the DOM, enabling us to write better and more expressive tests.
2. The Testing Library is based on the principle that we should only test for user interactions, and never for the internal state of components, and thus hides some API exports that allow us to do so. This, in my opinion, again leads to better tests, that check for the functionality of the components and are not heavily invested in the internal implementation of the state and hooks of the component, as it should be for a component library.

Possible Tradeoffs

Refactoring the existing tests is additional work, but it would also provide a good foundation for the future if we want to invest heavily in testing.

PS

I would be happy to migrate an existing test to VTL to provide a proof of concept for the approach.