Storybook 8.3 bringt experimentelles Story-Testing mit Vitest
Ein neues Add-on ermöglicht das Testen von Storys mit dem Testing-Framework Vitest – mitsamt dessen Geschwindigkeitsvorteilen und Testmetriken.
(Bild: Chinnapong/Shutterstock.com)
Storybook 8.3 ist erschienen. Das Open-Source-Tool für das Entwickeln und Testen von UI-Komponenten ermöglicht darin das Verwenden des Unit-Test-Frameworks Vitest – mithilfe eines Add-ons, das bisher als experimentell gilt. In diesem Zusammenhang ist auch eine experimentelle Anbindung an Vite verfügbar.
Daneben kann Storybook mit einer verringerten Bundle-Größe aufwarten: Nachdem bereits die vorherige Version 8.2 die Installationsgröße – dank der Konsolidierung von 18 Paketen in ein einziges Storybook Core Package – um rund 20 Prozent reduziert hat, verringert sich die Größe nun in Version 8.3 um weitere 30 Prozent.
Vitest-Integration erlaubt schnelles Story-Testing
Wie das Storybook-Team im Blogeintrag zum neuen Release ausführt, ist eine Story ein JavaScript-Codeschnipsel, der ein Beispiel einer UI-Komponente enthält. Storybook bietet einen durchsuchbaren Katalog von Storys, die sämtliche Schlüsselzustände eines User-Interfaces enthalten. Darüber hinaus fungiert Storybook jedoch als ausführbare Test-Suite, und dort kommt die Anbindung an Vitest ins Spiel: Dank eines neuen experimentellen Add-ons (@storybook/experimental-addon-test) lassen sich alle Storys mit Vitest als Tests in einem Headless-Browser ausführen. Das Add-on entspringt einer Zusammenarbeit mit dem Core Team von Vitest und soll sich mit minimaler Konfiguration nutzen lassen. Bei Vitest handelt es sich um ein Unit-Testing-Framework auf Basis des Build-Tools Vite, das sich durch seine hohe Geschwindigkeit auszeichnet.
Zu den Vorteilen des Vitest-Add-ons zählen laut dem Storybook-Team neben der hohen Testing-Geschwindigkeit auch out of the box verfügbare Testmetriken, die Developer Experience des Vitest-CLI und die Kompatibilität mit der Vitest-Erweiterung für Visual Studio Code.
Experimentelle Anbindung an Vite
Was den Support der Vitest-Integration für Projekte mit dem Bundler webpack betrifft, gebe es kein allgemeingültiges Verfahren. Für Projekte mit dem React-Framework Next.js hat das Storybook-Team jedoch eine experimentelle Anbindung an Vite entwickelt (@storybook/experimental-nextjs-vite). Dadurch ist es möglich, die Next.js-Umgebung zu emulieren und deren Features wie optimierte Grafiken und Fonts zu verwenden.
(Bild: Jackie Niam/Shutterstock.com)
Am 17. Oktober 2024 präsentiert die Online-Konferenz React 19 Day von dpunkt.verlag und iX die neuen Features der beliebten JavaScript-Bibliothek. Der Thementag im Rahmen der enterJS zeigt Teilnehmenden, wie sie das Optimum aus der neuen Version herausholen können und wie moderne Webentwicklung mit React 19 ihre Anwendungen besser macht. Auszug aus dem Programm:
- Wie Fullstack-React unser Leben verändert
- React 19 glänzt! So schön neu! Wirklich alles?
- React Compiler: Enhancing Developer Experience Without Compromising Performance
Frühbuchertickets sind bis zum 25. September verfügbar.
Insgesamt bietet Storybook 8.3 Hunderte von Neuerungen und Bugfixes. Die genannten sowie einige weitere Highlights behandelt der Blogeintrag zum Release.
(mai)
