BlogQL: Storybook and Mocked Service Workers

One of the most interesting new technologies I learned about during the development of BlogQL is Storybook. Storybook allows you to develop and test React, Angular, and other web components in isolation.

Once you create stories for your components, and thanks to Chromatic, you can setup GitHub Actions to check each incoming Pull Request for changes to your UI, a visual diff! You can require that a developer approve each change. I found that all pretty compelling and started to develop stories for all of my React components.

The hardest part of this work was figuring out how to mock the GraphQL data needed for my components. It was difficult for me because I was still learning WebPack and polyfills in Node.js, but I got it working, in part thanks to his very useful blog post: Mock GraphQL and REST in Storybook and Jest with MSW.

You can view the BlogQL Storybook online, thanks to Chromatic: https://63b0bf0f112b2d8b80a785f5-flfdjbdgsu.chromatic.com.

This is part of a series of short posts about BlogQL: https://github.com/snoopdave/blogql.

Dave Johnson in Web Development 04:43PM Apr 08, 2023 Comments [0]
Tags: graphql node react typescript

Comments:

Welcome

This is just one entry in the weblog Blogging Roller. You may want to visit the main page of the weblog

Related entries

Below are the most recent entries in the category Web Development, some may be related to this entry.