-
testing-react
Discontinued Testing utilities that allow you to reuse your Storybook stories in your React unit tests!
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
When I started to play with this idea the first option which came to my mind was to launch Storybook and then tell Cypress to navigate to the component’s iFrame source url and start interacting with it. It can work but it has some challenges, like making sure the Storybook is up first, and how it is accessed on on-demand spawned environments in the build pipeline, but then another method presented itself to me - using a library that Storybook team has developed called @storybook/testing-react
I’m taking the Pagination simple component from my @pedalboard/components package to perform some tests on it. It currently has a Storybook story to it, which looks like this:
import React from 'react'; import Pagination from '.'; // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export export default { title: 'Components/Pagination', component: Pagination, // More on argTypes: https://storybook.js.org/docs/react/api/argtypes argTypes: { onChange:{ action: 'Page changed' }, }, }; // // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args const Template = (args) =>
div>; export const Simple = Template.bind({}); // More on args: https://storybook.js.org/docs/react/writing-stories/args Simple.args = { totalPages:10, initialCursor:3, pagesBuffer:5, };