testing-react
eslint-plugin-storybook
testing-react | eslint-plugin-storybook | |
---|---|---|
3 | 3 | |
588 | 233 | |
- | 1.3% | |
0.0 | 6.8 | |
about 1 year ago | 24 days ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
testing-react
-
What is Storybook Play function?
For more details on implementation, please refer to the following link (the above code is also quoted from this link): https://github.com/storybookjs/testing-react
-
Integrating Storybook with Cypress and HMR
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
-
What is Storybook used for?
Adding on to what others have said: you can use https://github.com/storybookjs/testing-react to reuse your storybook entries as test setup & really simplify your tests while making your storybook entries even more valuable.
eslint-plugin-storybook
-
What is Storybook Play function?
Reference: https://github.com/storybookjs/eslint-plugin-storybook/blob/main/docs/rules/context-in-play-function.md
-
npx storybook init does not work properly? It installs react and react-dom, also the components are full of errors?! Am I doing something wrong?
{ "root": true, "ignorePatterns": ["projects/**/*"], "rules": { "prettier/prettier": [ "error", { "endOfLine": "auto" } ] }, "overrides": [ { // TODO: find a way to apply rules on all files ending with .ts except for files ending with .stories.ts "files": ["*.ts"], "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:@angular-eslint/recommended", "plugin:@angular-eslint/template/process-inline-templates", "plugin:prettier/recommended" ], "rules": { // https://github.com/angular-eslint/angular-eslint/tree/main/packages/eslint-plugin/docs/rules "@angular-eslint/directive-selector": [ "error", { "type": "attribute", "prefix": "hv", "style": "camelCase" } ], "@angular-eslint/component-selector": [ "error", { "type": "element", "prefix": "hv", "style": "kebab-case" } ], // https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/eslint-plugin/docs/rules "@typescript-eslint/member-ordering": "error", "@typescript-eslint/naming-convention": "error", // https://eslint.org/docs/latest/rules/ "default-case": "error", "default-case-last": "error" } }, { "files": ["*.html"], "extends": [ "plugin:@angular-eslint/template/recommended", "plugin:prettier/recommended" ], "rules": { // https://github.com/angular-eslint/angular-eslint/tree/main/packages/eslint-plugin-template/docs/rules "@angular-eslint/template/no-duplicate-attributes": ["error"], "@angular-eslint/template/attributes-order": ["error"], "@angular-eslint/template/no-call-expression": [ "error" ], "@angular-eslint/template/accessibility-elements-content": [ "error", { "allowList": [ "ariaLabel" ] } ], "@angular-eslint/template/accessibility-valid-aria": [ "error" ] } }, { "files": ["*.stories.@(ts|mjs|cjs)"], "extends": ["plugin:storybook/recommended"] // https://github.com/storybookjs/eslint-plugin-storybook/tree/main/docs/rules // "rules": {} } ] }
-
ESLint plugin for Storybook
Maintainer here! Thanks for sharing that. I feel the same pain as you, I created a GH issue for it if you ever want to keep track of that: https://github.com/storybookjs/eslint-plugin-storybook/issues/71
What are some alternatives?
pedalboard - A collection of packages to make you software sound better
quick-lint-js - quick-lint-js finds bugs in JavaScript programs
react-hooks-testing-library - 🐏 Simple and complete React hooks testing utilities that encourage good testing practices.
angular-eslint - :sparkles: Monorepo for all the tooling related to using ESLint with Angular
common-testing-library-mistakes - Showcase for common mistakes when using testing-library
eslint-config-canonical - The most comprehensive ES code style guide.
testing-library-recorder-extension - Testing Library Extension for Chrome DevTools Recorder
eslint-plugin-perfectionist - 🦄 ESLint plugin for sorting various data such as objects, imports, types, enums, JSX props, etc.
eslint-config-galex - hopefully the last eslint config you'll ever need - customizable & modern best practices for JS, TS, Node, React, Remix, Next, Jest, testing-library & storybook
kirby-boilerplate - This is an opiniated boilerplate with rocking tools for front-end development
storybook - Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.