Tom Coleman
LightNews LightNews
tmeasday.bsky.social
Tom Coleman
@tmeasday.bsky.social
110 followers 19 following 2 posts
Founder of @chromaticui.bsky.social, Maintainer of @storybook.js.org. Author of Discover Meteor. Exploring how to improve UX through tech, design and perf.
Posts Replies Media Videos
Reposted by Tom Coleman
storybook.js.org
Storybook 10 (now in beta) is ESM-only.

🤏 Smaller package size (15%)
🫧 Cleaner, simpler codebase
⛓️‍💥 Reduced bugs from module duplication and aliasing
🧱 A more future-proof foundation for Storybook and its ecosystem

Read all about why we’ve made the transition and what it means for you:
Storybook is going ESM-only
Smaller, simpler, and modern
storybook.js.org
September 23, 2025 at 6:00 PM
Reposted by Tom Coleman
storybook.js.org
Testing components that depend on things like localStorage or authentication can be tricky. Storybook makes it easy with our new module mocking API built on top of @vitest.dev's excellent mocking tools.

storybook.js.org/blog/next-ge...
The file Dashboard.stories.ts containing the code: import { mocked } from 'storybook/test'; import { trackEvent } from '../lib/analytics.ts'; export const MyStory = { beforeEach: () => { /* * The `trackEvent` function is already a mock! * The `mocked` utility is just for proper mock function types */ mocked(trackEvent).mockResolvedValue({ status: 'ok' }); }, play: async () => { // ... interact with the component await expect(trackEvent).toHaveBeenCalledWith('dashboard-viewed'); }, };
August 21, 2025 at 6:00 PM
Reposted by Tom Coleman
chromatic.com
🚀 Chromatic's Accessibility Testing & Dashboard are now live!

Powered by Storybook & axe, we're making accessibility compliance seamless across your entire dev lifecycle—without slowing you down.
July 8, 2025 at 3:52 PM
Reposted by Tom Coleman
storybook.js.org
Our latest post walks through how to use the coverage reporting in Storybook 9 to be sure your components are well-tested.
Frontend test coverage with Storybook 9
Stories give you free test coverage
storybook.js.org
June 18, 2025 at 6:38 PM
Reposted by Tom Coleman
storybook.js.org
Storybook 9 is here!

▶️ Interaction tests
♿ Accessibility tests
👁️ Visual tests
🛡️ Coverage reports
🚥 Test widget
🪶 48% Leaner
✍️ Story generation
🏷️ Tag-based organization
🌐 Story globals
🏗️ Major updates for Svelte, Next.js, React Native, and more!

Let’s dive in!
June 3, 2025 at 5:05 PM
Reposted by Tom Coleman
shilman.net
We're reconsidering module mocking in @storybook.js.org. This RFC takes many cues from our friends at @vitest.dev but tries for a tighter/simpler solution.

Your feedback is very welcome. Please help us nail this!!! 🙏

github.com/storybookjs/...
[RFC] Module automocking · storybookjs storybook · Discussion #30877
Summary We introduced Typesafe module mocking in Storybook 8.1, which uses the Node.js subpath imports standard. We took this approach because it’s supported across the JS ecosystem, meaning that m...
github.com
March 24, 2025 at 6:55 PM
Reposted by Tom Coleman
blvdmitry.me
I've moved Reshaped to a new testing setup and so I've decided to make a small write-up about it, what I liked in it and what were the main migration challenges. If you write tests for your design system and look for a change – definitely take a read ✨

reshaped.so/blog/testing...
Testing design systems in 2025 - Reshaped
Let's dive into how UI component testing is approached today and how new tools released this year could simplify testing for the library authors.
reshaped.so
March 20, 2025 at 12:01 PM
tmeasday.bsky.social
Super excited to see how folks that are working to improve a11y in their apps find this workflow. We think the combination of components and regression is the unlock here that will lead to constant improvement.
chromatic.com Chromatic @chromatic.com · Mar 11
We’re excited to share a sneak peek of Accessibility Regression Testing which combines Storybook & axe with Chromatic's specialized regression workflow.

🧩 Component-level scans find the root cause
🚦 Regression checks stop repeat violations
📈 Real-time reports track progress over time
accessibility regression testing from chromatic
March 12, 2025 at 9:40 AM
Reposted by Tom Coleman
shilman.net
When it comes to writing stories, improved typesafety and autocompletion are @storybook.js.org's top user requests. We've also heard our "play" function feels too different from the rest of the testing ecosystem.

We want to address this feedback in Storybook 9. 🧵
Code snippet for new CSF typesafe factories and test proposal. const meta = config.meta({ component: Button }) // 1. Type-safe story factories "arrange" export const Primary = meta.story({ args: { label: 'Primary', onClick: fn() } }) // 2. Jest-style tests "act" and "assert" Primary.test('handles clicks', async ({ canvas, args }) => { await userEvent.click(canvas) await expect(args.onClick).toHaveBeenCalled() });
January 12, 2025 at 10:12 AM
Reposted by Tom Coleman
shilman.net
Storybook Test early access program is 🔥🔥🔥. We're improving @storybook.js.org AND @vitest.dev and writing effective component tests along the way.

If this sounds fun, please join in -- the more the merrier!!

storybook.js.org/sb-test-eap
Get early access to Storybook Test
Storybook Test is a best-in-class workflow for developing robust UI components. It uses Vitest to test all your stories (component examples) in a Playwright browser. - ⚡️ Blazing fast tests that run i...
storybook.js.org
November 15, 2024 at 9:52 AM
Reposted by Tom Coleman
storybook.js.org
Storybook 8.4 is here!

▶️ 1-click Component Testing in browser
🫧 50% smaller bundle size & 75% smaller lockfile
5️⃣ Svelte 5 and Svelte CSF
⚛️ React Native Storybook 8
🏷️ Tagging and filtering stories
💯 Hundreds more improvements

🧵
Storybook 8.4
Component Test in your browser in 1 click
storybook.js.org
November 12, 2024 at 5:41 PM