Industry standard frontend workshop. Develop, test, and document components with ease. Open-source & maintained by @chromaticcom
npx storybook@latest init
- Tweets 7,014
- Following 393
- Followers 25,682
- Likes 6,645
Storybook retweeted
the storybook folks are some of the most active in this e18e space right now. so good to see the progress happening - huge reworks and optimisations for everyone
Most of our remaining deps are related to express. Removing that in a backwards-compatible way is hard but certainly possible for 9.0! @43081j is helping us with that!
1
4
23
3,060
Look who's going on a diet 😅
We are reducing the bloat that @storybookjs adds to your node_modules 🎉 👇
And those numbers will improve even more for the 9.0 release :)
1
4
18
3,740
Storybook retweeted
If you're using @vite_js and @storybookjs, take a look at the RFCs we wrote for a new Storybook+Vitest integration and a @nextjs plugin!
Exciting times ahead, but your feedback is super important so please check them out 🧵
1
6
29
4,847
Storybook was spotlighted in 2023 State of JS results!
The results matter a lot to us because they’re one way for maintainers to understand the pulse of the ecosystem.
This thread analyzes the results and how we're taking immediate action to evolve Storybook.
3
10
50
2,912
Storybook retweeted
Going live in a couple of hours
🚀 Don't miss out! Join the @chromaticcom and zeroheight teams on July 2nd for a webinar on design system workflows, Storybook sandboxes, and documentation.
🕔 Register now! hubs.li/Q02DmFzW0
2
1
1,276
Storybook retweeted
The Chromatic and @zeroheight teams are combining forces to discuss the ins and outs of developing design system components.
From setting up a sandbox environment in Storybook to crafting comprehensive documentation!
Register now to join us on July 2nd:
zeroheight.com/webinars/zero…
2
8
1,380
Storybook retweeted
Join us and our friends at @zeroheight for a discussion on design system workflow tips. We’ll cover everything from building components in isolation to documenting and testing them.
📆 July 2nd 2024 @ 12:00PM EDT
🎟️ Register to attend my.demio.com/ref/TtGxjYXxjBl…
4
4
1,294
This is an incredible initiative--Storybook becoming smaller and faster thanks to their fine work! 🙌 @43081j
7
17
2,457
Storybook retweeted
😎 leaving the best for last at @ngromeconf
@chrispholder might not be cutting his task into pieces but he is component testing with @storybookjs!
We also get to see the importance of #accessibility testing and #performance testing with user flow🙏🏻
4
18
1,906
Storybook retweeted
🛠️ The @chromaticcom and zeroheight teams are teaming up to chat about building design system components, creating sandbox environments in Storybook, documenting components, and more! 📅 Join us on July 2nd, and register now!
hubs.li/Q02DmLY20
3
7
960
We really believe in both visual tests and our new Visual Tests addon as the best way to test your UI, which gives you confidence as you develop.
We wrote a post to explain why.
storybook.js.org/blog/visual…
1
19
89
6,765
Or, by visual testing a story, that same test looks like this.
Not only is it shorter, but it validates every visible thing on the page, not just what you explicitly check for. 🎉
![Screenshot of ShoppingCartMenu.stories.js file, containing the code:
import { ShoppingCartMenu } from './ShoppingCartMenu'
export default { component: ShoppingCartMenu };
export const WithItems = {
args: {
cartItems: [ /* items */ ],
totalPrice: 1200
},
play: async ({ canvasElement }) => {
const checkout = await findByRole(canvasElement, 'button');
await expect(checkout).not.toBeDisabled();
},
}](/pic/orig/media%2FGQiuyqcXoAARdgU.jpg)
ALT Screenshot of ShoppingCartMenu.stories.js file, containing the code: import { ShoppingCartMenu } from './ShoppingCartMenu' export default { component: ShoppingCartMenu }; export const WithItems = { args: { cartItems: [ /* items */ ], totalPrice: 1200 }, play: async ({ canvasElement }) => { const checkout = await findByRole(canvasElement, 'button'); await expect(checkout).not.toBeDisabled(); }, }
1
951
The post breaks down the benefits of visual testing your UI and show you how to get started with the Visual Tests addon in Storybook.
Happy testing!
storybook.js.org/blog/visual…
1
2
2
929