NEXT: Automated Testing

[endigo9740]

As part of Skeleton v3, we'll implement support for multiple frontend frameworks. We'll likely want to consolidate on a common and universal testing tool. For this we'll opt for Vitest.

Tasks

• Install and configure Vitest: https://vitest.dev/
• Install and configure Testing Library: https://testing-library.com/docs/
• Implement for React components library
• Implement for Svelte components library

Goal

See: #150

We need to ensure we have an adequate depth and quality of test cases per component. This will make it easier to introduce new features, handle refactors, and of course improve general QA testing. With the ultimate goal of ensuring we have a set of simple and robust test cases that are not too rigid.

Some component design and features are still in flux, so aim to ensure that tests may need to be improved over time.

References:

• React + Vitest + Testing Library Guide

Feedback

If you have additional updates or requests for this feature, please do so in the comments section below.

[Hugos68]

I'd think Testing Library will be beneficial for cross framework component testing because the sheer amount of frameworks they support. This will allow for a familliar testing API no matter what framework is being tested on.
From the last time I used it, it is compatible with vitest meaning we don't need 2 test runners. It would simply provide a virtual dom to mount and test components in.

[endigo9740]

Yeah that's been my thought as well. We actually use Testing Library already for Skeleton v2.

[endigo9740]

See also type testing in Vitest: https://youtu.be/mWK3Y_1kmaM?si=64rMT3KiSCz7MQ0p&t=29214

[endigo9740]

Svelte Testing Library maintainer @mcous has shared a super helpful audit of changes recommended when we return to Svelte component testing:

• Writing Testing Library tests that use certain Skeleton components #2891 (reply in thread)